/* ==========================================================================
   Camping du Lac de Bujaleuf — stijlen
   Opbouw: 1. basis  2. bouwstenen  3. kop  4. secties homepage  5. voettekst
           6. animaties  7. tablet  8. mobiel
   ========================================================================== */

/* ---------- Lettertypes (lokaal, geen Google-verbinding nodig) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/poppins-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/poppins-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ubuntu-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Ubuntu"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ubuntu-latin-700-normal.woff2") format("woff2"); }

/* ---------- Kleuren en maten ---------- */
:root {
  --blue: #1976d2;
  --sky: #03a9f4;
  --ice: #aadaff;
  --sun: #ffd15c;
  --ink: #292929;
  --green: #a4e276;
  --mint: #e4f7d7;
  --grey: #7a7a7a;
  --text: #747474;
  --white: #fff;
  /* Zelfde kleuren als r,g,b voor transparante varianten: rgba(var(--blue-rgb), .5) */
  --blue-rgb: 25, 118, 210;
  --sky-rgb: 3, 169, 244;
  --ice-rgb: 170, 218, 255;
  --green-rgb: 164, 226, 118;
  --mint-rgb: 228, 247, 215;
  --deep-rgb: 13, 71, 161;      /* donkere schaduwen */
  --glow-rgb: 17, 77, 251;      /* gekleurde gloed onder kaarten */
  --night-rgb: 10, 25, 45;      /* achtergrond vergrote foto */
  --tint-1: #f4f9fe;            /* lichte vlakken (tabelrijen e.d.) */
  --tint-2: #e8eef3;
  --tint-3: #cfe3ef;
  --photo-bg: #7aa7c9;          /* kleur zolang een achtergrondfoto laadt */

  --font: "Poppins", system-ui, sans-serif;
  --font-head: "Ubuntu", "Poppins", system-ui, sans-serif;

  --container: 1600px;
  --gutter: 35px;
  --radius: 15px;
  --shadow-soft: 0 3px 88px rgba(0, 0, 0, .09);
  --ease: cubic-bezier(.165, .84, .44, 1);
}

/* ---------- Kleurthema gîtes (<html data-theme="gites">) ----------
   Zelfde opbouw, andere kleuren: blauw → groen, groene accenten → blauw (water in het logo). */
[data-theme="gites"] {
  --blue: #4c9a2a;  --blue-rgb: 76, 154, 42;
  --sky: #8cd05a;   --sky-rgb: 140, 208, 90;
  --ice: #c8eeaa;   --ice-rgb: 200, 238, 170;
  --green: #3ca6e2; --green-rgb: 60, 166, 226;   /* blauw van het water in het logo */
  --mint: #d4ebf9;  --mint-rgb: 212, 235, 249;
  --deep-rgb: 40, 90, 20;
  --glow-rgb: 70, 150, 30;
  --night-rgb: 18, 38, 12;
  --tint-1: #f5fbef;
  --tint-2: #ecf3e6;
  --tint-3: #d9ebcd;
  --photo-bg: #8fb77a;
}
/* Accentwoord in de grote kop: zonnegeel (zoals de zon in het logo), beter leesbaar op groen dan blauw */
[data-theme="gites"] .heading--xl .hl { color: var(--sun); }
/* Langere naam in het logo: witte vorm linksboven iets breder */
@media (min-width: 1025px) { [data-theme="gites"] .site-header__blob { width: calc(max(0px, (100vw - var(--container)) / 2) + 330px); } }
/* Reserveerknop bovenaan: witte letters op een voller blauw */
[data-theme="gites"] .site-header__cta { color: var(--white); background: linear-gradient(25deg, #2b8fcf 30%, var(--green) 100%); }


/* ==========================================================================
   1. Basis
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  color: #444;
  background: var(--white);
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, h5 { margin: 0; }
address { font-style: normal; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }
main, .site-footer { overflow-x: clip; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--sun); color: var(--ink); border-radius: 8px; text-decoration: none;
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { display: inline-flex; width: 1em; height: 1em; flex: none; }
.icon svg { width: 100%; height: 100%; }

/* ==========================================================================
   2. Bouwstenen
   ========================================================================== */

/* Label boven een kop */
.eyebrow {
  display: block;
  overflow: hidden;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(122, 122, 122, .52);
}
.eyebrow > span { display: inline-flex; align-items: center; gap: 8px; }
.eyebrow .icon { width: 14px; height: 14px; }
.eyebrow--light { color: rgba(255, 255, 255, .52); }

/* Koppen */
.heading {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(30px, 2.1vw + 8px, 40px);
  line-height: 1.25;
  color: var(--ink);
  padding-block: 3px 17px;
}
.heading .hl { color: var(--sun); }
.heading--xl {
  font-size: 75px;
  line-height: 80px;
  color: var(--white);
  padding-bottom: 28px;
}
.heading--xl .hl { color: var(--green); }

.lead { font-size: 16px; line-height: 26px; color: var(--text); max-width: 403px; margin: 0; }

/* Knoppen */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 33px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 23px;
  letter-spacing: .45px;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: var(--sun);
  box-shadow: 0 9px 25px rgba(251, 219, 2, .2);
  isolation: isolate;
  overflow: hidden;
  transition: color .35s var(--ease);
}
.btn::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.btn:hover, .btn:focus-visible { color: var(--white); }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.btn .icon { width: 18px; height: 18px; }
.btn--green { background: linear-gradient(25deg, var(--green) 50%, var(--mint) 100%); }

/* Golfranden */
.wave {
  position: absolute; left: 0; width: 100%;
  overflow: hidden; line-height: 0; z-index: 1;
  pointer-events: none;
}
.wave svg {
  position: relative; left: 50%;
  width: calc(100% + 1.3px); height: 50px;
  transform: translateX(-50%);
  fill: var(--white);
}
.wave--top { top: -1px; }
.wave--bottom { bottom: -1px; transform: rotate(180deg); }

/* Zachte groene gloed achter een sectie */
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%, rgba(var(--green-rgb), .45), rgba(255, 255, 255, 0));
}
.glow--right::before { background: radial-gradient(60% 55% at 100% 50%, rgba(var(--green-rgb), .55) 25%, rgba(255, 255, 255, 0) 100%); }
.glow--center::before { background: radial-gradient(50% 60% at 50% 50%, rgba(var(--green-rgb), .5) 0%, rgba(255, 255, 255, 0) 100%); }

/* ==========================================================================
   3. Kop van de site
   ========================================================================== */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
}
.site-header__blob {
  position: absolute; top: 0; left: 0; z-index: -1;
  width: calc(max(0px, (100vw - var(--container)) / 2) + 300px);
  height: 132px;
  fill: var(--white);
}
.site-header__inner {
  display: flex; align-items: center; gap: 20px;
  padding-top: 25px;
}
.site-logo { flex: 1 0 auto; margin-right: auto; }
.site-logo img { width: auto; height: 76px; }  /* hoogte vast: camping- en gîtes-logo even groot */
.site-header__cta { flex: none; padding-block: 12px; margin-left: -45px; z-index: 1; }
.site-header__cta:hover, .site-header__cta:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35), 0 6px 28px rgba(255, 255, 255, .6);
}

/* Hoofdmenu */
.main-nav__toggle, .main-nav__close { display: none; }
.main-nav__panel {
  padding-right: 55px;
  border-radius: 25px 0 0 25px;
  background: radial-gradient(at top left, rgba(var(--blue-rgb), .52) 25%, rgba(var(--sky-rgb), .52) 75%);
}
.main-nav__list { display: flex; align-items: center; }
.main-nav__item { position: relative; display: flex; align-items: center; }
.main-nav__item > a, .main-nav__label {
  display: block; padding: 3px 15px; line-height: 30px;
  color: var(--white); text-decoration: none; white-space: nowrap;
  transition: color .2s;
}
.main-nav__item.has-sub > a, .main-nav__item.has-sub > .main-nav__label { padding-right: 4px; }
.main-nav__item > a:hover, .main-nav__label:hover { color: rgba(255, 255, 255, .71); }
.main-nav__sub-toggle { display: inline-flex; padding: 0 12px 0 0; color: rgba(255, 255, 255, .75); }
.main-nav__sub-toggle .icon { width: 12px; height: 20px; }
.main-nav__lang .main-nav__label img { width: 24px; height: 16px; object-fit: cover; }
.main-nav__icon { display: grid; place-items: center; padding: 8px 12px; color: var(--white); }
.main-nav__icon .icon { width: 24px; height: 24px; }
.main-nav__icon svg { stroke-width: 1.8; }
.main-nav__icon:hover, .main-nav__icon:focus-visible { color: var(--sun); }
.lang-pick { display: none; }

.main-nav__sub {
  position: absolute; top: 100%; left: 0; width: max-content; min-width: 220px; padding: 5px;
  border-radius: 15px;
  background: radial-gradient(at top left, rgba(var(--blue-rgb), .71) 25%, rgba(var(--sky-rgb), .71) 75%);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .25s, transform .25s, visibility .25s;
}
.main-nav__sub a {
  display: block; white-space: nowrap;
  padding: 12px 15px; color: var(--white); text-decoration: none; line-height: 1.4;
}
.main-nav__lang .main-nav__sub a { display: flex; align-items: center; gap: 10px; }
.main-nav__sub a:hover { color: rgba(255, 255, 255, .71); }
.main-nav__lang .main-nav__sub { left: auto; right: 0; min-width: 170px; }
.main-nav__lang .main-nav__sub img { width: 24px; height: 16px; object-fit: cover; }
.main-nav__item.has-sub:hover > .main-nav__sub,
.main-nav__item.has-sub:focus-within > .main-nav__sub,
.main-nav__item.is-open > .main-nav__sub { opacity: 1; visibility: visible; transform: none; }

/* ==========================================================================
   4. Secties homepage
   ========================================================================== */

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 110px 0 100px;
  background: linear-gradient(237deg, var(--blue) 0%, var(--sky) 100%);
}
.hero__inner { display: grid; grid-template-columns: 51.3% 1fr; align-items: stretch; }
.hero__media { position: relative; padding: 40px 0 0 20px; }
.hero__photo {
  position: relative; z-index: 1;
  width: 100%; aspect-ratio: 1; object-fit: cover;
  border-radius: 50%;
}
.hero__shape { position: absolute; z-index: 0; }
.hero__shape .shape { border-radius: 50%; width: 100%; height: 100%; }
.hero__shape--green { width: 51%; aspect-ratio: 1; left: -5%; top: 64%; }
.hero__shape--green .shape { background: var(--green); }
.hero__shape--ice { width: 27.7%; aspect-ratio: 1; left: 63%; top: -2.6%; }
.hero__shape--ice .shape { background: var(--ice); }

.hero__panel {
  position: relative;
  padding: 80px 30px 60px 145px;
  border-radius: var(--radius);
}
.hero__panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(89deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .12) 100%);
}
.hero__text { position: relative; max-width: 528px; font-size: 19px; line-height: 28.5px; color: rgba(255, 255, 255, .8); }
.hero__text p { margin-bottom: 19px; }

/* ---------- Reviews ---------- */
.reviews { padding: 150px 0 120px; }
.reviews__inner { display: grid; grid-template-columns: 69% minmax(0, 1fr); align-items: start; }
.reviews__carousel { min-width: 0; }
.reviews__intro { padding: 280px 0 0 85px; }
.reviews__intro .lead { margin-bottom: 40px; }

.carousel { overflow: hidden; padding: 0 0 60px; margin-bottom: -60px; }
.carousel__track { display: flex; transition: transform .8s var(--ease); }
.carousel__slide { flex: 0 0 calc(100% / var(--per-view, 3)); padding: 0 35px; }

.review { padding-top: 4px; }
.review__card {
  margin-top: calc(61% - 36px);
  display: flex; flex-direction: column; align-items: center;
  padding: 0 30px 25px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 8px 48px rgba(0, 0, 0, .09);
  text-align: center;
}
.review__img {
  width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  margin-top: -61%;
  background: var(--tint-2);
}
.review__icon { display: block; width: 52px; margin: 36px 0 0; }
.review__icon--sun { color: var(--sun); }
.review__icon--blue { color: var(--blue); }
.review__quote { margin: 20px 0 30px; font-size: 18px; font-style: italic; line-height: 35px; color: #141414; }
.review__source { margin: 0; font-size: 19px; font-weight: 500; line-height: 34px; text-transform: uppercase; color: var(--blue); }
.review__score { margin: 0; color: rgba(65, 65, 65, .7); }

.carousel-nav { display: flex; gap: 25px; }
.carousel-nav__btn {
  position: relative; display: grid; place-items: center;
  width: 50px; height: 50px; border-radius: 50%;
  color: var(--white); font-size: 26px;
  background: linear-gradient(180deg, var(--blue), var(--sky));
  box-shadow: 0 8px 55px rgba(var(--glow-rgb), .4);
  transition: transform .25s var(--ease);
}
.carousel-nav__btn::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--sun); opacity: 0; transition: opacity .25s ease-in;
}
.carousel-nav__btn .icon { position: relative; z-index: 1; }
.carousel-nav__btn:hover::after { opacity: 1; }
.carousel-nav__btn:hover { color: var(--ink); transform: scale(1.06); }

