/* ============================================================
   De Vlindertuin Ameland — stylesheet
   Kleuren: groen #2E6042 / #37723E / #89C162, donker #292723,
   rood #C20000, off-white #F7F3EC, accent geel #FFAD06, wit #fff
   Fonts: Playfair Display (display) + Inter (body)
   ============================================================ */

:root{
    /* timing-tokens voor de EH-modules (o.a. lightbox.css) */
    --dur-fast:.16s; --dur-med:.3s; --ease-out:cubic-bezier(.25,1,.5,1);
    --green-1:#2E6042;   /* primair donkergroen */
    --green-2:#37723E;   /* middengroen */
    --green-3:#89C162;   /* lichtgroen */
    --ink:#292723;       /* bijna zwart */
    --red:#C20000;
    --cream:#F7F3EC;     /* off-white achtergrond */
    --accent:#FFAD06;    /* geel/oranje accent */
    --white:#ffffff;

    --maxw:1280px;
    --gutter:clamp(20px, 4vw, 56px);
    --radius:18px;
    --radius-lg:34px;

    --font-display:"Playfair Display", Georgia, serif;
    --font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

    --shadow-sm:0 2px 10px rgba(41,39,35,.06);
    --shadow-md:0 18px 40px -18px rgba(41,39,35,.30);
    --shadow-lg:0 30px 70px -30px rgba(41,39,35,.45);

    --header-h:96px;
    --section-pad:clamp(46px,7vw,96px);   /* consistente verticale ruimte tussen lagen (rustiger op mobiel) */
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
    margin:0;
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.65;
    color:var(--ink);
    background:var(--cream);
    overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.12;color:var(--ink)}

.container{width:90%;max-width:var(--maxw);margin-inline:auto}
.layer{padding-block:var(--section-pad)}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--green-1);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---------- typografie helpers ---------- */
.tagline{
    display:inline-block;
    font-size:12px;
    font-weight:600;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--accent);          /* taglines overal geel */
    margin-bottom:14px;
}
.tagline--accent{color:var(--accent)}
.heading{
    font-size:clamp(28px,3vw,40px);
    font-weight:600;
    letter-spacing:-.01em;
}
.heading em{font-style:italic;color:var(--green-2)}
.heading mark{background:none;color:var(--green-2);font-style:italic}   /* accent-woord in koppen: groen + cursief */
.heading--light{color:var(--white)}
.heading--light em{color:var(--green-3)}
.heading--light mark{background:none;color:var(--green-3)}
/* layer_usps · banner-weergave — vol-brede aandacht-banner: icoon-cirkel (complete SVG) + groene pill */
.layer--usps-banner{padding:0;background:var(--cream)}
.layer--usps-banner .container{text-align:center}
.usps-banner{display:inline-flex;align-items:center;text-decoration:none;color:inherit;text-align:left}
.usps-banner__icon{position:relative;z-index:2;flex:none;width:108px;height:108px;animation:usps-float 3.6s ease-in-out infinite;filter:drop-shadow(0 8px 18px rgba(0,0,0,.14))}
/* float op de cirkel (doorlopend) + eenmalige "pop" op het icoon zelf — samen via nesting */
.usps-banner__icon svg,.usps-banner__icon img{display:block;width:100%;height:100%;animation:usps-pop 1.1s ease-in-out 1.6s both}
.usps-banner__pill{display:inline-flex;align-items:center;gap:.5rem;margin-left:-34px;padding:.95rem 1.75rem .95rem 50px;background:var(--green-1);border-radius:999px;color:#fff;box-shadow:0 8px 18px rgba(0,0,0,.10)}
.usps-banner__text{font-size:clamp(1rem,2vw,1.25rem);line-height:1.2}
.usps-banner__text mark{background:none;color:#fff;font-weight:700;font-style:normal}
.usps-banner__arrow{font-weight:700;transition:transform .25s}
.usps-banner:hover .usps-banner__arrow{transform:translateY(4px)}
@keyframes usps-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes usps-pop{0%{transform:scale(1)}42%{transform:scale(1.32)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.usps-banner__icon,.usps-banner__icon svg,.usps-banner__icon img{animation:none}}
@media (max-width:560px){.usps-banner__icon{width:88px;height:88px}.usps-banner__pill{margin-left:-28px;padding:.85rem 1.3rem .85rem 40px}}

.section-head{margin-bottom:38px}
.section-head--center{text-align:center;max-width:640px;margin-inline:auto}
/* Vakantiewoningen-kop (tagline + titel) gecentreerd boven de filterbalk */
.section-head:has(+ .result-filters){text-align:center}
.section-head--light .heading{color:var(--white)}

/* ---------- knoppen ---------- */
.btn{
    --bg:var(--green-1);--fg:#fff;
    display:inline-flex;align-items:center;justify-content:center;gap:10px;
    background:var(--bg);color:var(--fg);
    font-family:var(--font-body);font-weight:600;font-size:14.5px;
    padding:13px 24px;border:0;border-radius:999px;cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, filter .25s ease;
    box-shadow:0 8px 20px -10px rgba(46,96,66,.7);
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04);box-shadow:0 14px 26px -10px rgba(46,96,66,.8)}
.btn--primary{--bg:var(--green-1)}
.btn--accent{--bg:var(--accent);--fg:#fff;box-shadow:0 8px 20px -10px rgba(255,173,6,.9)}
.btn--ghost-light{--bg:transparent;--fg:#fff;border:1.5px solid rgba(255,255,255,.6);box-shadow:none}
.btn--ghost-light:hover{background:rgba(255,255,255,.12)}
.btn--arrow::after{content:"";width:13px;height:11px;background:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat;display:inline-block}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    transition:background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.nav-backdrop{position:fixed;inset:0;background:rgba(41,39,35,.5);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;z-index:90;border:0}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}
.site-nav__close{display:none}
.site-nav--secondary{display:none}
.site-header__inner{
    width:90%;max-width:var(--maxw);margin-inline:auto;
    min-height:var(--header-h);
    display:flex;align-items:center;gap:24px;
    transition:min-height .35s ease;
}
.site-logo{display:block;flex:0 0 auto}
.site-logo__img{height:48px;width:auto;transition:opacity .35s ease}
.site-logo__img--white{position:absolute;top:0;left:0}
.site-logo{position:relative}
/* default (boven hero): wit logo zichtbaar */
.site-logo__img--color{opacity:0}
.site-logo__img--white{opacity:1}

/* rechterkolom: bovenbalk (contact + vlaggen) boven de menu-items */
.site-header__main{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:15px}
.site-header__util{display:flex;align-items:center;gap:20px;
    padding-right:22px;          /* lijnt de laatste vlag uit op de 'k' van 'Boek' */
    max-height:40px;overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, transform .35s ease}
.site-header__contact{display:inline-flex;align-items:center;gap:7px;color:#fff;font-size:13px;font-weight:500;
    transition:color .25s ease,opacity .25s ease;opacity:.92}
.site-header__contact:hover{opacity:1}
.site-header__contact svg{flex:0 0 auto}
.site-header__lang{display:flex;gap:8px;list-style:none;margin:0;padding:0}
.site-header__lang a{display:block;opacity:.6;transition:opacity .25s,transform .25s}
.site-header__lang a.is-active,.site-header__lang a:hover{opacity:1;transform:translateY(-1px)}
.site-header__lang img{display:block;width:18px;height:18px;border-radius:50%}

.site-header__nav{display:flex;align-items:center;gap:28px}
.site-nav__ctas--mobile{display:none}
.site-nav__list{display:flex;gap:30px;list-style:none;margin:0;padding:0}
.site-nav__link{
    font-size:14.5px;font-weight:500;color:#fff;
    padding:6px 2px;position:relative;transition:color .25s ease;
}
.site-nav__link::after{
    content:"";position:absolute;left:0;right:100%;bottom:-2px;height:2px;
    background:currentColor;transition:right .3s ease;border-radius:2px;
}
.site-nav__link:hover::after,.site-nav__item--active .site-nav__link::after{right:0}
.site-header__cta{padding:6px 22px 7px;line-height:1;box-shadow:none}   /* compacte pil zonder glow; tekst optisch gecentreerd */
/* subtiel hover-effect: knop iets dieper van kleur, geen lift/schaduw */
.site-header__cta:hover{transform:none;box-shadow:none;filter:brightness(.93)}
.site-header__menu-toggle{display:none;margin-left:auto;background:none;border:0;color:#fff;cursor:pointer}

/* gescrolde / sticky toestand */
.site-header.is-stuck{
    background:var(--white);
    box-shadow:0 6px 24px -12px rgba(41,39,35,.35);
}
.site-header.is-stuck .site-logo__img--color{opacity:1}
.site-header.is-stuck .site-logo__img--white{opacity:0}
.site-header.is-stuck .site-logo__img{height:42px}
.site-header.is-stuck .site-nav__link{color:var(--ink)}
.site-header.is-stuck .site-header__contact{color:var(--green-1)}
.site-header.is-stuck .site-header__menu-toggle{color:var(--ink)}
.site-header.is-stuck .site-header__inner{min-height:66px}
/* bovenbalk (telefoon/e-mail/vlaggen) klapt in bij scrollen — net als de referentie */
.site-header.is-stuck .site-header__main{gap:0}
.site-header.is-stuck .site-header__util{max-height:0;opacity:0;transform:translateY(-8px);pointer-events:none}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    position:relative;
    height:45.833vw;                   /* header-verhouding 1920×880 (880/1920 = 45.833%) */
    min-height:560px;                  /* ondergrens zodat content op smalle schermen past */
    display:flex;align-items:center;
    padding-top:var(--header-h);
    overflow:hidden;
    isolation:isolate;
}
.hero__slides{position:absolute;inset:0;z-index:-2}
.hero__slide{
    position:absolute;inset:0;
    background-size:cover;background-position:center;
    background-image:var(--hb-m);      /* per-slide mobiel beeld via inline custom-property (geldige HTML, geen <style> in body) */
    opacity:0;transform:scale(1.08);   /* = eindstand van kenburns: bevroren laatste frame */
    transition:opacity 1.4s ease;
}
@media(min-width:769px){.hero__slide{background-image:var(--hb-d)}}  /* desktop: grote variant */
/* zoomt van 1 → 1.08 en bevriest daar (forwards). De basis-transform is óók 1.08,
   dus bij het wegfaden springt de foto NIET terug — het laatste frame blijft staan. */
.hero__slide.is-active{opacity:1;animation:kenburns 6.5s ease-out forwards}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

/* frisser: alleen bovenin een subtiele donkere gradient voor de menu-leesbaarheid,
   de rest van de foto blijft onbewerkt (lichter). */
.hero__scrim{position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,
        rgba(41,39,35,.5) 0%,
        rgba(41,39,35,.16) 14%,
        rgba(41,39,35,0) 30%,
        rgba(41,39,35,0) 50%,
        rgba(41,39,35,.55) 100%);
}
.hero__content{
    width:90%;max-width:var(--maxw);margin-inline:auto;
    text-align:center;color:#fff;
    padding-bottom:60px;
}
/* hero-tekst wisselt per slide met een fade + verticale beweging */
.hero__text{transition:opacity .5s cubic-bezier(.22,.61,.36,1), transform .5s cubic-bezier(.22,.61,.36,1)}
.hero__text.is-out{opacity:0;transform:translateY(26px)}
.hero__text--empty{visibility:hidden}   /* slide zonder eigen payoff: geen (stale) tekst tonen */
.hero__title{
    font-size:clamp(44px,6vw,82px);font-weight:600;color:#fff;
    text-shadow:0 2px 18px rgba(0,0,0,.5), 0 1px 4px rgba(0,0,0,.35);
    letter-spacing:-.01em;
}
.hero__subtitle{
    font-size:clamp(15px,1.4vw,19px);font-weight:400;margin:14px 0 30px;
    text-shadow:0 1px 12px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.4);letter-spacing:.02em;
}
@keyframes rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}

