@charset "UTF-8";
/* main.css — onder-de-vouw + andere pagina's (secties/footer/contact/detail/sitemap) + hun responsive. Async (onder-de-vouw op .reveal → geen FOUC). */

   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 — 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 */
/* --ti-cols: CMS-kolombreedte (column_text_width) override't de default; leeg → default.
   DOM-volgorde = [tekst, media]; default toont tekst links (brede kolom 1). reverse_columns
   ('is-reversed') zet de media links via `order` + wisselt de kolombreedtes. */
.text-image__grid{display:grid;grid-template-columns:var(--ti-cols,1.1fr 0.9fr);gap:clamp(32px,5vw,72px);align-items:start}
.layer--text-image.is-reversed .text-image__grid{grid-template-columns:var(--ti-cols,0.9fr 1.1fr)}
/* data-cover (media_full): media vult de volledige kolomhoogte (cover) i.p.v. natuurlijke hoogte. */
.layer--text-image[data-cover="1"] .text-image__grid{align-items:stretch}
.layer--text-image[data-cover="1"] .text-image__media{height:100%}
.layer--text-image[data-cover="1"] .text-image__media img{height:100%;object-fit:cover}
/* Praktische info — plattegrond: afbeelding vult de kolom (even breed als de locatiekaart), tekst eronder */
.layer--columns:has(.layer--text-image) .text-image__grid{grid-template-columns:1fr;gap:1.25rem;align-items:start}
.layer--text-image.is-reversed .text-image__media,.layer--text-image.is-reversed .carousel{order:-1}
.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}
/* type=text_images — meerdere foto's in de media-kolom (issue #10) */
.text-images__photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.text-images__photos[data-count="1"]{grid-template-columns:1fr}
.layer--text-images.is-reversed .text-images__photos{order:-1}
.text-images__photo{margin:0}
.text-images__photo img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow-md);display:block;aspect-ratio:4/3}
@media (max-width:600px){.text-images__photos{grid-template-columns:1fr}}
/* Resultaat-pill: het aantal woningen als enige, verfijnde teller-pill. */
.results-pill{display:inline-flex;align-items:center;gap:.35rem;
    margin:.1rem 0 1.4rem;padding:.5rem 1.05rem;color:#6f6a5d;font-size:14.5px;line-height:1;
    background:linear-gradient(180deg,#fff,var(--cream));border:1px solid var(--green-soft,#e7e2d8);
    border-radius:999px;box-shadow:0 8px 20px -16px rgba(46,96,66,.6)}
.results-pill[hidden]{display:none}
.results-pill__num{color:var(--green-1);font-weight:700}
.results-pill__num--total{color:var(--ink)}
/* Mobiel: één kolom; media/foto's boven de tekst (order:-1 haalt ze vóór de DOM-eerste tekst).
   De is-reversed-grid moet óók naar 1fr — die regel heeft hogere specificiteit (0,3,0), dus
   hier expliciet meenemen, anders blijft 'ie 2-koloms op mobiel. */
@media (max-width:860px){.text-image__grid,.layer--text-image.is-reversed .text-image__grid{grid-template-columns:1fr}.text-image__media,.text-images__photos{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);
    display:flex;flex-direction:column;   /* body vult de (gelijke) kaarthoogte → knop overal gelijk */
    transition:transform .3s ease, box-shadow .3s ease}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
/* .card__media + .card__media img staan in critical.css (ruimte-reservering bij de eerste
   paint; zie daar). Hier alleen nog de hover-interactie, die niet render-blocking hoeft. */
.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)}
/* keten flex-kolom zodat de body de (gelijke) kaarthoogte vult → CTA-knop overal gelijk (ook Firefox) */
.card__content{display:flex;flex-direction:column;flex:1 0 auto}
.card__link{flex:1 0 auto;display:flex;flex-direction:column}   /* <a> omsluit media+body → meegroeien zodat body (en CTA) tot de kaartbodem vult */
.card__body{padding:20px 22px 24px;position:relative;flex:1 0 auto}
.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-/LOCATIE-SECTIE
   ============================================================ */