/* ---------- Kenmerken (terrassen) ---------- */
.features { padding: 60px 0 180px; }
.features__inner { display: grid; grid-template-columns: 1fr minmax(0, 663px); max-width: calc(1470px + 2 * var(--gutter)); padding-right: calc(var(--gutter) + 100px); }
.features__text { padding-right: 60px; }
.features__body { max-width: 475px; font-size: 16px; line-height: 26px; color: var(--text); }
.features__body p { margin-bottom: 16px; }
.features__body strong { color: #555; font-weight: 600; }
/* vier logo's op één regel, samen even breed als de tekst eronder */
.logos { display: flex; align-items: center; gap: 18px; max-width: 470px; padding: 10px 0 25px; }
.logos li { flex: 1 1 0; min-width: 0; }
.logos img { width: 100%; height: auto; max-height: 70px; object-fit: contain; }

.features__photo {
  position: relative;
  min-height: 722px;
  border-radius: var(--radius);
  background: var(--photo) center / cover no-repeat, var(--tint-3);
  box-shadow: var(--shadow-soft);
}
.features__review { position: absolute; right: -100px; top: 150px; width: 300px; z-index: 2; }
.quote-card {
  position: relative;
  padding: 40px 25px 20px;
  border-radius: 10px;
  background: var(--white);
  box-shadow: 0 3px 88px rgba(0, 0, 0, .12);
  text-align: center;
}
.quote-card__icon {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 82px; height: 82px; border-radius: 50%;
  background: var(--sun); color: var(--blue);
}
.quote-card__icon svg { width: 33px; }
.quote-card__text { margin: 10px 0; font-size: 17px; font-style: italic; line-height: 31px; color: var(--ink); }
.quote-card__meta { margin: 0; font-size: 12px; line-height: 18px; color: var(--blue); }
.quote-card .stars { letter-spacing: 2px; }

.features__badge { position: absolute; left: -175px; bottom: -76px; z-index: 2; }
.badge-card {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 45px 20px 25px;
  border-radius: 10px;
  background: linear-gradient(294deg, var(--blue) 0%, var(--sky) 100%);
  box-shadow: 0 13px 70px rgba(var(--glow-rgb), .5);
  color: var(--white);
}
.badge-card img { width: 125px; height: 125px; border-radius: 50%; background: var(--white); }
.badge-card__title { margin: 0; font-size: 25px; font-weight: 500; line-height: 45px; text-transform: uppercase; }
.badge-card__lines { margin: 0; font-size: 17px; font-weight: 300; line-height: 25.5px; color: rgba(255, 255, 255, .6); }

/* ---------- Kies jouw maand ---------- */
.months {
  position: relative;
  padding: 75px 0 100px;
  background: linear-gradient(140deg, var(--sky) 50%, var(--blue) 75%);
}
.section-head--center { text-align: center; max-width: 750px; margin: 0 auto 110px; }
.section-head--center .lead { max-width: none; color: rgba(255, 255, 255, .8); }
.months .lead strong { font-weight: 600; color: var(--white); }
.months__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 79px; padding: 10px 45px; }
.month-card a {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding-bottom: 15px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
  text-decoration: none;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.month-card a:hover { transform: translateY(-6px); box-shadow: 0 20px 70px rgba(0, 0, 0, .18); }
.month-card__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.month-card__icon {
  align-self: flex-end;
  display: grid; place-items: center;
  width: 110px; height: 110px; margin: -55px 30px 0 0;
  border-radius: 10px;
  background: var(--sun);
  position: relative; z-index: 1;
}
.month-card__icon img { width: 72px; height: 72px; object-fit: contain; }
.month-card__body { display: block; padding: 0 30px; }
.month-card__season { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.month-card__title { display: block; font-size: 28px; font-weight: 500; line-height: 50px; color: var(--ink); }
.month-card__text { display: block; font-size: 16px; line-height: 26px; color: var(--text); }

/* ---------- Pluspunten ---------- */
.highlights {
  position: relative;
  padding: 75px 0 110px;
  background: radial-gradient(60% 60% at 50% 50%, var(--mint) 0%, var(--white) 75%);
}
.highlights__inner { display: grid; grid-template-columns: 44% 1fr; max-width: calc(1434px + 2 * var(--gutter)); }
.highlights__collage { position: relative; min-height: 640px; margin-left: 20px; }
.collage__lake { position: absolute; left: 0; top: 0; width: 62%; }
.collage__chef { position: absolute; left: 46%; top: 274px; width: 53.6%; }
.collage__lake img, .collage__chef img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; box-shadow: var(--shadow-soft); }
.collage__logo { position: absolute; left: 58%; top: 189px; width: 100px; z-index: 2; }
.collage__logo img { width: 100px; height: 100px; border-radius: 50%; background: var(--white); border: 4px solid var(--white); box-shadow: 0 5px 25px rgba(0, 0, 0, .12); }
.collage__note {
  position: absolute; left: 20%; top: 346px; width: 190px; z-index: 2;
  padding: 25px 15px 15px;
  border-radius: 15px;
  background: var(--sun);
  box-shadow: 0 3px 88px rgba(0, 0, 0, .14);
  font-size: 17px; line-height: 25.5px; color: var(--ink); text-align: center;
}
.highlights__text { padding: 65px 0 0 184px; }
.highlights__text .lead { margin-bottom: 50px; }
.usp-list { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 0; max-width: 605px; }
.usp-list li { display: flex; align-items: center; gap: 20px; font-size: 20px; line-height: 28px; color: var(--ink); }
.usp-list__icon {
  display: grid; place-items: center; flex: none;
  width: 76px; height: 76px; border-radius: 12px;
  background: var(--blue); color: var(--white);
  box-shadow: 0 10px 30px rgba(var(--blue-rgb), .3);
}
.usp-list__icon svg { width: 36px; height: 36px; }
.highlights__cta { margin: 50px 0 0; text-align: center; max-width: 605px; }

/* ---------- Nieuwsbrief ---------- */
.newsletter { padding: 90px 0 60px; }
.newsletter__box {
  position: relative;
  display: flow-root;
  padding: 70px 135px 0;
  border-radius: var(--radius);
  background: linear-gradient(150deg, var(--blue) 25%, var(--ice) 100%);
}
/* Tekst links; de knop valt voor de helft onder het blok uit */
.newsletter__text { max-width: 60%; }
.newsletter .lead { max-width: 600px; color: var(--white); font-size: 16px; }
.newsletter .newsletter__cta { position: relative; z-index: 2; margin: 40px 0 -23px; }
/* Foto rechts: onderkant gelijk met het blok, bovenkant steekt erboven uit */
.newsletter__photo { position: absolute; right: 80px; bottom: 0; width: 350px; }

/* ---------- Openingstijden ---------- */
.opening {
  position: relative;
  padding: 85px 15px 190px;
  background: linear-gradient(125deg, var(--ice) 0%, var(--blue) 75%);
  text-align: center;
}
.opening__inner { max-width: 640px; }
.opening__icon { width: 100px; margin: 0 auto; }
.opening .heading { padding-top: 0; }
.opening__text { max-width: 410px; margin: 0 auto; color: var(--white); line-height: 26px; }
.opening__text p { margin-bottom: 16px; }
.countdown { margin-top: 34px; }
.countdown__done { font-size: 27px; font-weight: 600; line-height: 1.8; color: #444; }
.countdown__units { display: flex; justify-content: center; gap: 18px; }
.countdown__units li {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 118px; height: 118px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 12px 40px rgba(var(--deep-rgb), .25);
  backdrop-filter: blur(4px);
  color: rgba(255, 255, 255, .85); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}
.countdown__units span { font-family: var(--font-head); font-size: 46px; font-weight: 700; line-height: 1.05; color: var(--sun); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Binnenpagina's
   ========================================================================== */
.btn--blue { background: linear-gradient(135deg, var(--blue), var(--sky)); color: var(--white); box-shadow: 0 9px 25px rgba(var(--blue-rgb), .25); }
.btn--blue::after { background: var(--sun); }
.btn--blue:hover, .btn--blue:focus-visible { color: var(--ink); }

.page-hero {
  position: relative;
  padding: 210px 0 130px;
  background: linear-gradient(237deg, var(--blue) 0%, var(--sky) 100%);
  text-align: center;
}
.page-hero .heading { color: var(--white); }
.heading--page { font-size: clamp(42px, 3vw + 14px, 64px); line-height: 1.12; }
.section-head--dark .lead { color: var(--text); }

/* Kopblok met foto (tarieven e.d.): foto + blauwe waas van links, titel links */
.page-hero--photo {
  padding: 270px 0 75px;
  text-align: left;
  background:
    linear-gradient(90deg, rgba(var(--hero-rgb, var(--blue-rgb)), var(--hero-shade, .52)) 0%, rgba(255, 255, 255, 0) 75%),
    var(--bg-d) var(--bg-pos, bottom center) / cover no-repeat,
    var(--blue);
}
.page-hero--photo .heading { text-shadow: 0 0 10px rgba(0, 0, 0, .5); font-size: 75px; line-height: 80px; padding-bottom: 40px; }
.page-hero--photo .eyebrow { font-size: 20px; color: rgba(255, 255, 255, .52); }
.page-hero--photo .eyebrow .icon { width: 15px; height: 15px; color: rgba(var(--ice-rgb), .52); }

/* Zachte groene achtergrond */
.green-glow {
  position: relative;
  background: radial-gradient(closest-side, rgba(var(--green-rgb), .55), rgba(255, 255, 255, 0) 100%) center / 100% 100% no-repeat;
}
.heading--hl-blue .hl { color: var(--blue); }

/* ---------- Tarieven: intro ---------- */
.price-intro { padding: 150px 0 150px; }
.price-intro__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.price-intro__media { display: flex; flex-direction: column; }
.price-intro__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.price-intro__note { align-self: flex-end; width: 50%; margin: -25px 25px 0 0; position: relative; z-index: 2; }
.note-card {
  padding: 20px; border-radius: 15px; text-align: center;
  background: linear-gradient(175deg, var(--sky), var(--blue));
  box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
}
.note-card img { width: 150px; margin: -45px auto 10px; transform: rotate(-20deg); filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .25)); }
.note-card p { margin: 0; font-style: italic; color: rgba(255, 255, 255, .71); line-height: 24px; }
.price-intro__text { padding: 0 50px; }
.price-intro__body { max-width: 403px; font-size: 16px; line-height: 26px; color: var(--text); }
.price-intro__body p { margin-bottom: 16px; }
.price-intro__body strong { color: #555; font-weight: 600; }

/* ---------- Tarieven: prijskaart op grote foto ---------- */
.price-photo {
  position: relative;
  margin: 50px 0;
  padding: 100px 0 125px;
  background: var(--bg-d) bottom left / cover no-repeat, var(--photo-bg);
}
.price-photo__inner { display: flex; justify-content: flex-end; padding: 0 var(--gutter); }
/* foto bovenaan uitgelijnd (gezicht in beeld) en kaartje links, alleen op groot scherm (beperking: vissteiger) */
@media (min-width: 1025px) {
  .price-photo--top-left { background-position: center 28%, 0 0; }
  .price-photo--top-left .price-photo__inner { justify-content: flex-start; }
}
/* brede foto (1920x847) helemaal in beeld, ook de lucht bovenin */
.price-photo--wide { min-height: min(44.1vw, 847px); display: flex; align-items: center; background-position: center top; }
.price-photo--wide > .price-photo__inner { width: 100%; }
.price-card {
  position: relative;
  width: clamp(360px, 27%, 470px);
  margin-right: 100px;
  padding: 28px 30px;
  border-radius: 15px;
  background: linear-gradient(150deg, rgba(41, 41, 41, .6) 25%, rgba(var(--blue-rgb), .6) 75%);
  backdrop-filter: blur(3px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .3);
  color: var(--white);
  text-align: center;
}
.price-card__title { margin: 0 0 12px; font-size: 20px; font-weight: 500; }
.price-card__divider { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; color: var(--sun); }
.price-card__title + .price-card__divider { margin-bottom: 36px; }
.price-card__divider::before, .price-card__divider::after { content: ""; flex: 1; border-top: 1px solid rgba(255, 255, 255, .8); }
.price-card__divider span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--sun); font-size: 14px; font-weight: 600; }
.price-card__featured {
  position: relative;
  margin: 0 -8px 16px; padding: 26px 16px 18px;
  border: 2px solid var(--sun); border-radius: 12px;
  background: rgba(255, 209, 92, .12);
}
.price-card__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  margin: 0; padding: 5px 16px; border-radius: 50px; white-space: nowrap;
  background: var(--sun); color: var(--ink); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.price-card__season { margin: 0; font-weight: 500; }
.price-card__season span { display: block; font-size: 13px; font-weight: 400; color: rgba(255, 255, 255, .75); text-transform: uppercase; letter-spacing: .06em; }
.price-card__price { margin: 6px 0 8px; font-size: 50px; font-weight: 500; line-height: 1.1; color: var(--sun); }
.price-card__price small { display: block; font-size: 16px; font-weight: 400; }
.price-card__note { margin: 0; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .92); }
.price-card__others { display: grid; gap: 10px; margin: 0 0 20px; }
.price-card__others li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .08); text-align: left;
}
.price-card__small-price { font-size: 28px; font-weight: 500; color: var(--sun); white-space: nowrap; }
.price-card__list { display: grid; gap: 12px; margin: 0 0 12px; text-align: left; }
.price-card__list li { display: flex; align-items: center; gap: 12px; }
.price-card__list .icon { width: 22px; height: 22px; color: var(--white); }
.price-card__cta { margin: 15px 0 0; }