/* groene band (footer-groen) over de volle breedte achter de zoek & boek-balk */
.layer--search{background:var(--green-1)}

/* zoekbalk */
.searchbar{
    display:flex;align-items:stretch;gap:10px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(6px);
    padding:6px;border-radius:14px;
    max-width:760px;margin:0 auto;
    box-shadow:var(--shadow-md);
    animation:rise .9s .45s both;
}
.searchbar__field{flex:1;display:flex;flex-direction:column;justify-content:center;text-align:left;
    height:55px;background:#fff;border:1px solid #e7e1d6;border-radius:9px;padding:0 14px;min-width:0}
.searchbar__label{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9a9384}
.searchbar__field input,.searchbar__field select{
    border:0;background:none;font-family:inherit;font-size:14px;color:var(--ink);
    padding:2px 0 0;outline:none;width:100%;cursor:pointer;
}
.searchbar__submit{flex:0 0 auto;height:55px;padding-inline:26px}
@media (max-width:680px){
    .searchbar{flex-direction:column;align-items:stretch;gap:8px}
    .searchbar__field,.searchbar__submit{flex:none;width:100%}
    .searchbar__field{height:auto;min-height:55px;padding-block:8px}
    .searchbar__submit{height:50px}
}

/* hero dots */
/* pagination onderin de header-foto, net boven de golf-rand */
.hero__dots{position:absolute;left:0;right:0;bottom:84px;z-index:3;
    display:flex;gap:9px;justify-content:center;margin:0}
.hero__dots button{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;
    padding:0;box-sizing:border-box;flex:0 0 auto;-webkit-appearance:none;appearance:none;
    background:rgba(255,255,255,.5);transition:background .25s,transform .25s}
.hero__dots button.is-active{background:#fff;transform:scale(1.25)}

/* hero prev/next-pijltjes (zoals prototype) */
.hero__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
    width:25px;height:25px;border-radius:50%;
    border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    color:#fff;display:grid;place-items:center;cursor:pointer;
    transition:background .25s ease, border-color .25s ease, transform .25s ease, opacity .3s ease}
.hero__arrow:hover{background:rgba(255,255,255,.28);border-color:#fff}
.hero__arrow--prev{left:clamp(8px,1.4vw,18px)}
.hero__arrow--next{right:clamp(8px,1.4vw,18px)}
.hero__arrow--prev svg{transform:scaleX(-1)}      /* pijl naar links */
.hero__arrow--prev:hover{transform:translateY(-50%) translateX(-3px)}
.hero__arrow--next:hover{transform:translateY(-50%) translateX(3px)}
@media (max-width:620px){
    .hero__arrow{width:22px;height:22px}
    .hero__arrow svg{width:11px;height:9px}
}

/* golf onderaan hero */
.hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:2;line-height:0}
.hero__wave svg{display:block;width:100%;height:70px}

/* ============================================================
   RIBBON (inclusief badge)
   ============================================================ */
.ribbon{
    display:flex;align-items:center;gap:12px;justify-content:center;
    background:var(--green-1);color:#fff;
    width:max-content;max-width:90%;margin:-26px auto clamp(40px,5vw,76px);  /* extra ruimte tot 'Over ons' */
    padding:10px 22px 10px 12px;border-radius:999px;
    box-shadow:var(--shadow-md);position:relative;z-index:5;
    font-size:14px;
}
.ribbon__badge{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
    background:var(--accent)}
.ribbon__text strong{font-weight:700}

/* ============================================================
   OVER ONS
   ============================================================ */
.about__grid{display:grid;grid-template-columns:minmax(0,1fr) min(600px,50vw);
    gap:40px 80px;align-items:stretch}
.about__text p{color:#5b574d}   /* even breed als de knoppen eronder */
.usps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* inactief: witte knop, donkere tekst, groen icoon, geen schaduw */
.usp{display:flex;align-items:center;gap:13px;background:#fff;border:0;
    padding:15px 18px;border-radius:15px;font-size:14.5px;font-weight:500;color:#292723;
    box-shadow:none;
    cursor:pointer;transition:background .3s ease, color .3s ease}
.usp img{flex:0 0 auto;width:26px;height:26px}
/* actief/hover: subtiele warme grijstint, groene tekst, vlakker (geen schaduw).
   Het groene icoon (#2e6042) blijft groen — geen filter. */
.usp:hover,.usp.is-active{background:#e9e4db;color:var(--green-1);box-shadow:none}

/* gestapelde foto's met crossfade */
.about__visual{position:relative}
.about__media{position:relative;margin:0;aspect-ratio:7/5;
    border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-md)}
/* desktop: foto vult de kolomhoogte = even hoog als het tekst/knoppen-blok links */
@media (min-width:981px){
    .about__visual{height:100%}
    .about__media{aspect-ratio:auto;height:100%}
}
.about__photo{position:absolute;inset:0;width:100%;height:calc(100% + 1px);object-fit:cover;
    opacity:0;transition:opacity .5s ease, transform 6s ease;transform:scale(1.04)}
.about__photo.is-active{opacity:1;transform:scale(1)}

/* locatielabel 'Nes, Ameland' — wit kaartje linksonder, uitstekend over de foto */
.about__loclabel{position:absolute;left:-22px;bottom:-26px;z-index:4;
    background:#fff;border-radius:16px;padding:17px 21px;max-width:250px;
    display:flex;flex-direction:column;gap:5px;
    box-shadow:0 22px 30px -10px rgba(41,39,35,.18), 0 8px 12px -6px rgba(41,39,35,.10)}
.about__loclabel-title{display:flex;align-items:center;gap:9px;
    font-size:12px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--green-1)}
.about__loclabel-dot{width:8px;height:8px;border-radius:50%;background:var(--green-1);flex:0 0 auto}
.about__loclabel-sub{font-size:14px;line-height:1.45;color:#677e73}
/* tekst fadet even uit/in bij het wisselen van knop (los van de reveal-entree) */
.about__loclabel-title,.about__loclabel-sub{transition:opacity .18s ease}
.about__loclabel.is-swapping .about__loclabel-title,
.about__loclabel.is-swapping .about__loclabel-sub{opacity:0}
@media (max-width:620px){
    .about__loclabel{left:14px;bottom:-26px;padding:13px 16px;max-width:80%}  /* steekt onder de foto uit */
    .about__loclabel-sub{font-size:13px}
}

/* ============================================================
   SFEER CARROUSEL (strip)
   ============================================================ */
.strip{padding-block:var(--section-pad);overflow:hidden}
.strip__track{display:flex;gap:40px;width:max-content;animation:marquee var(--marquee-duration,52s) linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip__item{flex:0 0 auto;margin:0}
.strip__item img{width:300px;height:200px;object-fit:cover;border-radius:16px;box-shadow:var(--shadow-sm)}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 20px))}}