.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 h2{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;flex-wrap:wrap}
.site-footer__legal a{opacity:.8;transition:opacity .2s ease}
.site-footer__legal a:hover{opacity:1}
.site-footer__logo img{opacity:.95}
/* Multiminded-merk-credit rechtsonder (issue #11, hook design_footer__multiminded) */
.site-footer__credit-link{display:inline-flex;align-items:center;color:#fff;opacity:.6;transition:opacity .2s ease}
.site-footer__credit-link:hover{opacity:1}
.site-footer__credit-logo{width:26px;height:auto;display:block}

/* ============================================================
   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 (onder-de-vouw) --- */
@media (max-width:980px){
    .about__grid,.breakfast__grid{grid-template-columns:1fr}
    .breakfast__media{order:-1}
    .cards,.exp-cards,.layer__cards-grid{grid-template-columns:1fr 1fr}
    .layer__cards-grid[data-cols]{grid-template-columns:repeat(2,1fr)}
    .travel__card{grid-template-columns:1fr}
    .travel__media img{min-height:220px}
}

@media (max-width:620px){
    .usps{grid-template-columns:1fr}
    /* 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,.layer__cards-grid[data-cols]{grid-template-columns:1fr}  /* generieke grid: 1 kolom op mobiel, [data-cols] voor gelijke specificiteit */
    .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}
}

/* --- contact/binnenpagina-content --- */
.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)}
.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)}


/* --- detailpagina + contactpagina + sitemap --- */
/* ── 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}
#main-content .layer:has(.rentable){padding-top:0}
.rentable{display:grid;grid-template-columns:1fr;gap:2rem 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) → site-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:var(--field-value-size); color:var(--ink); font-weight:var(--field-value-weight); }
/* guest-picker-knop passend in de searchbar-pill (zoals de date-trigger) */
.searchbar__field--guests { position:relative; gap:.2rem; }
.searchbar .guests-btn { padding:0; background:none; border:0; width:100%; height:auto; display:block; text-align:left; font:inherit; line-height:1.2; cursor:pointer; color:var(--ink); }
.searchbar .guests-btn [data-guests-summary] { font-size:var(--field-value-size); color:var(--ink); font-weight:var(--field-value-weight); }