/* ---------- Tarieven: tabel ---------- */
.price-table-section { padding: 90px 0 110px; scroll-margin-top: 20px; }
.price-table-section--next { padding-top: 20px; }
.center-cta { margin: 0; padding: 10px 0 90px; text-align: center; }
.price-intro + .center-cta { margin-top: -90px; }
.price-table-wrap { max-width: 1000px; margin: 0 auto; overflow-x: auto; border-radius: 20px; box-shadow: var(--shadow-soft); background: var(--white); }
.price-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 16px; color: #444; }
.price-table thead td { width: 29%; }
.price-table caption { padding: 26px 20px 10px; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--ink); text-align: center; }
.price-table th, .price-table td { padding: 16px 20px; text-align: center; }
.price-table thead th { vertical-align: bottom; font-weight: 600; color: var(--ink); }
.price-table thead th span { display: block; margin-top: 4px; font-size: 13px; font-weight: 400; color: var(--text); }
.price-table tbody th { text-align: left; font-weight: 400; }
.price-table tbody tr:nth-child(odd) { background: var(--tint-1); }
.price-table tbody tr:first-child td { font-weight: 600; color: var(--ink); }
.price-table .is-featured { background: rgba(255, 209, 92, .16); }
.price-table thead .is-featured { background: var(--sun); border-radius: 12px 12px 0 0; }
.price-table thead .is-featured span { color: var(--ink); }
.price-table-section .price-table tbody tr:first-child td.is-featured { color: var(--blue); font-size: 19px; }
.price-table__footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; max-width: 1000px; margin: 40px auto 0; }
.price-included { display: grid; grid-template-columns: repeat(2, auto); gap: 8px 36px; color: var(--text); }
.price-included li { display: flex; align-items: center; gap: 10px; }
.price-included .icon { width: 18px; height: 18px; color: var(--green); }

/* ---------- Tarieven: stappen ---------- */
.steps {
  position: relative;
  padding: 110px 0 150px;
  background: linear-gradient(125deg, var(--ice) 0%, var(--blue) 75%);
}
.steps .section-head--center { margin-bottom: 60px; }
.steps__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 70px; max-width: 1150px; margin: 0 auto; counter-reset: none; }
.step { position: relative; text-align: center; color: var(--white); }
.step__num {
  display: grid; place-items: center; width: 110px; height: 110px; margin: 0 auto 22px;
  border-radius: 50%; background: rgba(255, 255, 255, .16); border: 2px solid rgba(255, 255, 255, .5);
  font-family: var(--font-head); font-size: 56px; font-weight: 700; color: var(--sun);
  box-shadow: 0 12px 40px rgba(var(--deep-rgb), .25);
}
.step__num--icon svg { width: 54px; height: 54px; }
.step p { max-width: 280px; margin: 0 auto; font-size: 19px; line-height: 28px; font-weight: 500; }
.step__arrow { position: absolute; top: 10px; right: -95px; width: 120px; opacity: .8; }

/* ---------- Tarieven: zekerheden ---------- */
.promises { padding: 90px 0 120px; }
.promises .section-head--center { margin-bottom: 60px; }
.promises__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.promise {
  display: flex; flex-direction: column; align-items: center;
  padding: 34px 22px 26px; border-radius: var(--radius);
  background: var(--white); box-shadow: var(--shadow-soft); text-align: center;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.promise:hover { transform: translateY(-6px); box-shadow: 0 20px 70px rgba(0, 0, 0, .14); }
.promise__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 14px; color: var(--blue); }
.promise__icon svg { width: 60px; height: 60px; stroke-width: 1.3; }
.promise__title { font-size: 21px; font-weight: 500; color: var(--ink); }
.promise__text { flex: 1; margin: 10px 0 18px; font-size: 15px; line-height: 23px; color: var(--text); }
.promise__tag { margin: 0; padding: 6px 16px; border-radius: 50px; background: var(--sun); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); }

@media (max-width: 1024px) {
  .page-hero { padding: 170px 0 110px; }
  .page-hero--photo { padding: 200px 0 50px; background-image: linear-gradient(90deg, rgba(var(--hero-rgb, var(--blue-rgb)), var(--hero-shade, .52)) 0%, rgba(255, 255, 255, 0) 75%), var(--bg-t); background-position: var(--bg-pos-t, center); }
  .page-hero--photo .heading { font-size: 40px; line-height: 50px; padding-bottom: 20px; }
  .page-hero--photo .eyebrow { font-size: 16px; }
  .page-hero--photo .wave svg, .price-photo .wave svg { height: 20px; }
  .price-intro { padding: 100px 0 130px; }
  .price-intro__inner { grid-template-columns: 1fr; gap: 60px; }
  .price-intro__text { order: -1; padding: 0; }
  .price-intro__body { max-width: 700px; }
  .price-photo { background-image: var(--bg-t); background-position: center; }
  .price-photo__inner { justify-content: center; }
  .price-card { width: min(470px, 100%); margin-right: 0; }
  .steps__list { grid-template-columns: 1fr; gap: 50px; }
  /* stappen onder elkaar: krulpijl verticaal en kleiner tussen de stappen */
  .step__arrow { position: static; display: block; width: 80px; margin: 40px auto 10px; transform: rotate(90deg); }
  .steps__list { gap: 20px; }
  .promises__list { grid-template-columns: repeat(2, 1fr); }
  .promise:last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; }
}
@media (max-width: 767px) {
  .page-hero { padding: 140px 0 90px; }
  .heading--page { font-size: 40px; }
  .page-hero--photo { text-align: center; background-image: linear-gradient(0deg, rgba(var(--hero-rgb, var(--blue-rgb)), var(--hero-shade-m, .26)) 0%, rgba(255, 255, 255, 0) 75%), var(--bg-m); background-position: var(--bg-pos-m, bottom right); }
  .page-hero--photo .heading { font-size: 36px; line-height: 48px; }
  .page-hero--photo .wave svg, .price-photo .wave svg { height: 15px; }
  .price-intro { padding: 60px 0 100px; }
  .price-intro__note { width: 90%; margin: -25px -8px 0 0; }
  .note-card { padding: 14px 12px; }
  .note-card img { width: 120px; margin-top: -35px; }
  .price-photo { background-image: var(--bg-m); }
  .price-card { padding: 24px 18px; }
  .price-card__price { font-size: 42px; }
  .price-card__small-price { font-size: 24px; }
  .price-table { table-layout: fixed; font-size: 13px; }
  .price-table thead td { width: 31%; }
  .price-table th, .price-table td { padding: 10px 4px; }
  .price-table tbody th { padding-left: 12px; }
  .price-table thead th { font-size: 12px; line-height: 1.3; }
  .price-table thead th span { font-size: 10px; }
  .price-table-section .price-table tbody tr:first-child td.is-featured { font-size: 15px; }
  .price-table caption { font-size: 19px; }
  .price-included { grid-template-columns: 1fr; }
  .price-table__footer { justify-content: center; }
  .promises__list { grid-template-columns: 1fr; gap: 14px; }
  .promise:last-child { max-width: none; }
  .promise { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: start; padding: 20px; text-align: left; }
  .promise__icon { grid-row: 1 / 4; width: 56px; height: 56px; margin: 0; }
  .promise__icon svg { width: 50px; height: 50px; }
  .promise__title { font-size: 19px; }
  .promise__text { margin: 4px 0 10px; }
  .promise__tag { justify-self: start; font-size: 11px; padding: 4px 12px; }
}

/* ---------- Gedeelde onderdelen binnenpagina's ---------- */
.page-hero--strong { --hero-shade: .71; }
.page-hero--sun { --hero-rgb: 255, 209, 92; }   /* gele waas (retro caravan) */
.page-hero--dark { --hero-rgb: 41, 41, 41; }     /* grijze waas (gastenboek) */
.page-hero--full { --hero-shade: 1; }
.page-hero--neutral { --hero-rgb: 0, 0, 0; --hero-shade: .1; --hero-shade-m: .1; }  /* lichte zwarte waas: foto in eigen kleuren (image.overlay: "neutral") */             /* volle kleur links (FAQ) */

/* Blauw infokaartje */
.info-card {
  padding: 22px 24px; border-radius: 15px; text-align: center;
  background: linear-gradient(175deg, var(--sky), var(--blue));
  box-shadow: 3px 3px 10px rgba(0, 0, 0, .5);
  color: rgba(255, 255, 255, .71);
}
.info-card__icon { display: inline-flex; width: 46px; height: 46px; margin-bottom: 8px; color: var(--white); }
.info-card__icon svg { width: 100%; height: 100%; }
.info-card__icon--bulb svg { transform: rotate(15deg); }
.info-card__title { margin: 0 0 6px; font-size: 20px; font-style: italic; font-weight: 500; color: rgba(255, 255, 255, .85); }
.info-card__text { margin: 0; font-style: italic; line-height: 25px; }
.info-card--row { display: flex; align-items: center; gap: 18px; text-align: left; }
.info-card--row .info-card__icon { flex: none; margin: 0; width: 50px; height: 50px; }

/* Tekst gecentreerd in de rechterkolom */
.price-intro__text--center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.price-intro__text--center .price-intro__body { max-width: 440px; }

/* Klantreview als tekstballon */
.bubble { margin: 30px 0 0; width: min(90%, 480px); text-align: left; }
.bubble__text {
  position: relative; margin: 0 0 22px; padding: 22px 26px;
  border: 3px solid rgba(122, 122, 122, .19); border-radius: 25px; background: var(--white);
  font-size: 15px; line-height: 25px; color: var(--grey);
}
.bubble__text::after {
  content: ""; position: absolute; left: 34px; bottom: -13px; width: 22px; height: 22px;
  background: var(--white); border-right: 3px solid rgba(122, 122, 122, .19); border-bottom: 3px solid rgba(122, 122, 122, .19);
  transform: rotate(45deg);
}
.bubble__author { display: flex; align-items: center; gap: 12px; padding-left: 20px; color: var(--grey); font-size: 14px; }
.bubble__author img { width: 48px; height: 48px; border-radius: 50%; border: 3px solid rgba(122, 122, 122, .19); object-fit: contain; background: var(--white); padding: 4px; }
.bubble__author strong { display: block; font-weight: 600; font-size: 15px; }