/* ============================================================
   MIDWEEK ONTBIJT
   ============================================================ */
.breakfast__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.breakfast__media{position:relative;margin:0}
.breakfast__media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;
    aspect-ratio:5/4;object-fit:cover}
/* 'Veel geboekt'-label: oranje pil rechtsboven, half over de bovenrand (zoals concept) */
.badge-corner{position:absolute;top:-17px;right:8px;display:inline-flex;align-items:center;gap:8px;
    background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;line-height:1;
    padding:11px 20px 11px 17px;border-radius:999px;white-space:nowrap;transform-origin:center;
    box-shadow:0 10px 22px -7px rgba(255,173,6,.7);
    opacity:0;transform:rotate(3deg) scale(.85)}     /* startstand vóór animatie */
.badge-corner img{width:18px;height:18px;flex:0 0 auto}
/* opspringende, bumpy entree die uitdraait naar een recht label */
.badge-corner.is-in{animation:badgePop .8s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes badgePop{
    0%{opacity:0;transform:rotate(3deg) scale(.85) translateY(-10px)}
    50%{opacity:1;transform:rotate(-2.5deg) scale(1.09) translateY(4px)}
    72%{transform:rotate(1.2deg) scale(.97) translateY(-2px)}
    88%{transform:rotate(-.5deg) scale(1.02) translateY(1px)}
    100%{opacity:1;transform:rotate(0deg) scale(1) translateY(0)}
}
.breakfast__text p{color:#5b574d}   /* volle kolombreedte, loopt door t.o.v. de titel */
.breakfast__text .btn{margin-top:18px}
/* generieke tekst+beeld-sectie (layer_text · type=text_image) — zelfde 2-koloms opmaak */
.text-image__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:center}
.layer--text-image.is-reversed .text-image__grid{grid-template-columns:1.1fr 0.9fr}
.layer--text-image.is-reversed .text-image__media{order:2}
.text-image__media{position:relative;margin:0}
.text-image__media img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;display:block}
.text-image__text p{color:#5b574d}
.text-image__text .btn{margin-top:18px}
.search-results__summary{margin:-1rem 0 1.75rem;color:var(--ink)}
@media (max-width:860px){.text-image__grid{grid-template-columns:1fr}.text-image__media{order:-1}}

/* ============================================================
   AANBOD (groen paneel)
   ============================================================ */
.offer{position:relative}
.offer__panel{
    position:relative;z-index:2;          /* paneel vóór de vlinder-video */
    background:var(--green-1);
    border-radius:var(--radius-lg);
    padding:clamp(36px,5vw,64px) clamp(24px,4vw,56px) clamp(40px,5vw,64px);
    box-shadow:var(--shadow-lg);
}
/* vlinder-video: plakt tegen de rechterrand van het venster en valt nét achter
   het groene paneel (z-index 1 < paneel 2). Cream-achtergrond ~ paginakleur. */
/* gecentreerd net boven het groene paneel; onderkant valt 3px achter het paneel
   (z-index 1 < paneel 2). top volgt de sectie-padding zodat dit op elk scherm klopt. */
.offer__video{position:absolute;width:220px;height:auto;
    left:50%;transform:translateX(-50%);
    top:calc(clamp(56px,8vw,104px) - 120px);
    z-index:1;pointer-events:none;transition:opacity .6s ease}
/* na het afspelen wegfaden zodat het laatste frame (klein kleurverschil) niet blijft staan */
.offer__video.is-done{opacity:0}
/* mobiel: kleiner, zodat 'ie geen kader over de foto-schaduw vormt; vlinder piekt net boven het paneel */
@media (max-width:620px){
    .offer__video{width:150px;top:calc(clamp(46px,8vw,104px) - 78px)}
}
.section-head--light{text-align:center;margin-bottom:34px}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
/* generieke card-engine-grid (layer_cards) — zelfde look als .cards, data-cols-gestuurd */
.layer__cards-grid{display:grid;gap:40px;grid-template-columns:repeat(3,1fr)}
.layer__cards-grid[data-cols="2"]{grid-template-columns:repeat(2,1fr)}
.layer__cards-grid[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
/* paginatie-dots onder de kaart-carrousels (alleen mobiel zichtbaar) */
.cards-dots{display:none}
.cards-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;cursor:pointer;
    background:rgba(41,39,35,.22);transition:background .2s ease, transform .2s ease}
.cards-dots button.is-active{transform:scale(1.3)}
.card{background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md);
    transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.card__media{aspect-ratio:4/3;overflow:hidden;position:relative}
.card__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card__photo--hover{opacity:0;transition:opacity .5s ease,transform .6s ease}  /* 2e foto vervaagt in op hover */
.card:hover .card__photo--hover{opacity:1}
.card:hover .card__media img{transform:scale(1.06)}
.card__body{padding:20px 22px 24px;position:relative}
.card__title{font-size:21px;margin-bottom:8px}
.card__meta{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--green-2);font-weight:600;margin-bottom:10px}
.card__text{font-size:13.5px;color:#6a665c;line-height:1.6;margin:0;padding-right:34px}
.offer__panel .card__text{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.card__cta{position:absolute;right:18px;bottom:20px;width:34px;height:34px;border-radius:50%;
    background:var(--green-1);display:grid;place-items:center;transition:background .25s,transform .25s}
.card__cta::after{content:"";width:13px;height:11px;background:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat}
.card:hover .card__cta{background:var(--green-3);transform:translateX(3px)}
.offer__foot{text-align:center;margin-top:34px}

/* ============================================================
   BELEEF AMELAND
   ============================================================ */
.exp-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.exp-card{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:1/1;display:block;
    box-shadow:var(--shadow-md)}
.exp-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.exp-card:hover img{transform:scale(1.07)}
.exp-card__overlay{position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(46,96,66,0) 30%,rgba(28,52,36,.85) 100%)}
.exp-card__body{position:absolute;left:0;right:0;bottom:0;padding:22px 24px 26px;color:#fff;z-index:2}
.exp-card__title{color:#fff;font-size:24px;margin-bottom:6px}
.exp-card__text{font-size:13px;line-height:1.55;margin:0;padding-right:44px;  /* ruimte voor de ronde knop rechtsonder */
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .4s ease,opacity .4s ease,margin .4s ease}
.exp-card:hover .exp-card__text{max-height:80px;opacity:.92;margin-top:4px}
.exp-card__cta{position:absolute;right:18px;bottom:22px;z-index:3;width:34px;height:34px;border-radius:50%;
    background:rgba(255,255,255,.18);backdrop-filter:blur(4px);display:grid;place-items:center}
.exp-card__cta::after{content:"";width:13px;height:11px;background:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat}

/* ============================================================
   REISINFORMATIE
   ============================================================ */
.travel{position:relative;padding-bottom:0}
.travel__card{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
    background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg)}
/* Beeld|tekst-split alleen als de kaart écht een foto heeft (anders body vol-breed) */
.travel__card:has(.travel__media){grid-template-columns:0.85fr 1.15fr}
.travel__media{margin:0}
.travel__media img{width:100%;height:100%;object-fit:cover;min-height:280px}
.travel__body{padding:clamp(28px,3vw,44px);display:grid;gap:26px;align-content:center}
.travel__title{font-size:23px;margin-bottom:8px}
.travel__block p{color:#5b574d;font-size:14.5px;margin:0 0 12px}
.travel__contact{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}  /* meer lucht tot de titel erboven */
.chip{display:inline-flex;align-items:center;gap:8px;background:var(--green-1);color:#fff;
    font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:999px;transition:filter .2s}
.chip img,.chip svg{flex:0 0 auto}
.chip:hover{filter:brightness(1.08)}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--green-2);font-weight:600;font-size:13.5px}
.link-arrow::after{content:"";width:13px;height:11px;background:url('custom/knop-pijltje-donkergroen-01.svg') center/contain no-repeat;transition:transform .25s}
.link-arrow:hover::after{transform:translateX(4px)}
.travel__green{position:absolute;left:0;right:0;bottom:0;height:55%;background:var(--green-1);z-index:1}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--green-1);color:rgba(255,255,255,.82);padding-block:46px 30px}
.site-footer__top{display:flex;align-items:center;justify-content:flex-end;gap:16px;
    padding-bottom:30px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.14)}