/* (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:none}
.rentable__card-head{display:flex;align-items:center;gap:.65rem;
    padding:1.2rem 1.5rem 1rem;border-bottom:1px solid var(--green-soft,#e7e2d8);
    background:var(--green-1,#2e6042);color:#fff}
.rentable__card-ic{display:grid;place-items:center;flex:0 0 auto;width:36px;height:36px;
    border-radius:10px;background:rgba(255,255,255,.14);color:#fff}
.rentable__card--book .searchbar--stack{padding:1.25rem 1.5rem 1.5rem}
.booking-widget-inline{
    margin:3.25rem 0 0;
    scroll-margin-top:calc(var(--site-header-height, var(--header-h, 96px)) + 18px);
    padding:clamp(1rem,2.4vw,1.75rem);
    border:1px solid var(--green-soft,#e7e2d8);
    border-radius:16px;
    background:linear-gradient(180deg,#fff,rgba(247,243,236,.72));
    box-shadow:0 10px 34px rgba(40,60,40,.06)
}
.booking-widget-inline [data-widget="123boeken"]{
    --color-primary:var(--green-1,#2e6042);
    --color-accent:var(--accent,#ffad06);
    color:var(--ink,#292723)
}
.booking-widget-inline [data-widget="123boeken"] button,
.booking-widget-inline [data-widget="123boeken"] [type="submit"],
.booking-widget-inline [data-widget="123boeken"] a[class*="button"],
.booking-widget-inline [data-widget="123boeken"] .button{
    background:var(--accent,#ffad06);
    border-color:var(--accent,#ffad06);
    color:#fff
}
.booking-widget-inline [data-widget="123boeken"] button:hover,
.booking-widget-inline [data-widget="123boeken"] [type="submit"]:hover,
.booking-widget-inline [data-widget="123boeken"] a[class*="button"]:hover,
.booking-widget-inline [data-widget="123boeken"] .button:hover{
    background:var(--green-1,#2e6042);
    border-color:var(--green-1,#2e6042)
}
/* 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)}
/* boek-form binnen de kaart: geen eigen achtergrond/schaduw (kaart levert die al) */
.rentable__card--book .searchbar{box-shadow:none;background:none;backdrop-filter:none;animation:none}
/* USP's onder de 'Ga verder'-knop (icoon = usp-check-01.svg: geel rondje + groene check) */
.rentable__usps{list-style:none;margin:0;padding:1.1rem 1.5rem .9rem;display:grid;gap:.7rem;border-top:1px solid var(--green-soft,#e7e2d8)}
.rentable__usps li{display:flex;gap:.6rem;align-items:flex-start;font-size:13.5px;line-height:1.5;color:var(--ink)}
.rentable__usp-ic{flex:0 0 auto;width:20px;height:20px;margin-top:1px;display:block}
/* telefoon + e-mail onder de USP's */
.rentable__contact{padding:0 1.5rem 1.35rem;display:grid;gap:.45rem}
.rentable__contact a{display:inline-flex;align-items:center;gap:.5rem;font-size:13.5px;font-weight:600;color:var(--green-1)}
.rentable__contact a:hover{color:var(--green-2)}
.rentable__contact svg{flex:0 0 auto}

/* 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:6.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}
/* maand-sprong = custom-select (data-select → .select-display widget); breedte op content i.p.v. de default 100% zodat 'ie netjes centraal tussen de knoppen blijft. */
.acc-matrix__nav .select-display{width:auto;flex:0 1 auto;min-width:8.5rem}
.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: alleen de header begrensd; de carousel-strip blijft full-width (geen .container meer) */
.sfeer .section-head{width:90%;max-width:var(--maxw);margin:0 auto 1.6rem}
/* layer_columns — generieke flex-kolommen-container (élk child-type).
   Alle CMS-settings via custom-props (door de renderer gezet), met de bestaande
   clamp()-defaults als fallback → ongeconfigureerde lagen blijven identiek. */
.layer--columns{padding:clamp(2rem,5vw,3.5rem) 0}
.layer__columns{display:flex;flex-wrap:wrap;align-items:flex-start;margin-inline:auto;
  max-width:var(--cols-mw,none);
  column-gap:var(--cols-gx,clamp(1.5rem,3vw,2.5rem));
  row-gap:var(--cols-gy,clamp(1.5rem,3vw,2.5rem))}
/* flex-flow (Afbreken): wrap / wrap-reverse / nowrap → flex-wrap */
.layer--columns[data-flow="nowrap"] .layer__columns{flex-wrap:nowrap}
.layer--columns[data-flow="wrap-reverse"] .layer__columns{flex-wrap:wrap-reverse}
/* per-kolom geometrie: sortorder→order, padding→padding (width pas op desktop, zie media) */
.layer__col{flex:1 1 300px;min-width:0;order:var(--col-order,0);padding:var(--col-pad,0)}
/* rows-subtype: verticale ruimte tussen de gestapelde rijen (rows_spacing_vertical) */
.module-col__rows{display:flex;flex-direction:column;row-gap:var(--rows-gap,0)}
/* module_column met een eigen design (design_layer): Section-achtige wrapper zodat de
   StyleCompiler-regels (.s<hash> > .layer__bg + .s<hash>{spacing}) aangrijpen. #8 */
.module-col{position:relative;isolation:isolate;height:100%}
.module-col>.layer__bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;border-radius:inherit}
.module-col>.layer__sc{position:relative;z-index:1}
/* 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}
.layer__col .layer--columns>.layer__sc>.layer__inner,.layer__col .layer--text>.layer__sc>.layer__inner{width:100%;max-width:none;margin-inline:0}
@media(max-width:760px){.layer__columns{flex-direction:column}}
/* desktop: spacing-till + kolombreedte (width) + order-till + rows-gap-till */
@media(min-width:761px){
  .layer__columns{
    column-gap:var(--cols-gx-d,var(--cols-gx,clamp(1.5rem,3vw,2.5rem)));
    row-gap:var(--cols-gy-d,var(--cols-gy,clamp(1.5rem,3vw,2.5rem)))}
  .layer__col{flex:var(--col-flex-d,1 1 300px);order:var(--col-order-d,var(--col-order,0))}
  .module-col__rows{row-gap:var(--rows-gap-d,var(--rows-gap,0))}
}

.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}

