/*
 * Homepage-variant (templates/home-variant.php). Kleuren en letter van de site (main.css):
 * donkergroen --color-accent, logogeel --color-brand-yellow, zachtgeel #fbf7e3 / #ffeaac, Red Hat Display.
 */

.hv { --hv-cream: #fbf7e3; --hv-butter: #ffeaac; --hv-ease: cubic-bezier(.22, 1, .36, 1); overflow-x: clip; }
.hv-cover { display: block; width: 100%; height: 100%; object-fit: cover; }

.hv em { font-style: italic; font-weight: 600; color: var(--color-brand-yellow); }
.hv-h2 { margin: 0 0 1.25rem; font-family: var(--font-heading); font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 750; line-height: 1.08; letter-spacing: -.025em; text-wrap: balance; }
.hv-eyebrow { margin: 0 0 .5rem; font-family: var(--font-body); letter-spacing: normal; color: var(--color-accent); font-size: 1.0625rem; font-weight: 600; }
.hv-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-accent); font-weight: 700; text-decoration: none; }
.hv-link::after { content: "→"; transition: transform .3s var(--hv-ease); }
.hv-link:hover { color: var(--btn-fill-primary, #146027); }
.hv-link:hover::after { transform: translateX(4px); }

/* In beeld komen (alleen met JavaScript en zonder "minder beweging", zie de template) */
.hv-motion [data-hv-reveal] { opacity: 0; transform: translateY(1.5rem); transition: opacity .7s var(--hv-ease), transform .9s var(--hv-ease); }
.hv-motion [data-hv-reveal].is-in { opacity: 1; transform: none; }

/* 1. Grote foto */

/* Openingseffect: de foto in de vorm van de aar, die groeit tot de hele hero gevuld is (--hp loopt van 0 naar 1) */

/* Hover van de "Boek nu"-sticker (zoals in het groene blok); hier specifieker, anders wint de inkomst-animatie */

/* ==== TEST hero B (?hero=b) ==== */
.hv-heroB { --p: 0; --fill: clamp(0, calc((var(--p) - .35) * 4), 1); --b-cream: #f5ecd6; --b-green: #2f5a2b; position: relative; height: 145svh; background: var(--b-cream); background: color-mix(in srgb, #fff calc(clamp(0, (var(--p) - .58) * 20, 1) * 100%), var(--b-cream)); }
.hv-heroB__sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.hv-heroB__aar { position: absolute; inset: 0;
  --size: auto calc(76svh + var(--p) * var(--p) * 900svh);
  --pos: calc((1 - var(--p)) * -5rem + var(--p) * 50%) calc((1 - var(--p)) * 108% + var(--p) * 50%);
  -webkit-mask: url(../images/aar-schuin.svg?v=2) no-repeat var(--pos) / var(--size); mask: url(../images/aar-schuin.svg?v=2) no-repeat var(--pos) / var(--size); }
/* Aan het eind wordt het hele vlak wit, precies op het moment dat de witte introductie eronder in beeld schuift */
.hv-heroB__aar--blank { background: #fff; opacity: clamp(0, calc(var(--p) * 8), 1);
  -webkit-mask-image: url(../images/aar-schuin.svg?v=2), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
  mask-image: url(../images/aar-schuin.svg?v=2), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
  -webkit-mask-size: var(--size), 100% 100%; mask-size: var(--size), 100% 100%;
  -webkit-mask-position: var(--pos), 0 0; mask-position: var(--pos), 0 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }

.hv-heroB__inner { position: relative; display: grid; place-items: center; height: 100%; padding-bottom: 30svh; text-align: center; }
.hv-heroB__title { max-width: 22ch; margin: 0; color: var(--b-green); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.75rem, 6.4vw, 5.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.01em; text-wrap: balance;
  opacity: clamp(0, calc(1 - var(--p) * 2.2), 1); transform: translateY(calc(var(--p) * -10svh)); }

/* Kopbalk bij hero B: in de crèmekleur, "Boek nu" als witte ronde knop met de groene aar */
/* Kopbalk transparant boven de hero: de hero schuift onder de balk door (balk is 89px, mobiel 73px hoog) */
body.theme-b .site-header:not(.is-stuck) { background: transparent; box-shadow: none; border-bottom-color: transparent; }
html.hvb-under-header body .site-header.is-stuck { background: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
body.theme-b .site-header.is-stuck { background: rgb(255 255 255 / .94); box-shadow: 0 2px 10px rgb(27 36 28 / .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: transparent; }
.hvb.hv-heroB { margin-top: -89px; }
/* Balk over de volle breedte: logo en menu dichter bij de zijkanten, gelijk met de rand van de hero-foto */
body.theme-b .site-header__inner { width: auto; margin-inline: clamp(.75rem, 1.5vw, 1.25rem); }
@media (max-width: 63.99rem) { .hvb.hv-heroB { margin-top: -73px; } }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta) { flex-direction: column; justify-content: center; gap: .3rem; width: 7rem; height: 7rem; min-height: 0; margin-block: -1.25rem; top: 1.5rem; padding: 1.5rem 0 0; border-radius: 50%; background: #fff url(../images/aar-geel.svg) no-repeat 50% 2.05rem / auto 1.5rem; color: #e39a1e; font-size: .8125rem; font-weight: 700; box-shadow: 0 8px 20px -10px rgb(10 31 14 / .35); }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta) .site-cta-icon { display: none; }
/* Draaiende tekst langs de rand van de ronde knop */
body.theme-b .site-cta-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; animation: hv-spin 16s linear infinite; pointer-events: none; }
body.theme-b .site-cta-ring text { fill: var(--b-green, #2f5a2b); font-size: 17px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta):hover .site-cta-ring { animation-duration: 6s; }
@media (prefers-reduced-motion: reduce) { body.theme-b .site-cta-ring { animation: none; } }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta):hover { background-color: #fff; color: #c97f0d; }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta)::before { display: none; }
@media (max-width: 63.99rem) { body.theme-b .site-header__actions > .site-header__cta { width: 5.25rem; height: 5.25rem; margin-block: -.5rem; top: .85rem; padding-top: 1.2rem; background-position: 50% 1.45rem; background-size: auto 1.15rem; font-size: .625rem; } }
/* Smal scherm: de aar begint verder links, zoals in het ontwerp half buiten beeld */
@media (max-width: 599px) { .hv-heroB__aar { --pos: calc((1 - var(--p)) * -9rem + var(--p) * 50%) calc((1 - var(--p)) * 118% + var(--p) * 50%); } }
@media (prefers-reduced-motion: reduce) { .hv-heroB { height: auto; } .hv-heroB__sticky { position: relative; }  }
/* De introductie verschijnt in het witte vlak zodra dat (bijna) helemaal wit is */

/* TEST hero (versie 4): titel links, foto rechts in de vorm van een korrel uit de aar, een lichte aar linksboven.
   Bij het scrollen groeit de witte aar (zie .hv-heroB) en verschijnt de introductie met de fotocollage. */
.hvb.hv-heroB { --fill: clamp(0, calc((var(--p) - .35) * 2.5), 1); height: max(100svh, 40rem); }
/* Testhero staat niet vast: hij scrolt gewoon weg en wordt intussen wit, zo loopt hij over in de witte introductie */
.hvb .hv-heroB__sticky { position: relative; top: auto; height: 100%; overflow: visible; }
/* De keuzelijst met personen mag onder de hero uitsteken (over de introductie heen) */
.hvb.hv-heroB { position: relative; z-index: 2; overflow-x: clip; }
/* De appartementen schuiven al over het (dan helemaal witte) eind van de hero, zodat er geen groot wit gat onder de introductie zit */
/* De aar uit het ontwerp (assets/images/aar-hero.svg) staat licht linksboven; bij het scrollen wordt hij wit en groeit hij tot alles wit is */
.hvb .hv-heroB__aar--blank { opacity: 1; background: color-mix(in srgb, #fff calc(clamp(0, var(--p) * 4, 1) * 100%), #fff6e1);
  --size: auto calc(135% + var(--p) * var(--p) * 900svh); --pos: calc(var(--p) * 50%) calc(var(--p) * 50%);
  -webkit-mask-image: url(../images/aar-hero.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
  mask-image: url(../images/aar-hero.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill))); }
@media (max-width: 599px) { .hvb .hv-heroB__aar--blank { --size: auto calc(75% + var(--p) * var(--p) * 900svh); } }
.hvc-hero__aar { display: none; }
.hvb .hv-heroB__aar--blank { z-index: 0; }
.hvb .hv-heroB__inner, .hvb .hvc-hero__photo { z-index: 1; }
.hvb.is-growing .hv-heroB__aar--blank { z-index: 2; }
.hvb .hv-heroB__inner { align-content: center; justify-items: start; padding-bottom: 0; text-align: left; }
/* Pijl onder de titel: wipt zacht op en neer, verdwijnt zodra je scrolt */

@keyframes hvc-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

.hvc-hero__title { max-width: 13ch; font-size: clamp(2.75rem, 5.4vw, 5rem); line-height: 1.02; }
/* Foto in de hero-vorm uit het ontwerp (assets/images/hero-vorm.svg): afgeronde hoeken, linksonder een grote boog */
.hvc-hero__photo { position: absolute; top: clamp(6.25rem, 12svh, 7.5rem); right: clamp(.75rem, 1.5vw, 1.25rem); width: min(58%, calc((100svh - 9rem) * 764 / 618)); aspect-ratio: 764 / 618;
  -webkit-mask: url(../images/hero-vorm.svg) no-repeat 0 0 / 100% 100%; mask: url(../images/hero-vorm.svg) no-repeat 0 0 / 100% 100%;
  opacity: clamp(0, calc(1 - (var(--p) - .45) * 3), 1); }
.hvc-intro { padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem); background: #fff; }
.hvc-intro__grid { display: grid; gap: 2.5rem clamp(2.5rem, 6vw, 5.5rem); align-items: center; }
.hvc-intro__collage { position: relative; width: min(100%, 31rem); aspect-ratio: 440 / 290; }
.hvc-intro__collage figure { position: absolute; margin: 0; }
.hvc-intro__back { top: 0; right: 0; width: 55%; height: 95%; overflow: hidden; border-radius: .5rem; box-shadow: 0 0 0 1px rgb(18 61 28 / .06); }
/* Voorste foto: capsulevorm uit het ontwerp (262 × 343, volledig afgeronde boven- en onderkant) met een witte rand */
.hvc-intro__front { top: 6%; left: 2%; height: 96%; aspect-ratio: 262 / 343; transform: rotate(-8deg); overflow: hidden; border: 6px solid #fff; border-radius: 999px; box-shadow: 0 10px 24px -14px rgb(10 31 14 / .35); }
.hvc-intro__front > span { display: block; height: 100%; }
.hvc-intro__title { max-width: 26ch; margin: 0 0 1.25rem; color: #2f5a2b; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2rem, 3.4vw, 3.25rem); font-weight: 600; line-height: 1.08; text-wrap: balance; }
.hvc-intro__body p:not(.hvc-intro__title) { max-width: 62ch; margin: 0; font-size: .9375rem; line-height: 1.75; text-wrap: pretty; }
@media (min-width: 900px) { .hvc-intro__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } }
@media (max-width: 899px) {
  .hvb .hv-heroB__inner { align-items: start; padding-top: calc(73px + 2rem); }
  .hvc-hero__photo { top: auto; bottom: 2rem; left: auto; right: var(--gutter); width: calc(100% - 2 * var(--gutter)); transform: none; }
  .hvc-intro__collage { width: min(100%, 22rem); margin-inline: auto; }
}

/* Introductie en appartementen in de testvariant */

.hvb-apts { --b-orange: #c45a1e; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(4rem, 9vw, 7rem); background: #fff; }
.hvb-apts__head { display: grid; gap: 1.25rem clamp(2rem, 6vw, 5rem); align-items: center; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.hvb-apts__title { margin: 0; color: #2f5a2b; font-family: "Playfair Display", Georgia, serif; font-size: clamp(2.25rem, 4.4vw, 3.6rem); font-weight: 600; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
.hvb-apts__title em { color: var(--color-brand-yellow); font-style: italic; font-weight: 600; }
.hvb-apts__head p:not(.hvb-apts__title) { margin: 0; font-size: .9375rem; line-height: 1.75; text-wrap: pretty; }
.hvb-cards { display: grid; gap: 2.5rem clamp(1.25rem, 3vw, 2.5rem); align-items: start; }
.hvb-card { display: flex; flex-direction: column; gap: .5rem; color: var(--color-text); text-decoration: none; }
.hvb-card__media { position: relative; display: block; aspect-ratio: 4 / 3.4; margin-bottom: .5rem; overflow: hidden; border-radius: .75rem; background: #f5ecd6; }
.hvb-card__media img { transition: transform .7s var(--hv-ease); }
.hvb-card:hover .hvb-card__media img { transform: scale(1.04); }
/* Bij hover: de ronde "Boek nu"-knop (zoals in de kopbalk) midden op de foto */
.hvb-card__sticker { position: absolute; top: var(--cy, 50%); left: var(--cx, 50%); display: grid; place-items: center; width: 7rem; height: 7rem; padding-top: 1.5rem; border-radius: 50%; background: #fff url(../images/aar-geel.svg) no-repeat 50% 2.05rem / auto 1.5rem; color: #e39a1e; font-size: .8125rem; font-weight: 700; box-shadow: 0 10px 24px -10px rgb(10 31 14 / .45); opacity: 0; transform: translate(-50%, -50%) scale(.6) rotate(-20deg); transition: opacity .3s var(--hv-ease), transform .5s var(--hv-ease); pointer-events: none; }
.hvb-card__sticker .site-cta-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; animation: hv-spin 16s linear infinite; }
.hvb-card__sticker .site-cta-ring text { fill: #2f5a2b; font-size: 17px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.hvb-card:is(:hover, :focus-visible) .hvb-card__sticker { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); }
/* Met een muis volgt de knop de cursor over de foto (script in de template); de gewone cursor verdwijnt daar */
@media (hover: hover) and (pointer: fine) { .hvb-card__media { cursor: none; } }
@media (prefers-reduced-motion: reduce) { .hvb-card__sticker { transition: opacity .2s; transform: translate(-50%, -50%); } .hvb-card__sticker .site-cta-ring { animation: none; } }
.hvb-card__badge { position: absolute; top: .875rem; left: .875rem; padding: .3rem .7rem; border-radius: 999px; background: #fff; font-size: .8125rem; font-weight: 600; }
.hvb-card__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hvb-card__title { font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 600; line-height: 1.15; }
.hvb-card__arrow { flex: none; color: var(--b-orange); transition: transform .3s var(--hv-ease); }
.hvb-card:hover .hvb-card__arrow { transform: translate(3px, -3px); }
.hvb-card__text { font-size: .875rem; line-height: 1.65; }
.hvb-card__more { margin-top: .25rem; color: var(--b-orange); font-size: .8125rem; font-weight: 700; text-decoration: underline; text-underline-offset: .3em; }
.hvb-dogs { display: flex; align-items: center; gap: .875rem; width: fit-content; max-width: 100%; margin: clamp(2.5rem, 6vw, 4rem) auto 0; padding: .875rem 1.75rem; border-radius: 999px; background: #ffeaac; }
.hvb-dogs__icon { flex: none; color: #2f5a2b; }
.hvb-dogs p { margin: 0; font-size: .8125rem; line-height: 1.4; }
.hvb-dogs strong { display: block; color: #2f5a2b; font-family: "Playfair Display", Georgia, serif; font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 600; }
@media (min-width: 900px) {
  .hvb-apts__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hvb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Middelste kaart verspringt, zoals in het ontwerp */
  .hvb-card:nth-child(2) { margin-top: clamp(2rem, 5vw, 4.5rem); }
}
/* ==== TEST versie 5 (visuele update): groene knop in de balk, lichtere schreefkoppen, crème appartementenblok ==== */
.hvb, .hvc-intro, .hvb-apts { --b-olive: #6a8f3d; --b-ink: #33512b; }
/* "Boek nu" als groene knop met een pijltje (geen ronde knop meer) */
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta) { flex-direction: row; gap: .6rem; width: auto; height: auto; min-height: 2.75rem; margin: 0; top: auto; padding: .75rem 1.35rem; border-radius: .4rem; background: #6a8f3d; color: #fff; font-size: .9375rem; font-weight: 600; box-shadow: none; }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta)::after { content: ""; width: .85rem; height: .85rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta):hover { background-color: #5a7c32; color: #fff; }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta):hover::after { transform: translate(3px, -3px); }
body.theme-b .site-header .site-cta-ring { display: none; }
@media (max-width: 63.99rem) { body.theme-b .site-header__actions > .site-header__cta { width: auto; height: auto; margin: 0; top: auto; padding: .6rem 1rem; background-image: none; font-size: .875rem; } }
body.theme-b .site-nav__link { font-size: .9375rem; }
/* Hero: titel hoger in beeld, iets lichter */
.hvb .hv-heroB__inner { align-content: start; padding-top: calc(89px + clamp(2.5rem, 9svh, 5.5rem)); }
.hvb .hvc-hero__title { color: var(--b-ink); font-weight: 500; }
/* Introductie: lichte bogen van de aar op de achtergrond, lichtere titel */
.hvc-intro { position: relative; overflow: hidden; padding-block: clamp(4rem, 10vw, 8rem); }
/* Achtergrondvormen uit het ontwerp (licht oranje, 9% dekking): linksboven en rechtsonder */
.hvc-intro::before, .hvc-intro::after { content: ""; position: absolute; background: no-repeat center / contain; pointer-events: none; }
.hvc-intro::before { top: 0; left: 0; width: clamp(22rem, 46vw, 52rem); aspect-ratio: 831 / 908; background-image: url(../images/intro-boog-links.svg); }
.hvc-intro::after { right: 0; bottom: 0; width: clamp(18rem, 37vw, 42rem); aspect-ratio: 669 / 407; background-image: url(../images/intro-boog-rechts.svg); }
.hvc-intro > .container { position: relative; z-index: 1; }
.hvc-intro__title { color: var(--b-ink); font-weight: 500; font-size: clamp(2.25rem, 3.6vw, 3.25rem); line-height: 1.1; max-width: 24ch; }
.hvc-intro__body p:not(.hvc-intro__title) { color: var(--b-ink); }
/* Appartementen: crème vlak, kop gecentreerd, kaarten met rechte hoeken */
.hvb-apts { --b-orange: #6a8f3d; padding: clamp(4rem, 9vw, 7rem) 0 clamp(4rem, 9vw, 7rem); background: #f5ecd6; }
.hvb-apts .hvb-apts__head { display: block; max-width: 46rem; margin: 0 auto clamp(2.5rem, 6vw, 4.5rem); text-align: center; }
.hvb-apts .hvb-apts__title { max-width: 17ch; margin: 0 auto 1.25rem; color: var(--b-ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.5rem, 4.6vw, 3.75rem); font-weight: 500; line-height: 1.05; }
.hvb-apts .hvb-apts__title em { font-weight: 500; }
.hvb-apts .hvb-apts__head p:not(.hvb-apts__title) { font-size: .875rem; line-height: 1.75; }
.hvb-apts .hvb-card__title { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.75rem, 2.4vw, 2.125rem); font-weight: 500; }
.hvb-apts .hvb-card__more { color: #d7a21d; text-decoration-color: currentColor; }
.hvb-apts .hvb-dogs { background: #fff; }
.hvb-apts .hvb-dogs strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.375rem, 2vw, 1.625rem); font-weight: 500; }
@media (min-width: 900px) { .hvb-apts .hvb-apts__head { grid-template-columns: none; } }
/* ==== TEST versie 6: hero met zoekbalk onder de titel, grotere foto, lichte aar over de foto heen ==== */
.hvb .hv-heroB__inner { align-content: center; padding-top: 89px; }
.hvb .hvc-hero__title { max-width: 13ch; font-size: clamp(3rem, 6vw, 6rem); line-height: 1; }
.hvb { --edge: clamp(1.25rem, 5.2vw, 5.5rem); }
.hvb .hvc-hero__photo { top: 15%; right: var(--edge); width: min(53%, calc(75svh * 764 / 618)); }
.hvb .hv-heroB__inner { width: auto; margin-inline: var(--edge); }
body.theme-b .site-header__inner { margin-inline: clamp(1.25rem, 5.2vw, 5.5rem); }
/* De lichte aar ligt over de linkerrand van de foto, titel en zoekbalk liggen daar weer bovenop */
.hvb .hv-heroB__aar--blank { z-index: 2; }
.hvb .hv-heroB__inner { z-index: 3; }
.hvc-search { display: flex; align-items: stretch; width: min(100%, 33rem); margin-top: clamp(1.75rem, 4vh, 2.75rem); padding: .55rem; border-radius: .5rem; background: linear-gradient(90deg, #3f9b45, #6a8f3d 55%); box-shadow: 0 10px 24px -14px rgb(10 31 14 / .45); opacity: clamp(0, calc(1 - var(--p) * 3), 1); }
@media (max-width: 899px) {
  .hvb .hv-heroB__inner { align-content: start; padding-top: calc(73px + 1.75rem); }
  .hvb .hvc-hero__photo { top: auto; bottom: 1.5rem; right: var(--edge); width: calc(100% - 2 * var(--edge)); max-height: 42svh; }
    }
/* Echte Tommy-zoekbalk in de hero, opgemaakt als het ontwerp: wit vlak met datums en personen, rechts "Zoeken" op het groen */
.hvc-search { display: block; width: min(100%, 39rem); }
.hvc-search .b-tommy { padding: 0; }
.hvc-search .b-tommy > .container { width: 100%; margin: 0; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]::before, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]::after { display: none; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input { padding: 0 .5rem 0 1.4rem !important; text-align: left; background: transparent none !important; box-shadow: none !important; color: #33512b; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-end input { padding-left: 1rem !important; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input::placeholder { color: #33512b; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left button.tommy-zeb-btn.tommy-zeb-update { width: auto; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn { color: #33512b !important; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini h2, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini :is(.tommy-zeb-date-begin-label, .tommy-zeb-date-end-label) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date { order: 1; flex: 1 1 0; min-width: 0; border-radius: .35rem 0 0 .35rem; background: #fff; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories { order: 2; position: relative; flex: 1 1 0; min-width: 0; border-left: 1.5px dotted rgb(51 81 43 / .45); border-radius: 0 .35rem .35rem 0; background: #fff; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update { order: 3; flex: none; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period { display: flex; align-items: center; gap: 0; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period > * { flex: 1; min-width: 0; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period input, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini :is(.tommy-zeb-date-begin-choice, .tommy-zeb-date-end-choice) input { height: 3.75rem; padding: 0 .5rem 0 1.4rem; border: 0; border-radius: 0; background: transparent none !important; color: #33512b; font-size: .9375rem; box-shadow: none; cursor: pointer; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-end-choice input { padding-left: .75rem; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-end { position: relative; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-end::before { content: "&"; position: absolute; left: -.15rem; top: 50%; color: #33512b; transform: translateY(-50%); pointer-events: none; }
/* Nog geen aankomstdatum: één veld "Aankomst & Vertrek" (het vertrekveld klapt in, de aankomst neemt de hele breedte) */
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-begin { position: relative; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-end { flex: 0 0 0; opacity: 0; overflow: hidden; pointer-events: none; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-begin input::placeholder { color: transparent; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-begin::after { content: "Aankomst & Vertrek"; position: absolute; left: 1.4rem; top: 50%; color: #33512b; font-size: .9375rem; white-space: nowrap; transform: translateY(-50%); pointer-events: none; }
/* Zijn er datums gekozen, dan een streepje tussen de twee datums */
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(input:not(:placeholder-shown)) .tommy-zeb-date-end::before { content: "–"; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini :is(.tommy-zeb-period input)::placeholder { color: #33512b; opacity: 1; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse { height: 3.75rem; padding-right: 1.1rem; border: 0; border-radius: 0 .35rem .35rem 0; background: transparent; box-shadow: none !important; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn { padding-left: 1.4rem !important; background-image: none !important; color: #33512b; font-size: .9375rem; font-weight: 400; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total { background: #f5ecd6; color: #33512b; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list { z-index: 5; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn:hover { display: inline-flex; align-items: center; gap: 1.4rem; height: 3.75rem; margin: 0; padding: 0 1.4rem 0 1.75rem; border: 0; border-radius: .35rem; background: transparent; color: #fff; font-size: .9375rem; font-weight: 500; box-shadow: none; transform: none; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn::before { display: none; }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn::after { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s var(--hv-ease); }
@media (max-width: 899px) {
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { flex-wrap: wrap; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date { flex: 1 1 100%; border-radius: .35rem .35rem 0 0; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories { flex: 1 1 100%; border-left: 0; border-top: 1.5px dotted rgb(51 81 43 / .45); border-radius: 0 0 .35rem .35rem; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update { flex: 1 1 100%; }
  /* Zoeken over de volle breedte, pijl rechts; ook bij hover even hoog (anders groeit het blok) */
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn:hover, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left button.tommy-zeb-btn.tommy-zeb-update { justify-content: space-between; width: 100%; height: 3.25rem; padding: 0 1.4rem; }
}
/* Mobiel: titel, zoekbalk en foto gewoon onder elkaar (de hero groeit mee met de inhoud) */
@media (max-width: 899px) {
  .hvb.hv-heroB { height: auto; min-height: 100svh; }
  .hvb .hv-heroB__sticky { display: flex; flex-direction: column; min-height: 100svh; }
  .hvb .hv-heroB__inner { height: auto; align-content: start; padding: calc(73px + 1.5rem) 0 1.75rem; }
  .hvb .hvc-hero__photo { position: relative; inset: auto; width: auto; max-height: none; margin: auto var(--edge) 1.5rem; transform: none; }
}
/* Groene knoppen in de testvariant: effen olijfgroen, bij hover schuift het groene verloop erin */
.hvc-search, body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta) {
  background: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 50%, #6a8f3d 100%) 100% 0 / 200% 100% no-repeat; background-color: #6a8f3d;
  transition: background-position .5s cubic-bezier(.22, 1, .36, 1), box-shadow .3s cubic-bezier(.22, 1, .36, 1); }
.hvc-search:hover, .hvc-search:focus-within, body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta):is(:hover, :focus-visible) { background-position: 0 0; background-color: #6a8f3d; }
/* Nieuwe stijl voor alle knoppen en de Tommy-widget in de testvariant: olijfgroen, kleine ronding, bij hover schuift het groene verloop erin */
body.theme-b { --btn-fill-soft: #f5ecd6; }
body.theme-b .b-tommy { --t-accent: #6a8f3d; --t-accent-strong: #33512b; --t-accent-soft: #f5ecd6; --t-ink: #33512b; --t-border: #e3dcc6; --t-radius: .5rem; --t-radius-sm: .4rem; --t-field-radius: .4rem; --t-focus: 0 0 0 3px rgb(106 143 61 / .35); --t-free: #e7efd9; --t-free-ink: #33512b; }
body.theme-b :is(.button:not(.button--secondary), .b-tommy .tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *, .hvc-search tommy-confirm-update *), .b-tommy #TommyBookingSupport .tbs-btn-success) {
  border-radius: .4rem; color: #fff;
  background: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 50%, #6a8f3d 100%) 100% 0 / 200% 100% no-repeat; background-color: #6a8f3d;
  transition: background-position .5s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1); }
body.theme-b :is(.button:not(.button--secondary), .b-tommy .tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *, .hvc-search tommy-confirm-update *), .b-tommy #TommyBookingSupport .tbs-btn-success):is(:hover, :focus-visible) { background-position: 0 0; background-color: #6a8f3d; color: #fff; }
body.theme-b :is(.button, .b-tommy .tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), .b-tommy #TommyBookingSupport .tbs-btn-success)::before { display: none; }
/* Tweede knop: olijfgroene rand, bij hover een crème vlak */
body.theme-b .button--secondary { border-radius: .4rem; box-shadow: inset 0 0 0 1.5px #6a8f3d; color: #33512b; transition: background-color .3s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1); }
body.theme-b .button--secondary:is(:hover, :focus-visible) { background-color: #f5ecd6; color: #33512b; }
/* Plus/min bij de personen: crème blokjes, olijfgroen bij hover */
body.theme-b .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-range { border-radius: .4rem; }
body.theme-b .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list { border-color: #e3dcc6; border-radius: .5rem; }
/* Datumkiezer in dezelfde kleuren */
body.theme-b .pika-single { border-radius: .5rem; }
body.theme-b :is(.pika-button:hover, .pika-row.pick-whole-week:hover .pika-button, .is-inrange .pika-button, .ks-preview .pika-button) { background: #f5ecd6; color: #33512b; }
body.theme-b .ks-preview-end .pika-button { background: #e9dcb8; color: #33512b; }
body.theme-b .is-today .pika-button { color: #33512b; box-shadow: inset 0 0 0 1px #6a8f3d; }
body.theme-b :is(.is-selected, .is-startrange, .is-endrange, .is-startrange.is-disabled, .is-endrange.is-disabled) .pika-button { background: #6a8f3d; color: #fff; box-shadow: none; }
/* ==== TEST versie 7: grote foto in een afgerond vlak, witte titel en zoekbalk linksonder op de foto, crème aar rechts over de foto ==== */
.hvb { --frame-top: calc(89px + .75rem); --frame-bottom: clamp(1.25rem, 6svh, 4rem); --frame-pad: clamp(1.5rem, 3.4vw, 4rem); }
.hvb.hv-heroB { height: max(100svh, 40rem); }
.hvb .hv-heroB__sticky { position: relative; height: 100%; }
.hvb .hvc-hero__photo { position: absolute; inset: var(--frame-top) var(--edge) var(--frame-bottom); z-index: 1; width: auto; max-height: none; margin: 0; aspect-ratio: auto; overflow: hidden; border-radius: 1rem; -webkit-mask: none; mask: none; transform: none; }
/* Zacht donker verloop linksonder, zodat de witte titel goed leesbaar is */
.hvb .hvc-hero__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(20deg, rgb(10 31 14 / .72) 0%, rgb(10 31 14 / .4) 38%, rgb(10 31 14 / .1) 60%, transparent 75%); pointer-events: none; }
/* De aar ligt in het crème van de pagina rechts over de foto, afgesneden door de rand van de foto; bij het scrollen groeit hij tot alles wit is */
.hvb .hv-heroB__aar--blank { inset: var(--frame-top) var(--edge) var(--frame-bottom); z-index: 2; border-radius: 1rem;
  background: color-mix(in srgb, #fff calc(clamp(0, var(--p) * 4, 1) * 100%), var(--b-cream));
  /* Groot en bovenaan uitgelijnd zoals het ontwerp, maar nooit breder dan ruim de helft van de foto (anders komt hij over de titel);
     rechts valt er een stukje buiten de rand. Maten via cqw/cqh van .hv-heroB__sticky. */
  --fw: calc(100cqw - 2 * var(--edge)); --fh: calc(100cqh - var(--frame-top) - var(--frame-bottom));
  --ah: min(var(--fh) * 1.27, var(--fw) * .54 * 1139 / 1014); --aw: calc(var(--ah) * 1014 / 1139);
  --size: auto calc(var(--ah) + var(--p) * var(--p) * 900svh);
  --pos: calc((1 - var(--p)) * (var(--fw) - var(--aw) * .87) + var(--p) * 50%) calc(var(--p) * 50%); }
.hvb .hv-heroB__sticky { container-type: size; }
.hvb .hv-heroB__inner { position: absolute; inset: auto var(--edge) calc(var(--frame-bottom) + var(--frame-pad)); z-index: 3; display: block; width: auto; height: auto; margin: 0; padding: 0 var(--frame-pad); }
.hvb .hvc-hero__title { max-width: 13ch; color: #fff; font-size: clamp(2.75rem, 5.2vw, 5.75rem); font-weight: 600; line-height: 1; text-shadow: 0 1px 2px rgb(10 31 14 / .45), 0 2px 28px rgb(10 31 14 / .5); }
.hvb .hvc-search { margin-top: clamp(1.5rem, 4svh, 2.5rem); }
@media (max-width: 63.99rem) { .hvb { --frame-top: calc(73px + .5rem); } }
@media (max-width: 899px) {
  .hvb { --frame-bottom: 1rem; --frame-pad: 1rem; }
  .hvb.hv-heroB { height: max(100svh, 44rem); min-height: 0; }
  .hvb .hv-heroB__sticky { display: block; min-height: 0; }
  .hvb .hvc-hero__photo { position: absolute; inset: var(--frame-top) var(--edge) var(--frame-bottom); margin: 0; }
  .hvb .hvc-hero__photo::after { background: linear-gradient(0deg, rgb(10 31 14 / .78) 0%, rgb(10 31 14 / .55) 38%, rgb(10 31 14 / .15) 62%, transparent 78%); }
  /* Op smal scherm een kleinere aar rechtsboven, zodat hij niet achter de titel en zoekbalk komt */
  .hvb .hv-heroB__aar--blank { --size: auto calc(40% + var(--p) * var(--p) * 900svh); --pos: calc(130% - var(--p) * 80%) calc(0% + var(--p) * 50%); }
  .hvb .hv-heroB__inner { padding: 0 var(--frame-pad); }
  .hvb .hvc-hero__title { font-size: clamp(2.5rem, 10vw, 3.5rem); }
}
/* Boekvenster in de testvariant: velden even hoog als de zoekbalk in de hero, Zoeken met de pijl rechts */
body.theme-b .booking-overlay .b-tommy { --t-control: 3.75rem; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update { display: flex; align-items: center; justify-content: space-between; padding: 0 1.4rem 0 1.75rem; font-size: .9375rem; font-weight: 500; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update::after { content: ""; flex: none; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); will-change: transform; backface-visibility: hidden; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update:is(:hover, :focus-visible)::after { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update::after { transition: none; } }
/* Labels in het boekvenster precies als in de zoekbalk van de hero: geen icoontjes, links uitgelijnd, "Aankomst & Vertrek" als één veld */
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]::before { display: none; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input { padding: 0 .5rem 0 1.4rem !important; text-align: left; background-image: none !important; color: #33512b; font-size: .9375rem; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-end input { padding-left: 1rem !important; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input::placeholder { color: #33512b; opacity: 1; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-end { position: relative; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-end::before { content: "&"; position: absolute; z-index: 1; left: -.15rem; top: 50%; color: #33512b; font-size: .9375rem; transform: translateY(-50%); pointer-events: none; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(input:not(:placeholder-shown)) .tommy-zeb-date-end::before { content: "–"; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-begin { position: relative; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]:has(.tommy-zeb-date-begin input:placeholder-shown) { grid-template-columns: minmax(0, 1fr) 0; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-end { opacity: 0; overflow: hidden; pointer-events: none; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-begin input::placeholder { color: transparent; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-begin::after { content: "Aankomst & Vertrek"; position: absolute; z-index: 1; left: 1.4rem; top: 50%; color: #33512b; font-size: .9375rem; white-space: nowrap; transform: translateY(-50%); pointer-events: none; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn { padding-left: 1.4rem !important; background-image: none !important; color: #33512b !important; font-size: .9375rem; font-weight: 400; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse .tommy-zeb-travelcompany-total { background: #f5ecd6; color: #33512b; }
/* Kalendericoon voor "Aankomst & Vertrek" (hero en boekvenster) */
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-begin input { padding-left: 3rem !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a8f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") no-repeat left 1.4rem center / 1.05rem !important; }
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:placeholder-shown) .tommy-zeb-date-begin::after { left: 3rem; }
/* Boekvenster: dezelfde volgorde als de hero (datums, personen, zoeken) */
body.theme-b .booking-overlay .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > .tommy-zeb-date { order: 1; }
body.theme-b .booking-overlay .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > .tommy-zeb-person-categories { order: 2; }
body.theme-b .booking-overlay .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > tommy-confirm-update { order: 3; }
/* Boekvenster als losse kaart rechts uitgelijnd met de kopbalk, met dezelfde kleine ronding als de knoppen */
body.theme-b .booking-overlay__panel { width: min(calc(100% - 2 * clamp(1.25rem, 5.2vw, 5.5rem)), 64rem); max-height: calc(100dvh - 1.5rem); margin: .75rem clamp(1.25rem, 5.2vw, 5.5rem) 0 auto; padding: 1.75rem 0 .75rem; border-radius: .4rem; transform: translateY(calc(-100% - 1rem)); }
body.theme-b .booking-overlay.is-open .booking-overlay__panel { transform: none; }
body.theme-b .booking-overlay__panel > .container, body.theme-b .booking-overlay__panel .b-tommy > .container { width: auto; max-width: none; margin: 0; padding-inline: 1.75rem; }
body.theme-b .booking-overlay__close { border-radius: .4rem; border-color: #e3dcc6; }
@media (max-width: 599px) {
  body.theme-b .booking-overlay__panel { width: auto; margin: .5rem; padding-top: 1.25rem; }
  body.theme-b .booking-overlay__panel > .container, body.theme-b .booking-overlay__panel .b-tommy > .container { padding-inline: 1.25rem; }
}
/* Datumkiezer: dezelfde kleine ronding als de knoppen (ook aan het begin en eind van een periode) */
body.theme-b :is(.pika-button:hover, .pika-row.pick-whole-week:hover .pika-button, .is-selected .pika-button, .is-startrange.is-endrange .pika-button, .is-today .pika-button) { border-radius: .4rem; }
body.theme-b :is(.is-inrange, .ks-preview) .pika-button { border-radius: 0; }
body.theme-b :is(.is-startrange:not(.is-endrange), .pika-table:has(.ks-preview, .ks-preview-end) .is-startrange, .pika-table:has(.ks-preview, .ks-preview-end) .is-selected) .pika-button { border-radius: .4rem 0 0 .4rem; }
body.theme-b :is(.is-endrange:not(.is-startrange), .ks-preview-end) .pika-button { border-radius: 0 .4rem .4rem 0; }
/* Alleen een aankomstdag gekozen (nog geen periode erachter): rondom afgerond */
body.theme-b .pika-table:not(:has(.is-endrange, .is-inrange, .ks-preview, .ks-preview-end)) :is(.is-startrange, .is-selected) .pika-button { border-radius: .4rem; }
/* Kopletter in de testvariant: overal Cormorant Garamond (zelf gehost, zie main.css), in een lichter gewicht */
body.theme-b { --font-heading: "Cormorant Garamond", Georgia, serif; }
body.theme-b :is(.hv-reveal__title, .hv-cta__title, .hv-h2, .hv-reviews__score strong, .hv-nearby__h2, .hv-nearby__pinned-title, .booking-overlay__title) { font-weight: 500; letter-spacing: -.01em; }
body.theme-b :is(.hv-trip__title, .hv-trip__back-title, .site-nav__card-title, .site-nav__link, .site-nav__sublink, .hv-nearby__lead) { letter-spacing: 0; }
body.theme-b :is(.hv-trip__title, .hv-trip__back-title, .site-nav__card-title) { font-weight: 600; font-size: 1.5rem; }
/* De navigatie in de kopbalk blijft in de tekstletter */
@media (min-width: 64rem) { body.theme-b .site-header .site-nav__link { font-family: var(--font-body); } }
body.theme-b .booking-overlay__title { font-size: clamp(1.75rem, 3vw, 2.25rem); }
/* Boekvenster: smalle, bijna vierkante kaart met de velden onder elkaar */
body.theme-b .booking-overlay__panel { width: min(calc(100% - 1rem), 27rem); }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { display: flex; grid-template-columns: none; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: .75rem; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > * { flex: none; width: 100%; max-width: none; margin: 0; }
body.theme-b .booking-overlay .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left > .tommy-zeb-accommodation-types { display: none; }
/* De zoekbalk staat onderaan de hero: de lijst met personen klapt daarom naar boven open, anders valt hij buiten beeld */
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list { top: auto; bottom: calc(100% + .5rem); margin: 0; box-shadow: 0 10px 24px -14px rgb(10 31 14 / .35); }
/* In het smalle boekvenster duwt de lijst met personen het venster open (anders wordt hij afgesneden) */
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini { display: flex !important; flex-direction: column; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-category-list { position: static !important; order: 1; width: auto !important; margin-top: .5rem; box-shadow: none; }
/* Personenicoon voor "Aantal personen" (hero en boekvenster), net als het kalendericoon bij de datums */
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn, :is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse button.tommy-zeb-btn:is(:hover, :focus) { padding-left: 3rem !important; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a8f3d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") no-repeat left 1.4rem center / 1.1rem !important; }
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] input { box-shadow: none !important; }
/* Gekozen datums dicht naast elkaar: aankomst zo breed als icoon + datum, vertrek er direct achter */
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period]:has(.tommy-zeb-date-begin input:not(:placeholder-shown)) { grid-template-columns: 8.6rem minmax(0, 1fr); }
.hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period:has(.tommy-zeb-date-begin input:not(:placeholder-shown)) > .tommy-zeb-date-begin { flex: 0 0 8.6rem; }
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-end input { padding-left: 1.25rem !important; }
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date-end::before { left: .1rem; }
:is(.hvc-search, body.theme-b .booking-overlay) .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period[data-ks-period] .tommy-zeb-date-begin input:not(:placeholder-shown) { padding-right: .25rem !important; text-overflow: clip; }
/* Op kleine schermen het boekvenster over de volle breedte */
@media (max-width: 639px) { body.theme-b .booking-overlay__panel { width: auto; margin: .5rem; } }
/* Knoppen even hoog als "Boek nu" in het menu (2,75rem); de invulvelden blijven hoger */
body.theme-b .button, body.theme-b .b-tommy .tommy-zeb-wrapper :is(.ks-persons-done, .ks-result-info, .tommy-zeb-result-action .tommy-zeb-btn) { height: 2.75rem; min-height: 2.75rem; padding-block: 0; }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update { height: 2.75rem; }
@media (max-width: 899px) { .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update .tommy-zeb-btn:hover, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left button.tommy-zeb-btn.tommy-zeb-update { height: 2.75rem; } }
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini button.tommy-zeb-btn.tommy-zeb-update, body.theme-b .b-tommy .tommy-zeb-wrapper .tommy-zeb-person-category-list .ks-persons-done, body.theme-b .b-tommy .tommy-zeb-wrapper .ks-filter-toggle { height: 2.75rem !important; min-height: 2.75rem !important; box-sizing: border-box; }
/* Hover bij de resultaten: eigen vloeiende overgang (Tommy's eigen hover wisselt de achtergrond pas na een vertraging) */
body.theme-b .b-tommy .tommy-zeb-wrapper .ks-result-info, body.theme-b .b-tommy .tommy-zeb-wrapper .ks-result-info:is(:hover, :focus-visible) { transition: background-color .3s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1) !important; }
body.theme-b .b-tommy .tommy-zeb-wrapper .ks-result-info:is(:hover, :focus-visible) { background-color: #f5ecd6 !important; box-shadow: inset 0 0 0 1.5px #6a8f3d; color: #33512b; }
body.theme-b .b-tommy .tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *), body.theme-b .b-tommy .tommy-zeb-btn:not(.tommy-zeb-person-categories-collapse *):is(:hover, :focus-visible) { transition: background-position .5s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1) !important; }
/* Tekstletter in de testvariant: DM Sans voor alle tekst, ook h5 en h6 */
body.theme-b { --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; }
body.theme-b :is(h5, h6) { font-family: var(--font-body); }
/* Mobiele hero zoals het ontwerp: groen verloop schuin, losse witte velden met icoon en pijltje, aar rechtsboven tegen de rand */
@media (max-width: 899px) {
  .hvb { --frame-pad: .75rem; }
  .hvc-search { padding: .5rem; border-radius: .5rem; background: linear-gradient(135deg, #3f9b45 0%, #6a8f3d 75%); }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-left { row-gap: .5rem; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date { position: relative; border-radius: .4rem; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-person-categories { border-top: 0; border-radius: .4rem; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-period input, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini :is(.tommy-zeb-date-begin-choice, .tommy-zeb-date-end-choice) input, .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-person-category-mini .tommy-zeb-person-categories-collapse { height: 3.375rem; }
  .hvc-search .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini .tommy-zeb-date::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 1rem; height: 1rem; background: #33512b; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat center / contain; transform: translateY(-50%); pointer-events: none; }
  body.theme-b .site-nav__toggle { border: 0; background: transparent; }
  body.theme-b .site-header__logo img { height: 3.5rem; }
}
/* Zoeken in het boekvenster even hoog als de velden erboven */
body.theme-b .booking-overlay .b-tommy .tommy-zeb-wrapper.tommy-zeb-wrapper-mini tommy-confirm-update button.tommy-zeb-btn.tommy-zeb-update { height: 3.75rem !important; min-height: 3.75rem !important; }
/* Megamenu in de nieuwe stijl: losse kaart uitgelijnd met de kopbalk, kleine ronding, kaarten zoals de appartementen op de homepage */
@media (min-width: 64rem) {
  body.theme-b .site-nav__sub--mega { left: max(var(--gutter), (100% - var(--container)) / 2); right: max(var(--gutter), (100% - var(--container)) / 2); top: calc(100% + .5rem); padding: 1.5rem; border-top: 0; border-radius: .5rem; box-shadow: 0 10px 24px -14px rgb(10 31 14 / .35), 0 0 0 1px rgb(51 81 43 / .06); }
  body.theme-b .site-nav__sub--mega::before { height: 2.25rem; }
  body.theme-b .site-nav__card-media { margin-bottom: .875rem; border-radius: .4rem; background: #f5ecd6; }
  body.theme-b .site-nav__card-title { font-size: 1.75rem; font-weight: 500; line-height: 1.1; letter-spacing: 0; color: #33512b; }
  body.theme-b .site-nav__card-link:is(:hover, [aria-current="page"]) .site-nav__card-title { color: #6a8f3d; }
  body.theme-b .site-nav__card-meta { font-size: .875rem; font-weight: 500; color: #6a8f3d; }
  body.theme-b .site-nav__card-text { font-size: .875rem; line-height: 1.6; color: #33512b; }
  body.theme-b .site-nav__card-all { border-top-color: #e3dcc6; }
  body.theme-b .site-nav__card-all .site-nav__sublink, body.theme-b .site-nav__card-all .site-nav__sublink:hover { color: #33512b; }
}
@media (min-width: 64rem) { body.theme-b .site-nav__sub--mega { left: clamp(1.25rem, 5.2vw, 5.5rem); right: clamp(1.25rem, 5.2vw, 5.5rem); } }
/* Met de icoontjes erbij is iets meer breedte nodig, anders wordt "Aantal personen" afgekapt */
@media (min-width: 900px) { .hvb .hvc-search { width: min(100%, 44rem); } }
@media (max-width: 899px), (orientation: portrait) {
  /* Telefoon, smal of staand scherm (foto hoger dan breed): de gedraaide aar (steel recht omhoog langs de rechterrand, blaadjes naar links), zoals in het ontwerp */
  .hvb .hv-heroB__aar--blank { --size: auto calc(42% + var(--p) * var(--p) * 900svh);
    /* Vast tegen de rechterrand: een derde van de aar valt erbuiten, ongeacht de schermbreedte (cqw/cqh van .hv-heroB__sticky) */
    --aw: calc((100cqh - var(--frame-top) - var(--frame-bottom)) * .42 * 854 / 1196);
    --pos: calc((1 - var(--p)) * (100cqw - 2 * var(--edge) - var(--aw) * .67) + var(--p) * 50%) calc((1 - var(--p)) * -1.5rem + var(--p) * 50%);
    -webkit-mask-image: url(../images/aar-hero-mobiel.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    mask-image: url(../images/aar-hero-mobiel.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill))); }
}
/* Megamenu gelijk aan de appartementen op de homepage: crème vlak, foto met ronding en het aantal personen als wit labeltje erop, titel met olijfgroene pijl */
@media (min-width: 64rem) {
  body.theme-b .site-nav__sub--mega { background: #fff; }
  body.theme-b .site-nav__card-link { position: relative; gap: .375rem; }
  body.theme-b .site-nav__card-media { aspect-ratio: 3 / 2; margin-bottom: .5rem; border-radius: .75rem; background: #f5ecd6; }
  body.theme-b .site-nav__card-meta { position: absolute; top: .875rem; left: .875rem; padding: .3rem .7rem; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgb(10 31 14 / .12); color: #33512b; font-size: .8125rem; font-weight: 600; }
  body.theme-b .site-nav__card-title { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: clamp(1.625rem, 2.2vw, 2rem); }
  body.theme-b .site-nav__card-title::after { content: ""; flex: none; width: 1.375rem; height: 1.375rem; background: #6a8f3d; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  body.theme-b .site-nav__card-link:is(:hover, :focus-visible) .site-nav__card-title::after { transform: translate(3px, -3px); }
  body.theme-b .site-nav__card-link:is(:hover, [aria-current="page"]) .site-nav__card-title { color: #33512b; }
}
@media (prefers-reduced-motion: reduce) { body.theme-b .site-nav__card-title::after { transition: none; } }
/* Mobiel menu in de nieuwe stijl: losse kaart onder de balk, de appartementen als crème kaartjes met foto, de overige pagina's als rustige rijen */
@media (max-width: 63.99rem) {
  body.theme-b .site-nav { left: .5rem; right: .5rem; top: calc(100% + .25rem); max-height: calc(100dvh - 5.5rem); padding: 1rem 1rem 1.25rem; border-radius: .5rem; box-shadow: 0 16px 32px -16px rgb(10 31 14 / .45); }
  body.theme-b .has-js .site-nav { clip-path: inset(0 0 100% 0 round .5rem); }
  .nav-open body.theme-b .has-js .site-nav { clip-path: inset(0 0 -2rem 0 round .5rem); }
  /* Met het menu open krijgt de kopbalk een eigen achtergrond, anders kleurt hij mee met de donkere laag */
  html.nav-open body.theme-b .site-header { background: #f5ecd6 !important; box-shadow: none; }
  body.theme-b .site-nav__item { border-bottom: 1px solid #efe8d6; }
  body.theme-b .site-nav__link { display: flex; align-items: center; justify-content: space-between; padding: 1rem .25rem; font-family: var(--font-body); font-size: 1.0625rem; font-weight: 500; letter-spacing: 0; color: #33512b; }
  body.theme-b .site-nav__item:not(.site-nav__item--parent):not(.site-nav__item--button) > .site-nav__link::after { content: ""; width: 1rem; height: 1rem; background: #6a8f3d; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") no-repeat center / contain; }
  body.theme-b .site-nav__item.is-active:not(.site-nav__item--button) > .site-nav__link { color: #6a8f3d; font-weight: 600; }
  /* Appartementen: kopje en drie kaartjes */
  body.theme-b .site-nav__item--parent > .site-nav__label-toggle { display: none; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) { padding: .5rem 0 1rem; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) > .site-nav__sub { display: grid; gap: .5rem; padding: 0; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) > .site-nav__sub::before { content: "Appartementen"; padding: .5rem .25rem .375rem; color: #33512b; font-size: 1.0625rem; font-weight: 500; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) > .site-nav__sub > li { border-bottom: 0; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__sublink { display: grid; grid-template-columns: 5rem minmax(0, 1fr) auto; grid-template-areas: "media title arrow" "media meta arrow"; align-items: center; column-gap: .875rem; padding: .5rem .875rem .5rem .5rem; border-radius: .5rem; background: #f7f1e1; color: #33512b; transition: background-color .25s cubic-bezier(.22, 1, .36, 1); }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__sublink:is(:hover, :focus-visible, [aria-current="page"]) { background: #f0e6cc; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__card-media { display: block; grid-area: media; width: 5rem; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; border-radius: .4rem; background: #ece2c7; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__card-title { grid-area: title; align-self: end; font-family: var(--font-heading); font-size: 1.625rem; font-weight: 500; line-height: 1.05; letter-spacing: 0; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__card-meta { grid-area: meta; align-self: start; margin: .2rem 0 0; color: #6a8f3d; font-family: var(--font-body); font-size: .8125rem; font-weight: 600; }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__sublink::after { content: ""; grid-area: arrow; width: 1.125rem; height: 1.125rem; background: #6a8f3d; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  body.theme-b .site-nav__item--parent:has(> .site-nav__label-toggle) .site-nav__sublink:is(:hover, :focus-visible)::after { transform: translate(2px, -2px); }
}
/* Op telefoons vult het menu het hele scherm onder de kopbalk */
@media (max-width: 767px) {
  body.theme-b .site-nav { left: 0; right: 0; top: 100%; height: calc(100dvh - 73px); max-height: none; padding: 1rem var(--gutter) calc(1.5rem + env(safe-area-inset-bottom)); border-radius: 0; box-shadow: none; }
  body.theme-b .has-js .site-nav { clip-path: inset(0 0 100% 0); }
  .nav-open body.theme-b .has-js .site-nav { clip-path: inset(0); }
}
/* ==== einde TEST hero B ==== */

/* 2. Introductie */

/* Accent: de aar uit het logo (assets/images/aar.svg) als gele vorm */

.hv-intro__photo--1 { top: 0; right: 0; width: 72%; aspect-ratio: 4 / 5; transform: rotate(2deg); }
.hv-intro__photo--2 { bottom: 0; left: 0; width: 52%; aspect-ratio: 1; border: 6px solid #fff; transform: rotate(-4deg); }
.hv-motion .hv-intro__photo--1[data-hv-reveal] { transform: translateY(1.5rem) rotate(2deg); }
.hv-motion .hv-intro__photo--2[data-hv-reveal] { transform: translateY(2.5rem) rotate(-4deg); transition-delay: .12s; }
.hv-motion .hv-intro__photo--1.is-in { transform: rotate(2deg); }
.hv-motion .hv-intro__photo--2.is-in { transform: rotate(-4deg); }

/* 3. Appartementen */

/* 4. Foto vanuit een cirkel: het blok is hoger dan het scherm; de foto blijft staan en de cirkel groeit (--p 0 → 1) */

/* De foto komt tevoorschijn in de vorm van de aar uit het logo (assets/images/aar.svg). De aar begint vlak onder de
   vorige sectie, groeit tijdens het scrollen en schuift naar het midden; aan het eind vult een tweede masklaag
   (--fill) de gaten tussen de korrels, zodat de foto het hele scherm vult. */

/* Foto iets omhoog zolang de aar klein is: dan zie je lucht én weiland in de aar */

/* 5. Rina en Mart */
.hv-story { padding: clamp(4rem, 9vw, 7rem) 0; }
.hv-story__grid { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .hv-story__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); } }
.hv-story__photo { margin: 0; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 999px 999px 1.25rem 1.25rem; }
.hv-quote { margin: 0 0 1.5rem; font-family: var(--font-heading); font-size: clamp(2rem, 4.6vw, 3.75rem); font-style: italic; font-weight: 600; line-height: 1.05; letter-spacing: -.025em; color: var(--color-accent); }
.hv-story .prose { max-width: 34rem; font-size: 1.125rem; line-height: 1.7; }

/* 6. Kleurvlak met draaiende sticker */

/* Grote aar uit het logo, subtiel op de achtergrond van het groene vlak */

@keyframes hv-spin { to { transform: rotate(360deg); } }

/* Mobiel: gecentreerd; het groene vlak stopt halverwege de ronde knop, de knop ligt over de rand */

/* 7. Zakelijk */
.hv-business { padding: clamp(4rem, 9vw, 7rem) 0; }
.hv-business__grid { display: grid; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) { .hv-business__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.hv-business .prose { max-width: 34rem; font-size: 1.0625rem; line-height: 1.7; }
.hv-business__photo { margin: 0; overflow: hidden; aspect-ratio: 5 / 4; border-radius: 1.25rem 1.25rem 1.25rem 999px; }

/* 8. Ervaringen */
.hv-reviews { padding: clamp(4rem, 9vw, 7rem) 0; background: var(--hv-butter); }
.hv-reviews__inner { max-width: 46rem; text-align: center; }
.hv-reviews__score { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0; }
.hv-reviews__score strong { font-family: var(--font-heading); font-size: clamp(3.5rem, 8vw, 5.5rem); font-weight: 750; line-height: 1; letter-spacing: -.04em; color: var(--color-accent); }
.hv-stars { display: inline-flex; gap: .125rem; fill: var(--color-brand-yellow); }
.hv-stars svg { width: 1.5rem; height: 1.5rem; }
.hv-reviews__count { margin: .25rem 0 2rem; color: #4f4210; font-weight: 600; }
.hv-reviews__quote { margin: 0 0 2rem; }
.hv-reviews__quote p { margin: 0 0 1rem; font-size: clamp(1.25rem, 2.3vw, 1.625rem); font-weight: 500; line-height: 1.45; color: var(--color-text); text-wrap: pretty; }
.hv-reviews__quote footer { font-weight: 700; color: var(--color-accent); }

/* 9. In de buurt */
.hv-nearby { --trip-w: clamp(16.5rem, 22vw, 18rem); padding: clamp(4rem, 9vw, 7rem) 0 clamp(4.5rem, 10vw, 8rem); overflow: hidden; overflow: clip; }
/* Kop: grote titel met een schuine ondertitel links, de introtekst rechts ernaast */
.hv-nearby__head { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.hv-nearby__h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(2.75rem, 6.5vw, 5.5rem); font-weight: 750; line-height: .95; letter-spacing: -.035em; }
.hv-nearby__lead { display: flex; align-items: center; gap: .6em; margin: .75rem 0 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-style: italic; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
.hv-nearby__lead::before { content: ""; flex: none; width: .62em; height: 1.6em; background: var(--color-brand-yellow); -webkit-mask: url(../images/aar.svg) no-repeat center / contain; mask: url(../images/aar.svg) no-repeat center / contain; }
/* Introtekst als zacht geel vlak: de eerste alinea als inleiding in de kopletter, de tweede rustiger eronder */
.hv-nearby__intro { position: relative; max-width: 54ch; padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.25rem, 2.5vw, 2rem); border-radius: 1rem; background: #fbf7e3; }
.hv-nearby__intro p { margin: 0; font-size: .9375rem; line-height: 1.65; color: rgb(18 61 28 / .82); text-wrap: pretty; }
.hv-nearby__intro p:first-child { margin-bottom: .875rem; font-family: var(--font-heading); font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem); font-weight: 500; line-height: 1.5; letter-spacing: -.005em; color: var(--color-text); }
.hv-nearby__intro p + p { padding-top: .875rem; border-top: 1px solid rgb(18 61 28 / .12); }
@media (min-width: 900px) {
  .hv-nearby__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .hv-nearby__intro { justify-self: end; }
}
.hv-nearby__row { overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.hv-nearby__rail { position: relative; display: flex; gap: clamp(1rem, 2vw, 1.75rem); width: max-content; padding: 1rem max(var(--gutter), (100vw - var(--container)) / 2) 1.5rem; }
/* Safari (iOS) telt de omgedraaide achterkant van de kaartjes (3D-draaiing) mee als extra breedte, waardoor je
   na het laatste kaartje ver doorswipet naar wit. contain: paint houdt de rij precies zo breed als de kaartjes. */
.hv-nearby__rail { contain: paint; }
/* Vastgezet (met JavaScript): de rij blijft midden in beeld staan en de kaartjes schuiven mee met het scrollen */
.hv-nearby__pin.is-pinned .hv-nearby__row { overflow: visible; scroll-snap-type: none; }
.hv-nearby__pin.is-pinned-whole .hv-nearby__stick, .hv-nearby__pin.is-pinned-row .hv-nearby__row { position: sticky; }
.hv-nearby__pinned-title { display: none; margin: 0 auto .25rem; font-family: var(--font-heading); font-size: 1.75rem; font-weight: 750; letter-spacing: -.02em; line-height: 1.1; }
.hv-nearby__pin.is-pinned-row .hv-nearby__pinned-title { display: block; }
/* Smalle schermen: grotere kaartjes, zodat de vaste rij het scherm beter vult */
@media (max-width: 899px) { .hv-nearby { --trip-w: min(84vw, 22rem); } }
.hv-nearby__pin.is-pinned .hv-nearby__rail { will-change: transform; }
/* Desktop: de rij begint een stuk naar rechts en eindigt met het laatste kaartje in het midden,
   zodat je echt langs alle kaartjes schuift */
@media (min-width: 900px) {
  .hv-nearby__pin.is-pinned .hv-nearby__rail { padding-left: 22vw; padding-right: calc(50vw - var(--trip-w) / 2); }
}
.hv-nearby__rail.is-nudging { transition: transform .7s var(--hv-ease); }
@media (prefers-reduced-motion: reduce) { .hv-nearby__rail.is-nudging { transition: none; } }
.hv-nearby__row::-webkit-scrollbar { display: none; }
/* Vaste breedte (niet alleen flex-basis): Safari rekent de breedte van de rij anders uit op basis van de tekst
   op de achterkant, alsof die op één regel staat */
.hv-trip { flex: 0 0 var(--trip-w); width: var(--trip-w); min-width: 0; contain: inline-size; display: flex; flex-direction: column; gap: .75rem; margin: 0; scroll-snap-align: center; transition: transform .5s var(--hv-ease); }
.hv-trip:nth-child(odd) { transform: rotate(-2deg); }
.hv-trip:nth-child(even) { transform: rotate(2deg) translateY(1.25rem); }
.hv-trip:hover, .hv-trip.is-flipped { transform: rotate(0) translateY(-.25rem); }

/* Kaartje met voor- en achterkant op dezelfde plek; omdraaien om de verticale as */
.hv-trip__card { position: relative; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); aspect-ratio: 3 / 4; min-height: 0; perspective: 1400px; }
.hv-trip__face { grid-area: 1 / 1; position: relative; min-width: 0; border: 6px solid #fff; border-radius: 1rem; box-shadow: 0 16px 24px -16px rgb(10 31 14 / .5); backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .7s var(--hv-ease); }
.hv-trip__front { display: block; width: 100%; padding: 0; overflow: hidden; background: #e9e3c8; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hv-trip__back { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.25rem; text-align: center; padding: clamp(1.25rem, 2vw, 1.625rem); overflow: auto; background: #fbf7e3; color: var(--color-text); transform: rotateY(180deg); }
.hv-trip.is-flipped .hv-trip__front { transform: rotateY(-180deg); }
.hv-trip.is-flipped .hv-trip__back { transform: rotateY(0); }

.hv-trip__media { display: block; height: 100%; }
.hv-trip__media img { transition: transform .7s var(--hv-ease); }
.hv-trip__front:hover .hv-trip__media img { transform: scale(1.04); }
.hv-trip__plus { position: absolute; right: .75rem; bottom: .75rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--color-accent); box-shadow: 0 6px 12px -6px rgb(10 31 14 / .45); transition: transform .35s var(--hv-ease); }
.hv-trip__front:hover .hv-trip__plus { transform: rotate(90deg); }

.hv-trip__back-title { margin: 0; padding-right: 2.25rem; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 750; line-height: 1.15; letter-spacing: -.01em; }
.hv-trip__text { margin: 0; font-size: clamp(.875rem, .8rem + .2vw, .9375rem); line-height: 1.5; }
.hv-trip__ext { display: inline-flex; align-items: center; gap: .375rem; padding: .625rem 1rem; border-radius: 999px; background: var(--btn-fill-primary, var(--color-accent)); color: #fff; font-size: .9375rem; font-weight: 700; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color .2s; }
.hv-trip__ext:hover { background: var(--color-accent); color: #fff; }
.hv-trip__close { position: absolute; top: 1rem; right: 1rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid rgb(18 61 28 / .18); border-radius: 50%; background: #fff; color: var(--color-accent); cursor: pointer; }
.hv-trip__close:hover { border-color: var(--color-accent); }
.hv-trip__title { margin: 0; padding-left: .375rem; font-family: var(--font-heading); font-size: 1.375rem; font-weight: 750; letter-spacing: -.01em; }

@media (prefers-reduced-motion: reduce) {
  .hv-trip, .hv-card__media img, .hv-trip__media img, .hv-trip__plus { transition: none; }
  /* Geen draaiing: de achterkant verschijnt met een korte overgang */
  .hv-trip__face { backface-visibility: visible; transform: none !important; transition: opacity .2s; }
  .hv-trip__back { opacity: 0; }
  .hv-trip.is-flipped .hv-trip__back { opacity: 1; }
  .hv-trip.is-flipped .hv-trip__front { opacity: 0; }
}

/* iOS zoomt in op velden met font-size < 16px (sprong + zijwaarts schuiven bij aantikken) */
@media (hover: none) and (pointer: coarse) {
  body.theme-b input,
  body.theme-b select,
  body.theme-b textarea { font-size: 16px !important; }
}
html:has(body.theme-b) { overflow-x: clip; }

/* Boekvenster op mobiel: als paneel onderaan het scherm, binnen bereik van de duim; schuift van onderen in beeld */
@media (max-width: 639px) {
  body.theme-b .booking-overlay__panel { position: absolute; left: 0; right: 0; bottom: 0; width: auto; max-height: calc(100dvh - 4rem); margin: 0; padding: 1.75rem 0 calc(.75rem + env(safe-area-inset-bottom)); border-radius: 1rem 1rem 0 0; box-shadow: 0 -8px 24px rgb(10 31 14 / .18); transform: translateY(calc(100% + 1rem)); }
  body.theme-b .booking-overlay.is-open .booking-overlay__panel { transform: none; }
  body.theme-b .booking-overlay__panel::before { content: ""; position: absolute; top: .6rem; left: 50%; width: 2.5rem; height: .25rem; border-radius: 1rem; background: #e3dcc6; transform: translateX(-50%); }
  body.theme-b .booking-overlay .booking-overlay__head, body.theme-b .booking-overlay .b-tommy { transform: translateY(.5rem); }
  body.theme-b .booking-overlay.is-open .booking-overlay__head, body.theme-b .booking-overlay.is-open .b-tommy { transform: none; }
}

/* Kalender even breed als het datumveld (breedte wordt per veld gezet) */
body.theme-b .pika-single.is-field-wide { box-sizing: border-box; }
body.theme-b .pika-single.is-field-wide .pika-lendar { float: none; width: auto; margin: 1rem 1.25rem; }
body.theme-b .pika-single.is-field-wide .pika-table { width: 100%; }

/* Boekvenster: de kalender staat in het venster zelf, direct onder het datumveld (geen los zwevend blok) */
body.theme-b .booking-overlay .pika-single.is-inline { position: static !important; order: 1; width: auto !important; margin: 0; border: 1px solid #e3dcc6; border-radius: .4rem; box-shadow: none; }
body.theme-b .booking-overlay .pika-single.is-inline.is-hidden { display: none; }
body.theme-b .booking-overlay .pika-single.is-inline .pika-lendar { float: none; width: auto; margin: .75rem 1rem 1rem; }
body.theme-b .booking-overlay .pika-single.is-inline .pika-table { width: 100%; }
/* Zolang hij nog niet verplaatst is (bijv. de vertrekkalender die vanzelf opent) niet los over het venster tonen */
html.booking-open body.theme-b > .pika-single:not(.is-hidden) { opacity: 0; }

/* De opmaak van Tommy binnen het venster maakt van de kalendertabel losse regels: tabel weer als tabel tonen */
body.theme-b .booking-overlay .pika-single.is-inline .pika-table { display: table !important; table-layout: fixed; border-collapse: collapse; }
body.theme-b .booking-overlay .pika-single.is-inline thead { display: table-header-group !important; }
body.theme-b .booking-overlay .pika-single.is-inline tbody { display: table-row-group !important; }
body.theme-b .booking-overlay .pika-single.is-inline tr { display: table-row !important; }
body.theme-b .booking-overlay .pika-single.is-inline :is(td, th) { display: table-cell !important; width: auto !important; padding: 1px 0; }
body.theme-b .booking-overlay .pika-single.is-inline .pika-label { display: inline-block !important; }
body.theme-b .booking-overlay .pika-single.is-inline .pika-button { display: block !important; width: 100% !important; }

/* Kalender: elke maand even hoog (altijd ruimte voor zes weken), zodat het blok niet verspringt bij het bladeren */
body.theme-b .pika-single :is(td, th) { padding-block: 1px; }
body.theme-b .pika-single .pika-lendar { min-height: calc(64.6px + 6 * 38px); }
/* Bladeren door vegen: de nieuwe maand schuift zacht in vanaf de kant waar je heen veegt */
@media (prefers-reduced-motion: no-preference) {
  body.theme-b .pika-single[data-swipe="next"] .pika-table { animation: ks-month-next .32s cubic-bezier(.22, 1, .36, 1); }
  body.theme-b .pika-single[data-swipe="prev"] .pika-table { animation: ks-month-prev .32s cubic-bezier(.22, 1, .36, 1); }
}
@keyframes ks-month-next { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes ks-month-prev { from { opacity: 0; transform: translateX(-1.5rem); } }

/* Boekvenster (breder dan mobiel): boven even ver van de rand als rechts */
@media (min-width: 640px) {
  body.theme-b .booking-overlay__panel { --edge-b: clamp(1.25rem, 5.2vw, 5.5rem); margin-top: var(--edge-b); max-height: calc(100dvh - 2 * var(--edge-b)); transform: translateY(calc(-100% - var(--edge-b) - 1rem)); }
  body.theme-b .booking-overlay.is-open .booking-overlay__panel { transform: none; }
}

/* Twee maanden (hero op brede schermen): naast elkaar binnen de breedte van het datumveld */
body.theme-b .pika-single.is-field-wide:not(.is-hidden):has(.pika-lendar + .pika-lendar) { display: flex; gap: 1.25rem; padding-inline: 1.25rem; }
body.theme-b .pika-single.is-field-wide:has(.pika-lendar + .pika-lendar) .pika-lendar { flex: 1 1 0; min-width: 0; margin-inline: 0; }
/* TEST (?hero=b&zoek=knop): op mobiel staat in de hero alleen de knop "Boek nu" (zelfde stijl als de menuknop); hij opent het boekvenster */
.hvc-book { display: none; }
@media (max-width: 639px) {
  .hvc-hero--knop .hvc-search { display: none; }
  .hvc-hero--knop .hvc-book { display: flex; align-items: center; justify-content: space-between; justify-self: stretch; align-self: start; gap: .6rem; width: 100%; min-height: 3.5rem; margin-top: clamp(1.75rem, 4vh, 2.75rem); padding: .85rem 1.5rem; border-radius: .4rem; background: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 50%, #6a8f3d 100%) 100% 0 / 200% 100% no-repeat; background-color: #6a8f3d; color: #fff; font-size: 1rem; font-weight: 600; text-decoration: none; box-shadow: 0 10px 24px -14px rgb(10 31 14 / .45); opacity: clamp(0, calc(1 - var(--p, 0) * 3), 1); -webkit-tap-highlight-color: transparent; transition: background-position .5s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1); }
  .hvc-hero--knop .hvc-book::after { content: ""; width: .85rem; height: .85rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
  .hvc-hero--knop .hvc-book:is(:hover, :focus-visible, :active) { background-position: 0 0; color: #fff; }
  .hvc-hero--knop .hvc-book:is(:hover, :focus-visible, :active)::after { transform: translate(3px, -3px); }
  .hvc-hero--knop .hvc-book:active { transform: scale(.97); }
  .hvc-hero--knop .hvc-book:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
}
/* TEST (?mobiel=2): op mobiel de foto bovenaan met de knop Zoeken onderin, de titel in groen eronder en een gele pijl omlaag;
   de aar als lijn over de foto (bij het scrollen groeit hij nog steeds tot alles wit is) */
.hvc-m2-down { display: none; }
@media (max-width: 639px) {
  .hvc-hero--m2 { --frame-bottom: clamp(12.5rem, 30svh, 15rem); }
  .hvc-hero--m2.hv-heroB { height: max(100svh, 40rem); }
  .hvc-hero--m2 .hvc-hero__photo::after { display: none; }
  .hvc-hero--m2 .hv-heroB__aar--blank {
    -webkit-mask-image: url(../images/aar-hero-mobiel-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    mask-image: url(../images/aar-hero-mobiel-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    --size: auto calc(62% + var(--p) * var(--p) * 900svh);
    --aw: calc((100cqh - var(--frame-top) - var(--frame-bottom)) * .62 * 854 / 1196);
    --pos: calc((1 - var(--p)) * (100cqw - 2 * var(--edge) - var(--aw) * .62) + var(--p) * 50%) calc((1 - var(--p)) * -2rem + var(--p) * 50%); }
  .hvc-hero--m2 .hv-heroB__inner { inset: calc(100cqh - var(--frame-bottom) - 3.5rem - .9rem) var(--edge) 0; display: flex; flex-direction: column; align-items: stretch; padding: 0 .9rem; text-align: center; }
  .hvc-hero--m2 .hvc-book { order: -1; margin-top: 0; background-image: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 100%); background-size: 100% 100%; }
  .hvc-hero--m2 .hvc-book:focus-visible { outline-color: #2f5a2b; }
  .hvc-hero--m2 .hvc-hero__title { max-width: 14ch; margin: auto auto 0; padding-top: 1.75rem; color: #7a9a45; font-size: clamp(2.5rem, 11.2vw, 3.25rem); font-weight: 500; line-height: 1.02; text-shadow: none; opacity: clamp(0, calc(1 - var(--p) * 3), 1); }
  .hvc-hero--m2 .hvc-m2-down { display: grid; place-items: center; align-self: center; width: 3rem; height: 3rem; margin: .75rem 0 auto; padding: 0; border: 0; background: none; color: #e3a21e; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: clamp(0, calc(1 - var(--p) * 3), 1); }
  .hvc-hero--m2 .hvc-m2-down svg { animation: hvc-bob 1.8s cubic-bezier(.45, 0, .55, 1) infinite; }
  .hvc-hero--m2 .hvc-m2-down:focus-visible { outline: 2px solid #2f5a2b; outline-offset: 2px; border-radius: 50%; }
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) { .hvc-hero--m2 .hvc-m2-down svg { animation: none; } }
/* TEST (?mobiel=3): als ?mobiel=2, maar de titel boven de foto met de pijl eronder */
@media (max-width: 639px) {
  .hvc-hero--m3 { --m3-title: clamp(9.5rem, 21svh, 11.5rem); --m3-space: clamp(1.25rem, 3.5svh, 2rem); --frame-top: calc(73px + var(--m3-space) + var(--m3-title) + var(--m3-space) + 3rem); --frame-bottom: 1rem; }
  .hvc-hero--m3 .hv-heroB__inner { inset: 0 var(--edge); display: block; padding: 0; }
  .hvc-hero--m3 .hvc-hero__title { position: absolute; top: calc(73px + var(--m3-space)); left: 0; right: 0; display: grid; place-items: end center; height: var(--m3-title); max-width: none; margin: 0; padding: 0 .75rem; }
  .hvc-hero--m3 .hvc-book { position: absolute; left: .9rem; right: .9rem; bottom: calc(var(--frame-bottom) + .9rem); width: auto; }
  .hvc-hero--m3 .hvc-m2-down { position: absolute; left: 50%; top: calc(73px + var(--m3-space) + var(--m3-title) + var(--m3-space) - .5rem); margin: 0; transform: translateX(-50%); }
}
/* TEST (?mobiel=2 en 3): ook op tablet en desktop de aar als lijn, zoals op mobiel */
@media (min-width: 640px) {
  .hvc-hero--m2 .hv-heroB__aar--blank {
    -webkit-mask-image: url(../images/aar-hero-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    mask-image: url(../images/aar-hero-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill))); }
}
@media (min-width: 640px) and (max-width: 899px), (min-width: 640px) and (orientation: portrait) {
  .hvc-hero--m2 .hv-heroB__aar--blank {
    -webkit-mask-image: url(../images/aar-hero-mobiel-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    mask-image: url(../images/aar-hero-mobiel-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill))); }
}
/* ==== Nieuwe homepage: de secties onder de hero in de stijl van de hero ====
   Crème en wit om en om, foto's met dezelfde ronding als de hero (1rem), titels in Cormorant 500 in donker olijf,
   olijfgroene knoppen met het schuine pijltje en de aar als lijn. */
body.theme-b .hv { --b-olive: #6a8f3d; --b-ink: #33512b; --b-cream: #f5ecd6; --b-edge: clamp(1.25rem, 5.2vw, 5.5rem); --b-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E"); }
body.theme-b :is(.hv-story, .hv-business, .hv-nearby) :is(.prose, .prose p) { color: var(--b-ink); }
/* Olijfgroene knop met pijltje (zelfde als de knop in de kopbalk) */
body.theme-b :is(.hv-business .hv-link, .hv-trip__ext) { display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .75rem 1.35rem; border-radius: .4rem; background: linear-gradient(90deg, #3f9b45 0%, #6a8f3d 50%, #6a8f3d 100%) 100% 0 / 200% 100% no-repeat; background-color: #6a8f3d; color: #fff; font-size: .9375rem; font-weight: 600; text-decoration: none; transition: background-position .5s var(--hv-ease); }
body.theme-b .hv-business .hv-link::after { content: ""; flex: none; width: .85rem; height: .85rem; background: currentColor; -webkit-mask: var(--b-arrow) no-repeat center / contain; mask: var(--b-arrow) no-repeat center / contain; transition: transform .3s var(--hv-ease); }
body.theme-b :is(.hv-business .hv-link, .hv-trip__ext):is(:hover, :focus-visible) { background-position: 0 0; background-color: #6a8f3d; color: #fff; }
body.theme-b .hv-business .hv-link:is(:hover, :focus-visible)::after, body.theme-b .hv-trip__ext:is(:hover, :focus-visible) svg { transform: translate(3px, -3px); }
body.theme-b .hv-trip__ext svg { transition: transform .3s var(--hv-ease); }
@media (prefers-reduced-motion: reduce) { body.theme-b :is(.hv-business .hv-link, .hv-trip__ext), body.theme-b .hv-business .hv-link::after, body.theme-b .hv-trip__ext svg { transition: none; } }

/* Rina en Mart: wit, foto in het afgeronde vlak, het citaat in Cormorant */
body.theme-b .hv-story { background: #fff; }
body.theme-b .hv-story__photo { aspect-ratio: 4 / 5; border-radius: 1rem; }
body.theme-b .hv-quote { color: var(--b-ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.25rem, 4.2vw, 3.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
body.theme-b .hv-story .prose { font-size: 1rem; line-height: 1.75; }

/* Zakelijk: crème vlak, foto afgerond, knop in plaats van tekstlink */
body.theme-b .hv-business { background: var(--b-cream); }
body.theme-b .hv-business__photo { border-radius: 1rem; }
body.theme-b .hv-business .hv-eyebrow { color: var(--b-olive); font-size: 1rem; }
body.theme-b .hv-business .hv-h2 { color: var(--b-ink); font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(2.5rem, 4.2vw, 3.5rem); font-weight: 500; line-height: 1.05; }
body.theme-b .hv-business .prose { font-size: 1rem; line-height: 1.75; }
body.theme-b .hv-business .hv-link { margin-top: .5rem; }

/* Ervaringen: een groen afgerond vlak zoals de zoekbalk, met de crème aar als lijn rechts */
body.theme-b .hv-reviews { position: relative; isolation: isolate; overflow: hidden; margin: clamp(3rem, 7vw, 5.5rem) var(--b-edge) 0; border-radius: 1rem; background: linear-gradient(135deg, #3f9b45 0%, #6a8f3d 70%); color: #fff; }
body.theme-b .hv-reviews::after { content: ""; position: absolute; z-index: -1; top: 50%; right: clamp(0rem, 2vw, 2.5rem); height: min(78%, 36rem); aspect-ratio: 625 / 810; background: url(../images/aar-lijn.svg) no-repeat center / contain; opacity: .45; transform: translateY(-50%); pointer-events: none; }
@media (max-width: 899px) { body.theme-b .hv-reviews::after { top: auto; bottom: 1rem; right: .5rem; height: min(45%, 18rem); transform: none; opacity: .3; } }
body.theme-b .hv-reviews__score strong { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; letter-spacing: -.01em; }
body.theme-b .hv-reviews .hv-stars { fill: #f2c14e; }
body.theme-b .hv-reviews__count { color: rgb(255 255 255 / .85); font-weight: 500; }
body.theme-b .hv-reviews__quote p { color: #fff; font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.625rem, 3vw, 2.25rem); font-weight: 500; line-height: 1.2; }
body.theme-b .hv-reviews__inner { max-width: 40rem; }
body.theme-b .hv-reviews__quote footer { color: var(--b-cream); font-weight: 600; }
body.theme-b .hv-reviews .button.button--secondary { --btn-fill: #fff; display: inline-flex; align-items: center; gap: .6rem; min-height: 3rem; padding: .75rem 1.35rem; border: 0; border-radius: .4rem; background: var(--b-cream); color: var(--b-ink); font-weight: 600; box-shadow: none; }
body.theme-b .hv-reviews .button.button--secondary::after { content: ""; position: static; inset: auto; flex: none; width: .85rem; height: .85rem; border-radius: 0; background: currentColor; opacity: 1; transform: none; -webkit-mask: var(--b-arrow) no-repeat center / contain; mask: var(--b-arrow) no-repeat center / contain; transition: transform .3s var(--hv-ease); }
body.theme-b .hv-reviews .button.button--secondary:is(:hover, :focus-visible) { background: #fff; color: var(--b-ink); }
body.theme-b .hv-reviews .button.button--secondary:is(:hover, :focus-visible)::after { transform: translate(3px, -3px); }

/* In de buurt: wit, titels in Cormorant, crème tekstvlak, rechte kaartjes zoals de appartementen */
body.theme-b .hv-nearby { background: #fff; }
body.theme-b :is(.hv-nearby__h2, .hv-nearby__pinned-title) { color: var(--b-ink); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; }
body.theme-b .hv-nearby__lead { color: var(--b-olive); font-family: "Cormorant Garamond", Georgia, serif; }
body.theme-b .hv-nearby__lead::before { background: #e3a21e; }
body.theme-b .hv-nearby__intro { background: var(--b-cream); }
body.theme-b .hv-nearby__intro p, body.theme-b .hv-nearby__intro p:first-child { color: var(--b-ink); }
body.theme-b .hv-nearby__intro p:first-child { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.35; }
body.theme-b .hv-nearby__intro p + p { border-top-color: rgb(51 81 43 / .15); }
body.theme-b .hv-trip:nth-child(n) { transform: none; }
body.theme-b .hv-trip:is(:hover, .is-flipped) { transform: translateY(-.25rem); }
body.theme-b .hv-trip__face { border: 0; border-radius: .75rem; box-shadow: none; }
body.theme-b .hv-trip__front { background: var(--b-cream); }
body.theme-b .hv-trip__back { background: var(--b-cream); color: var(--b-ink); }
body.theme-b .hv-trip__plus { color: var(--b-olive); box-shadow: none; }
body.theme-b .hv-trip__close { color: var(--b-ink); border-color: rgb(51 81 43 / .2); }
body.theme-b .hv-trip__title { padding-left: 0; color: var(--b-ink); font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: clamp(1.5rem, 2vw, 1.75rem); }
/* Rina en Mart en Zakelijk: foto's even groot (zelfde kolombreedte en verhouding) */
@media (min-width: 900px) {
  body.theme-b :is(.hv-story__grid, .hv-business__grid) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
body.theme-b :is(.hv-story__photo, .hv-business__photo) { aspect-ratio: 5 / 4; }
/* Sfeergalerij onder Rina en Mart: een grote foto met vijf kleinere ernaast (desktop), op mobiel een rij om door te vegen */
.hv-sfeer { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(10rem, 15vw, 14rem)); gap: clamp(.5rem, 1vw, .875rem); margin: clamp(3rem, 7vw, 5.5rem) 0 0; padding: 0; list-style: none; }
.hv-sfeer__item { overflow: hidden; border-radius: .75rem; background: #f5ecd6; }
.hv-sfeer__item--1 { grid-area: 1 / 1 / 3 / 4; }
.hv-sfeer__item--2 { grid-area: 1 / 4 / 2 / 5; }
.hv-sfeer__item--3 { grid-area: 1 / 5 / 2 / 7; }
.hv-sfeer__item--4 { grid-area: 2 / 4 / 3 / 6; }
.hv-sfeer__item--5 { grid-area: 2 / 6 / 3 / 7; }
.hv-sfeer__item:nth-child(n+6) { display: none; }
@media (max-width: 899px) {
  .hv-sfeer { display: flex; gap: .625rem; margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .hv-sfeer::-webkit-scrollbar { display: none; }
  .hv-sfeer__item, .hv-sfeer__item:nth-child(n+6) { display: block; flex: 0 0 min(78vw, 20rem); aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .hv-sfeer__item--1 { flex-basis: min(86vw, 24rem); }
}
/* De nieuwe aar (aar-lijn.svg, 625×810) ook in de hero van ?mobiel=2 en 3, op desktop iets dunner (aar-lijn-dun.svg) */
.hvc-hero--m2 .hv-heroB__aar--blank {
  -webkit-mask-image: url(../images/aar-lijn-dun.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
  mask-image: url(../images/aar-lijn-dun.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
  --ah: min(var(--fh) * 1.08, var(--fw) * .5 * 810 / 625); --aw: calc(var(--ah) * 625 / 810);
  --size: auto calc(var(--ah) + var(--p) * var(--p) * 900svh);
  --pos: calc((1 - var(--p)) * (var(--fw) - var(--aw) * .97) + var(--p) * 50%) calc((1 - var(--p)) * -.5rem + var(--p) * 50%); }
@media (max-width: 899px), (orientation: portrait) {
  .hvc-hero--m2 .hv-heroB__aar--blank {
    -webkit-mask-image: url(../images/aar-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    mask-image: url(../images/aar-lijn.svg), linear-gradient(rgb(0 0 0 / var(--fill)), rgb(0 0 0 / var(--fill)));
    --size: auto calc(58% + var(--p) * var(--p) * 900svh);
    --aw: calc((100cqh - var(--frame-top) - var(--frame-bottom)) * .58 * 625 / 810);
    --pos: calc((1 - var(--p)) * (100cqw - 2 * var(--edge) - var(--aw) * .97) + var(--p) * 50%) calc((1 - var(--p)) * -.25rem + var(--p) * 50%); }
}
/* Broodtekst op de nieuwe homepage overal 16px */
body.theme-b .hv :is(.hvc-intro__body p:not(.hvc-intro__title), .hvb-apts__head p:not(.hvb-apts__title), .hvb-card__text, .hvb-dogs p, .hv-nearby__intro p + p, .hv-trip__text, .hv-story .prose, .hv-business .prose) { font-size: 1rem; }
/* Sfeergalerij in een eigen beige band, Zakelijk daaronder wit */
body.theme-b .hv-sfeer-band { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--b-cream); }
body.theme-b .hv-sfeer-band .hv-sfeer { margin: 0; }
body.theme-b .hv-sfeer__item { background: #e9dfc4; }
body.theme-b .hv-business { background: #fff; }
/* ==== Nieuwe homepage volgens home.png (alles onder de hero) ====
   Wit en crème om en om, titels in Cormorant 600, gele en crème "swooshes" (delen van de aar) over de randen van de secties,
   foto's in de organische vorm (vorm-foto.svg), groen vlak voor de ervaringen, nieuwe footer. */
body.theme-b .hv { --b-cream: #f7efd7; }
body.theme-b :is(.hvc-intro__title, .hvb-apts .hvb-apts__title, .hv-business .hv-h2, .hv-nearby__h2) { font-weight: 600; letter-spacing: -.005em; }
body.theme-b .hvb-apts .hvb-apts__title em { color: #e3a92f; font-weight: 600; }

/* Introductie: wit, geen oranje bogen; foto's met een crème rand, lichte swoosh boven de achterste foto */
body.theme-b .hvc-intro { background: #fff; overflow: visible; }
body.theme-b .hvc-intro::before, body.theme-b .hvc-intro::after { content: none; }
body.theme-b .hvc-intro__title { max-width: 20ch; font-size: clamp(2.25rem, 3.4vw, 3rem); line-height: 1.08; }
body.theme-b .hvc-intro__back { border: 6px solid #f5f3e8; border-radius: .6rem; box-shadow: none; }
body.theme-b .hvc-intro__front { border-color: #f5f3e8; box-shadow: none; }
body.theme-b .hvc-intro__collage::after { content: ""; position: absolute; top: -20%; right: -30%; width: 42%; aspect-ratio: 197 / 190; background: url(../images/aar-swoosh-light.svg) no-repeat center / contain; pointer-events: none; }

/* Appartementen: crème, gele swoosh rechtsboven over de rand; sticker als wit rondje met de aar */
body.theme-b .hvb-apts { position: relative; background: var(--b-cream); }
body.theme-b .hvb-apts::before { content: ""; position: absolute; z-index: 1; top: -2rem; right: clamp(1rem, 12vw, 11.5rem); width: clamp(9rem, 21vw, 19rem); aspect-ratio: 348 / 277; background: url(../images/aar-swoosh.svg) no-repeat center / contain; pointer-events: none; }
body.theme-b .hvb-card__sticker .site-cta-ring { display: none; }
body.theme-b .hvb-card__sticker { color: #e3a92f; font-size: .8125rem; font-weight: 700; }
body.theme-b .hvb-apts .hvb-card__more { color: #e3a92f; }
body.theme-b .hvb-apts .hvb-card__arrow { color: #3f9b45; }
body.theme-b .hvb-apts .hvb-dogs { padding: 1.1rem 2.25rem 1.1rem 1.5rem; }
body.theme-b .hvb-apts .hvb-dogs strong { color: var(--b-ink); font-size: clamp(1.5rem, 2vw, 1.75rem); font-weight: 600; line-height: 1.1; }
body.theme-b .hvb-apts .hvb-dogs__icon { color: var(--b-ink); }

/* Rina en Mart: wit, foto in de organische vorm, gele swoosh linksonder die over de rand naar Zakelijk loopt */
body.theme-b .hv-story { position: relative; z-index: 1; }
body.theme-b .hv-story::after { content: ""; position: absolute; left: clamp(1rem, 11vw, 10rem); bottom: -1.75rem; width: clamp(9rem, 21vw, 19rem); aspect-ratio: 348 / 277; background: url(../images/aar-swoosh-alt.svg) no-repeat center / contain; pointer-events: none; }
body.theme-b :is(.hv-story__grid, .hv-business__grid) { max-width: 68rem; }
body.theme-b :is(.hv-story__photo, .hv-business__photo) { aspect-ratio: 484 / 393; border-radius: 0; -webkit-mask: url(../images/vorm-foto.svg) no-repeat center / 100% 100%; mask: url(../images/vorm-foto.svg) no-repeat center / 100% 100%; }
body.theme-b .hv-business__photo { -webkit-mask-image: url(../images/vorm-foto-gespiegeld.svg); mask-image: url(../images/vorm-foto-gespiegeld.svg); }
body.theme-b .hv-quote { font-size: clamp(2.5rem, 3.8vw, 3.25rem); font-style: italic; }

/* Zakelijk: crème */
body.theme-b .hv-business { background: var(--b-cream); }

/* Sfeergalerij: wit, drie even brede kolommen; links één hoge foto, rechts vier kleinere */
body.theme-b .hv-sfeer-band { background: #fff; }
body.theme-b .hv-sfeer-band .container { max-width: 66.5rem; }
@media (min-width: 900px) {
  body.theme-b .hv-sfeer { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, clamp(10rem, 13.6vw, 12.5rem)); gap: 1.1rem; }
  body.theme-b .hv-sfeer__item--1 { grid-area: 1 / 1 / 3 / 2; }
  body.theme-b .hv-sfeer__item--2 { grid-area: 1 / 2 / 2 / 3; }
  body.theme-b .hv-sfeer__item--3 { grid-area: 1 / 3 / 2 / 4; }
  body.theme-b .hv-sfeer__item--4 { grid-area: 2 / 2 / 3 / 3; }
  body.theme-b .hv-sfeer__item--5 { grid-area: 2 / 3 / 3 / 4; }
}
body.theme-b .hv-sfeer__item { border-radius: .9rem; }

/* Ervaringen: crème band met een effen groen vlak; grote crème aar-lijnen rechts, deels buiten het vlak */
body.theme-b .hv-reviews-band { padding: clamp(3rem, 5.5vw, 5rem) var(--b-edge) 0; background: var(--b-cream); }
body.theme-b .hv-reviews { max-width: 77.5rem; margin: 0 auto; padding-block: clamp(3.5rem, 6vw, 5.5rem); border-radius: .5rem; background: #74944a; }
body.theme-b .hv-reviews::after { top: -6%; bottom: auto; right: -4%; height: 125%; opacity: .14; transform: none; filter: brightness(10); }
body.theme-b .hv-reviews__score { gap: 1rem; }
body.theme-b .hv-reviews__score strong { font-size: clamp(3rem, 4.6vw, 4rem); }
body.theme-b .hv-reviews__meta { display: grid; gap: .3rem; justify-items: start; }
body.theme-b .hv-reviews__meta .hv-stars svg { width: 1rem; height: 1rem; }
body.theme-b .hv-reviews__meta .hv-reviews__count { margin: 0; font-size: .8125rem; font-weight: 600; }
body.theme-b .hv-reviews__quote { margin-top: 2rem; }
body.theme-b .hv-reviews__quote footer { color: #fff; font-size: .875rem; }
body.theme-b .hv-reviews .button.button--secondary { background: #fff; font-weight: 500; }
@media (max-width: 899px) { body.theme-b .hv-reviews::after { top: auto; bottom: -10%; right: -20%; height: 70%; } }

/* In de buurt: crème met een grote lichte aar erachter, tekst rechts zonder vlak, vijf kaartjes naast elkaar */
body.theme-b .hv-nearby { position: relative; isolation: isolate; background: var(--b-cream); }
body.theme-b .hv-nearby::before { content: ""; position: absolute; z-index: -1; top: clamp(2rem, 6vw, 5rem); left: 38%; width: clamp(10rem, 22vw, 20rem); aspect-ratio: 14 / 30; background: #f2e3bb; -webkit-mask: url(../images/aar.svg) no-repeat center / contain; mask: url(../images/aar.svg) no-repeat center / contain; transform: rotate(20deg); pointer-events: none; }
body.theme-b .hv-nearby__h2 { font-size: clamp(2.75rem, 4vw, 3.5rem); line-height: 1; }
body.theme-b .hv-nearby__lead { margin-top: 1.5rem; color: var(--b-olive); font-size: clamp(1.25rem, 1.6vw, 1.5rem); }
body.theme-b .hv-nearby__lead::before { content: none; }
body.theme-b .hv-nearby__intro { padding: 0; border-radius: 0; background: none; }
body.theme-b .hv-nearby__intro p:first-child { margin-bottom: 1.6rem; font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.65; }
body.theme-b .hv-nearby__intro p + p { padding-top: 0; border-top: 0; }
body.theme-b .hv-nearby__pinned-title { display: none !important; }
body.theme-b .hv-nearby__row { overflow: visible; }
body.theme-b .hv-nearby__rail { width: auto; padding: .5rem 0 0; }
@media (min-width: 1360px) {
  body.theme-b .hv-nearby__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.25rem; width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
  body.theme-b .hv-trip { width: auto; flex: none; }
}
@media (max-width: 1359px) {
  body.theme-b .hv-nearby__row { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  body.theme-b .hv-nearby__rail { width: max-content; padding: .5rem var(--gutter) 0; }
  body.theme-b .hv-nearby { --trip-w: min(62vw, 15rem); }
}
body.theme-b .hv-trip { gap: .9rem; }
body.theme-b .hv-trip:is(:hover, .is-flipped) { transform: none; }
body.theme-b .hv-trip__card { aspect-ratio: 231 / 265; }
body.theme-b .hv-trip__face { border-radius: .5rem; }
body.theme-b .hv-trip__plus { display: none; }
body.theme-b .hv-trip__title { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-family: var(--font-body); font-size: 1rem; font-weight: 400; letter-spacing: 0; }
body.theme-b .hv-trip__title::after { content: ""; flex: none; width: 1rem; height: 1rem; background: #3f9b45; -webkit-mask: var(--b-arrow) no-repeat center / contain; mask: var(--b-arrow) no-repeat center / contain; }
body.theme-b .hvc-intro__grid { width: min(100% - 2 * var(--gutter), 72.5rem); }
@media (min-width: 900px) { body.theme-b .hvc-intro__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); } body.theme-b .hvc-intro__collage { width: min(100%, 30.5rem); } }
body.theme-b .hvc-intro__title { max-width: 26ch; }
body.theme-b .hv-nearby::before { top: clamp(1.5rem, 4vw, 3.5rem); left: 39%; width: clamp(7rem, 12vw, 11.5rem); aspect-ratio: 220 / 579; background: #f3e5bf; transform: rotate(14deg); }
body.theme-b .hv-business .hv-h2 { font-size: clamp(2.5rem, 3.4vw, 3rem); }
@media (min-width: 900px) { body.theme-b .hv-business__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); } }
body.theme-b .hvb-apts .hvb-card__media { border-radius: .75rem; }
body.theme-b .hvb-apts .hvb-card__badge { border-radius: .3rem; }
body.theme-b .hv-story::after { bottom: -4.25rem; }
body.theme-b .hv-nearby::before { top: clamp(2rem, 6vw, 5.5rem); width: clamp(8rem, 13vw, 12.5rem); background: #f3e6c3; }
@media (max-width: 899px) {
  body.theme-b .hv-nearby::before { left: auto; right: -2rem; opacity: .8; }
  body.theme-b .hvb-apts::before { top: -1.5rem; right: 1rem; }
  body.theme-b .hv-story::after { left: 0; bottom: -3rem; }
  body.theme-b .hvc-intro__collage::after { right: -8%; top: -16%; width: 34%; }
}
/* Swooshes exact volgens home.png (gemeten op 1440 breed; daaronder schalen ze mee met de schermbreedte) */
body.theme-b { --sw: min(348px, 24.17vw); }
body.theme-b .hvc-intro__collage::after { top: -18.3%; right: auto; left: 89.8%; width: 39.5%; }
body.theme-b .hvb-apts::before { top: calc(-1 * min(95px, 6.6vw)); right: calc(50% - min(584px, 40.56vw)); width: var(--sw); }
body.theme-b .hv-story::after { content: none; }
body.theme-b .hv-story__grid { position: relative; }
body.theme-b .hv-story__grid::after { content: ""; position: absolute; z-index: 1; left: calc(-1 * min(62px, 4.33vw)); bottom: calc(min(80px, 5.56vw) - var(--sw) * 277 / 348); width: var(--sw); aspect-ratio: 348 / 277; background: url(../images/aar-swoosh-alt.svg) no-repeat center / contain; pointer-events: none; }
@media (max-width: 899px) {
  body.theme-b { --sw: min(14rem, 48vw); }
  body.theme-b .hvb-apts::before { right: .5rem; }
  body.theme-b .hv-story__grid::after { left: -1rem; bottom: auto; top: calc(min(78vw, 22rem) - var(--sw) * .55); }
}
/* Ervaringen: het groene vlak even breed als de hero */
body.theme-b .hv-reviews { max-width: none; }
/* Sfeergalerij op mobiel: vorige/volgende en teller onder de veegrij; op desktop staat alles al in beeld */
.hv-sfeer__nav { display: none; }
@media (max-width: 899px) {
  .hv-sfeer__nav:not([hidden]) { display: flex; align-items: center; justify-content: center; gap: 1.25rem; margin-top: 1.25rem; }
  .hv-sfeer__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid rgb(51 81 43 / .3); border-radius: 50%; background: #fff; color: #33512b; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, opacity .2s; }
  .hv-sfeer__btn:not(:disabled):active { border-color: #33512b; }
  .hv-sfeer__btn:disabled { opacity: .35; cursor: default; }
  .hv-sfeer__btn:focus-visible { outline: 2px solid #6a8f3d; outline-offset: 2px; }
  .hv-sfeer__count { min-width: 3.5rem; color: #33512b; font-size: .9375rem; font-variant-numeric: tabular-nums; text-align: center; }
}
/* Swoosh bij de appartementen onder 1200 breed: kleiner en midden op de bovenrand, zodat hij nooit over de titel valt */
@media (max-width: 1199px) {
  body.theme-b .hvb-apts::before { --sw-a: clamp(8rem, 20vw, 15rem); width: var(--sw-a); top: calc(var(--sw-a) * -.31); right: max(.75rem, 50% - min(584px, 40.56vw)); }
}
/* Honden-melding: icoon in een crème rondje; op smalle schermen een afgerond blok over de volle breedte, tekst links uitgelijnd */
body.theme-b .hvb-apts .hvb-dogs { gap: 1rem; }
body.theme-b .hvb-apts .hvb-dogs__icon { box-sizing: content-box; width: 1.375rem; height: 1.375rem; padding: .7rem; border-radius: 50%; background: var(--b-cream); }
body.theme-b .hvb-apts .hvb-dogs strong { margin-bottom: .2rem; }
@media (max-width: 639px) {
  body.theme-b .hvb-apts .hvb-dogs { align-items: flex-start; width: 100%; padding: 1.25rem 1.25rem 1.35rem; border-radius: 1rem; }
  body.theme-b .hvb-apts .hvb-dogs strong { font-size: 1.5rem; text-wrap: balance; }
  body.theme-b .hvb-apts .hvb-dogs p { line-height: 1.5; text-wrap: pretty; }
}
/* Swoosh bij Rina en Mart op smalle schermen: niet bij de foto maar op de onderrand van de sectie, net als die bij de appartementen */
@media (max-width: 899px) {
  body.theme-b .hv-story__grid::after { content: none; }
  body.theme-b .hv-story::after { content: ""; --sw-a: clamp(8rem, 20vw, 15rem); position: absolute; z-index: 1; left: .75rem; bottom: calc(var(--sw-a) * -.3); width: var(--sw-a); aspect-ratio: 348 / 277; background: url(../images/aar-swoosh-alt.svg) no-repeat center / contain; pointer-events: none; }
}
/* Tablet en kleine laptop: de randen van de hero en het groene vlak gelijk aan de (ruimere) marge van de inhoud */
@media (min-width: 640px) and (max-width: 1199px) { body.theme-b .hvb, body.theme-b .hv { --edge: var(--gutter); --b-edge: var(--gutter); } }
@media (min-width: 640px) and (max-width: 1199px) { body.theme-b .site-header__inner { margin-inline: var(--gutter); } }
/* Onder elkaar (onder 900 breed): de foto's van Rina en Mart en Zakelijk kleiner, en bij Zakelijk ook eerst de foto en dan de tekst */
@media (max-width: 899px) {
  body.theme-b :is(.hv-story__photo, .hv-business__photo) { width: min(100%, 30rem); }
  body.theme-b .hv-business__photo { order: -1; }
}
/* Tablet (onder elkaar): Rina en Mart en Zakelijk in het midden, foto en tekst gecentreerd */
@media (min-width: 640px) and (max-width: 899px) {
  body.theme-b :is(.hv-story__grid, .hv-business__grid) { justify-items: center; text-align: center; }
  body.theme-b :is(.hv-story__body, .hv-business__body) { max-width: 36rem; }
  body.theme-b :is(.hv-story, .hv-business) .prose { margin-inline: auto; }
  body.theme-b .hv-quote { text-wrap: balance; }
}
/* In de buurt, achterkant van een kaartje: wit vlak, ruimte boven voor het kruisje, compactere tekst en knop zodat alles past */
body.theme-b .hv-trip__back { justify-content: flex-start; gap: .9rem; padding: 3.25rem 1.1rem 1.1rem; background: #fff; text-align: left; align-items: flex-start; }
body.theme-b .hv .hv-trip__text { font-size: .875rem; line-height: 1.5; }
body.theme-b .hv-trip__close { top: .6rem; right: .6rem; width: 2rem; height: 2rem; }
body.theme-b .hv-trip__ext { min-height: 2.5rem; margin-top: auto; padding: .55rem 1rem; font-size: .875rem; }
/* Tablet (kaarten onder elkaar): appartementkaarten smaller en in het midden, net als de foto's van Rina en Mart en Zakelijk */
@media (min-width: 640px) and (max-width: 899px) {
  body.theme-b .hvb-cards { width: min(100%, 30rem); margin-inline: auto; }
}
/* In de buurt: alle kaartjes even hoog; onder 1200 breed een veegrij met kaartjes van 15rem (de teksten zijn daarop afgestemd) */
@media (max-width: 1359px) { body.theme-b .hv-nearby { --trip-w: 15rem; } body.theme-b .hv-trip { flex: 0 0 var(--trip-w); scroll-snap-align: start; } }
/* Alle tekstblokken in de rijen even breed (36rem), voor een rustige, consistente maat */
body.theme-b .hv { --b-measure: 36rem; }
body.theme-b :is(.hvc-intro__body, .hv-story__body, .hv-business__body, .hv-nearby__intro, .hv-reviews__inner) { width: 100%; max-width: var(--b-measure); }
body.theme-b .hvb-apts .hvb-apts__head { max-width: var(--b-measure); }
body.theme-b :is(.hvc-intro__body, .hv-story__body, .hv-business__body, .hv-nearby__intro, .hvb-apts__head) :is(p:not(.hvc-intro__title, .hvb-apts__title), .prose, .hv-quote, .hv-eyebrow) { max-width: none; }
body.theme-b .hv-trip__back { padding-bottom: 1rem; }
/* Rina en Mart en Zakelijk: de tekstkolom even breed als de andere tekstblokken (36rem), de foto vult de rest */
@media (min-width: 900px) {
  body.theme-b :is(.hv-story__grid, .hv-business__grid) { max-width: 72rem; }
  body.theme-b .hv-story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--b-measure)); }
  body.theme-b .hv-business__grid { grid-template-columns: minmax(0, var(--b-measure)) minmax(0, 1fr); }
}
/* Tablet (onder elkaar): ook de introductie in het midden */
@media (min-width: 640px) and (max-width: 899px) {
  body.theme-b .hvc-intro__grid { justify-items: center; text-align: center; }
  body.theme-b .hvc-intro__title { margin-inline: auto; }
}
/* Sfeergalerij op smalle schermen: alle foto's even breed, elke veeg precies één foto verder, niet doorschieten naar de pagina */
@media (max-width: 899px) {
  body.theme-b .hv-sfeer { scroll-snap-type: x mandatory; overscroll-behavior-x: contain; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; }
  body.theme-b .hv-sfeer__item, body.theme-b .hv-sfeer__item--1, body.theme-b .hv-sfeer__item:nth-child(n+6) { flex: 0 0 min(82vw, 22rem); scroll-snap-align: start; scroll-snap-stop: always; }
  body.theme-b .hv-sfeer__item img { -webkit-user-drag: none; user-select: none; pointer-events: none; }
}
/* Veegrij In de buurt: kaartjes klikken in het midden vast, zodat een omgedraaid kaartje in het midden blijft staan */
@media (max-width: 1359px) { body.theme-b .hv-trip { scroll-snap-align: center; } }
/* Pijltje in "Boek nu" (kopbalk en menu): vloeiend meeschuiven in plaats van verspringen */
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta)::after { transition: transform .35s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta):is(:hover, :focus-visible)::after { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { body.theme-b :is(.site-nav__item--button > .site-nav__link, .site-header__cta)::after { transition: none; } }

/* In de buurt met meer dan vijf kaartjes: ook op grote schermen een veegrij (kaartjes even breed als in het raster van vijf) */
@media (min-width: 1360px) {
  body.theme-b .hv-nearby--carousel { --trip-w: calc((min(100vw - 2 * var(--gutter), var(--container)) - 5rem) / 5); }
  body.theme-b .hv-nearby--carousel .hv-nearby__row { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), (100vw - var(--container)) / 2); scrollbar-width: none; overscroll-behavior-x: contain; }
  body.theme-b .hv-nearby--carousel .hv-nearby__rail { display: flex; width: max-content; margin: 0; padding: .5rem max(var(--gutter), (100vw - var(--container)) / 2) 0; }
  body.theme-b .hv-nearby--carousel .hv-trip { flex: 0 0 var(--trip-w); width: var(--trip-w); scroll-snap-align: start; }
}
.hv-nearby__nav:not([hidden]) { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.hv-nearby__btn { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1.5px solid rgb(51 81 43 / .3); border-radius: 50%; background: #fff; color: #33512b; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color .2s, opacity .2s; }
.hv-nearby__btn:not(:disabled):is(:hover, :active) { border-color: #33512b; }
.hv-nearby__btn:disabled { opacity: .35; cursor: default; }
.hv-nearby__btn:focus-visible { outline: 2px solid #6a8f3d; outline-offset: 2px; }
@media (max-width: 899px) { .hv-nearby__nav:not([hidden]) { justify-content: center; } }

/* Introductie: een crème aar (schuin, zoals in het logo) boven de achterste foto in plaats van de swoosh */
body.theme-b .hvc-intro__collage::after { top: -24%; left: 86%; width: 30%; aspect-ratio: 444 / 618; background: #f7efd7; -webkit-mask: url(../images/aar-schuin.svg) no-repeat center / contain; mask: url(../images/aar-schuin.svg) no-repeat center / contain; }
@media (max-width: 899px) { body.theme-b .hvc-intro__collage::after { top: -22%; left: auto; right: 2%; width: 20%; } }