.site-footer__follow{font-family:var(--font-display);font-size:20px;color:#fff;font-weight:600}
.site-footer__socials{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.site-footer__socials a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);
    display:grid;place-items:center;transition:background .25s,transform .25s}
.site-footer__socials a:hover{background:rgba(255,255,255,.24);transform:translateY(-2px)}
.site-footer__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-bottom:40px}
.site-footer__col h4{color:#fff;font-family:var(--font-body);font-size:13px;font-weight:700;
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:16px}
.site-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer__col a:hover{color:#fff}
.site-footer__col address{font-style:normal;line-height:1.9;font-size:14.5px}
.site-footer__col ul a{font-size:14.5px;display:inline-flex;align-items:center;gap:8px}
.site-footer__col ul a::before{content:"";flex:0 0 auto;width:13px;height:11px;
    background-color:var(--green-3);   /* lichtgroene themakleur */
    -webkit-mask:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat;
    mask:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat;
    transition:transform .25s ease}
.site-footer__col ul a:hover::before{transform:translateX(3px)}
.site-footer__credit{display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding-top:24px;border-top:1px solid rgba(255,255,255,.14);flex-wrap:wrap}
.site-footer__legal{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-size:13px}
.site-footer__logo img{opacity:.95}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
/* fade + slide-up, zoals het prototype (whileInView, .85s easeOut) */
.reveal{opacity:0;transform:translateY(34px);
    transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1)}
.reveal.is-visible{opacity:1;transform:none}

/* gestaffelde tekst-reveal: kind-elementen faden + komen na elkaar omhoog */
.reveal-group > *{opacity:0;transform:translateY(32px);
    transition:opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1)}