/* Zoek + filters als één wit vlak onder de titel: datums/gasten (searchbar) én
   Type/Voorzieningen/Sorteer (filters), elk een veld met hoofdletter-label erboven.
   display:contents laat beide forms hun velden direct in de flex-strook plaatsen. */
/* Géén backdrop-filter hier: dat maakt een containing block voor de position:fixed
   facet-panels (attach.js), waardoor die verkeerd landen. Vandaar een solide wit. */
.search-controls{display:flex;flex-wrap:wrap;align-items:stretch;gap:6px;
    margin:0 auto 14px;max-width:850px;
    background:#fff;
    padding:6px;border-radius:14px;box-shadow:var(--shadow-md)}
.search-controls .searchbar,
.search-controls .result-filters{display:contents}
.search-controls .searchbar__field--dates .date-trigger .form-field__value{white-space:nowrap}
.search-controls .searchbar__field--dates{flex:1.7 1 220px}
.search-controls .searchbar__field--guests{flex:1 1 140px}

/* Uniform veld (matcht .searchbar__field): wit boxje, caps-label erboven, control eronder. */
.sc-field{flex:1 1 140px;display:flex;flex-direction:column;justify-content:center;gap:.2rem;
    min-height:55px;background:#fff;border:1px solid #e7e1d6;border-radius:9px;padding:6px 14px;min-width:0}
/* Control (facet-trigger of select): volledig kaal, geen box-in-box. Alleen tekst
   + caret; het veldkader is de enige omlijning. Label hergebruikt .form-field__sublabel.
   De overrides staan op .search-controls .sc-field ... zodat ze de basis-.result-filters__*
   winnen op specificiteit (geen !important). */
.sc-field__control{font:inherit;font-size:var(--field-value-size);font-weight:var(--field-value-weight);color:var(--ink);
    outline:none;cursor:pointer;min-width:0;width:100%;min-height:0}
.search-controls .sc-field .result-filters__trigger{border:0;background:none;box-shadow:none;border-radius:0;padding:0;
    display:flex;align-items:center;justify-content:space-between;gap:.4rem;text-align:left;white-space:nowrap}
.search-controls .sc-field .result-filters__trigger[aria-expanded="true"]{border-color:transparent;box-shadow:none}
.sc-field .result-filters__trigger::after{content:"";flex:0 0 auto;width:0;height:0;
    border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #9a9384;transition:transform .2s ease}
.sc-field .result-filters__trigger[aria-expanded="true"]::after{transform:scaleY(-1);border-top-color:var(--green-1)}
.sc-field__value{overflow:hidden;text-overflow:ellipsis}
.sc-field.is-set .sc-field__value{color:var(--green-1)}
.search-controls .sc-field select.sc-field__control{border:0;box-shadow:none;border-radius:0;padding:0;
    appearance:none;-webkit-appearance:none;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath fill='%239a9384' d='M0 0h10L5 7z'/%3E%3C/svg%3E") no-repeat right center}

/* Chips-regel + "Filters wissen" ernaast; alleen ruimte als er iets zichtbaar is. */
/* Toolbar-regel (uitgelijnd met de 850px-balk): count-pill + chips links, sorteren rechts. */
.filter-chips-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin:0 auto;max-width:850px}
.filter-chips-row:has(> :not([hidden])){margin:2px auto 1.2rem}
.filter-chips-row .result-filters__reset{margin-left:0}
.filter-chips-row .results-pill{margin:0}
.result-filters__field--sort{margin-left:auto}

/* 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:var(--field-value-size);font-weight:var(--field-value-weight);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}
/* "Filters wissen" — alleen zichtbaar als er iets actief is (JS togglet [hidden]). */
.result-filters__reset{margin-left:auto;align-self:center;background:none;border:0;font:inherit;font-size:13px;
    font-weight:600;color:var(--green-2,#2e6042);text-decoration:underline;cursor:pointer;transition:color .2s ease}
.result-filters__reset[hidden]{display:none}
.result-filters__reset:hover{color:var(--green-1)}

/* Wegklikbare filter-chips onder de filterbalk (booking-filters.js). */
.filter-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0}
.filter-chips[hidden]{display:none}
.filter-chip{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
    padding:.34rem .5rem .34rem .8rem;font:inherit;font-size:13px;font-weight:600;color:var(--green-1);
    background:color-mix(in srgb,var(--green-1) 8%,#fff);border:1px solid var(--green-soft,#e7e2d8);
    border-radius:999px;transition:background .18s ease,border-color .18s ease}
.filter-chip:hover{background:color-mix(in srgb,var(--green-1) 15%,#fff);border-color:var(--green-1)}
.filter-chip svg{flex:0 0 auto}
/* Zoekcontext-chips (datum/personen) krijgen een leidend icoon; alleen het ×-icoon dimt. */
.filter-chip--context{padding-left:.62rem}
.filter-chip__x{opacity:.55;transition:opacity .18s ease}
.filter-chip:hover .filter-chip__x{opacity:1}
.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 — indeling in site-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.
   ============================================================ */
#main-content:has(.contact-form-wrap){
    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 */
#main-content:has(.contact-form-wrap)>.layer--text{padding-block:0;margin:0}
#main-content:has(.contact-form-wrap)>.layer--text>.layer__sc>.layer__inner{width:100%;max-width:none;margin:0;padding:0}

/* area-toewijzing op basis van inhoud */
#main-content:has(.contact-form-wrap)>.layer--text:has(.tagline:not(.tagline--accent)){grid-area:hero}
#main-content:has(.contact-form-wrap)>.layer--text:has(.cd-row){grid-area:details}
#main-content:has(.contact-form-wrap)>.contact-form-wrap{grid-area:form;margin:0}
#main-content:has(.contact-form-wrap)>.layer--text:has(.contact-cta){grid-area:panel}
#main-content:has(.contact-form-wrap)>.layer--map{grid-area:map}
#main-content:has(.contact-form-wrap)>.layer--map>.layer__sc>.layer__inner{width:100%;max-width:none;margin:0;padding:0}

/* ── hero (gecentreerd) ── */
#main-content:has(.contact-form-wrap) .layer--text:has(.tagline:not(.tagline--accent)){text-align:center}
#main-content:has(.contact-form-wrap) .layer--text:has(.tagline:not(.tagline--accent)) .layer__inner{max-width:680px;margin-inline:auto}
#main-content:has(.contact-form-wrap) .layer--text:has(.tagline:not(.tagline--accent)) .heading{font-size:clamp(30px,4vw,46px);margin:4px 0 14px}
#main-content:has(.contact-form-wrap) .layer--text:has(.tagline:not(.tagline--accent)) p{color:#5d564c;margin:0}

/* ── gegevens-kaart ── */
#main-content:has(.contact-form-wrap)>.layer--text:has(.cd-row){background:#fff;border:1px solid var(--green-soft,#e7e2d8);border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-sm)}
/* zelfde grootte + uitlijning als de formulier-kop "Stuur ons een bericht" */
#main-content:has(.contact-form-wrap) .layer--text:has(.cd-row) .heading{font-size:clamp(22px,2.4vw,28px);line-height:1.15;margin-bottom:20px}
.cd-row{display:flex;gap:15px;align-items:flex-start;padding:20px 0;border-top:1px solid var(--green-soft,#ece5d8)}
.cd-row:first-of-type{border-top:0;padding-top:0}
.cd-row:last-of-type{padding-bottom:0}
.cd-row .ic{width:42px;height:42px;border-radius:50%;flex:0 0 auto;background-color:var(--accent);background-repeat:no-repeat;background-position:center;background-size:20px}
.cd-row :is(h3,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='%23ffffff' 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='%23ffffff' 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='%23ffffff' 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='%23ffffff' 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 ── */
#main-content:has(.contact-form-wrap) .contact-form-wrap{background:#fff;border-radius:var(--radius-lg);padding:clamp(26px,3vw,40px);box-shadow:var(--shadow-md)}
#main-content:has(.contact-form-wrap) .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}
#main-content:has(.contact-form-wrap) .contact-form-wrap .form-input{background:var(--cream);border:1px solid var(--green-soft,#e3ddd0);border-radius:12px}
#main-content:has(.contact-form-wrap) .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}
#main-content:has(.contact-form-wrap) .contact-form-wrap .form-actions{margin-top:6px}
#main-content:has(.contact-form-wrap) .contact-form-wrap .form-actions .btn{width:100%}
#main-content:has(.contact-form-wrap) .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 (LayerMap → .layer--map .travel__map, park-map.js met vaste coords) ── */
#main-content:has(.contact-form-wrap) .layer--map .travel__map{margin:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md)}
#main-content:has(.contact-form-wrap) .layer--map .travel__map.is-ready{display:block;width:100%;height:clamp(320px,40vw,460px)}
#main-content:has(.contact-form-wrap) .layer--map .leaflet-container{height:100%;font:inherit}

@media(max-width:820px){
    #main-content:has(.contact-form-wrap){
        grid-template-columns:1fr;
        grid-template-areas:"hero" "details" "form" "map" "panel";
    }
}

/* contact: pijl op de verzendknop (zoals de referentie) */
#main-content:has(.contact-form-wrap) .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}

/* ============================================================
   SITEMAP (layer_sitemap) — geneste menu-boom (issue #9)
   ============================================================ */
.layer--sitemap{padding-block:var(--section-pad)}
.sitemap__list{list-style:none;margin:0;padding:0}
.sitemap__list--root{max-width:640px;display:flex;flex-direction:column;gap:10px}
.sitemap__list--sub{margin:8px 0 0 8px;padding-left:16px;border-left:2px solid #e7e1d6;
    display:flex;flex-direction:column;gap:6px}
.sitemap__link{color:var(--green-1);transition:color .2s ease}
.sitemap__link:hover{color:var(--green-2)}
.sitemap__item>.sitemap__link{font-weight:600;font-size:1.05rem}
.sitemap__list--sub .sitemap__link{font-weight:500;font-size:.98rem}
.sitemap__link--no-route{color:var(--ink);cursor:default;font-weight:700}
.sitemap__link--no-route:hover{color:var(--ink)}


/* === "Jouw verblijf" — witte kaart achter de sectie (alleen waar iconen staan) === */
.layer--columns:has(.iv-item) .layer__columns{background:#fff;border-radius:18px;padding:clamp(26px,3.4vw,46px);box-shadow:0 12px 40px rgba(41,39,35,.07);column-gap:clamp(30px,4vw,64px)}
@media(max-width:620px){.layer--columns:has(.iv-item) .layer__columns{padding:24px 22px}}

/* === "Jouw verblijf" iconen (withIcons wrapt h3 in .iv-item) — geel rondje + wit icoon === */
.iv-item{display:flex;gap:16px;align-items:flex-start;margin:0 0 26px}
.iv-item__ic{flex:0 0 auto;width:42px;height:42px;border-radius:50%;background-color:var(--accent,#FFAD06);background-repeat:no-repeat;background-position:center;background-size:22px 22px;margin-top:2px}
.iv-item__body{flex:1 1 auto;min-width:0}
.iv-item__body>h3:first-child{margin-top:0}
.iv-item--reception .iv-item__ic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208a6%206%200%200%200-12%200c0%207-3%209-3%209h18s-3-2-3-9%27/%3E%3Cpath%20d%3D%27M13.7%2021a2%202%200%200%201-3.4%200%27/%3E%3C/svg%3E")}
.iv-item--included  .iv-item__ic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2720%206%209%2017%204%2012%27/%3E%3C/svg%3E")}
.iv-item--breakfast .iv-item__ic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M18%208h1a4%204%200%200%201%200%208h-1%27/%3E%3Cpath%20d%3D%27M3%208h15v8a4%204%200%200%201-4%204H7a4%204%200%200%201-4-4V8z%27/%3E%3Cline%20x1%3D%277%27%20y1%3D%272%27%20x2%3D%277%27%20y2%3D%274.5%27/%3E%3Cline%20x1%3D%2711%27%20y1%3D%272%27%20x2%3D%2711%27%20y2%3D%274.5%27/%3E%3Cline%20x1%3D%2715%27%20y1%3D%272%27%20x2%3D%2715%27%20y2%3D%274.5%27/%3E%3C/svg%3E")}
.iv-item--checkout  .iv-item__ic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27/%3E%3Cpolyline%20points%3D%2712%207%2012%2012%2015%2014%27/%3E%3C/svg%3E")}
.iv-item--pets      .iv-item__ic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27white%27%20stroke%3D%27none%27%3E%3Cellipse%20cx%3D%275%27%20cy%3D%2712.5%27%20rx%3D%271.8%27%20ry%3D%272.3%27/%3E%3Cellipse%20cx%3D%279.3%27%20cy%3D%278.5%27%20rx%3D%271.9%27%20ry%3D%272.5%27/%3E%3Cellipse%20cx%3D%2714.7%27%20cy%3D%278.5%27%20rx%3D%271.9%27%20ry%3D%272.5%27/%3E%3Cellipse%20cx%3D%2719%27%20cy%3D%2712.5%27%20rx%3D%271.8%27%20ry%3D%272.3%27/%3E%3Cpath%20d%3D%27M12%2013.5c-2.8%200-4.7%202.2-4.7%204.2C7.3%2019.6%209.2%2020.5%2012%2020.5s4.7-.9%204.7-2.8C16.7%2015.7%2014.8%2013.5%2012%2013.5z%27/%3E%3C/svg%3E")}
.iv-item--options   .iv-item__ic{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cline%20x1%3D%2712%27%20y1%3D%275%27%20x2%3D%2712%27%20y2%3D%2719%27/%3E%3Cline%20x1%3D%275%27%20y1%3D%2712%27%20x2%3D%2719%27%20y2%3D%2712%27/%3E%3C/svg%3E")}
/* lijsten als verticale tijdlijn met groene check-bullets */
.iv-item__body ul{list-style:none;margin:14px 0 0;padding:0}
.iv-item__body li{position:relative;padding:0 0 16px 32px}
.iv-item__body li:last-child{padding-bottom:0}
.iv-item__body li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background-color:var(--theme-color-1,#2e6042);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2720%206%209%2017%204%2012%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px}
.iv-item__body li:not(:last-child)::after{content:"";position:absolute;left:10px;top:23px;bottom:1px;border-left:2px dotted #d9cdb8}

/* === layer_info_blocks ("Informatieblokken") — gestructureerde versie van de "Jouw verblijf"-look:
   witte card, 2-koloms masonry, oranje icoon-cirkel (de CMS-media-icoon) + body + checklist === */
.layer--info-blocks .info-blocks{background:#fff;border-radius:18px;padding:clamp(26px,3.4vw,46px);box-shadow:0 12px 40px rgba(41,39,35,.07);column-count:2;column-gap:clamp(30px,4vw,64px)}
@media(max-width:760px){.layer--info-blocks .info-blocks{column-count:1;padding:24px 22px}}
.info-block{display:flex;gap:16px;align-items:flex-start;margin:0 0 26px;break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid}
/* De icoon-SVG bevat z'n eigen oranje cirkel + wit symbool → géén eigen achtergrond/cirkel,
   gewoon op volle grootte renderen (anders dubbele cirkel + piepklein symbool). */
.info-block__ic{flex:0 0 auto;width:42px;height:42px;margin-top:2px}
.info-block__ic>*,.info-block__ic .media,.info-block__ic img,.info-block__ic svg,.info-block__ic picture{width:42px;height:42px;display:block;object-fit:contain}
.info-block__body{flex:1 1 auto;min-width:0}
.info-block__body>.info-block__title:first-child,.info-block__body>h3:first-child{margin-top:0}
.info-block__text{margin-top:6px}
.info-block__list{list-style:none;margin:14px 0 0;padding:0}
.info-block__list li{position:relative;padding:0 0 16px 32px}
.info-block__list li:last-child{padding-bottom:0}
.info-block__list li::before{content:"";position:absolute;left:0;top:0;width:21px;height:21px;border-radius:50%;background-color:var(--theme-color-1,#2e6042);background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27white%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%2720%206%209%2017%204%2012%27/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:12px}
.info-block__list li:not(:last-child)::after{content:"";position:absolute;left:10px;top:23px;bottom:1px;border-left:2px dotted #d9cdb8}
.info-block__link{margin-top:14px}

/* === Sitemap: geneste bullet-lijst in 2 kolommen (referentie-stijl, themakleuren) === */
.layer--sitemap .sitemap__list--root{
  display:block;column-count:2;column-gap:56px;max-width:none;
  list-style:none;margin:0;padding:0;
}
.layer--sitemap .sitemap__list{list-style:none;margin:0;padding:0}
.layer--sitemap .sitemap__item{list-style:none}
.layer--sitemap .sitemap__list--root > .sitemap__item{
  break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 9px;
}
.layer--sitemap .sitemap__link{
  position:relative;display:inline-block;padding-left:18px;line-height:1.4;
  color:var(--theme-color-1,#2e6042);text-decoration:none;font-weight:600;
}
.layer--sitemap .sitemap__link::before{
  content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--accent,#FFAD06);
}
.layer--sitemap .sitemap__link:hover{text-decoration:underline}
.layer--sitemap .sitemap__list--sub{padding-left:20px;margin:5px 0 4px}
.layer--sitemap .sitemap__list--sub .sitemap__item{margin:0 0 5px}
.layer--sitemap .sitemap__list--sub .sitemap__link{font-weight:400;font-size:.95rem;color:#5d574a}
.layer--sitemap .sitemap__list--sub .sitemap__link::before{width:5px;height:5px;background:var(--theme-color-1,#2e6042);top:.6em}
.layer--sitemap .sitemap__item:has(> .sitemap__link:empty){display:none}
@media(max-width:600px){ .layer--sitemap .sitemap__list--root{column-count:1} }

/* ============================================================
   WhatsApp-widget (zwevende knop + chat-popup) — gedrag in custom.js
   ============================================================ */
.wa{position:fixed;right:24px;bottom:24px;z-index:950;display:flex;flex-direction:column;align-items:flex-end;gap:14px;transform:translateY(165%);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .4s ease}
.wa.is-shown{transform:none;opacity:1;pointer-events:auto}
.wa__fab{width:60px;height:60px;border-radius:50%;border:0;cursor:pointer;padding:0;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(20,20,20,.55);transition:transform .2s ease,box-shadow .2s ease}
.wa__fab:hover{transform:scale(1.06);box-shadow:0 14px 30px -8px rgba(20,20,20,.6)}
.wa__panel{width:min(92vw,338px);border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 20px 54px -14px rgba(0,0,0,.5);transform-origin:right bottom;transform:scale(0);opacity:0;transition:transform .28s cubic-bezier(.22,1.15,.4,1),opacity .2s ease}
.wa.is-open .wa__panel{transform:scale(1);opacity:1}
.wa__head{position:relative;display:flex;align-items:center;gap:13px;padding:16px 18px;background:linear-gradient(120deg,#1f9d57,#25D366);color:#fff}
.wa__avatar{width:46px;height:46px;border-radius:50%;flex:0 0 auto;border:2px solid rgba(255,255,255,.85)}
.wa__head-txt{display:flex;flex-direction:column;line-height:1.25}
.wa__head-txt strong{font-size:16px;font-weight:600}
.wa__head-txt span{font-size:13px;opacity:.9}
.wa__close{position:absolute;top:9px;right:9px;background:none;border:0;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;transition:background .2s}
.wa__close:hover{background:rgba(255,255,255,.18)}
.wa__body{padding:18px 16px;background:#ece5dd;min-height:88px}
.wa__bubble{display:inline-block;max-width:86%;background:#fff;border-radius:2px 12px 12px 12px;padding:9px 13px 7px;font-size:14.5px;color:var(--ink);line-height:1.42;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa__time{display:block;text-align:right;font-size:11px;color:#9a958c;margin-top:3px}
.wa__foot{display:flex;align-items:center;gap:8px;padding:10px;background:#fff}
.wa__input{flex:1;min-width:0;border:0;outline:0;background:#f0f0f0;border-radius:22px;padding:11px 16px;font-size:14.5px;font-family:inherit;color:var(--ink)}
.wa__send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;padding:0;background:#f0f0f0;display:grid;place-items:center;transition:background .2s ease}
.wa__send:hover{background:#e4e4e4}
@media(max-width:600px){.wa{right:16px;bottom:16px}.wa__fab{width:54px;height:54px}}