/* Foto-strook: kaartje met kenmerken */
.list-card {
  width: clamp(320px, 30%, 470px); margin: 0 25px 0 50px; padding: 30px 28px 18px;
  border-radius: 15px; background: rgba(41, 41, 41, .5); backdrop-filter: blur(3px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.list-card li { display: flex; align-items: center; gap: 14px; margin-bottom: 15px; font-size: 18px; color: var(--white); }
.list-card .icon { width: 25px; height: 25px; color: var(--green); }
.price-photo--tall { min-height: 700px; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 175px; background-position: bottom right; }
.price-photo__note { width: clamp(320px, 33%, 520px); margin-right: 60px; }
.price-photo--tall.price-photo--note-top { justify-content: flex-start; padding-top: 130px; padding-bottom: 60px; }  /* tip bovenin, zodat de foto eronder vrij blijft */
.price-photo__notes { display: grid; gap: 20px; }
/* Hele foto in beeld op laptop/desktop (bv. camper met aanhanger in september) */
.price-photo--full { min-height: min(56.25vw, 900px); display: flex; flex-direction: column; justify-content: center; }
.text-block__facts { margin: 0; }
.text-block__facts > div { margin-bottom: 18px; }
.text-block__facts dt { font-weight: 600; color: #555; }
.text-block__facts dd { margin: 0; }

/* Gecentreerd tekstblok */
.text-block { padding: 100px 0 110px; }
.text-block__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.text-block__body { max-width: 700px; font-size: 16px; line-height: 26px; color: var(--text); }
.text-block__body p { margin-bottom: 16px; }
.text-block__body a { color: var(--blue); font-weight: 500; }
.text-block__note { width: min(60%, 760px); margin-top: 30px; }
.text-block__circle { width: 260px; height: 260px; margin-top: 36px; border-radius: 50%; object-fit: cover; border: 8px solid var(--white); box-shadow: var(--shadow-soft); }

/* Doorklik-kaarten (twee, gecentreerd) */
.link-cards { padding: 60px 0 40px; }
.link-cards .months__grid--two:has(> li:only-child) { grid-template-columns: minmax(0, 460px); justify-content: center; }
.tag-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 6px 0 22px; padding: 0; }
.tag-list li { padding: 6px 16px; border-radius: 50px; background: var(--sun); color: var(--ink); font-size: 14px; font-weight: 500; }
/* Speelse variant als ouderwetse zoekwolk: wisselende maten, recht, verspringend in hoogte */
.tag-list--playful { gap: 24px 12px; align-items: center; max-width: 540px; margin: 30px auto 40px; }
.tag-list--playful li { position: relative; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); top: var(--dy, 0); }
.tag-list--playful .tag--s { font-size: 13px; padding: 5px 13px; }
.tag-list--playful .tag--m { font-size: 15px; padding: 7px 17px; }
.tag-list--playful .tag--l { font-size: 21px; padding: 9px 22px; font-weight: 600; }
.tag-list--playful li:nth-child(5n+1) { --dy: -8px; }
.tag-list--playful li:nth-child(5n+2) { --dy: 10px; }
.tag-list--playful li:nth-child(5n+3) { --dy: -3px; }
.tag-list--playful li:nth-child(5n+4) { --dy: 12px; }
.tag-list--playful li:nth-child(5n) { --dy: -10px; }
.months__grid--two { grid-template-columns: repeat(2, minmax(0, 448px)); justify-content: center; }
.month-card__icon--svg { color: var(--ink); }
.month-card__icon--svg svg { width: 56px; height: 56px; }
.month-card__icon--svg ~ .month-card__body { padding-bottom: 10px; }

@media (max-width: 1024px) {
  .price-photo__note { width: min(520px, 100%); margin-right: 0; }
  .price-photo__inner--end { justify-content: center; }
  .list-card { width: min(470px, 100%); margin: 0; }
  .text-block__note { width: min(100%, 640px); }
  .months__grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .price-photo--tall { min-height: 560px; padding-bottom: 110px; }
  .price-photo--tall.price-photo--note-top { padding-top: 90px; padding-bottom: 40px; }
  .list-card li { font-size: 16px; }
  .text-block { padding: 70px 0 80px; }
  .text-block__circle { width: 200px; height: 200px; }
  .months__grid--two { grid-template-columns: 1fr; }
  .bubble { width: 100%; }
  .price-intro__photo--portrait-m { aspect-ratio: 3 / 4; }
}

/* ---------- Honden: teller, getinte fotostrook, pootje ---------- */
.price-intro__note--counter { width: min(425px, 92%); margin: -50px 25px 0 0; }
.price-intro__note--left { align-self: flex-start; margin-left: 25px; margin-right: 0; }
.counter-card {
  display: flex; align-items: center; gap: 30px;
  padding: 25px 25px 25px 45px; border-radius: 15px;
  background: linear-gradient(272deg, var(--sky), var(--blue));
  box-shadow: 0 3px 88px rgba(0, 0, 0, .09); color: var(--white);
}
.counter-card__number { font-family: var(--font-head); font-size: 66px; font-weight: 400; line-height: 1; letter-spacing: -5px; font-variant-numeric: tabular-nums; min-width: 2ch; }
.counter-card__text { font-family: var(--font-head); font-size: 22px; line-height: 1.2; }
.price-photo--tint { background: linear-gradient(rgba(var(--blue-rgb), .25), rgba(var(--blue-rgb), .25)), var(--bg-d) bottom right / cover no-repeat, var(--photo-bg); }
.price-photo__inner--start { justify-content: flex-start; }
.list-card--wide { width: clamp(320px, 40%, 600px); }
.list-card b { font-weight: 600; }
.text-block__paw { display: block; margin-top: 10px; color: rgba(41, 41, 41, .52); transform: rotate(15deg); }
.text-block__paw svg { width: 50px; height: 50px; }
@media (max-width: 1024px) {
  .price-photo--tint { background-image: linear-gradient(rgba(var(--blue-rgb), .25), rgba(var(--blue-rgb), .25)), var(--bg-t); background-position: center; }
  .list-card--wide { width: min(60%, 520px); }
  .counter-card { padding: 20px 20px 20px 30px; }
  .counter-card__number { font-size: 60px; }
}
@media (max-width: 767px) {
  .price-photo--tint { background-image: linear-gradient(rgba(var(--blue-rgb), .25), rgba(var(--blue-rgb), .25)), var(--bg-m); background-position: center right; }
  .list-card--wide { width: 85%; margin-left: 0; }
  .price-intro__note--counter { margin: -35px -8px 0 0; }
  .counter-card { gap: 15px; padding: 15px; }
  .counter-card__number { font-size: 40px; letter-spacing: -3px; }
  .counter-card__text { font-size: 16px; }
}

/* ---------- Contact ---------- */
.contact-card { list-style: none; margin: 10px 0 0; padding: 0; }
.contact-card li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 18px; color: var(--grey); font-size: 16px; line-height: 30px; }
.contact-card .icon { flex: none; width: 30px; height: 30px; color: var(--grey); }
.contact-card a { color: inherit; text-decoration: none; transition: color .25s ease, transform .25s ease; display: inline-flex; align-items: center; gap: 10px; }
.contact-card a:hover, .contact-card a:focus-visible { color: var(--ink); transform: translateX(10px); }
.contact-card address { font-style: normal; }
.contact-card__badge { padding: 2px 10px; border-radius: 5px; background: var(--sun); color: var(--ink); font-size: 14px; font-style: italic; line-height: 22px; }
.contact-social { list-style: none; display: flex; gap: 25px; margin: 25px 0 0 45px; padding: 0; }
.contact-social a { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 50%; color: var(--white); transition: transform .25s ease; }
.contact-social .icon { width: 22px; height: 22px; }
.contact-social__ig { background: #c13584; }
.contact-social__fb { background: #3b5998; }
.contact-social a:hover, .contact-social a:focus-visible { transform: scale(1.1); }
@media (max-width: 1024px) {
  .contact__media { display: none; }   /* zoals het origineel: foto alleen op desktop */
  .contact__text { text-align: center; }
  .contact-card { display: inline-block; text-align: left; }
  .contact-social { justify-content: center; margin-left: 0; }
}

/* ---------- Gastenboek: reviews + zelf schrijven ---------- */
.guestbook { padding: 50px 0 60px; }
.guestbook .carousel__slide { padding: 0 12px; }
.carousel[data-auto-height] .carousel__track { align-items: flex-start; transition: transform .8s var(--ease), height .5s var(--ease); }
.bubble--card { margin: 0; width: auto; }
.bubble--card .bubble__text { font-size: 15px; line-height: 25px; }
.guestbook__nav { justify-content: center; margin-top: 40px; }
.share { padding: 60px 0 150px; }
.share__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.share__text { max-width: 480px; color: var(--text); line-height: 26px; }
.share__buttons { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 25px; }
.share__buttons .btn .icon { margin: 0 2px 0 0; }
.share__form { padding: 35px 40px; border-radius: 20px; background: var(--white); box-shadow: 0 24px 60px rgba(0, 0, 0, .08); scroll-margin-top: 120px; }
.share__hp { position: absolute; left: -9999px; }
.share__form-title { margin: 0 0 6px; font-family: var(--font-head); font-size: 26px; color: var(--ink); }
.share__form-intro { margin: 0 0 22px; color: var(--text); font-size: 14px; line-height: 22px; }
.field { display: block; margin-bottom: 16px; }
.field > span { display: block; margin-bottom: 6px; font-weight: 500; color: var(--ink); font-size: 15px; }
.field input, .field textarea {
  width: 100%; padding: 12px 15px; border: 1px solid rgba(122, 122, 122, .35); border-radius: 10px;
  font: inherit; font-size: 15px; color: var(--ink); background: var(--tint-1);
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--blue); outline-offset: 1px; background: var(--white); }
.field small { display: block; margin-top: 5px; color: var(--grey); font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0 22px; font-size: 14px; line-height: 21px; color: var(--text); }
.check input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--blue); flex: none; }
@media (max-width: 1024px) {
  .share__inner { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .guestbook .carousel__slide { padding: 0 4px; }
  .share { padding: 40px 0 90px; }
  .share__intro { text-align: center; }
  .share__buttons { justify-content: center; }
  .share__form { padding: 25px 20px; }
}

/* ---------- Retro caravan: fotostrook in kader, veelgestelde vragen ---------- */
.photo-band { position: relative; margin: 50px 0; padding: 125px 0; background: linear-gradient(160deg, var(--sky) 0%, var(--blue) 100%); }
.photo-strip.photo-strip--plain { margin: 0 25px; padding: 0; background: none; backdrop-filter: none; box-shadow: none; }
@media (max-width: 767px) { .photo-band { padding: 70px 0; } .photo-strip.photo-strip--plain { margin: 0; } }
.photo-strip {
  list-style: none; margin: 0 25px 0 50px; padding: 25px;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  border-radius: 15px; background: rgba(41, 41, 41, .5); backdrop-filter: blur(3px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25);
}
.photo-strip__link { position: relative; display: block; overflow: hidden; border-radius: 15px; box-shadow: 2px 2px 10px rgba(0, 0, 0, .4); transform: translateZ(0); }
.photo-strip__link img { display: block; width: 100%; aspect-ratio: 5 / 3; object-fit: cover; transition: transform .6s ease; }
.photo-strip__zoom { position: absolute; inset: 0; display: grid; place-items: center; color: var(--white); background: rgba(var(--blue-rgb), .35); opacity: 0; transition: opacity .35s ease; }
.photo-strip__zoom svg { width: 40px; height: 40px; }
.photo-strip__link:hover img, .photo-strip__link:focus-visible img { transform: scale(1.2); }
.photo-strip__link:hover .photo-strip__zoom, .photo-strip__link:focus-visible .photo-strip__zoom { opacity: 1; }
.photo-strip__link:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }

.price-intro__inner--top { align-items: start; }
.price-intro__photo--portrait { aspect-ratio: 3 / 4; max-width: 460px; }
.faq { padding: 0 50px; }
.faq__item { margin-bottom: 20px; border-radius: 20px; background: var(--white); box-shadow: 0 24px 35px rgba(0, 0, 0, .05); transition: background .3s ease; }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 30px 40px 35px; cursor: pointer; list-style: none;
  font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1.3; color: #243b64;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon { flex: none; width: 20px; height: 20px; transition: transform .3s ease; }
.faq__icon svg { width: 100%; height: 100%; }
.faq__a { padding: 0 40px 25px; margin-top: -15px; color: rgba(255, 255, 255, .8); line-height: 26px; }
.faq__a p { margin: 0; }
.faq__item:hover, .faq__item[open] { background: var(--blue); }
.faq__item:hover .faq__q, .faq__item[open] .faq__q { color: var(--white); }
.faq__item[open] .faq__icon { transform: rotate(180deg); }
.faq__q:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 20px; }
@media (max-width: 1024px) {
  .photo-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 25px; }
  .faq { padding: 40px 0 0; }
  .price-intro__photo--portrait { margin: 0 auto; }
}
@media (max-width: 767px) {
  .photo-strip { margin: 0; padding: 12px; gap: 10px; }
  .photo-strip__link { border-radius: 10px; }
  .faq__q { padding: 20px 22px 24px; font-size: 18px; }
  .faq__a { padding: 0 22px 20px; margin-top: -10px; }
}
@media (prefers-reduced-motion: reduce) { .photo-strip__link img, .faq__icon, .faq__item { transition: none; } }

/* ---------- Plattegrond in popup ---------- */
.plan { width: min(1200px, calc(100vw - 40px), calc((100vh - 40px) * 1375 / 768)); max-width: none; max-height: calc(100vh - 40px); padding: 0; border: 0; background: transparent; overflow: visible; }
.plan[open] .plan__box { animation: plan-in .55s cubic-bezier(.2, .9, .3, 1.15) both; }
.plan[open]::backdrop { animation: plan-fade .35s ease both; }
@keyframes plan-in { from { opacity: 0; transform: scale(.25); } to { opacity: 1; transform: none; } }
@keyframes plan-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .plan[open] .plan__box, .plan[open]::backdrop { animation: none; } }
.plan::backdrop { background: rgba(var(--night-rgb), .7); backdrop-filter: blur(3px); }
.plan__box { position: relative; }
.plan__img { display: block; width: 100%; height: auto; aspect-ratio: 1375 / 768; background: #dfe9d6; border-radius: 20px; box-shadow: 0 25px 60px rgba(0, 0, 0, .45), 0 8px 18px rgba(0, 0, 0, .25); }
.plan__close {
  position: absolute; top: -14px; right: -14px; display: grid; place-items: center; width: 40px; height: 40px;
  border: 2px solid var(--white); border-radius: 50%; background: var(--blue); color: var(--white); cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .3); transition: background .2s, color .2s;
}
.plan__close:hover, .plan__close:focus-visible { background: var(--sun); color: var(--ink); }
.plan__close svg { width: 18px; height: 18px; }
@media (max-width: 767px) {
  .plan { width: calc(100vw - 24px); }
  .plan__img { border-radius: 12px; }
  .plan__close { top: -12px; right: -6px; width: 34px; height: 34px; }
}

/* ---------- Fotoalbum: masonry-galerij + lightbox ---------- */
.gallery { padding: 75px 0 150px; }
.gallery__grid { list-style: none; margin: 0; padding: 0; column-count: 3; column-gap: 25px; }
.gallery__item { break-inside: avoid; margin-bottom: 25px; }
/* Met JS: rij-voor-rij masonry (volgorde links→rechts zoals het origineel) */
.gallery__grid.is-masonry { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 5px; column-gap: 25px; row-gap: 0; }
.gallery__grid.is-masonry .gallery__item { margin-bottom: 0; }
.gallery__link {
  position: relative; display: block; overflow: hidden; border-radius: 15px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, .5);
  transform: translateZ(0); /* afronding blijft staan tijdens het zoomen */
}
.gallery__link img { display: block; width: 100%; height: auto; transition: transform .6s ease; }
.gallery__zoom {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(var(--mint-rgb), .45); color: var(--blue);
  opacity: 0; transition: opacity .35s ease;
}
.gallery__zoom svg { width: 46px; height: 46px; transform: scale(.7); transition: transform .35s ease; }
.gallery__link:hover img, .gallery__link:focus-visible img { transform: scale(1.1); }
.gallery__link:hover .gallery__zoom, .gallery__link:focus-visible .gallery__zoom { opacity: 1; }
.gallery__link:hover .gallery__zoom svg, .gallery__link:focus-visible .gallery__zoom svg { transform: scale(1); }
.gallery__link:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.gallery--compact { padding: 40px 0 120px; }
.gallery__zoom { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.gallery__zoom:has(.gallery__cap) { background: rgba(var(--mint-rgb), .8); }
.gallery__cap { display: block; padding: 0 16px; text-align: center; color: var(--ink); font-size: 14px; line-height: 1.35; }
.gallery__cap strong { display: block; font-family: var(--font-head); font-size: 17px; }

.lightbox {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(var(--night-rgb), .92); color: var(--white); overscroll-behavior: contain;
}
.lightbox[open] { display: grid; place-items: center; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 60px 90px; max-width: 100%; max-height: 100%; }
.lightbox__img { max-width: min(1400px, 100%); max-height: calc(100vh - 170px); width: auto; height: auto; border-radius: 10px; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.lightbox__caption { font-size: 15px; text-align: center; color: rgba(255, 255, 255, .85); }
.lightbox__count { margin-left: 8px; color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
.lightbox__btn {
  position: absolute; display: grid; place-items: center; width: 50px; height: 50px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--white); cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.lightbox__btn svg { width: 24px; height: 24px; }
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--sun); color: var(--ink); }
.lightbox__btn:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.lightbox__btn--close { top: 20px; right: 20px; }
.lightbox__btn--prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: 20px; top: 50%; transform: translateY(-50%); }
html.lightbox-open { overflow: hidden; }