.reveal-group.is-visible > *{opacity:1;transform:none}
.reveal-group.is-visible > *:nth-child(1){transition-delay:.05s}
.reveal-group.is-visible > *:nth-child(2){transition-delay:.14s}
.reveal-group.is-visible > *:nth-child(3){transition-delay:.23s}
.reveal-group.is-visible > *:nth-child(4){transition-delay:.32s}
.reveal-group.is-visible > *:nth-child(5){transition-delay:.41s}
.reveal-group.is-visible > *:nth-child(6){transition-delay:.50s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
    .about__grid,.breakfast__grid{grid-template-columns:1fr}
    .about__loclabel{top:-16px;left:-8px;right:auto;bottom:auto}  /* caption linksboven, licht overhangend buiten de foto (i.p.v. onderaan) */
    .breakfast__media{order:-1}
    .cards,.exp-cards,.layer__cards-grid{grid-template-columns:1fr 1fr}
    .travel__card,.travel__card:has(.travel__media){grid-template-columns:1fr}
    .travel__media img{min-height:200px;max-height:280px}
}
@media (max-width:860px){
    .site-header__menu-toggle{display:block;order:3;margin-left:14px}
    .site-header__main{order:2;margin-left:auto;flex-direction:row;align-items:center;gap:0}
    .site-header__util{gap:14px}
    .site-header__contact{display:none}              /* telefoon/e-mail in mobiel menu, niet in balk */
    .site-header__nav{
        position:fixed;top:0;right:0;bottom:0;width:min(84vw,340px);
        flex-direction:column;align-items:stretch;gap:0;
        background:#fff;padding:96px 28px 28px;
        transform:translateX(100%);transition:transform .35s ease;
        box-shadow:-20px 0 50px -20px rgba(0,0,0,.4);
        overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    }
    body.nav-open .site-header__nav{transform:translateX(0)}
    .site-nav__list{flex-direction:column;gap:6px;width:100%}
    .site-nav__link{color:var(--ink);font-size:17px;display:block;padding:10px 0;width:100%}
    .site-header .site-nav__link::after{display:none}
    .site-header__cta{margin-top:18px;width:100%}
    .site-nav__close{display:flex;position:absolute;top:18px;right:20px;padding:6px;background:none;border:0;color:var(--ink);cursor:pointer;line-height:0}
    .site-nav--secondary{display:block;width:100%;margin-top:20px;padding-top:16px;border-top:1px solid var(--bl-cream-dark,#e7e2d8)}
    .site-nav__heading{display:block;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:#8a8475;margin-bottom:4px}
    .site-nav--secondary .site-nav__link{font-size:15px;color:#6b665b;padding:8px 0}
    body.nav-open{overflow:hidden}
}
@media (max-width:620px){
    .usps{grid-template-columns:1fr}

    /* HERO op mobiel: hoog/vol scherm (zoals eerdere versie). De staande 3:4-foto's
       worden met cover gecentreerd getoond → de zijkanten worden bijgesneden (bewuste keuze). */
    .hero{align-items:stretch;min-height:480px;height:calc(100vh - 30px);height:calc(100svh - 30px)}
    /* De hero-dia's krijgen hun (responsive) webp al inline via de /img/-pijplijn (cover),
       dus geen aparte mobiele background-overrides meer nodig. Wil je staande mobiel-crops,
       dan via een eigen /img/-spec — niet via hardcoded bestanden + !important. */
    /* geen Ken Burns-zoom op mobiel → de foto wordt 1:1 getoond (volledige kadrering) */
    .hero__slide{transform:none}
    .hero__slide.is-active{animation:none}
    /* padding-bottom houdt de zoekbalk boven de 70px-golf zodat de knop niet wegvalt */
    .hero__content{display:flex;flex-direction:column;padding-top:clamp(24px,5vh,44px);padding-bottom:clamp(82px,11vh,94px)}
    .hero__title{font-size:clamp(36px,10.5vw,52px)}
    /* titel+subtitel verticaal gecentreerd in het fotovlak (searchbar blijft onderaan
       via z'n eigen margin-top:auto → twee auto-marges verdelen de ruimte) */
    .hero__text{margin-top:auto}
    /* dots op een VASTE lijn (absoluut) → springen niet mee met langere titel/subtitel.
       Pijltjes op exact dezelfde lijn. */
    .hero__dots{position:absolute;left:0;right:0;top:45%;bottom:auto;
        transform:translateY(-50%);margin:0;z-index:4}
    .hero__arrow{top:45%}

    /* ZOEKBALK: compact filter à la Villa Ardennen — 2 velden naast elkaar
       (2×2 grid). Knop staat rechtsonder, naast het 3e veld → veel lager.
       Vette groene labels + grijze hint, dunne scheidingslijntjes. */
    /* 3 velden onder elkaar: Aankomst, Vertrek, Aantal personen — volle breedte */
    .searchbar{display:flex;flex-direction:column;margin-top:auto;gap:0;padding:6px;
        width:100%;align-self:stretch;max-width:none;
        background:#fff;border-radius:18px}
    .searchbar__field{background:none;border:0;border-bottom:1px solid #efe9dd;border-radius:0;padding:10px 14px;min-width:0}
    .searchbar .date-trigger-row{display:flex;flex-direction:column;gap:0;grid-template-columns:none}
    .searchbar .date-trigger{width:100%;text-align:left}
    .searchbar .date-trigger-row .date-trigger:first-child{border-bottom:1px solid #efe9dd;padding-bottom:8px;margin-bottom:6px}
    .searchbar__label{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
        color:#8a8475;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .searchbar__field input,.searchbar__field select{font-size:12.5px;color:#8a8475;padding:0}
    .searchbar__field--guests{border-bottom:0;padding-bottom:4px}
    .searchbar__submit{align-self:stretch;height:auto;margin:2px 4px 6px;padding:15px 14px;font-size:16px;font-weight:700;letter-spacing:.02em;border-radius:14px;box-shadow:0 10px 22px -8px rgba(46,96,66,.6)}

    /* KAARTEN: horizontale carrousel met pagination i.p.v. gestapeld */
    .cards,.exp-cards{display:flex;grid-template-columns:none;overflow-x:auto;
        scroll-snap-type:x mandatory;gap:16px;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;padding-bottom:2px}
    .cards::-webkit-scrollbar,.exp-cards::-webkit-scrollbar{display:none}
    .cards > .card{flex:0 0 84%;scroll-snap-align:center}
    .layer__cards-grid{grid-template-columns:1fr}  /* generieke grid: 1 kolom op mobiel */
    .exp-cards > .exp-card{flex:0 0 80%;scroll-snap-align:center}
    .cards-dots{display:flex;justify-content:center;gap:8px;margin-top:24px}
    .offer .cards-dots button{background:rgba(255,255,255,.45)}
    .offer .cards-dots button.is-active{background:#fff}
    .experience .cards-dots button{background:rgba(41,39,35,.2)}
    .experience .cards-dots button.is-active{background:var(--green-1)}

    .site-footer__grid{grid-template-columns:1fr;gap:26px}
    .site-footer__top{justify-content:center}
    .ribbon{font-size:13px}
}

@media (prefers-reduced-motion:reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
    .hero__slide.is-active{animation:none}
}

/* ── Headless-client: contactformulier + binnenpagina's ──────────────────── */
body[data-header-fixed="0"] #main-content{padding-top:calc(var(--header-h) + 34px)}
/* Zoek & boek-band sluit aan op de header: geen off-white strook erboven */
body[data-header-fixed="0"] #main-content:has(> .layer--search:first-child){padding-top:var(--header-h)}
.contact-form{display:grid;gap:1.1rem;margin-top:1.6rem}
.contact-form__field{display:grid;gap:.4rem}
.contact-form__field>span{font-family:var(--font-body);font-weight:600;color:var(--ink)}
.contact-form input,.contact-form textarea{font:inherit;width:100%;padding:.8rem 1rem;border:1px solid #d9d3c7;border-radius:12px;background:var(--white);color:var(--ink)}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 3px rgba(137,193,98,.35)}
.contact-form button{justify-self:start;margin-top:.4rem}
.contact-ok{background:#e7f3ea;border:1px solid var(--green-3);color:var(--green-1);padding:1rem 1.2rem;border-radius:14px;margin:0 0 1.2rem}
.contact-err{background:#fbe9e9;border:1px solid #e2a5a5;color:var(--red);padding:1rem 1.2rem;border-radius:14px;margin:0 0 1.2rem}
.contact-form__field>span em{color:var(--green-2);font-style:normal}
.contact-form__field.is-invalid input,.contact-form__field.is-invalid textarea{border-color:#e2a5a5;box-shadow:0 0 0 3px rgba(208,110,110,.18)}

/* Framework-FormRenderer markup (data-component="form") */
.contact-form-wrap [data-component="form"]{display:grid;gap:1.1rem}
.contact-form-wrap .form-row{display:grid;gap:1.1rem}
@media(min-width:560px){.contact-form-wrap .form-row{grid-auto-flow:column;grid-auto-columns:1fr}}
.contact-form-wrap .form-field{display:grid;gap:.4rem}
.contact-form-wrap .form-label{font-family:var(--font-body);font-weight:600;color:var(--ink)}
.contact-form-wrap .form-label__required{color:var(--green-2)}
/* labels staan als placeholder ín de velden → label sr-only (blijft voor screenreaders) */
.contact-form-wrap .form-label--ph{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.contact-form-wrap .form-input::placeholder{color:#6a665c;opacity:1}
.contact-form-wrap .form-input{font:inherit;width:100%;padding:.8rem 1rem;border:1px solid #d9d3c7;border-radius:12px;background:var(--white);color:var(--ink)}
.contact-form-wrap .form-input--textarea{min-height:150px;resize:vertical}
.contact-form-wrap .form-input:focus{outline:none;border-color:var(--green-2);box-shadow:0 0 0 3px rgba(137,193,98,.35)}
.contact-form-wrap .form-field--error .form-input{border-color:#e2a5a5;box-shadow:0 0 0 3px rgba(208,110,110,.18)}
.contact-form-wrap .form-field__error{color:var(--red);font-size:.85rem}
.contact-form-wrap .form-actions{margin-top:.4rem}

/* Generieke CMS-binnenpagina: content links, form/aside rechts */
.page-grid{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,3.2rem);margin-top:1.8rem;align-items:start}
@media(min-width:880px){.page-grid{grid-template-columns:1.05fr .95fr}}
.page-prose{color:var(--ink);line-height:1.7;max-width:60ch}
.page-prose p{margin:0 0 1rem}
.page-prose>h2:first-child{margin-top:0}
.page-aside{background:var(--white);border:1px solid #ece5d8;border-radius:20px;padding:clamp(1.4rem,3vw,2.1rem);box-shadow:0 18px 50px -34px rgba(41,39,35,.5)}
.page-aside .contact-form{margin-top:0}

/* Contactgegevens-blok (uit het CMS) */
.contact-details{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:1rem}
.contact-details li{position:relative;padding-left:1.1rem;color:var(--ink)}
.contact-details li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--green-2)}
.contact-details__k{display:block;font-family:var(--font-display);font-weight:600;color:var(--green-1);margin-bottom:.1rem}
.contact-details a{color:var(--green-1);text-decoration:none;border-bottom:1px solid rgba(58,108,42,.3)}
.contact-details a:hover{border-bottom-color:var(--green-1)}
.contact-map{margin:1.6rem 0 0;border-radius:18px;overflow:hidden;border:1px solid #ece5d8;line-height:0}
.contact-map iframe{width:100%;height:300px;border:0;display:block;filter:saturate(1.05)}

/* Solide witte header (geen transparante overlay) — content-gedreven uit de
   Navigation-settings #533: `home_fixed`/`page_fixed`='0' → data-header-fixed="0".
   (Standaard: home '1' = overlay, binnenpagina's '0' = solide.) */
body[data-header-fixed="0"] .site-header{background:var(--white);box-shadow:0 6px 24px -12px rgba(41,39,35,.35)}
body[data-header-fixed="0"] .site-logo__img--color{opacity:1}
body[data-header-fixed="0"] .site-logo__img--white{opacity:0}
body[data-header-fixed="0"] .site-nav__link{color:var(--ink)}
body[data-header-fixed="0"] .site-header__contact{color:var(--green-1)}
body[data-header-fixed="0"] .site-header__menu-toggle{color:var(--ink)}

/* ── Vakantiewoning — detailpagina ───────────────────────────────────────── */
.lead{font-size:1.15rem;line-height:1.5;color:var(--ink);max-width:60ch;margin:.5rem 0 0}
.prose p{margin:0 0 1rem;line-height:1.7;color:var(--ink)}
.prose p:last-child{margin-bottom:0}
.rentable{display:grid;grid-template-columns:1fr;gap:1.5rem 2.5rem;margin-top:2rem}
.rentable__media{display:grid;gap:.85rem}
/* Hero-foto: groot, klikbaar → opent het fotoalbum (lightbox) */
.rentable__hero{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;border-radius:16px;overflow:hidden;line-height:0;text-decoration:none}
.rentable__hero img{width:100%;height:auto;aspect-ratio:3/2;display:block;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.rentable__hero:hover img,.rentable__hero:focus-visible img{transform:scale(1.03)}
.rentable__hero:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.rentable__hero-hint{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:.45rem;padding:.5rem .8rem;border-radius:999px;background:rgba(41,39,35,.62);color:#fff;font-size:.82rem;font-weight:600;line-height:1;backdrop-filter:blur(4px);transition:background .2s,transform .2s}
.rentable__hero:hover .rentable__hero-hint{background:var(--green-1);transform:translateY(-1px)}
/* Strip van 6 thumbnails onder de hero */
.rentable__strip{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;margin:0;padding:0;list-style:none}
.rentable__strip li{margin:0}
.rentable__thumb{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;border-radius:11px;overflow:hidden;line-height:0;text-decoration:none}
.rentable__thumb img{width:100%;height:auto;aspect-ratio:4/3;display:block;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.rentable__thumb:hover img,.rentable__thumb:focus-visible img{transform:scale(1.07)}
.rentable__thumb:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.rentable__thumb--more img{filter:brightness(.55)}
.rentable__more{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:1.1rem;font-weight:700;pointer-events:none}
@media (max-width:560px){
  .rentable__strip{grid-template-columns:repeat(3,1fr)}
  .rentable__hero-hint{font-size:.74rem;padding:.42rem .65rem}
}
/* De lightbox zelf komt uit de bestaande EH-module (public/assets/modules/lightbox.css,
   geladen door rentable-detail.php). Hier alleen de zichtbare strip-weergave. */
.rentable__card{background:#fff;border:1px solid var(--green-soft,#e7e2d8);border-radius:16px;padding:1.5rem;box-shadow:0 10px 34px rgba(40,60,40,.08)}
.rentable__meta{margin:0 0 .75rem;font-size:1.05rem}
@media(min-width:880px){
  .rentable{grid-template-columns:1fr clamp(250px, 24%, 310px);align-items:start}
  .rentable__media{grid-column:1;grid-row:1}
  .rentable__body{grid-column:1;grid-row:2}
  .rentable__aside{grid-column:2;grid-row:1 / span 2}
}

/* ── Framework-componenten (date-picker, guests, custom-select) → vlindertuin-thema ──
   Deze gebruiken framework-tokens (--color-*, --radius-*, --shadow-2); die definieert
   onze site niet, dus zonder mapping erven ze wit/default. Hier mappen we ze naar onze
   eigen tokens (gescoped op de componenten — incl. de custom-select widget+dropdown). */
[data-date], .date-popover, [data-guests], .guests-popup,
.select-display, .select-dropdown {
    --color-bg:            var(--white);
    --color-bg-elev:       var(--white);
    --color-bg-soft:       var(--cream);
    --color-border:        #e7e2d8;
    --color-border-strong: #d8d0bf;
    --color-fg:            var(--ink);
    --color-fg-muted:      #8a8475;
    --color-primary:       var(--green-1);
    --color-primary-fg:    #ffffff;
    --radius-lg:           18px;
    --radius-md:           10px;
    --radius-sm:           9px;
    --shadow-2:            var(--shadow-md);
}
/* trigger-knoppen passend in de witte searchbar-pill */
.searchbar .date, .searchbar [data-date] { display:block; width:100%; }
.searchbar .date-trigger-row { min-width:0; gap:1rem; }
.searchbar .date-trigger { padding:0; background:none; border:0; min-width:0; min-height:0; align-items:start; gap:.1rem; cursor:pointer; }
.searchbar .date-trigger small { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8a8475; font-weight:600; }
.searchbar .date-trigger .date-from, .searchbar .date-trigger .date-till { min-width:0; font-size:15px; color:var(--ink); font-weight:600; }
/* guest-picker-knop passend in de searchbar-pill (zoals de date-trigger) */
.searchbar__field--guests { position:relative; }
.searchbar .guests-btn { padding:0; background:none; border:0; width:100%; text-align:left; font:inherit; cursor:pointer; color:var(--ink); }
.searchbar .guests-btn [data-guests-summary] { font-size:15px; color:var(--ink); font-weight:600; }

/* (Overlay-model-CSS verwijderd 2026-06-14 — de hero draait op het slider-model
   `templates/layers/hero.php`; de overlay-regels overschreven `.hero__slide` naar
   position:relative → 0-height-slides. Slider gebruikt de base `.hero__slide`-regel.) */
/* searchbar in een smalle kolom (woning-detail aside) — verticaal i.p.v. pill */
.searchbar--stack{flex-direction:column;align-items:stretch;max-width:none;gap:10px}
.searchbar--stack .searchbar__field{width:100%;height:auto;min-height:58px;
    background:var(--cream,#faf7f0);border:1px solid #e7e1d6;border-radius:12px;padding:9px 14px;
    transition:border-color .18s ease,box-shadow .18s ease}
.searchbar--stack .searchbar__field:hover,
.searchbar--stack .searchbar__field:focus-within{border-color:var(--green-1);box-shadow:0 0 0 3px rgba(46,96,66,.08)}
.rentable__card-title{margin:0;font-size:18px}

/* Velden links uitlijnen — overal (home-hero, zoekbalk én boek-kaart); geen gecentreerde waarden */
.searchbar .guests-btn{text-align:left;justify-content:flex-start}
.searchbar .guests-btn [data-guests-summary]{text-align:left}
.searchbar .date-trigger{align-items:flex-start;text-align:left}
/* Boek-kaart (--stack): aankomst + vertrek als 2 losse, gestapelde velden → netjes 3 velden */
.searchbar--stack .searchbar__field--dates{background:none;border:0;padding:0;min-height:0}
.searchbar--stack .searchbar__field--dates:hover,
.searchbar--stack .searchbar__field--dates:focus-within{box-shadow:none;border:0}
.searchbar--stack .searchbar__field--dates .date-trigger-row{grid-template-columns:1fr;gap:10px}
.searchbar--stack .searchbar__field--dates .date-trigger{background:var(--cream,#faf7f0);border:1px solid #e7e1d6;
    border-radius:12px;padding:9px 14px;min-height:58px;justify-content:start;align-content:center;transition:border-color .18s ease,box-shadow .18s ease}
.searchbar--stack .searchbar__field--dates .date-trigger:hover{border-color:var(--green-1);box-shadow:0 0 0 3px rgba(46,96,66,.08)}

/* Boek-kaart (woning-detail aside) — verzorgde header + CTA */
.rentable__card--book{padding:0;overflow:hidden}
.rentable__card--book::before{content:"";display:block;height:4px;
    background:linear-gradient(90deg,var(--green-1),var(--green-2,#2e6042))}
.rentable__card-head{display:flex;align-items:center;gap:.65rem;
    padding:1.2rem 1.5rem 1rem;border-bottom:1px solid var(--green-soft,#e7e2d8)}
.rentable__card-ic{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;
    border-radius:10px;background:rgba(46,96,66,.09);color:var(--green-2,#2e6042)}
.rentable__card--book .searchbar--stack{padding:1.25rem 1.5rem 1.5rem}
/* Alles in de boek-kaart links uitgelijnd (geen gecentreerde labels/waarden) */
.rentable__card--book{text-align:left}
.rentable__card--book .date-trigger,
.rentable__card--book .guests-btn{align-items:flex-start;text-align:left;width:100%}
.rentable__card--book .date-trigger small,
.rentable__card--book .date-trigger .date-from,
.rentable__card--book .date-trigger .date-till,
.rentable__card--book .searchbar__label,
.rentable__card--book [data-guests-summary]{text-align:left;display:block}
.rentable__book-submit{width:100%;justify-content:center;gap:.5rem;margin-top:.35rem;font-weight:600}
.rentable__book-submit svg{transition:transform .18s ease}
.rentable__book-submit:hover svg{transform:translateX(3px)}

/* Woning-detail: aside-cards stapelen, kenmerken-tabel + prijzenmatrix (2026-06-14) */
.rentable__aside{display:grid;gap:1.25rem;align-content:start}
.specs__list{margin:0;display:grid;gap:0}
.specs__row{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid var(--green-soft,#e7e2d8)}
.specs__row:last-child{border-bottom:0}
.specs__key{margin:0;color:#5c6b5a;display:flex;align-items:center;gap:.6rem}
.specs__ic{flex:0 0 auto;color:var(--green-2,#2e6042);opacity:.85}
.specs__val{margin:0;font-weight:600;color:var(--green-2,#2e6042)}
.price-matrix{margin:2.5rem 0 0}
.price-matrix .section-head{margin-bottom:1rem}
.heading--sm{font-size:clamp(1.4rem,2.4vw,1.9rem)}
.price-matrix__sub{margin:.35rem 0 0;color:#5c6b5a}
.price-matrix__table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--green-soft,#e7e2d8);border-radius:16px;overflow:hidden;box-shadow:0 10px 34px rgba(40,60,40,.06)}
.price-matrix__table th[scope=col]{text-align:left;background:var(--green-2,#2e6042);color:#fff;font-weight:600;padding:.85rem 1.25rem;font-size:.95rem}
.price-matrix__table th[scope=col]:last-child{text-align:right}
.price-matrix__table th[scope=row]{text-align:left;font-weight:500;padding:.8rem 1.25rem;border-top:1px solid var(--green-soft,#e7e2d8)}
.price-matrix__table td{text-align:right;padding:.8rem 1.25rem;border-top:1px solid var(--green-soft,#e7e2d8);font-weight:700;color:var(--green-2,#2e6042);white-space:nowrap}
.price-matrix__table tbody tr:nth-child(even){background:#faf8f3}
.price-matrix__note{margin:.85rem 0 0;font-size:.85rem;color:#7a857a;max-width:60ch}
@media(min-width:760px){.price-matrix__table{max-width:520px}}

/* Interactieve prijzen-matrix (acc-matrix) op woning-detail (2026-06-14) */
.acc-matrix{margin-top:.5rem}
.acc-matrix__loading,.acc-matrix__empty{color:#7a857a;padding:1rem 0}
.acc-matrix__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--green-soft,#e7e2d8);border-radius:16px;background:#fff;box-shadow:0 10px 34px rgba(40,60,40,.06)}
.acc-matrix__table{border-collapse:collapse;width:100%;min-width:520px}
.acc-matrix__table th,.acc-matrix__table td{border-bottom:1px solid var(--green-soft,#e7e2d8);border-right:1px solid var(--green-soft,#e7e2d8);text-align:center;padding:.55rem .6rem;font-size:.9rem;white-space:nowrap}
.acc-matrix__table tr:last-child th,.acc-matrix__table tr:last-child td{border-bottom:0}
.acc-matrix__table th:last-child,.acc-matrix__table td:last-child{border-right:0}
.acc-matrix__corner,.acc-matrix__nights{position:sticky;left:0;z-index:2;background:#faf8f3;text-align:left;font-weight:600;color:var(--green-2,#2e6042)}
.acc-matrix__date{background:var(--green-2,#2e6042);color:#fff;font-weight:600;line-height:1.15}
.acc-matrix__date span{display:block;font-weight:400;opacity:.85;font-size:.78rem}
.acc-matrix__corner{background:var(--green-2,#2e6042);color:#fff}
.acc-matrix__cell{padding:0!important}
.acc-matrix__cell a{display:block;padding:.5rem .6rem;color:var(--green-2,#2e6042);font-weight:700;text-decoration:none;transition:background .15s}
.acc-matrix__cell a small{display:block;font-weight:400;font-size:.7rem;color:#7a857a}
.acc-matrix__cell a:hover{background:#eef3ee}
.acc-matrix__cell--empty{color:#c8cfc5}
.acc-matrix__nav{display:flex;justify-content:space-between;gap:1rem;margin-top:.85rem}
.acc-matrix__btn{appearance:none;border:1px solid var(--green-soft,#d8e0d4);background:#fff;color:var(--green-2,#2e6042);font-weight:600;padding:.5rem 1.1rem;border-radius:999px;cursor:pointer;transition:background .15s,border-color .15s}
.acc-matrix__btn:hover:not([disabled]){background:#eef3ee}
.acc-matrix__btn[disabled]{opacity:.4;cursor:default}
.acc-matrix.is-loading{opacity:.6}

/* Reisinfo 2-koloms (reisinfo + weerkaart) + weerkaart (2026-06-14) */
.travel__grid{display:grid;gap:1.5rem}
@media(min-width:900px){.travel__grid--2{grid-template-columns:1.1fr .9fr;align-items:stretch}
/* titels ("Reisinformatie" / "Het weer") op gelijke hoogte: reisinfo-body niet verticaal
   centreren maar boven uitlijnen, en de weer-kop-kop met het icoon boven uitlijnen + gelijke padding-top */
.travel__grid--2 .travel__body{align-content:start;padding-top:clamp(24px,2.6vw,36px)}
.travel__grid--2 .weather__head{align-items:flex-start}}
/* Travel-laag binnen een layer_columns-kolom: enkel-koloms (de kolommen-laag doet zelf de 2-col),
   grotere kaart, decoratieve groen-balk weg. (De 2-col-tekst-naast-kaart is nu de kolommen-laag.) */
.layer__col .travel__green{display:none}
.layer__col .travel__map.is-ready{height:300px}
.layer__col .travel{padding:0}
.travel__card.weather{display:block;padding:clamp(24px,2.6vw,36px)}
.weather__head{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.weather__icon{width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;background:#f4efe4;border-radius:12px;color:#c8862b}
.weather__title{font-size:23px;margin:0}
.weather__days{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.weather__day{display:flex;flex-direction:column;align-items:center;gap:3px;background:#faf8f3;border:1px solid var(--green-soft,#e7e2d8);border-radius:14px;padding:14px 6px}
.weather__dow{font-weight:700;font-size:14px;color:#3b4a39}
.weather__date{font-size:12px;color:#8a948a}
.weather__day-icon{color:var(--green-2,#2e6042);margin:7px 0 3px}
.weather__max{font-weight:700;font-size:18px;color:var(--green-2,#2e6042)}
.weather__min{font-size:13px;color:#8a948a}
.weather__note{margin:18px 0 0;font-size:12.5px;color:#8a948a;text-align:center}

/* Sfeer-impressie: Embla foto-strip (loop + autoplay, geen controls) — 2026-06-15.
   Scoped op .sfeer zodat de bestaande kaart-carrousel ongemoeid blijft. */
.sfeer{padding:clamp(40px,6vw,72px) 0;overflow:hidden}
.sfeer .container{margin-bottom:1.6rem}
/* layer_columns — generieke flex-kolommen-container (élk child-type) */
.layer--columns{padding:clamp(2rem,5vw,3.5rem) 0}
.layer__columns{display:flex;flex-wrap:wrap;gap:clamp(1.5rem,3vw,2.5rem);align-items:flex-start}
.layer--columns[data-flow^="column"] .layer__columns{flex-direction:column}
.layer__col{flex:1 1 300px;min-width:0}
/* child-lagen zijn volle secties → binnen een kolom hun section-chrome neutraliseren */
.layer__col>.layer{padding:0}
.layer__col .container{max-width:none;padding-left:0;padding-right:0;margin-inline:0}
@media(max-width:760px){.layer__columns{flex-direction:column}}

.sfeer__strip .carousel{position:relative;width:100%}
.sfeer__strip .carousel__viewport{overflow:hidden;width:100%}
.sfeer__strip .carousel__container{display:flex;margin-left:-14px}
.sfeer__strip .carousel__slide{flex:0 0 clamp(240px,32%,380px);box-sizing:border-box;padding-left:14px;min-width:0}
.sfeer__item{margin:0}
.sfeer__item img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:18px}
@media(max-width:640px){.sfeer__strip .carousel__slide{flex-basis:80%}}

/* Weerkaart: plaats-ondertitel (2026-06-15) */
.weather__head-text{display:flex;flex-direction:column;gap:1px}
.weather__place{font-size:13px;color:#8a948a}

/* Zoekresultaat-filters (client-side facetten, booking-filters.js · 2026-06-15) */
.result-filters{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1rem;
    margin:0 0 1rem;padding:1rem 1.25rem;background:#fff;
    border:1px solid var(--green-soft,#e7e2d8);border-radius:14px}
/* facet-dropdowns (CMS search_filter_group → property → option; positie via attach.js) */
.result-filters__facet{position:relative}
.result-filters__trigger{cursor:pointer;display:inline-flex;align-items:center;gap:.45rem;
    padding:9px 14px;border:1px solid #e0d9cb;border-radius:9px;background:#fff;font:inherit;font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap}
.result-filters__trigger::after{content:"";width:0;height:0;margin-left:.3rem;flex:0 0 auto;
    border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #9a9384;
    transition:transform .2s ease,border-top-color .2s ease}
.result-filters__trigger[aria-expanded="true"]{border-color:var(--green-1);box-shadow:0 0 0 3px rgba(46,96,66,.07)}
.result-filters__trigger[aria-expanded="true"]::after{transform:scaleY(-1);border-top-color:var(--green-1)}
.result-filters__badge{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
    background:var(--green-1);color:#fff;font-size:11px;font-weight:700;line-height:1}
.result-filters__badge[hidden]{display:none}
.result-filters__panel{min-width:210px;display:flex;flex-direction:column;gap:.55rem;
    padding:.85rem 1rem;background:#fff;border:1px solid #e0d9cb;border-radius:12px;box-shadow:0 12px 30px rgba(40,60,40,.13);
    transform-origin:top center;animation:facet-open .16s ease-out}
.result-filters__panel[hidden]{display:none}
@keyframes facet-open{from{opacity:0;transform:scaleY(.72)}to{opacity:1;transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.result-filters__panel{animation:none}}
.result-filters__field{display:inline-flex;align-items:center;gap:.5rem;font-size:12px;font-weight:600;
    letter-spacing:.04em;color:#6f6a5d;text-transform:uppercase;white-space:nowrap}
.result-filters__field select{font:inherit;font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;
    color:var(--ink);padding:8px 12px;border:1px solid #e0d9cb;border-radius:9px;background:#fff;cursor:pointer}
.result-filters__field input[type="range"]{accent-color:var(--green-1);min-width:150px;cursor:pointer}
.result-filters__field output{font-weight:700;color:var(--green-2,#2e6042);text-transform:none;letter-spacing:0}
.result-filters__check{display:flex;align-items:center;gap:.5rem;font-size:14px;color:var(--ink);cursor:pointer}
.result-filters__check input{accent-color:var(--green-1);width:17px;height:17px;cursor:pointer}
.result-filters__field:has([data-f="sort"]){margin-left:auto}
.result-filters__reset{align-self:center;background:#f3efe6;border:1px solid #e6dfd1;border-radius:8px;padding:6px 12px;
    font:inherit;font-size:12px;font-weight:600;color:#b7b1a4;text-decoration:none;cursor:default;pointer-events:none;transition:all .2s ease}
.result-filters__reset.is-active{background:#fff;border-color:var(--green-1);color:var(--green-2,#2e6042);cursor:pointer;pointer-events:auto}
.result-filters__reset.is-active:hover{background:var(--green-1);color:#fff;border-color:var(--green-1)}
.result-filters__count{margin:0 0 1.1rem;color:#6f6a5d;font-size:14px}
.result-filters__empty{margin:1.5rem 0;color:#6f6a5d}
.result-filters__empty .link-arrow{background:none;border:0;font:inherit;cursor:pointer}
.card[hidden]{display:none}

/* "Zo vind je ons"-kaart in het reisinformatie-blok (park-map.js · 2026-06-15) */
.travel__address{margin:.1rem 0 .7rem;color:var(--ink);font-weight:600}
.travel__map{border-radius:14px;overflow:hidden}
.travel__map.is-ready{height:220px;margin-bottom:.7rem;border:1px solid var(--green-soft,#e7e2d8)}
.travel__map .leaflet-container{height:100%;font:inherit}

/* ============================================================
   Contactpagina — Banus-indeling in Vlindertuin-stijl (2026-06-19)
   Lagen: hero / gegevens / formulier / groen CTA-paneel / kaart.
   Layout via CSS-grid op #main-content (route-gescopet); elke laag
   krijgt z'n grid-area via :has() — robuust, geen nth-child.
   ============================================================ */
body[data-route="/contact"] #main-content{
    max-width:1180px;margin-inline:auto;
    padding-left:clamp(20px,4vw,40px);padding-right:clamp(20px,4vw,40px);
    padding-bottom:clamp(60px,8vw,110px);
    display:grid;align-items:start;
    grid-template-columns:minmax(0,360px) minmax(0,1fr);
    column-gap:clamp(28px,4vw,56px);row-gap:clamp(34px,5vw,60px);
    grid-template-areas:
        "hero    hero"
        "details form"
        "map     map"
        "panel   panel";
}
/* lagen vlak in de grid: geen eigen section-padding/container-breedte */
body[data-route="/contact"] #main-content>.layer--text{padding-block:0;margin:0}
body[data-route="/contact"] #main-content>.layer--text>.container{width:100%;max-width:none;margin:0;padding:0}

/* area-toewijzing op basis van inhoud */
body[data-route="/contact"] #main-content>.layer--text:has(.tagline:not(.tagline--accent)){grid-area:hero}
body[data-route="/contact"] #main-content>.layer--text:has(.cd-row){grid-area:details}
body[data-route="/contact"] #main-content>.contact-form-wrap{grid-area:form;margin:0}
body[data-route="/contact"] #main-content>.layer--text:has(.contact-cta){grid-area:panel}
body[data-route="/contact"] #main-content>.layer--text:has(.contact-map){grid-area:map}

/* ── hero (gecentreerd) ── */
body[data-route="/contact"] .layer--text:has(.tagline:not(.tagline--accent)){text-align:center}
body[data-route="/contact"] .layer--text:has(.tagline:not(.tagline--accent)) .container{max-width:680px;margin-inline:auto}
body[data-route="/contact"] .layer--text:has(.tagline:not(.tagline--accent)) .heading{font-size:clamp(30px,4vw,46px);margin:4px 0 14px}
body[data-route="/contact"] .layer--text:has(.tagline:not(.tagline--accent)) p{color:#5d564c;margin:0}

/* ── gegevens-kaart ── */
body[data-route="/contact"] .layer--text:has(.cd-row){background:#fff;border:1px solid var(--green-soft,#e7e2d8);border-radius:var(--radius);padding:clamp(24px,2.4vw,32px);box-shadow:var(--shadow-sm)}
body[data-route="/contact"] .layer--text:has(.cd-row) .heading{font-size:22px;margin-bottom:6px}
.cd-row{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-top:1px solid var(--green-soft,#ece5d8)}
.cd-row:first-of-type{padding-top:14px}
.cd-row .ic{width:42px;height:42px;border-radius:50%;flex:0 0 auto;background-color:var(--cream);background-repeat:no-repeat;background-position:center;background-size:20px}
.cd-row h4{font-family:var(--font-body);font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--green-2);margin:2px 0 3px}
.cd-row p{margin:0;color:#5d564c;font-size:15.5px;line-height:1.6}
.cd-row a{color:inherit}
.cd-row a:hover{color:var(--green-1)}
.cd-route{display:inline-flex;align-items:center;gap:6px;margin-top:9px;color:var(--green-1);font-weight:600;font-size:13.5px;text-decoration:underline}
.cd-route::after{content:"";width:14px;height:11px;background:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat;filter:brightness(0) saturate(100%) invert(28%) sepia(18%) saturate(1200%) hue-rotate(90deg);opacity:.9}
.ic--addr{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.3-7-11a7 7 0 0 1 14 0c0 4.7-7 11-7 11Z'/%3E%3Ccircle cx='12' cy='10' r='2.6'/%3E%3C/svg%3E")}
.ic--phone{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3l1.6 4-2 1.4a12 12 0 0 0 6 6l1.4-2 4 1.6V19a2 2 0 0 1-2 2A16 16 0 0 1 3 5a2 2 0 0 1 2-1Z'/%3E%3C/svg%3E")}
.ic--mail{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E")}
.ic--clock{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E6042' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l3 2'/%3E%3C/svg%3E")}

/* ── formulier-kaart ── */
body[data-route="/contact"] .contact-form-wrap{background:#fff;border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-md)}
body[data-route="/contact"] .contact-form-wrap::before{content:"Stuur ons een bericht";display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(22px,2.4vw,28px);color:var(--ink);line-height:1.15;margin-bottom:22px}
body[data-route="/contact"] .contact-form-wrap .form-input{background:var(--cream);border:1px solid var(--green-soft,#e3ddd0);border-radius:12px}
body[data-route="/contact"] .contact-form-wrap .form-input:focus{border-color:var(--green-1);background:#fff;box-shadow:0 0 0 3px rgba(46,96,66,.12);outline:none}
body[data-route="/contact"] .contact-form-wrap .form-actions{margin-top:6px}
body[data-route="/contact"] .contact-form-wrap .form-actions .btn{width:100%}
body[data-route="/contact"] .contact-ok{background:rgba(137,193,98,.16);color:var(--green-2);font-weight:600;padding:16px 18px;border-radius:14px;margin:0}

/* ── groen CTA-paneel ── */
.contact-cta{background:var(--green-1);color:rgba(255,255,255,.9);border-radius:var(--radius-lg);padding:clamp(36px,4.5vw,60px) clamp(24px,4vw,56px);text-align:center}
.contact-cta .heading{font-size:clamp(26px,3.2vw,40px);margin:8px 0 14px}
.contact-cta p{max-width:620px;margin:0 auto 28px}
.contact-cta__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ── kaart ── */
body[data-route="/contact"] .contact-map{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
body[data-route="/contact"] .contact-map iframe{display:block;width:100%;height:clamp(320px,40vw,460px);border:0}

@media(max-width:820px){
    body[data-route="/contact"] #main-content{
        grid-template-columns:1fr;
        grid-template-areas:"hero" "details" "form" "map" "panel";
    }
}

/* contact: pijl op de verzendknop (zoals de referentie) */
body[data-route="/contact"] .contact-form-wrap .form-actions .btn::after{content:"";width:13px;height:11px;display:inline-block;background:url('custom/knop-pijltje-off-white-01.svg') center/contain no-repeat}

/* /praktische-informatie: minder vlak — afwisselende banden (crème/wit) + accent-koppen + lucht */
body[data-route="/praktische-informatie"] .layer{padding-block:2.6rem}
body[data-route="/praktische-informatie"] .layer:nth-of-type(even){background:#fff}
body[data-route="/praktische-informatie"] .layer--text .heading::after,
body[data-route="/praktische-informatie"] .layer--columns .heading::after{content:"";display:block;width:46px;height:3px;border-radius:2px;background:var(--green-1,#2e6042);margin-top:.7rem}