@media (max-width: 1024px) {
  .gallery { padding: 60px 0 110px; }
  .gallery__grid { column-count: 2; column-gap: 20px; }
  .gallery__item { margin-bottom: 20px; }
  .gallery__grid.is-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
}
@media (max-width: 767px) {
  .gallery { padding: 40px 0 80px; }
  .gallery__grid, .gallery__grid.is-masonry { column-gap: 12px; }
  .gallery__item { margin-bottom: 12px; }
  .gallery__link { border-radius: 10px; box-shadow: 1px 1px 6px rgba(0, 0, 0, .4); }
  .lightbox__figure { padding: 70px 12px 90px; }
  .lightbox__img { max-height: calc(100vh - 200px); }
  .lightbox__btn--prev, .lightbox__btn--next { top: auto; bottom: 20px; transform: none; }
  .lightbox__btn--prev { left: calc(50% - 60px); }
  .lightbox__btn--next { right: calc(50% - 60px); }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__link img, .gallery__zoom, .gallery__zoom svg { transition: none; }
}

/* ==========================================================================
   5. Voettekst
   ========================================================================== */
.site-footer {
  padding: 50px 0 25px;
  background: radial-gradient(60% 50% at 50% 50%, var(--green) 25%, var(--white) 75%);
}
.site-footer__box {
  padding: 40px 60px 45px 85px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--blue) 0%, var(--sky) 100%);
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.site-footer__cols {
  display: grid; grid-template-columns: 25% 50% 25%;
  padding-right: 35px;
  border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .14));
}
.site-footer__col { padding: 30px 25px 0 0; }
.site-footer__about { text-align: center; color: rgba(255, 255, 255, .7); }
.site-footer__logo { display: inline-block; margin-bottom: 25px; }
.site-footer__logo img { width: auto; height: 80px; }
.site-footer__about p { margin-bottom: 30px; }
.social { display: flex; justify-content: center; gap: 15px; }
.social a {
  display: grid; place-items: center;
  width: 54px; height: 54px; border-radius: 7px;
  background: var(--sun); color: var(--ink); font-size: 18px;
  transition: transform .25s ease-in;
}
.social a:hover { transform: scale(1.08); }

.site-footer__contact { display: flex; justify-content: center; padding-top: 20px; }
.contact-list { padding: 10px 0 40px; }
.contact-list li { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 9px; color: rgba(255, 255, 255, .8); line-height: 36px; }
.contact-list .icon { width: 30px; height: 30px; margin-top: 3px; color: var(--white); }
.contact-list a { text-decoration: none; }
.contact-list a:hover { color: var(--white); }
.contact-list strong { font-weight: 600; }

.site-footer__menu li { margin: 5px 0; }
.site-footer__menu a {
  display: block; padding: 10px; border: 1px solid var(--sun); border-radius: 50px;
  background: rgba(var(--blue-rgb), .52);
  color: rgba(255, 255, 255, .8); text-align: center; text-decoration: none; text-transform: uppercase; font-size: 14px; line-height: 21px;
  transition: background .25s, color .25s;
}
.site-footer__menu a:hover { background: var(--sun); color: var(--ink); }
.site-footer__copyright { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--ink); }

/* Zwevende knoppen */
.float-btn {
  position: fixed; bottom: 25px; z-index: 30;
  display: grid; place-items: center; border-radius: 50%;
  transition: transform .25s, opacity .3s, visibility .3s;
}
.float-btn--whatsapp { left: 45px; width: 55px; height: 55px; background: #25d366; color: var(--white); font-size: 30px; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.float-btn--whatsapp:hover { transform: scale(1.1); }
.float-btn--top {
  right: 45px; width: 34px; height: 34px;
  background: linear-gradient(135deg, var(--sky), var(--blue)); color: var(--white);
  border: 1.5px solid rgba(255, 255, 255, .8); box-shadow: 0 4px 12px rgba(var(--blue-rgb), .35);
  opacity: 0; visibility: hidden;
}
.float-btn--top .icon { width: 16px; height: 16px; }
.float-btn--top:hover, .float-btn--top:focus-visible { transform: translateY(-3px); background: var(--sun); color: var(--ink); }
.float-btn--top.is-visible { opacity: 1; visibility: visible; }

/* ==========================================================================
   6. Animaties (overgenomen uit het Phlox-thema)
   Werking: site.js zet .is-inview zodra een element in beeld komt.
   Zonder JavaScript of bij "minder beweging" is alles direct zichtbaar.
   ========================================================================== */
.js [data-anim] {
  animation-duration: var(--anim-duration, 1000ms);
  animation-delay: var(--anim-delay, 0ms);
  animation-timing-function: var(--ease);
  animation-fill-mode: both;
}
.js [data-anim]:not([data-anim="slide-from-bot"]):not(.is-inview) { opacity: 0; }
.js [data-anim].is-inview { animation-name: var(--anim-name); }
[data-anim="fade-in-up"] { --anim-name: aux-fade-in-up; }
[data-anim="fade-in-up-1"] { --anim-name: aux-fade-in-up-1; }
[data-anim="fade-in-down"] { --anim-name: aux-fade-in-down; }
[data-anim="fade-in-left"] { --anim-name: aux-fade-in-left; }
[data-anim="fade-in-right"] { --anim-name: aux-fade-in-right; }
[data-anim="fade-in-right-1"] { --anim-name: aux-fade-in-right-1; }
[data-anim="fade-in-custom"] { --anim-name: aux-fade-in-custom; }
[data-anim="scale-up"] { --anim-name: aux-scale-up; }
[data-anim="scale-down"] { --anim-name: aux-scale-down; }
[data-anim="zoom-in-3"] { --anim-name: aux-zoom-in-3; }

/* Schuift van onder uit een onzichtbare rand omhoog */
.js [data-anim="slide-from-bot"] { overflow: hidden; }
.js [data-anim="slide-from-bot"] > * {
  animation-duration: inherit; animation-delay: inherit;
  animation-timing-function: inherit; animation-fill-mode: both;
}
.js [data-anim="slide-from-bot"]:not(.is-inview) > * { transform: translateY(100%); }
.js [data-anim="slide-from-bot"].is-inview > * { animation-name: aux-slide-from-bot; }
.hero__panel[data-anim="slide-from-bot"] { overflow: visible; }

@keyframes aux-fade-in-up { from { opacity: 0; transform: translate3d(0, 27px, 0); } to { opacity: 1; transform: none; } }
@keyframes aux-fade-in-up-1 { from { opacity: 0; transform: translate3d(0, 50px, 0); } to { opacity: 1; transform: none; } }
@keyframes aux-fade-in-down { from { opacity: 0; transform: translate3d(0, -27px, 0); } to { opacity: 1; transform: none; } }
@keyframes aux-fade-in-left { from { opacity: 0; transform: translate3d(-27px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aux-fade-in-right { from { opacity: 0; transform: translate3d(27px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aux-fade-in-right-1 { from { opacity: 0; transform: translate3d(50px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes aux-fade-in-custom { from { opacity: 0; transform: translate3d(var(--from-x, 0), var(--from-y, 50px), 0); } to { opacity: 1; transform: none; } }
@keyframes aux-scale-up { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
@keyframes aux-scale-down { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@keyframes aux-zoom-in-3 { from { opacity: 0; transform: scale3d(.6, .6, .6); } 50% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes aux-slide-from-bot { from { transform: translateY(100%); } to { transform: none; } }

/* Scroll-effecten: site.js zet --px (verschuiving) en --ps (schaal) */
[data-parallax-in], [data-parallax-out] {
  transform: translate3d(var(--px, 0px), 0, 0) scale(var(--ps, 1));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-anim], .js [data-anim] > * { animation: none !important; opacity: 1 !important; transform: none !important; }
  [data-parallax-in], [data-parallax-out] { transform: none !important; }
  .carousel__track { transition: none; }
}

/* ==========================================================================
   7. Tablet (tot 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --gutter: 25px; }

  /* Menu wordt een uitschuifpaneel */
  .site-header__inner { padding-top: 15px; }
  .site-header__blob { width: 250px; height: 110px; }
  .site-logo img { height: 62px; }
  .main-nav { order: 3; }
  .main-nav__toggle { display: grid; place-items: center; width: 48px; height: 48px; color: var(--white); font-size: 34px; }
  /* taalkeuze: rondje links van het hamburgermenu, andere talen klappen naar beneden uit */
  .main-nav__lang { display: none; }
  .lang-pick { display: block; position: relative; order: 2; flex: none; }
  .lang-pick__btn, .lang-pick__list a {
    display: block; width: 36px; height: 36px; padding: 0; border-radius: 50%; overflow: hidden; line-height: 0;
    border: 2px solid var(--white); box-shadow: 0 2px 8px rgba(0, 0, 0, .35); cursor: pointer;
    transition: transform .2s;
  }
  .lang-pick__btn img, .lang-pick__list img { width: 100%; height: 100%; object-fit: cover; }
  .lang-pick__btn:hover, .lang-pick__list a:hover, .lang-pick__list a:focus-visible { transform: scale(1.08); }
  .lang-pick__list {
    position: absolute; top: calc(100% + 10px); left: 0; z-index: 25; display: flex; flex-direction: column; gap: 10px;
    margin: 0; padding: 0; list-style: none;
    opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .25s, transform .25s, visibility .25s;
  }
  .lang-pick.is-open .lang-pick__list { opacity: 1; visibility: visible; transform: none; }
  .main-nav__toggle svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55)) drop-shadow(0 0 8px rgba(0, 0, 0, .35)); }
  .main-nav__icon { justify-content: start; padding: 8px 10px; }
  .main-nav__icon .icon { width: 28px; height: 28px; }
  .main-nav__panel {
    position: fixed; inset: 0 0 0 auto; z-index: 50;
    width: min(350px, 88vw); padding: 80px 20px 30px;
    border-radius: 0;
    background: linear-gradient(160deg, var(--blue) 30%, var(--sky) 100%);
    box-shadow: -10px 0 40px rgba(0, 0, 0, .2);
    overflow-y: auto;
    transform: translateX(100%); visibility: hidden;
    transition: transform .4s var(--ease), visibility .4s;
  }
  .main-nav.is-open .main-nav__panel { transform: none; visibility: visible; }
  .main-nav__close { display: grid; place-items: center; position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; color: var(--white); font-size: 28px; }
  .main-nav__list { flex-direction: column; align-items: stretch; }
  .main-nav__item { flex-wrap: wrap; justify-content: space-between; margin: 5px 0; }
  .main-nav__item > a, .main-nav__label { font-size: 18px; padding: 8px 10px; }
  .main-nav__sub-toggle { padding: 6px 14px; border-radius: 25px; background: rgba(255, 255, 255, .12); }
  .main-nav__sub {
    position: static; flex-basis: 100%; min-width: 0; padding: 0 0 0 10px;
    background: none; backdrop-filter: none;
    opacity: 1; visibility: visible; transform: none;
    display: none;
  }
  .main-nav__item.is-open > .main-nav__sub { display: block; }
  .main-nav__item.has-sub:hover > .main-nav__sub { transform: none; }
  .main-nav__sub { width: auto; }
  .main-nav__sub a { font-size: 17px; padding: 10px; white-space: normal; }
  .site-header__cta { font-size: 14px; padding: 10px 22px; margin-left: 0; }

  .heading--xl { font-size: 60px; line-height: 66px; }
  .hero { padding: 150px 0 90px; }
  .hero__inner { grid-template-columns: 1fr; }
  .hero__media { width: min(560px, 90%); margin: 0 auto 30px; padding: 0; }
  .hero__panel { padding: 40px 30px; }
  
  .reviews__inner { grid-template-columns: minmax(0, 1fr); }
  .reviews__intro { order: -1; padding: 0 0 20px; text-align: center; }
  .reviews__intro .lead { margin-inline: auto; }
  .carousel-nav { justify-content: center; }
  .carousel__slide { padding: 0 max(12%, calc(50% - 220px)); }
  .reviews { padding-bottom: 60px; }

  .features { padding: 60px 0 140px; }
  .features__inner { grid-template-columns: 1fr; padding-right: var(--gutter); }
  .features__text { padding: 0 0 40px; }
  .features__body { max-width: 640px; }
  .features__photo { min-height: 560px; margin-right: 60px; }
  .features__review { right: -40px; top: 60px; width: 270px; }
  .features__badge { left: 20px; bottom: -70px; }

  .months__grid { gap: 24px; padding: 10px 0; }
  .month-card__body { padding: 0 20px; }
  .month-card__icon { width: 84px; height: 84px; margin: -42px 20px 0 0; }
  .month-card__icon img { width: 56px; height: 56px; }
  .month-card__title { font-size: 24px; line-height: 44px; }
  .section-head--center { margin-bottom: 60px; }
  .reviews { padding-top: 70px; }

  .highlights__inner { grid-template-columns: 1fr; }
  .highlights__collage { width: min(620px, 100%); margin: 0 auto 50px; }
  .highlights__text { padding: 0; }
  .usp-list { max-width: none; }
  .highlights__cta { max-width: none; }

  .newsletter__box { padding: 45px 50px 0; display: flex; flex-direction: column; }
  .newsletter__text { max-width: none; }
  .newsletter .newsletter__cta { margin-bottom: 0; }
  .newsletter__photo { position: static; width: 300px; margin: 24px 0 0 auto; }

  .site-footer__box { padding: 10px 50px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; padding: 30px 30px 30px 0; background: none; }
  .site-footer__about { grid-column: 1 / -1; padding: 0 0 30px; }
  .site-footer__contact { justify-content: flex-start; padding-top: 0; }
  .site-footer__menu { padding-top: 0; }
}

/* ==========================================================================
   8. Mobiel (tot 767px)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  .site-header__blob { width: 200px; height: 95px; }
  .site-logo img { height: 50px; }
  .site-header__inner { gap: 8px; padding-top: 12px; }
  .site-header__cta { display: none; }

  .heading { font-size: 30px; line-height: 1.25; }
  .heading--xl { font-size: 42px; line-height: 1.1; }

  .hero { padding: 120px 0 70px; }
  .hero__media { width: 100%; }
  .hero__panel { padding: 30px 0 10px; }
  .hero__panel::before { display: none; }
      .hero__text { font-size: 17px; line-height: 27px; }

  .carousel__slide { padding: 0 10%; }
  .review__quote { font-size: 17px; line-height: 30px; }

  .features { padding-bottom: 120px; }
  .logos { gap: 0; }
  .logos li { flex: 0 0 25%; padding: 0 4px; }
  .logos img { width: 100%; height: auto; }
  /* Foto met review half erover (boven) en badge half erover (onder), beide 2/3 breed */
  .features__photo { min-height: 0; aspect-ratio: 3 / 4; margin: 150px 0 60px; }
  .features__review, .features__badge { left: 50%; right: auto; width: 66.667%; translate: -50% 0; }
  .features__review { top: 0; translate: -50% -50%; }
  .features__badge { bottom: 0; translate: -50% 50%; }
  .features__review .quote-card { padding: 34px 16px 14px; }
  .quote-card__icon { width: 60px; height: 60px; }
  .quote-card__icon svg { width: 24px; }
  .quote-card__text { font-size: 15px; line-height: 24px; margin: 6px 0; }
  .badge-card { padding: 12px 14px; gap: 10px; }
  .badge-card img { width: 52px; height: 52px; }
  .badge-card__title { font-size: 16px; line-height: 24px; }
  .badge-card__lines { font-size: 13px; line-height: 19px; }

  .months { padding: 100px 0 90px; }
  .months__grid { grid-template-columns: 1fr; gap: 30px; padding: 0; }
  .section-head--center { margin-bottom: 40px; }

  .highlights { padding: 50px 0 80px; }
  .highlights__collage { min-height: 0; aspect-ratio: 1 / 1.05; margin-left: 0; }
  .collage__chef { top: 43%; }
  .collage__logo { top: 29%; width: 70px; }
  .collage__logo img { width: 70px; height: 70px; }
  .collage__note { top: auto; bottom: 0; left: 0; width: 46%; padding: 14px 10px 10px; font-size: 14px; line-height: 20px; }
  .usp-list { grid-template-columns: 1fr; gap: 18px; }
  .usp-list li { font-size: 18px; }
  .usp-list__icon { width: 60px; height: 60px; }
  .usp-list__icon svg { width: 30px; height: 30px; }

  .newsletter { padding: 60px 0 40px; }
  .newsletter__box { padding: 35px 25px 0; }
  .newsletter__photo { width: 240px; margin-top: 30px; }

  .opening { padding: 80px 15px 130px; }
  .countdown__done { font-size: 22px; }
  .countdown__units { gap: 8px; }
  .countdown__units li { width: 74px; height: 80px; border-radius: 14px; font-size: 10px; letter-spacing: .02em; }
  .countdown__units span { font-size: 30px; }

  .site-footer { padding: 50px 0 20px; }
  .site-footer__box { padding: 30px; }
  .site-footer__cols { grid-template-columns: 1fr; padding: 0; }
  .site-footer__about { padding-bottom: 40px; }
  .site-footer__contact { padding: 0 0 20px; }
  .site-footer__menu { padding: 0 0 20px; }

  .float-btn--whatsapp { left: 16px; bottom: 16px; }
  .float-btn--top { right: 16px; bottom: 26px; width: 32px; height: 32px; }
}

/* ==========================================================================
   Reserveren (reserveren.njk + booking.js), voorwaarden en bedankpagina
   ========================================================================== */
.booking { padding: 70px 0 110px; }
.booking { --c-free: var(--green); --c-pending: var(--sun); --c-booked: #e57373; --c-closed: #e9edf1; }
.booking__inner { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 50px; align-items: start; }
.booking__step { margin: 0 0 40px; padding: 0; border: 0; min-width: 0; }
.booking__legend { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--ink); }
.booking__num { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--blue); color: var(--white); font-size: 18px; }
.booking__types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.type-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 22px 20px 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); border: 2px solid transparent; cursor: pointer; transition: border-color .2s, transform .2s; }
.type-card:hover { transform: translateY(-2px); }
.type-card:has(input:checked) { border-color: var(--blue); }
.type-card:has(input:focus-visible) { outline: 3px solid rgba(var(--blue-rgb), .35); outline-offset: 2px; }
.type-card input { position: absolute; opacity: 0; pointer-events: none; }
.type-card__icon { width: 34px; height: 34px; color: var(--blue); }
.type-card__icon svg { width: 100%; height: 100%; }
.type-card__title { font-weight: 600; font-size: 18px; color: var(--ink); }
.type-card__text { font-size: 14px; line-height: 21px; color: var(--text); }

/* Kalender: elke dag is diagonaal gedeeld (links = nacht ervoor, rechts = nacht erna) */
.cal { padding: 24px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.cal__hint { margin: 0; font-weight: 500; color: var(--ink); text-align: center; }
.cal__nav { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--tint-1); color: var(--blue); cursor: pointer; }
.cal__nav svg { width: 18px; height: 18px; }
.cal__nav:disabled { opacity: .35; cursor: default; }
.cal__months { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; min-height: 290px; }
.cal__title { margin: 0 0 8px; text-align: center; font-weight: 600; color: var(--ink); text-transform: capitalize; }
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__wd { font-size: 12px; text-align: center; color: var(--grey); text-transform: uppercase; }
.cal__day {
  --am: var(--c-closed); --pm: var(--c-closed);
  height: 44px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
  background: linear-gradient(135deg, var(--am) 0 50%, var(--pm) 50% 100%);
  transition: transform .15s, box-shadow .15s;
}
.cal__day[data-am="free"] { --am: var(--c-free); }
.cal__day[data-pm="free"] { --pm: var(--c-free); }
.cal__day[data-am="pending"] { --am: var(--c-pending); }
.cal__day[data-pm="pending"] { --pm: var(--c-pending); }
.cal__day[data-am="booked"] { --am: var(--c-booked); }
.cal__day[data-pm="booked"] { --pm: var(--c-booked); }
.cal__day:disabled { cursor: default; color: rgba(41, 41, 41, .45); }
.cal__day:not(:disabled):hover { transform: scale(1.08); box-shadow: 0 3px 10px rgba(0, 0, 0, .15); }
.cal__day.is-in { background: var(--blue); color: var(--white); }
.cal__day.is-start, .cal__day.is-end { background: var(--blue); color: var(--white); font-weight: 700; }
.cal__legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--text); }
.cal__legend li { display: flex; align-items: center; gap: 7px; }
.cal__swatch { width: 16px; height: 16px; border-radius: 4px; background: var(--c-closed); }
.cal__swatch--free { background: var(--c-free); }
.cal__swatch--pending { background: var(--c-pending); }
.cal__swatch--booked { background: var(--c-booked); }
.cal__chosen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; padding: 12px 16px; border-radius: 10px; background: var(--tint-1); }
.cal__chosen p { margin: 0; color: var(--ink); }
.cal__clear { font: inherit; font-size: 14px; color: var(--blue); text-decoration: underline; cursor: pointer; }
.cal__loading, .cal__offline { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--text); }
.cal__offline { padding: 20px; border-radius: 10px; background: #fff4e0; color: #8a5a00; }
.booking__plan { margin: 0 0 26px; }
.booking__review { grid-column: 1 / -1; width: min(100%, 1260px); margin: 0 auto 30px; text-align: center; }
.booking__review .bubble__text { padding: 26px 40px; font-size: 21px; line-height: 34px; font-style: italic; }
.booking__review .bubble__text::after { left: calc(50% - 11px); }
.booking__review .bubble__author { justify-content: center; padding-left: 0; }
.booking__review .bubble__author span { text-align: left; }
/* Gîtes: foto van Jip & Joyce iets groter, als echte foto (geen logo) */
[data-theme="gites"] .booking__review .bubble__author img { width: 76px; height: 76px; object-fit: cover; padding: 0; }
.field__req { color: #c62828; font-weight: 600; }
.btn--small { padding: 9px 22px; font-size: 13px; }

/* Formulier */
.booking__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; padding: 26px; border-radius: var(--radius); box-shadow: var(--shadow-soft);
  /* foto van het meer onder een witte waas (75%); de invulvelden zelf blijven wit */
  background: linear-gradient(rgba(255, 255, 255, .75), rgba(255, 255, 255, .75)), var(--bg-d) center / cover no-repeat, var(--white);
}
.field { display: flex; flex-direction: column; gap: 6px; }
.field--wide { grid-column: 1 / -1; }
.field__label { font-size: 14px; font-weight: 500; color: var(--ink); }
.field__label small { display: inline; font-size: 12px; font-weight: 400; color: var(--grey); }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid #d5dde4; border-radius: 9px; background: var(--white);
  font: inherit; font-size: 15px; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(var(--blue-rgb), .15); }
.is-invalid input, .is-invalid select { border-color: #d64545; }
.field__error { font-size: 13px; color: #c62828; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 21px; color: var(--ink); cursor: pointer; }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--blue); }
.check.is-invalid span:first-of-type { color: #c62828; }
.check a { color: var(--blue); text-decoration: underline; }
.booking__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

/* Overzicht met prijs */
.booking__summary { position: sticky; top: 24px; }
.summary-card { padding: 26px 24px; border-radius: var(--radius); background: var(--white); box-shadow: 0 10px 50px rgba(var(--glow-rgb), .14); }
.summary-card__title { margin: 0 0 14px; font-family: var(--font-head); font-size: 22px; font-weight: 700; color: var(--ink); }
.summary-card__empty { margin: 0 0 16px; color: var(--text); }
.summary-card__dates { margin: 0 0 10px; font-weight: 600; color: var(--blue); }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--tint-2); font-size: 14px; color: var(--text); }
.summary-row__value { white-space: nowrap; color: var(--ink); }
.summary-row--discount .summary-row__value { color: #2e7d32; }
.summary-row--total { padding-top: 12px; border-bottom: 0; font-size: 18px; font-weight: 700; color: var(--ink); }
.summary-row--deposit { border-bottom: 0; font-weight: 600; color: var(--blue); }
.summary-row--deposit .summary-row__value { color: var(--blue); }
.check--consent { margin-top: 18px; }
.summary-card__small { margin: 10px 0 0; font-size: 12.5px; line-height: 19px; color: var(--grey); }
.summary-card__error { margin: 14px 0 0; padding: 10px 12px; border-radius: 8px; background: #fdecea; font-size: 14px; color: #b71c1c; }
.summary-card__closed { margin: 16px 0 0; padding: 10px 12px; border-radius: 8px; background: var(--tint-1); font-size: 14px; line-height: 21px; color: var(--ink); }
.summary-card__submit { width: 100%; justify-content: center; margin-top: 16px; }
.summary-card__submit:disabled { opacity: .6; cursor: not-allowed; }
.booking-ref { font-size: 20px; font-weight: 600; color: var(--blue); }
.text-block__note + .btn { margin-top: 30px; }

/* Voorwaarden */
.terms { padding: 70px 0 110px; }
.terms__inner { max-width: 820px; }
.terms, .terms__inner, .terms p, .terms__title, .terms__list { text-align: left; }
/* Voorwaarden als popup op de reserveerpagina */
.terms-pop { width: min(800px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 40px); padding: 0; border: 0; background: transparent; overflow: visible; }
.terms-pop::backdrop { background: rgba(var(--night-rgb), .7); backdrop-filter: blur(3px); }
.terms-pop[open] .terms-pop__box { animation: plan-in .55s cubic-bezier(.2, .9, .3, 1.15) both; }
.terms-pop__box { position: relative; padding: 0; border-radius: 20px; background: var(--white); box-shadow: 0 25px 60px rgba(0, 0, 0, .45); }
.terms-pop .plan__close { z-index: 2; }
.terms-pop__scroll { max-height: calc(100vh - 40px); overflow-y: auto; padding: 36px 40px 30px; border-radius: 20px; }
.terms-pop .terms__section:first-of-type { margin-top: 24px; }
@media (prefers-reduced-motion: reduce) { .terms-pop[open] .terms-pop__box { animation: none; } }
@media (max-width: 767px) { .terms-pop .plan__close { z-index: 2; }
.terms-pop__scroll { padding: 26px 20px 22px; } }
.terms__intro { line-height: 27px; color: var(--text); }
.terms__section { margin-top: 34px; }
.terms__title { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; font-family: var(--font-head); font-size: 24px; color: var(--blue); }
.terms__icon { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: rgba(var(--blue-rgb), .1); color: var(--blue); }
.terms__icon svg { width: 24px; height: 24px; }
.terms__section p, .terms__list { line-height: 27px; color: var(--text); }
.terms__list { padding-left: 0; list-style: none; }
.terms__list li { margin: 0 0 10px; }
.terms__company { margin-top: 44px; font-size: 13px; color: var(--grey); }

@media (max-width: 1024px) {
  .booking__inner { grid-template-columns: 1fr; gap: 10px; }
  .booking__summary { position: static; }
}
@media (max-width: 767px) {
  .booking { padding: 40px 0 80px; }
  .booking__legend { font-size: 22px; }
  .booking__types { grid-template-columns: 1fr; gap: 10px; }
  .type-card { display: grid; grid-template-columns: 34px 1fr; column-gap: 14px; padding: 16px; }
  .type-card__icon { grid-row: span 2; }
  .cal { padding: 16px 12px; }
  .cal__months { grid-template-columns: 1fr; gap: 24px; }
  .booking__grid { grid-template-columns: 1fr; padding: 20px 16px; }
  .terms { padding: 40px 0 80px; }
}

/* Omgeving: tijdelijke melding onder de tekst */
.omgeving__notice { max-width: 720px; margin: 36px auto 0; text-align: left; }
/* Nog niet actieve links (data-active-from): gewone tekst/kaart, niet klikbaar */
a[data-active-from]:not([href]) { cursor: default; color: inherit; text-decoration: none; }
.month-card a[data-active-from]:not([href]):hover { transform: none; }

/* Bedankpagina reserveren: rond filmpje van Mike & Marian */
.wave-video { width: 260px; max-width: 70vw; margin: 34px auto 36px; }
.wave-video video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; clip-path: circle(48.6% at 50% 50%); }
@media (prefers-reduced-motion: reduce) { .wave-video video { animation: none; } }

/* Bedankpagina: volg ons op social media */
.follow-us { text-align: center; margin: 0 auto 34px; max-width: 520px; }
.follow-us p { margin: 0 0 16px; }
.follow-us__list { display: flex; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
.follow-us__btn { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; color: #fff; background: var(--blue); box-shadow: 0 6px 16px rgba(var(--blue-rgb), .25); transition: transform .2s ease, box-shadow .2s ease; }
.follow-us__btn svg { width: 26px; height: 26px; fill: currentColor; }
.follow-us__btn--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); box-shadow: 0 6px 16px rgba(214, 36, 159, .25); }
.follow-us__btn--facebook { background: #1877f2; }
.follow-us__btn:hover, .follow-us__btn:focus-visible { transform: translateY(-3px) scale(1.05); }
@media (prefers-reduced-motion: reduce) { .follow-us__btn { transition: none; } }

/* Contactformulier */
.contact-form { padding: 20px 0 110px; }
.contact-form__inner { max-width: 680px; }
.contact-form__thanks { margin: 0; padding: 14px 18px; border-radius: 12px; background: rgba(var(--green-rgb), .25); color: var(--ink); font-weight: 500; }
@media (max-width: 767px) { .contact-form { padding: 10px 0 70px; } }

/* ==========================================================================
   Gîtes-site: kleine aanvullingen op de gedeelde bouwstenen
   ========================================================================== */
.list-card__title { margin: 0 0 18px; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--white); }
/* Beschrijving van een gîte ("Alles op een rij") in de tabelstijl van de prijzen, maar links uitgelijnd */
.spec-table { table-layout: auto; }
.spec-table tbody th { width: 34%; font-weight: 600; color: var(--ink); vertical-align: top; }
.spec-table tbody td { text-align: left; }
.price-table-section .spec-table tbody tr:first-child td { font-weight: 400; color: #444; }
.center-cta--tight { padding: 40px 0 0; }
/* Lijst met vinkjes in een gecentreerd tekstblok ("Goed om te weten") */
.good-list { display: grid; gap: 14px; max-width: 760px; margin: 10px 0 0; text-align: left; color: var(--text); font-size: 16px; line-height: 26px; }
.good-list li { display: flex; align-items: flex-start; gap: 14px; }
.good-list .icon { flex: none; width: 20px; height: 20px; margin-top: 3px; color: var(--blue); }
.good-list a { color: var(--blue); font-weight: 500; }
/* Reserveren: twee soorten gîtes naast elkaar */
.booking__types--two { grid-template-columns: repeat(2, 1fr); }
.booking__group-note { margin: 14px 0 0; font-size: 14px; color: var(--text); }
.booking__group-note a { color: var(--blue); font-weight: 500; }
.booking__persons-note { margin: -6px 0 0; font-size: 13px; color: var(--text); }
/* Aanvraagformulier groepen: velden in twee kolommen */
.group-form__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.price-intro__photo--square { aspect-ratio: 1; max-width: 560px; }
@media (max-width: 767px) {
  .booking__types--two { grid-template-columns: 1fr; }
  .group-form__grid { grid-template-columns: 1fr; }
  .spec-table tbody th { width: 38%; }
  .list-card__title { font-size: 20px; }
}
/* Openingstijden: vlinder-icoon in een wit rondje (beter zichtbaar op groen) */
[data-theme="gites"] .opening__icon { padding: 12px; border-radius: 50%; background: var(--white); box-shadow: 0 5px 25px rgba(0, 0, 0, .12); }
/* Gîtes: "Kies je huisje" — kaartjes met ligging en kenmerken per gîte */
.houses { padding: 90px 0 40px; }
.houses .lead { max-width: 760px; margin-left: auto; margin-right: auto; }
.houses__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: 40px; }
.house-card { display: flex; flex-direction: column; width: calc((100% - 48px) / 3); max-width: 420px; padding: 26px 26px 20px; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow-soft); }
.house-card__photo { position: relative; width: calc(100% + 52px); margin: -26px -26px 30px; }
.house-card__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius) var(--radius) 0 0; }
/* Groen labeltje dat net over de onderrand van de foto steekt */
.house-card__tag { position: absolute; right: 18px; bottom: -15px; padding: 6px 14px; border-radius: 999px; background: var(--blue); color: var(--white); font-size: 13px; font-weight: 500; line-height: 18px; box-shadow: 0 6px 16px rgba(var(--deep-rgb), .3); }
.house-card__head { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.house-card__num { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; background: var(--blue); color: var(--white); font-family: var(--font-head); font-size: 24px; font-weight: 700; }
.house-card__label { display: block; font-family: var(--font-head); font-size: 20px; font-weight: 700; color: var(--ink); }
.house-card__pos { display: block; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.house-card__list { display: grid; gap: 9px; margin: 0 0 18px; color: var(--text); font-size: 15px; line-height: 22px; }
.house-card__list li { display: flex; align-items: flex-start; gap: 10px; }
.house-card__list .icon { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--blue); }
.house-card__terrace { display: flex; align-items: center; gap: 10px; margin: auto 0 0; padding: 10px 14px; border-radius: 10px; background: rgba(255, 209, 92, .22); color: var(--ink); font-size: 14px; line-height: 20px; }
.house-card__terrace .icon { flex: none; width: 22px; height: 22px; color: var(--ink); }
@media (max-width: 1024px) { .house-card { width: calc((100% - 24px) / 2); } }
@media (max-width: 767px) { .houses { padding: 60px 0 20px; } .house-card { width: 100%; } }
/* Gîtes: iets meer ruimte tussen het ronde logo en de kop "Open in 2027" */
[data-theme="gites"] .opening__icon { margin-bottom: 26px; }

/* Reserveren (gîtes): prijsbalkje onderaan op tablet/mobiel (booking.js, [data-price-bar]) */
.price-bar { display: none; }
@media (max-width: 1024px) {
  .price-bar:not([hidden]) {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    display: grid; grid-template-columns: 1fr 1fr 1.2fr; align-items: end; gap: 4px 14px;
    padding: 10px 16px 8px; border: 0; border-radius: 16px; background: var(--white); color: var(--ink);
    font: inherit; text-align: left; cursor: pointer;
    box-shadow: 0 8px 30px rgba(var(--deep-rgb), .25); animation: price-bar-in .3s ease-out;
  }
  .price-bar__row { display: flex; flex-direction: column; font-size: 12px; line-height: 1.3; color: var(--grey); }
  .price-bar__row span:last-child { color: var(--ink); font-size: 14px; font-weight: 500; }
  .price-bar__row--total { text-align: right; }
  .price-bar__row--total strong { color: var(--blue); font-size: 19px; }
  .price-bar__more { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 4px; padding-top: 4px; border-top: 1px solid var(--tint-3, #e6e6e6); font-size: 11px; color: var(--grey); }
  .price-bar__more svg { width: 12px; height: 12px; }
  body.has-price-bar .float-btn { bottom: 118px; }
}
@keyframes price-bar-in { from { transform: translateY(30px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .price-bar { animation: none !important; } }

/* Reserveren (gîtes): tip korting lang verblijf (booking.js, [data-stay-tip]) */
.stay-tip {
  position: fixed; left: 50%; bottom: 24px; z-index: 45; width: min(480px, calc(100% - 24px));
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px;
  background: var(--sun); color: var(--ink); box-shadow: 0 10px 34px rgba(var(--deep-rgb), .28);
  transform: translate(-50%, 30px); opacity: 0; transition: transform .3s ease-out, opacity .3s;
}
.stay-tip.is-on { transform: translate(-50%, 0); opacity: 1; }
.stay-tip p { margin: 0; flex: 1; font-size: 15px; line-height: 1.4; }
.stay-tip__icon svg { width: 28px; height: 28px; display: block; }
.stay-tip__close { flex: none; padding: 4px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.stay-tip__close svg { width: 16px; height: 16px; display: block; }
@media (max-width: 1024px) { body.has-price-bar .stay-tip { bottom: 120px; } }
@media (prefers-reduced-motion: reduce) { .stay-tip { transition: none; } }

/* Tijdelijke "under construction"-pagina (site.underConstruction, partials/construction.njk) */
.uc-page { display: none; }
html.uc body > *:not(.uc-page) { display: none !important; }
html.uc .uc-page {
  display: grid; place-items: center; min-height: 100vh; padding: 40px 16px;
  background: linear-gradient(160deg, var(--tint-1), var(--ice));
}
.uc-page__box { max-width: 560px; padding: 40px 32px; border-radius: var(--radius); background: var(--white); text-align: center; box-shadow: 0 10px 50px rgba(var(--glow-rgb), .18); }
.uc-page__name { margin: 0 0 6px !important; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grey); }
.uc-page__icon { display: block; width: 120px; height: 120px; margin: 0 auto 18px; animation: uc-bob 3s ease-in-out infinite; }
.uc-page__title { margin: 0 0 16px; font-family: var(--font-head); font-size: 32px; color: var(--ink); }
.uc-page p { margin: 0 0 14px; line-height: 1.6; }
.uc-page__contact a { color: var(--blue); font-weight: 500; }
.uc-page__fr { margin-top: 22px !important; padding-top: 16px; border-top: 1px solid var(--tint-3); font-size: 14px; color: var(--grey); font-style: italic; }
@keyframes uc-bob { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .uc-page__icon { animation: none; } }

/* ---------- Fotoslider (partials/photo-slider.njk): één foto tegelijk, pijltjes naast de foto, bolletjes eronder ---------- */
.photo-slider { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 80px; }
.photo-slider__frame { padding: 0; margin: 0; border-radius: 15px; box-shadow: 2px 2px 10px rgba(0, 0, 0, .4); }
.photo-slider__frame:focus-visible { outline: 3px solid var(--sun); outline-offset: 4px; }
.photo-slider .carousel__track { list-style: none; margin: 0; padding: 0; }
.photo-slider .photo-slider__slide { padding: 0; }
.photo-slider__link { position: relative; display: block; overflow: hidden; }
.photo-slider__link img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.photo-slider__link:hover .photo-strip__zoom, .photo-slider__link:focus-visible .photo-strip__zoom { opacity: 1; }
.photo-slider__btn { position: absolute; top: calc(50% - 40px); z-index: 2; }
.photo-slider__btn--prev { left: 0; }
.photo-slider__btn--next { right: 0; }
.photo-slider__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 25px; }
.carousel-dot { width: 12px; height: 12px; padding: 0; border: 2px solid var(--white); border-radius: 50%; background: transparent; cursor: pointer; transition: background .25s ease, transform .25s ease; }
.carousel-dot[aria-current="true"] { background: var(--white); transform: scale(1.15); }
.carousel-dot:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
@media (max-width: 767px) {
  .photo-slider { padding: 0; }
  .photo-slider__btn { top: calc(50% - 45px); width: 42px; height: 42px; font-size: 22px; }
  .photo-slider__btn--prev { left: 8px; }
  .photo-slider__btn--next { right: 8px; }
  .photo-slider__dots { gap: 8px; margin-top: 18px; }
}
/* Homepage gîtes: groen metamorfose-kaartje op de plek van het logo-blokje (features__badge) */
.features__badge--note { width: 400px; }
.features__badge--note .info-card { box-shadow: 0 10px 40px rgba(0, 0, 0, .25); }
@media (max-width: 1024px) { .features__badge--note { width: 360px; } }
@media (max-width: 767px) { .features__badge--note { width: 80%; } }
.photo-slider__btn { color: var(--blue); background: var(--white); box-shadow: 0 6px 25px rgba(0, 0, 0, .25); }
.photo-slider__btn::after { display: none; }
.photo-slider__btn:hover { color: var(--blue); }

/* Homepage gîtes: foto met "In elke gîte" loopt met een golfrand door over de groene sectie eronder (partials/inside.njk, insideFlow) */
.price-photo--flow {
  --flow: 70px;
  z-index: 1; margin-bottom: calc(-1 * var(--flow)); padding-bottom: calc(125px + var(--flow));
  -webkit-mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--flow) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z'/%3E%3C/svg%3E") bottom / 100% var(--flow) no-repeat;
  mask: linear-gradient(#000, #000) top / 100% calc(100% - var(--flow) + 1px) no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M421.9,6.5c22.6-2.5,51.5,0.4,75.5,5.3c23.6,4.9,70.9,23.5,100.5,35.7c75.8,32.2,133.7,44.5,192.6,49.7c23.6,2.1,48.7,3.5,103.4-2.5c54.7-6,106.2-25.6,106.2-25.6V0H0v30.3c0,0,72,32.6,158.4,30.5c39.2-0.7,92.8-6.7,134-22.4c21.2-8.1,52.2-18.2,79.7-24.2C399.3,7.9,411.6,7.5,421.9,6.5z'/%3E%3C/svg%3E") bottom / 100% var(--flow) no-repeat;
}
.months--after-photo { padding-top: calc(75px + 70px + 40px); }
@media (max-width: 1024px) { .price-photo--flow { --flow: 40px; } .months--after-photo { padding-top: calc(75px + 40px + 30px); } }
@media (max-width: 767px) { .price-photo--flow { --flow: 25px; } .months--after-photo { padding-top: calc(60px + 25px + 25px); } }
/* Gîtes, smalle desktop (1025–1280px): menu iets compacter zodat het naast het logo past */
@media (min-width: 1025px) and (max-width: 1280px) {
  [data-theme="gites"] .main-nav__item > a, [data-theme="gites"] .main-nav__label { padding-left: 9px; padding-right: 9px; font-size: 14px; }
  [data-theme="gites"] .main-nav__item { flex-shrink: 0; }
  [data-theme="gites"] .main-nav__lang .main-nav__label img { min-width: 24px; }
  [data-theme="gites"] .main-nav__item.has-sub > a, [data-theme="gites"] .main-nav__item.has-sub > .main-nav__label { padding-right: 3px; }
}
/* Gîtes reserveren: kleine foto in het laatste kwart van de typekaart, kleurt op als de keuze actief is */
.type-card:has(.type-card__photo) { overflow: hidden; padding-right: calc(25% + 20px); }
.type-card__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 25%; height: 100%; object-fit: cover; filter: grayscale(.7); opacity: .6; transition: filter .3s, opacity .3s; }
.type-card:hover .type-card__photo, .type-card:has(input:checked) .type-card__photo { filter: none; opacity: 1; }
@media (max-width: 767px) { .type-card:has(.type-card__photo) { padding-right: calc(25% + 14px); } }
.text-block__btn { margin-top: 40px; }

/* ---------- Groepen (gîtes): mogelijkheden, het meer, voor wie ---------- */
/* Voorbeelden van activiteiten: ronde foto met de titel eronder */
.activities__label { margin: 26px 0 22px; font-family: var(--font-head); font-size: 24px; font-weight: 700; color: var(--ink); }
.activities { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; width: 100%; max-width: 1100px; margin: 0; padding: 0; }
.activity { position: relative; }
.activity img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; border-radius: 50%; box-shadow: 0 3px 10px rgba(0, 0, 0, .1); transition: transform .5s ease; }
.activity:hover img { transform: scale(1.05); }
.activity__title { display: block; padding: 22px 4px 0; font-family: var(--font-head); font-size: 23px; font-weight: 700; line-height: 1.25; text-align: center; color: var(--ink); }
@media (max-width: 1024px) { .activities { grid-template-columns: repeat(2, 1fr); max-width: 620px; } }
@media (max-width: 767px) { .activities { gap: 40px 16px; max-width: 440px; } .activity__title { padding: 12px 4px 0; font-size: 18px; } }
/* Introblok: bredere tekst, minder ruimte eronder */
.price-intro--group .price-intro__body { max-width: 560px; }
@media (min-width: 1025px) {
  .price-intro--group .price-intro__note { margin-top: -60px; }
  .price-intro--group { padding-bottom: 60px; }
}
/* Het meer: licht tekstblok dat half over de linkerbovenhoek van de foto valt; bij hover op de foto fadet het weg */
.price-intro--flip { padding-bottom: 70px; }
.price-intro--flip .price-intro__inner { gap: 0; }
.price-intro--flip .price-intro__text { position: relative; z-index: 2; padding: 32px 28px; border-radius: var(--radius); background: var(--tint-1); box-shadow: 0 10px 40px rgba(0, 0, 0, .12); transition: opacity .9s ease; }
.price-intro--flip .price-intro__body { max-width: none; }
.price-intro--flip .price-intro__body p:last-child { margin-bottom: 0; }
@media (min-width: 1025px) {
  .price-intro--flip { padding: 60px 0 110px; }
  .price-intro--flip .price-intro__inner { position: relative; left: calc(-1 * clamp(0px, (100vw - 1100px) / 2, 60px)); max-width: 1000px; grid-template-columns: 145px 435px 1fr; grid-template-rows: 80px auto; align-items: start; }
  .price-intro--flip .price-intro__text { grid-column: 1 / 3; grid-row: 1 / 3; padding: 36px 40px; }
  .price-intro--flip .heading { white-space: nowrap; }
  .price-intro--flip .price-intro__media { grid-column: 2 / 4; grid-row: 2; }
  .price-intro--flip .price-intro__photo { aspect-ratio: 5 / 3; object-position: center 80%; }
}
@media (max-width: 1024px) { .price-intro--flip .price-intro__text { margin: 0 12px -40px; } }
@media (max-width: 767px) {
  .price-intro--flip { padding-bottom: 60px; }
  .price-intro--flip .price-intro__text { padding: 26px 20px; }
  .price-intro--flip .heading { font-size: 26px; }
}
@media (hover: hover) and (min-width: 1025px) {
  .price-intro--flip .price-intro__inner:has(.price-intro__media:hover) .price-intro__text { opacity: 0; pointer-events: none; }
  .price-intro--flip .price-intro__media { transition: transform .9s ease; }
  .price-intro--flip .price-intro__media:hover { transform: scale(1.08); }
}
/* Opsomming in een info-kaart (infoCard met een lijst als tekst) */
.info-card__list { display: inline-block; margin-top: 10px; padding-left: 20px; list-style: disc; text-align: left; }
.info-card__list li { list-style: disc; }
.info-card__list li + li { margin-top: 6px; }
/* Voor wie: info-kaart breed genoeg voor de opsomming, gelijke ruimte boven en onder, labels compacter op mobiel */
.text-block--group { padding-bottom: 150px; }
@media (min-width: 1025px) { .text-block--group .text-block__note { width: min(70%, 860px); } }
@media (max-width: 767px) {
  .text-block--group { padding-bottom: 120px; }
  .text-block--group .tag-list--playful { gap: 18px 8px; max-width: 460px; }
  .text-block--group .tag-list--playful .tag--l { font-size: 18px; padding: 8px 16px; }
  .text-block--group .tag-list--playful .tag--m { font-size: 14px; padding: 6px 13px; }
  .text-block--group .tag-list--playful .tag--s { font-size: 12px; padding: 5px 11px; }
}
@media (max-width: 480px) {
  .text-block--group .tag-list--playful { max-width: 370px; }
  .text-block--group .tag-list--playful li:nth-child(1) { order: 1; }
  .text-block--group .tag-list--playful li:nth-child(4) { order: 2; }
  .text-block--group .tag-list--playful li:nth-child(3) { order: 3; }
  .text-block--group .tag-list--playful li:nth-child(6) { order: 4; }
  .text-block--group .tag-list--playful li:nth-child(2) { order: 5; }
  .text-block--group .tag-list--playful li:nth-child(8) { order: 6; }
  .text-block--group .tag-list--playful li:nth-child(9) { order: 7; }
  .text-block--group .tag-list--playful li:nth-child(5) { order: 8; }
  .text-block--group .tag-list--playful li:nth-child(7) { order: 9; }
}
@media (max-width: 380px) {
  .text-block--group .tag-list--playful { gap: 16px 6px; }
  .text-block--group .tag-list--playful .tag--l { font-size: 16px; padding: 7px 13px; }
  .text-block--group .tag-list--playful .tag--s { font-size: 11px; padding: 4px 8px; }
  .text-block--group .tag-list--playful .tag--m { font-size: 13px; padding: 5px 10px; }
}

/* ---------- Peiling (peiling.njk) ---------- */
.poll { padding: 70px 0 130px; }
.poll__inner { max-width: 880px; }
.poll__text { margin: 0; font-size: 16px; line-height: 27px; color: var(--text); }
.poll__card { position: relative; padding: 44px 48px; border-radius: 24px; background: var(--white); box-shadow: var(--shadow-soft); }
.poll__set { margin: 0 0 26px; padding: 0; border: 0; }
.poll__q { margin: 0; font-family: var(--font-head); font-size: 26px; font-weight: 700; color: var(--ink); }
.poll__hint { margin: 6px 0 10px; color: var(--grey); font-size: 15px; }
.poll__left { display: inline-block; margin: 0 0 20px; padding: 5px 14px; border-radius: 20px; background: rgba(var(--blue-rgb), .08); color: var(--blue); font-size: 14px; font-weight: 600; }
.poll__left.is-done { background: rgba(var(--green-rgb), .35); color: var(--ink); }
.poll__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.poll-opt { position: relative; cursor: pointer; }
.poll-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.poll-opt__tile { position: relative; display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 2px solid var(--tint-2); border-radius: 16px; background: var(--tint-1); color: var(--ink); font-size: 15px; line-height: 1.3; transition: border-color .2s, background .2s, transform .2s, box-shadow .2s; }
.poll-opt__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--blue); transition: background .2s, color .2s; }
.poll-opt__icon svg { width: 22px; height: 22px; }
.poll-opt__rank { position: absolute; top: -10px; right: -10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sun); color: var(--ink); font-family: var(--font-head); font-size: 16px; font-weight: 700; box-shadow: 0 3px 8px rgba(0, 0, 0, .15); transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.poll-opt.is-full .poll-opt__tile { opacity: .45; }
.poll-opt.is-full:hover .poll-opt__tile { transform: none; border-color: var(--tint-2); }
.poll-opt:hover .poll-opt__tile { border-color: rgba(var(--blue-rgb), .35); transform: translateY(-2px); }
.poll-opt input:focus-visible + .poll-opt__tile { outline: 2px solid var(--blue); outline-offset: 2px; }
.poll-opt input:checked + .poll-opt__tile { border-color: var(--blue); background: rgba(var(--blue-rgb), .07); box-shadow: 0 6px 18px rgba(var(--blue-rgb), .15); }
.poll-opt input:checked + .poll-opt__tile .poll-opt__icon { background: var(--blue); color: var(--white); }
.poll-opt input:checked + .poll-opt__tile .poll-opt__rank { transform: scale(1); }
.poll__field { margin-bottom: 18px; }
.poll__field textarea, .poll__field input { width: 100%; }
.poll__empty { margin: 0 0 14px; color: #c0392b; font-size: 14px; }
.poll__submit { margin-top: 6px; }
.poll__thanks { text-align: center; }
.poll__heart { display: inline-grid; place-items: center; width: 64px; height: 64px; margin-bottom: 10px; border-radius: 50%; background: rgba(var(--blue-rgb), .1); color: var(--blue); }
.poll__heart svg { width: 30px; height: 30px; }
.poll__thanks-title { margin: 0 0 12px; font-family: var(--font-head); font-size: 34px; color: var(--ink); }
.poll__thanks .poll__text { max-width: 600px; margin: 0 auto; }
.poll__results { margin: 30px 0 0; padding-top: 30px; border-top: 1px solid var(--tint-2); text-align: left; }
.poll__results .poll__q { font-size: 22px; text-align: center; }
.poll__results .poll__hint { text-align: center; margin-bottom: 4px; }
.poll__note { margin: 0 0 18px; text-align: center; font-size: 13px; color: var(--grey); }
.poll-bars { margin: 0; padding: 0; list-style: none; }
.poll-bar { display: grid; grid-template-columns: 32px minmax(0, 1.2fr) 2fr 48px; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; color: var(--ink); }
.poll-bar__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint-1); color: var(--blue); }
.poll-bar__icon svg { width: 17px; height: 17px; }
.poll-bar__track { height: 12px; border-radius: 6px; background: var(--tint-2); overflow: hidden; }
.poll-bar__fill { display: block; width: 0; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--blue), var(--sky)); transition: width 1.2s cubic-bezier(.2, .8, .2, 1); }
.poll-bar__pct { text-align: right; font-weight: 600; color: var(--blue); }
@media (max-width: 1024px) { .poll__options { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .poll { padding: 60px 0 90px; }
  .poll__card { padding: 30px 20px; border-radius: 20px; }
  .poll__q { font-size: 22px; }
  .poll__options { grid-template-columns: 1fr 1fr; gap: 12px 10px; }
  .poll-opt__tile { flex-direction: column; justify-content: center; gap: 7px; padding: 12px 8px; text-align: center; font-size: 13.5px; }
  .poll-opt__icon { width: 36px; height: 36px; }
  .poll-opt__rank { top: -8px; right: -6px; width: 26px; height: 26px; font-size: 14px; }
  .poll-bar { grid-template-columns: 28px minmax(0, 1fr) 44px; row-gap: 4px; }
  .poll-bar__track { grid-column: 2 / 4; grid-row: 2; }
  .poll-bar__icon { grid-row: 1 / 3; }
}
@media (prefers-reduced-motion: reduce) { .poll-opt__tile, .poll-opt__rank, .poll-bar__fill { transition: none; } }