@charset "UTF-8";
/* site.css — site-specifieke overrides op framework-CSS. */

/* Header-laag op vervolgpagina's tegen het menu (geen cream-ruimte boven de banner).
   Home-hero heeft data-has-search en blijft full-bleed; vervolgpagina-headers niet.
   Framework geeft <main> op vervolgpagina's padding-top:130px (= 96px header + 34px gap);
   wij zetten 'm gelijk aan de header-hoogte zodat de banner flush onder het menu valt. */
main:has(> .hero:not([data-has-search])){padding-top:var(--header-h,96px)!important}
html[data-home="1"] #main-content{padding-top:0!important}

/* Homepage: de header ligt boven op de hero. Pas na scrollen wordt hij een vaste,
   witte balk; de sticky-status wordt door main.js op dezelfde header gezet. */
html[data-home="1"] .site-header:not(.is-stuck){background:transparent!important;box-shadow:none!important}
html[data-home="1"] .site-header.is-stuck{background:var(--white)!important;box-shadow:0 6px 24px -12px rgba(41,39,35,.35)!important}
/* De framework-shell levert hier één CMS-logo aan. De bovenste headerlaag toont
   daarvan een witte variant boven de hero; de gekleurde laag komt terug bij scroll. */
html[data-home="1"] .site-header:not(.is-stuck) .site-logo__img--white{filter:brightness(0) invert(1)}
/* Binnenpagina's staan niet over een hero heen: daar is de header vanaf het
   eerste moment wit en gebruikt hij het gekleurde logo en donkere menu. */
html:not([data-home="1"]) .site-header{background:var(--white)!important;box-shadow:0 6px 24px -12px rgba(41,39,35,.35)!important}
html:not([data-home="1"]) .site-logo__img--color{opacity:1}
html:not([data-home="1"]) .site-logo__img--white{opacity:0}
html:not([data-home="1"]) .site-nav__link{color:var(--ink)}
html:not([data-home="1"]) .site-header__contact{color:var(--green-1)}
html:not([data-home="1"]) .site-header__menu-toggle{color:var(--ink)}
html:not([data-home="1"]) #main-content{padding-top:var(--header-h,96px)!important}

/* Eén header/slide -> geen navigatiepijlen en geen pagination-dots tonen. */
.hero:has(.hero__slides > .hero__slide:only-child) .hero__arrow,
.hero:has(.hero__slides > .hero__slide:only-child) .hero__dots{display:none!important}

/* Home-hero: subtitel wit (over het hero-beeld). */
.hero .hero__subtitle{color:#fff;font-family:var(--font-body,"Inter",sans-serif);font-weight:400;font-style:normal;text-shadow:0 1px 12px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.4);letter-spacing:.02em}

/* Opsomming-items (iv-item) niet dikgedrukt, maar regular. */
.iv-item__body li{font-weight:400!important}

/* Accommodatie-boekkaart (.rentable__card): USP-tekst groen + telefoon/e-mail
   uitlijnen met de USP's (gelijke 20px-icoonkolom). */
.rentable__usps span{color:#2e6042!important}
.rentable__contact a{display:grid!important;grid-template-columns:20px 1fr;column-gap:.6rem;align-items:center}
.rentable__contact a svg{width:20px;height:20px;padding:3px;box-sizing:border-box;background:rgba(255,173,6,.14);color:var(--accent);border-radius:50%;justify-self:center}
/* Bel/mail-CTA: oranje icoon (hierboven) + groene tekst (uit main.css). */
/* Footer-contactlinks (bel/mail) stonden op de framework-linkkleur (#06f blauw) -> merkgroen. */
.site-footer__address a{color:var(--green-1)}
.site-footer__address a:hover{color:var(--green-2)}
/* Boek-kaarttitel wit op de groene kaartkop; de losse "Kenmerken"-kaart
   (witte achtergrond) blijft donker -> geen wit-op-wit. */
.rentable__card-head .rentable__card-title{color:#fff}

/* Foto-raster (tekst+foto-lagen): minder ruimte tussen de foto's — site-brede standaard. */
.text-images__photos{gap:6px}

/* (YouTube footer-icoon nu via de social-icon-whitelist in layout.php → echte <img>, #48.
   De interim ::before-workaround is daarmee overbodig en verwijderd.) */

/* Contact "Gegevens"-kolom: witte kaart + gele cirkel-iconen + scheidingslijnen
   (stijl zoals eerder bij praktische-informatie; verdween bij CSS-refactor 1.57.7).
   Scoped op :has(.cd-row) -> raakt alleen deze kolom. */
.layer--text:has(.cd-row) .layer__inner{background:#fff;border-radius:18px;padding:clamp(24px,3vw,40px);box-shadow:0 12px 40px rgba(41,39,35,.07)}
.layer--text:has(.cd-row) .prose>.cd-row{display:grid;grid-template-columns:44px 1fr;column-gap:16px;align-items:start;padding:18px 0;border-top:1px solid rgba(41,39,35,.08)}
.layer--text:has(.cd-row) .prose>.cd-row:first-child{border-top:0;padding-top:6px}
.layer--text:has(.cd-row) .prose>.cd-row::before{content:"";width:44px;height:44px;border-radius:50%;background-color:#FFAD06;background-repeat:no-repeat;background-position:center;background-size:22px 22px}
.layer--text:has(.cd-row) .prose>.cd-row:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M12%202a7%207%200%2000-7%207c0%205.25%207%2013%207%2013s7-7.75%207-13a7%207%200%2000-7-7zm0%209.5A2.5%202.5%200%201112%206.5a2.5%202.5%200%20010%205z%22%2F%3E%3C%2Fsvg%3E")}
.layer--text:has(.cd-row) .prose>.cd-row:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M6.6%2010.9a15.5%2015.5%200%20006.5%206.5l2.2-2.2c.3-.3.7-.4%201-.2%201.1.4%202.3.6%203.5.6.6%200%201%20.4%201%201V20c0%20.6-.4%201-1%201A17%2017%200%20013%204c0-.6.4-1%201-1h3.6c.6%200%201%20.4%201%201%200%201.2.2%202.4.6%203.5.1.4%200%20.8-.3%201z%22%2F%3E%3C%2Fsvg%3E")}
.layer--text:has(.cd-row) .prose>.cd-row:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22M4%205h16c1.1%200%202%20.9%202%202v10c0%201.1-.9%202-2%202H4c-1.1%200-2-.9-2-2V7c0-1.1.9-2%202-2zm8%207l8-5H4l8%205zm0%202.3L4%209.3V17h16V9.3l-8%205z%22%2F%3E%3C%2Fsvg%3E")}
.layer--text:has(.cd-row) .prose>.cd-row:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20d%3D%22M12%203a9%209%200%20100%2018%209%209%200%20000-18zm0%204v5l3.5%202%22%2F%3E%3C%2Fsvg%3E")}

/* Contact: de 2-koloms-rij (Gegevens | formulier) belandde in de smalle 360px-gridtrack
   (grid-column:auto) en wrapte daardoor onder elkaar. Full-width forceren -> naast elkaar. */
.layer--columns:has(.cd-row){grid-column:1 / -1 !important}

/* Contact: helft minder ruimte tussen de gegevens/formulier-kolommen en de kaart eronder.
   De laag-grid heeft een vaste row-gap (3.75em); geen per-laag CMS-veld hiervoor,
   dus hier in em gehalveerd (60px -> 30px) op precies deze gap. */
.layer--columns:has(.cd-row) + .layer--map{margin-top:-3em}

/* Pagina-lagen dichter tegen elkaar: standaard content-lagen (tekst / tekst+media)
   hebben per-laag 3em verticale opmaak-padding; globaal gehalveerd naar 1.5em.
   Hogere specificiteit dan de .s<hash>-opmaakklasse. Hero/contactkaart ongemoeid. */
#main-content .layer--text:not(:has(.cd-row)):not(:has(.sd7a8c2c9d03b)),
#main-content .layer--text-image{padding-block:1.5em}

/* Contact: subtiele achtergrond achter de kaart (zelfde tint als de galerieconcept-lagen). */
.layer--columns:has(.cd-row) + .layer--map{position:relative;z-index:0;background:transparent;padding-block:3em}
.layer--columns:has(.cd-row) + .layer--map::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:50%;margin-left:-50vw;width:100vw;background:#faf9f7}

/* Contactformulier: veld-labels visueel weghalen (placeholder is voldoende),
   maar toegankelijk houden voor screenreaders (sr-only). */
.layer--columns:has(.cd-row) form .form-field__label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sidemenu-trigger: groen rondje met witte streeps + click-transitie. */
.sidemenu-trigger{
  width:42px;height:42px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--theme-color-1)!important;
  color:#fff!important;
  border-radius:50%!important;
  transition:transform .15s ease;
}
.sidemenu-trigger:active{transform:scale(.88)}

/* Zoekveld-sublabels: consistente opmaak op alle searchbar-velden. */
.form-field__sublabel{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9a9384}

/* Contact: helft minder ruimte tussen de intro-tekst en de witte cards
   (kolommen-padding-top weg + laag iets opgetrokken). */
.layer--columns:has(.cd-row){padding-top:0;margin-top:-1.5em}

/* Contact: formulier-card dezelfde radius als de Gegevens-card (18px i.p.v. 34px). */
#main-content:has(.contact-form-wrap) .contact-form-wrap{border-radius:18px}

/* Contact: formulier-card even hoog als Gegevens (kolommen stretchen + card vult)
   en dezelfde zachte schaduw als de Gegevens-card. */
.layer--columns:has(.cd-row) .layer__columns{align-items:stretch}
#main-content:has(.contact-form-wrap) .contact-form-wrap{height:100%;box-shadow:0 12px 40px rgba(41,39,35,.07)}

/* Home: vlinder-video boven het groene offer-paneel laten uitsteken, onderkant ~4px erachter
   (z-index 1). Offer-laag heeft var(--section-pad) top-padding; offset compenseert dat en
   translateY(-100%) tilt de video volledig boven het paneel (adaptief desktop/mobiel). */
.offer__video{top:calc(-1 * var(--section-pad) - 34px);transform:translateX(-50%)}

/* Contact-formulier: placeholders + invoer in Inter (kleur ongemoeid). */
.contact-form-wrap .form-field__control,
.contact-form-wrap .form-field__control::placeholder{font-family:var(--font-body)!important}

/* 'Plan route'-link: dubbele onderstreping weg (laat de design-border staan, haal de extra text-decoration weg). */
.cd-route{text-decoration:none!important}

/* Home "Uitgebreid ontbijtbuffet" (item 14): tekstkolom verticaal centreren t.o.v. de foto.
   Spiegelt de EH-instelling design_column2 marges=auto (die via de API nog niet rendert, #15/#16). */
.layer--text-image:has(.badge-corner) .text-image__grid{align-items:center}

/* Info-blocks tagline (bv. "PRAKTISCHE INFORMATIE" / "Faciliteiten"): de tagline rendert als inline <span>,
   waardoor text-align:center op het element zelf niet centreert. Maak hem block zodat de centrering pakt. */
.layer--info-blocks .tagline{display:block;text-align:center}

/* Info-blocks kaart-titels (Receptie/Uitchecken/…) links uitlijnen — net als de
   body-tekst eronder. De sectietitel "Jouw verblijf" staat als <h2> BUITEN de blokken
   en blijft daardoor gecentreerd (de laag-opmaak zet die op center). */
.layer--info-blocks .info-block__title{text-align:left}

/* Faciliteiten/info-blocks: 2 kolommen met de rechter iets breder zodat beide kolommen
   ongeveer even lang ogen (i.p.v. gelijke column-count-kolommen). Alleen desktop/tablet. */
@media(min-width:769px){
  .layer--info-blocks .info-blocks:has(.info-block:nth-of-type(2)):not(:has(.info-block:nth-of-type(3))){column-count:auto;display:grid;grid-template-columns:0.925fr 1.075fr;gap:clamp(30px,4vw,64px);align-items:start}
}

/* Praktische informatie — kaart-rij (laag .sc60db1f05a33): critical.css zet de geneste
   .layer--map > .layer__sc > .layer__inner op width:90% + margin-inline:auto, waardoor de
   kaart 5% inspringt en niet uitlijnt met de tekst erboven/onder (x80). Full width + links
   uitlijnen zodat de kaart zijn 2/3-kolom vult en links aansluit op de tekst. */
.sc60db1f05a33 .layer--map > .layer__sc > .layer__inner{width:100%;max-width:none;margin-inline:0;padding-left:0;padding-right:0}
/* Kaart 400px hoog (override main.css .travel__map.is-ready{height:220px}). */
.sc60db1f05a33 .layer__col .travel__map.is-ready{height:400px}
/* Adres-kolom verticaal centreren t.o.v. de hogere kaart. */
.sc60db1f05a33 .layer__columns{align-items:center}

/* Plattegrond-rij (kolommen met lightbox-foto .mm-lb-trigger): tekstkolom verticaal
   centreren t.o.v. de hogere plattegrond-foto. */
.layer--columns:has(.mm-lb-trigger) .layer__columns{align-items:center}
/* Plattegrond-foto links uitlijnen op de content-rand: de geneste text_image-laag zet z'n
   .layer__inner op width:90%+margin-inline:auto (32px inspring t.o.v. x80). Full-width +
   links zodat de kaart aansluit op de lagen erboven/onder. */
.layer--columns:has(.mm-lb-trigger) .layer__col .layer__inner:has(.mm-lb-trigger){width:100%;max-width:none;margin-inline:0}

/* Faciliteiten/info-blocks: bloktitels op desktop op 1 regel (lange titel paste niet in de kolom). */
@media(min-width:769px){
  .layer--info-blocks .info-blocks:has(.info-block:nth-of-type(2)):not(:has(.info-block:nth-of-type(3))) .info-block__title{font-size:1.375rem;white-space:nowrap}
}

/* Sticky header gelijk aan de start-header: het framework maakt de sticky-balk normaal
   compacter (kleiner logo 42px, verborgen contactregel, lagere balk 66px, gap 0). Die
   compactie zetten we uit zodat de sticky-balk er net zo uitziet als bovenaan: volledige
   hoogte (96px), logo op grootte (48px), gap terug (15px) en de contactregel zichtbaar.
   Witte achtergrond + schaduw + kleur-logo + donkere tekst blijven (leesbaar bij scrollen). */
/* Header-bovenbalk (telefoon/e-mail/vlaggen): groen bij start op niet-home, schuift weg bij scrollen */
html[data-header-fixed="0"] .site-header__util .site-header__contact,
html[data-header-fixed="0"] .site-header__util .site-header__contact .button--text{color:var(--green-1)}
.site-header__util{max-height:120px;overflow:hidden;transition:max-height .3s ease,opacity .3s ease}
.site-header.is-stuck .site-logo__img{height:48px}
.site-header.is-stuck .site-header__util{max-height:0;opacity:0;margin:0;pointer-events:none}

/* Groene hamburger op de nav-regel uitlijnen + zelfde hoogte als de Zoek & Boek-knop:
   standaard 42px en verticaal gecentreerd over de hele balk (center y48); de nav-regel zit
   lager (center y66) en de knop is 33px hoog. Hamburger → 33px (even hoog als de knop) en
   met flex-end + margin-bottom op center y66 (gelijk met Zoek & Boek). Alleen desktop
   (≥861px = tweeregelige header); mobiel houdt 42px (touch-target). Geldt start én sticky. */
@media(min-width:861px){
  .site-header .sidemenu-trigger{align-self:flex-end;margin-bottom:13.5px;width:33px;height:33px}
  .site-header .sidemenu-trigger > svg{width:18px;height:18px}
}
/* Knoppen-groep naar links: de hamburger zit ná het menu in een aparte container en liep
   daardoor door tot de bandrand (x1425). Hamburger absoluut positioneren zodat z'n rechterrand
   gelijk eindigt met het DUITSE vlaggetje (de rechterrand van de contact-vlaggen, op x1331 =
   inner-rechterrand − 94: util-box-inset 72 + util padding-right 22). main 72px eerder laten
   eindigen en de nav 74px ruimte rechts geven zodat nav+Zoek & Boek nog een tikje naar links
   schuiven én Zoek & Boek 19px vrij blijft van de hamburger. Alleen ≥1100px (daar is de
   1280-band vol; smaller breekt de uitlijning). Geldt start én sticky. */
@media(min-width:1100px){
  .site-header__inner{position:relative}
  .site-header__main{margin-right:72px}
  .site-header__nav{padding-right:74px}
  .site-header .sidemenu-trigger{position:absolute;right:94px;bottom:13.5px;margin:0}
}

/* Boek-preview inline (rentable-detail-kaart): verborgen tot een datum gekozen is. */
.booking-preview-inline{display:none;gap:.3rem;margin-top:var(--space-3);padding:var(--space-3);border:1px solid color-mix(in srgb,var(--color-primary,#2e6042) 18%,var(--color-border));border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-primary,#2e6042) 5%,var(--color-bg-elev))}
.booking-preview-inline[data-visible="1"]{display:grid}
.booking-preview-inline__title{font-size:1rem;font-weight:700;color:var(--color-fg)}
.booking-preview-inline__price{font-size:1.2rem;font-weight:800;color:var(--color-primary,#2e6042);font-variant-numeric:tabular-nums}
.booking-preview-inline__strip{height:.4rem;border-radius:999px;overflow:hidden;background:color-mix(in srgb,var(--color-primary,#2e6042) 12%,var(--color-bg-soft))}
.booking-preview-inline__strip-fill{display:block;width:18%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--color-primary,#2e6042),color-mix(in srgb,var(--color-primary,#2e6042) 45%,#052e16));transition:width 180ms ease}
.booking-preview-inline[data-loading="1"] .booking-preview-inline__strip-fill{background:linear-gradient(90deg,color-mix(in srgb,var(--color-primary,#2e6042) 55%,#fff),var(--color-primary,#2e6042))}

/* Zijmenu: subtiel in-/uitklappen van submenu's (native <details> — bv. WellNES).
   Moderne browsers krijgen een vloeiende hoogte + lichte fade bij openen én sluiten
   via ::details-content + interpolate-size; oudere browsers vallen terug op het
   directe native gedrag (de chevron animeert daar al). Duur gelijk aan de chevron (.3s). */
@supports (interpolate-size: allow-keywords){
  .sidemenu{ interpolate-size: allow-keywords; }
  .sidemenu__disclosure::details-content{
    height: 0;
    overflow: clip;
    transition: height .3s ease, content-visibility .3s allow-discrete;
  }
  .sidemenu__disclosure[open]::details-content{
    height: auto;
  }
}

/* Subtiele ease op de submenu-kop (bv. WellNES) bij openen/sluiten:
   de kop kleurt zacht mee met de opengeklapte sublist (0.3s, gelijk aan de chevron/hoogte),
   plus lichte hover-feedback. */
.sidemenu__summary{ transition: background-color .3s var(--ease-out, ease); }
.sidemenu__disclosure[open] > .sidemenu__summary{ background: var(--color-bg-soft, #f7f4ee); }

/* Subtiele groene hover op menu-items in het zijmenu (top-level, submenu-koppen én sub-items):
   lichte thema-groen-tint (8%) + groene tekst. Werkt op wit en op het beige van de sublist. */
.sidemenu__link{ transition: background-color .2s ease, color .2s ease; }
.sidemenu__link:hover{ background: rgba(46,96,66,.08); color: var(--color-primary, #2E6042); }

/* Zijmenu-CTA: gele knop (thema-accent #FFAD06) met donkere tekst i.p.v. groen.
   Specifieker selector omdat sidemenu.css ná custom/site.css laadt. */
.sidemenu__ctas .sidemenu__cta{ background: var(--accent, #FFAD06); color: #fff; }
.sidemenu__ctas .sidemenu__cta:hover{ background: #e89c00; color: #fff; transform: translateY(-2px); }

/* Vlinder-video (aanbod): zachte opacity-fade zodat het wegfaden aan het eind vloeiend is
   (i.p.v. een harde sprong); de JS zet .is-done al ~0,5s vóór het eind. */
.offer__video{ transition: opacity .6s ease; }
/* Vlinder-video: laat de vlinder aan het eind HARD achter het groene vlak verdwijnen
   (geen gradient). De video loopt 25px in het groen door en wordt op de groene lijn
   hard afgeknipt met clip-path — scherpe rand, werkt in alle browsers. */
.offer{ isolation: isolate; }  /* eigen stacking-context zodat z-index:-1 binnen .offer blijft */
.offer .layer__sc{ z-index: auto; }
.offer .offer__video{
  top: calc(-1 * var(--section-pad) - 34px + 20px);  /* 24px hoger (was 44px) */
  z-index: -1;                                        /* achter het groene vlak */
  -webkit-mask-image: none; mask-image: none;
}

/* Vlinder-video: harde onderrand (streepje op de groene rand) wegmaskeren + iets omlaag.
   Het masker faadt de onderste ~18px van de video naar transparant, zodat de box-rand
   niet meer als lijntje op het groene vlak staat. */


/* ---- Home banner-cards volledig klikbaar (JS-overlay, interim issue #59) ---- */
.card--js-linked{position:relative;cursor:pointer}
.card--js-linked .card__link-overlay{position:absolute;inset:0;z-index:2;border-radius:inherit}
.card--js-linked:hover .card__title{text-decoration:underline}

/* ---- Generieke sticky onderbalk — elke .layer--columns met .js-stickybar erin.
   Verschijnt na 50% scroll (JS zet .is-shown). Herbruikbaar op meerdere pagina's.
   Positionering staat los van de laag-opmaak, dus balkkleur is vrij instelbaar in EH. (#62) ---- */
.layer--columns:has(.js-stickybar){position:fixed;left:0;right:0;bottom:0;z-index:900;max-width:none;margin:0;
  transform:translateY(120%);transition:transform .35s ease;box-shadow:0 -2px 14px rgba(0,0,0,.15)}
.layer--columns:has(.js-stickybar).is-shown{transform:translateY(0)}
.layer--columns:has(.js-stickybar) > .layer__sc > .layer__inner{max-width:var(--maxw);margin-inline:auto;width:90%;position:relative}
.layer--columns:has(.js-stickybar) .layer__columns{align-items:center;gap:0;flex-wrap:nowrap}
.layer--columns:has(.js-stickybar) .prose{color:#fff;margin:0}
.layer--columns:has(.js-stickybar) .prose .btn{white-space:nowrap}
@media(max-width:640px){.layer--columns:has(.js-stickybar) .layer__columns{flex-wrap:wrap;gap:.6em;text-align:center;justify-content:center}}

/* 123boeken-reserveringswidget: alleen LAYOUT (grid/kaarten/kalender-opmaak/
   spacing/typografie + neutrale kaart-borders). Kleuren bewust NIET geforceerd —
   die worden bij 123boeken zelf ingesteld en zijn daar leidend (2026-07-21). */
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"]{
  --vb-booking-border:color-mix(in srgb,var(--theme-color-2,#89c162) 35%,#fff);
  font-family:var(--font-body);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-booking{
  display:block;
  max-width:1160px;
  margin-inline:auto;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-title{
  margin:0 0 1rem;
  font-family:var(--font-display);
  font-size:clamp(1.9rem,1.3rem + 1.2vw,2.7rem);
  line-height:1.1;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  gap:clamp(20px,3vw,40px);
  align-items:start;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section{
  overflow:hidden;
  margin:0 0 1.25rem;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.07);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-header{
  font-family:var(--font-body);
  font-weight:600;
  line-height:1.25;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-header{
  padding:.95rem 1.2rem;
  font-size:1.02rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-content{
  padding:1rem 1.2rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-options{
  padding-top:0;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-option{
  overflow:hidden;
  margin:0 0 1.45rem!important;
  border:1px solid var(--vb-booking-border);
  border-radius:14px;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-optiontitle{
  padding:.7rem 1rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  line-height:1.25;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-option .widget-123boeken-row{
  padding:.9rem 1rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-image img{
  border-radius:12px;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] input,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] select,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] textarea{
  border:1.5px solid var(--vb-booking-border)!important;
  border-radius:10px!important;
  font:inherit!important;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] input,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] select{
  min-height:2.35rem;
  padding:.55rem .75rem!important;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] textarea{
  padding:.75rem!important;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] input:focus,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] select:focus,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] textarea:focus{
  outline:0;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-add,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-bookButton,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.6rem 1rem;
  border-radius:999px;
  border:0!important;
  font-weight:700;
  text-decoration:none!important;
  transition:background-color .2s ease,transform .2s ease;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-add:hover,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-bookButton:hover,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-back:hover{
  transform:translateY(-1px);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-right{
  position:sticky;
  top:calc(var(--header-h,96px) + 1rem);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation{
  overflow:hidden;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.09);
  font-size:.9rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-title{
  margin:0;
  padding:.9rem 0 .55rem;
  font-family:var(--font-display);
  font-size:clamp(1.35rem,1.1rem + .55vw,1.65rem);
  font-weight:600;
  line-height:1;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-header{
  font-size:.95rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-content,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row{
  padding:.45rem .75rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-cell{
  line-height:1.3;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices{
  overflow:hidden;
  padding:0;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.09);
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices > .widget-123boeken-image,
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices > .widget-123boeken-image ~ *{
  padding-right:1rem;
  padding-left:1rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container .widget-123boeken-section-right .widget-123boeken-prices > .widget-123boeken-image{
  padding-top:1rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-price-total{
  border-top:1px solid var(--vb-booking-border);
  font-weight:700;
  font-size:.95rem;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-conditions a{
  font-weight:700;
}
:is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-inner-message{
  border-radius:18px;
  border:1px solid var(--vb-booking-border);
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation{
  overflow:hidden;
  margin:0 0 1.25rem;
  border:1px solid var(--vb-booking-border);
  border-radius:18px;
  box-shadow:0 14px 38px rgba(41,39,35,.07);
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons .widget-123boeken-title,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar > .widget-123boeken-title{
  margin:0;
  padding:.95rem 1.2rem;
  font-family:var(--font-body);
  font-size:1.02rem;
  font-weight:600;
  line-height:1.25;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons form{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  padding:1rem 1.2rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:flex-start;
  padding:1rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-module-calendar{
  flex:2 1 42rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-summary{
  flex:1 1 18rem;
}
.booking-widget-inline [data-widget="123boeken"] .pika-lendar{
  overflow:hidden;
  border:1px solid var(--vb-booking-border);
  border-radius:12px;
}
.booking-widget-inline [data-widget="123boeken"] .pika-single .pika-lendar{
  max-width:none;
}
.booking-widget-inline [data-widget="123boeken"] .pika-label{
  font-family:var(--font-body);
  font-weight:600;
}
.booking-widget-inline [data-widget="123boeken"] .pika-table th{
  font-weight:600;
}
.booking-widget-inline [data-widget="123boeken"] .pika-table{
  table-layout:fixed;
  width:100%;
}
.booking-widget-inline [data-widget="123boeken"] .pika-table td{
  overflow:hidden;
  vertical-align:top;
}
.booking-widget-inline [data-widget="123boeken"] .pika-button{
  overflow:hidden;
}
.booking-widget-inline [data-widget="123boeken"] .pika-button[data-content]::after{
  content:none;
}
.booking-widget-inline [data-widget="123boeken"] .is-selected .pika-button,
.booking-widget-inline [data-widget="123boeken"] .is-startrange .pika-button,
.booking-widget-inline [data-widget="123boeken"] .is-endrange .pika-button{
  font-weight:700;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation{
  margin:0;
  padding:1rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-title{
  padding:0 0 .65rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-table{
  display:grid;
  gap:.35rem;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row{
  display:grid;
  grid-template-columns:minmax(8.5rem,1fr) max-content;
  gap:.75rem;
  align-items:baseline;
  padding:.2rem 0;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-cell{
  min-width:0;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-button{
  display:flex;
  justify-content:flex-end;
}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-button button,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-button a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:2.35rem;
  padding:.6rem 1.35rem;
  border:0;
  border-radius:999px;
  font-weight:700;
  text-decoration:none;
}
@media(max-width:900px){
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-container{
    grid-template-columns:1fr;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-section-right{
    position:static;
  }
}
@media(max-width:520px){
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-row{
    display:flex;
    flex-wrap:wrap;
    gap:.6rem;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-cell{
    min-width:0;
    flex:1 1 9rem;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-button{
    flex:1 1 100%;
    justify-content:flex-end;
  }
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-add,
  :is(.layer--booking,.booking-widget-inline) [data-widget="123boeken"] .widget-123boeken-bookButton{
    width:100%;
  }
}

/* Boekwidget: dag-cijfers kleiner (12px). */
.booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .pika-single .pika-button.pika-day{font-size:12px}
/* Boekwidget-layout: kalender-blok >=620px (2 maanden + legenda passen). Vanaf 660px staan de
   2 maanden naast elkaar; de Prijsopgave staat ernaast als het past en zakt anders automatisch
   eronder (flex-wrap). Onder 660px stapelt alles (mobiel). Geen !important: we matchen de
   widget-format-attributen [data-format="1"] voor voldoende specificiteit. */
@media (min-width:660px){
  .booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-calendar{flex-wrap:wrap;align-items:flex-start;gap:1.25rem}
  .booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-calendar>.widget-123boeken-module-calendar{flex:1 1 620px;min-width:0;width:auto}
  .booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .widget-123boeken-calendar>.widget-123boeken-summary{flex:1 1 300px;min-width:0;width:auto}
  .booking-widget-inline [data-widget="123boeken"] .pika-single{display:flex;flex-wrap:wrap;gap:1rem;align-items:flex-start;min-width:620px}
  .booking-widget-inline [data-widget="123boeken"] .pika-single .pika-lendar{flex:1 1 0;min-width:0;max-width:none}
  .booking-widget-inline [data-widget="123boeken"] .pika-single .widget-123boeken-calendar-legend-labels{flex:0 0 100%}
}

/* Boekwidget fijn-afstemming (klantwensen 2026-07-21): compactere Samenstelling-balk,
   bredere personen-dropdown, kleinere "Complete huurprijs", verticaal gecentreerde dag-cijfers.
   Geen !important; kleuren blijven van 123boeken (dashboard). */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons{margin-bottom:8px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons form{padding-top:8px;padding-bottom:8px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons .widget-123boeken-title{padding-top:9px;padding-bottom:9px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-persons form select{min-width:4rem}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-price-total .widget-123boeken-cell{font-size:15px;line-height:1.5}
.booking-widget-inline [data-widget="123boeken"] .pika-button.pika-day{display:flex;align-items:center;justify-content:center}

/* Prijsopgave-kaart: witte blokken (datums + prijzen) licht afgerond + verticale lucht
   (Huurprijs/Aankomst niet meer strak tegen de rand); "Complete huurprijs" meer ademruimte.
   price-total padding zit op een monster-selector -> lucht via margin + font op de cellen. */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-table.widget-123boeken-dateslist,
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-table.widget-123boeken-pricelist{border-radius:8px;padding-top:10px;padding-bottom:10px}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-quotation .widget-123boeken-row.widget-123boeken-price-total{margin-top:8px;margin-bottom:4px}

/* Kalender-cellen mogen krimpen: widget zet .pika-button min-width:6ch -> overflow/
   lelijke cellen bij smalle (3-koloms) kalender; hier terug naar 0 zodat ze meeschalen. */
.booking-widget-inline [data-widget="123boeken"] .pika-single .pika-button{min-width:0}
/* "Complete huurprijs": padding-top tussen de scheidingslijn en de tekst. De rij-padding
   zit op een widget-selector (specificiteit 0,8,0); hier met (0,9,0) netjes overheen. */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar>:nth-child(2) .widget-123boeken-quotation .widget-123boeken-table.widget-123boeken-pricelist .widget-123boeken-row.widget-123boeken-price-total{padding-top:8px}

/* Kalender-dagcel proportioneel: de format-regel zet min-height:50px (0,5,0) -> vaste
   hoogte, waardoor smallere cellen te 'staand' werden. Hier (0,6,0) min-height los +
   vierkante aspect-ratio, zodat de cel met de breedte meeschaalt. */
.booking-widget-inline [data-widget="123boeken"][data-type="detail"][data-format="1"] .pika-single .pika-button{min-height:0;aspect-ratio:1}

/* Boekwidget-legenda mag wrappen (op mobiel liep 'ie van het scherm; widget zet items op
   display:inline zonder wrap-container). Flex-wrap: op desktop 1 regel, op smal meerdere. */
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar-legend-labels{display:flex;flex-wrap:wrap;gap:.5em 1.2em}
.booking-widget-inline [data-widget="123boeken"] .widget-123boeken-calendar-legend-labels .widget-123boeken-item{display:inline-flex;align-items:center;margin-right:0}

/* Gele CTA-knop (herbruikbaar) */
.btn.btn--accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.btn--accent:hover{filter:brightness(.94)}

/* Sticky onderbalk: achtergrond licht doorschijnend (92% dekking) + knop rechts op de 1280-body */
.layer--columns:has(.js-stickybar) .layer__bg{background-color:rgba(46, 96, 66, 0.92)}
.layer--columns:has(.js-stickybar) .layer__col:has(.js-stickybar) .prose{text-align:right}

/* Sticky-vlinder: boven de tekst, grotendeels boven de balk uit, deels over het groen */
.layer--columns:has(.js-stickybar) .stickybar-vlinder{position:absolute;left:124px;top:0;width:60px;height:auto;transform:translate(-50%,-82%);pointer-events:none;z-index:3}
@media(max-width:640px){.layer--columns:has(.js-stickybar) .stickybar-vlinder{left:50%;margin-left:-28px;width:52px}}

/* Mobiele header: verberg de contact-knoppen (telefoon/e-mail) op smalle schermen.
   header.css doet dit al (@media max-860 .site-header__contact{display:none}), maar de
   .cms-cta{display:inline-flex}-basisklasse overschrijft dat → header overflowt op mobiel.
   Forceer de verberg-regel zodat alleen logo + hamburger (+ taalvlaggen) overblijven. */
@media (max-width: 860px){
  .site-header__contact{ display: none !important; }         /* contact-knoppen weg (overflow-oorzaak) */
  /* Deze shell gebruikt de framework-drawer, niet het optionele zijmenu. */
  .site-header__menu-toggle{ display: block !important; order: 3; margin-left: 14px; color: #fff; }
  html[data-header-fixed="0"] .site-header__menu-toggle,
  .site-header.is-stuck .site-header__menu-toggle{ color: var(--ink); }
}

/* Mobiel (<=640px): Zoek & Boek-widget netjes stacken + hero-carousel-pijltjes verbergen.
   De zoekbalk stond gepropt op 1 rij met een smalle knop; de hero-pijltjes verdrongen de widget. */
@media (max-width: 640px){
  /* Hero relatief: de zoekbalk wordt er absoluut in verankerd zodat 'ie NOOIT verspringt
     (de titel mag herflowen bij font-load zonder het filter mee te duwen). */
  .layer--hero, .hero{ position: relative !important; }
  .hero__content{ padding-bottom: 172px !important; }
  .hero__text{ margin-top: auto !important; }
  /* Zoek & Boek vast onderin de hero-foto, losgekoppeld van de tekst-flow -> geen layout shift. */
  .searchbar:not(.searchbar--stack){
    position: absolute !important; left: 16px !important; right: 16px !important; bottom: 20px !important;
    width: auto !important; max-width: none !important; margin: 0 !important; z-index: 4 !important;
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 10px 12px !important;
  }
  .searchbar__field--dates{ grid-column: 1 / -1 !important; }
  .searchbar__field--guests{ grid-column: 1 !important; }
  .searchbar__submit{ grid-column: 2 !important; width: 100% !important; height: auto !important; min-height: 54px !important; align-self: stretch !important; justify-content: center; }
  .hero__arrow{ display: none !important; }
}


/* ===== Filter (zoekbalk) mag NOOIT bewegen bij laden =====
   Het framework geeft .searchbar een 'rise'-entree-animatie (0.9s: 34px omhoog + fade-in),
   wat overkomt als "verspringen". Uit => de zoekbalk staat direct op z'n definitieve plek. */
.searchbar{ animation: none !important; transform: none !important; opacity: 1 !important; }

/* Vlinders-banner (onder overzicht): kaart-look; scope = default Atalanta-foto OF JS-class .mm-vlinder-banner (random vlinder) */
#main-content .layer--text-images:has(img[src*="content/vlinders/atalanta"]) > .layer__sc > .layer__inner,
#main-content .mm-vlinder-banner > .layer__sc > .layer__inner{background:#fff;border-radius:16px;box-shadow:0 18px 40px -18px rgba(41,39,35,.3);padding:0;overflow:hidden;position:relative}
#main-content .layer--text-images:has(img[src*="content/vlinders/atalanta"]) .text-image__grid,
#main-content .mm-vlinder-banner .text-image__grid{column-gap:0;align-items:stretch;min-height:150px;grid-template-columns:12.5% 87.5%}
#main-content .layer--text-images:has(img[src*="content/vlinders/atalanta"]) .text-images__photo,
#main-content .mm-vlinder-banner .text-images__photo{margin:0;height:100%}
#main-content .layer--text-images:has(img[src*="content/vlinders/atalanta"]) .text-images__photo img,
#main-content .mm-vlinder-banner .text-images__photo img{border-radius:0;width:100%;height:100%;object-fit:cover;display:block}
#main-content .layer--text-images:has(img[src*="content/vlinders/atalanta"]) .text-image__text,
#main-content .mm-vlinder-banner .text-image__text{padding:10px 32px 0;align-self:flex-start}


/* ===== Bibliotheeklaag 'travel' (#reisinformatie) op mobiel: foto ONDER de content =====
   .travel__card:has(.travel__media) blijft op smal scherm 2-koloms (de :has-regel wint qua
   specificiteit van de responsive 1fr-regel) -> foto knijpt tot een smalle strook.
   Op mobiel: 1 kolom, tekst eerst, foto full-width eronder. */
@media (max-width: 640px){
  .travel .travel__card:has(.travel__media){ display: flex !important; flex-direction: column !important; grid-template-columns: 1fr !important; }
  .travel .travel__card:has(.travel__media) .travel__body{ order: 0 !important; }
  .travel .travel__card:has(.travel__media) .travel__media{ order: 1 !important; }
  .travel .travel__card:has(.travel__media) .travel__media img{ width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 3 / 2; object-fit: cover; }
}
#main-content .mm-vlinder-banner .mm-banner-cta{position:absolute;right:32px;bottom:20px;z-index:2}
#main-content .mm-vlinder-banner .mm-banner-sub{margin:2px 0 8px;font-size:.95rem;font-weight:600;color:var(--theme-color-1,#2e6042)}


/* layer--columns op mobiel: een kolom met alleen een Leaflet-map heeft geen intrinsieke
   breedte -> met align-items:flex-start klapt de kolom tot ~2px (map onzichtbaar).
   Forceer de map-kolom full-width zodat Leaflet op de juiste breedte initialiseert. */
@media (max-width: 760px){
  .layer--columns .layer__col:has(.travel__map){ width: 100% !important; align-self: stretch !important; }
  .layer__col .travel__map, .layer__col .travel__map.is-ready{ width: 100% !important; }
}


#main-content .layer__cards-grid[data-cols="1"]{grid-template-columns:1fr}
/* Vlinders: compacte horizontale banner (nieuws-stijl à la project 446) — layer_cards content=articles, 1 stuk (data-cols=1). Alleen desktop. */
@media(min-width:768px){
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .card__link{display:grid;grid-template-columns:15% 1fr;align-items:stretch;overflow:hidden;border-radius:16px;min-height:160px}
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .card__media{height:100%;margin:0}
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .card__photo{height:100%;width:100%;object-fit:cover;display:block}
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .card__body{display:flex;flex-direction:column;justify-content:flex-start;padding:24px 60px 24px 32px}
}
/* Native Vlinders-banner: knop = tekstlabel (uit CMS "Link tekst"/bottom_link_text, via custom.js gespiegeld) + het bestaande pijltje-rondje, samen als één knop rechtsonder */
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .card{position:relative}
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .mm-cta-row{position:absolute;right:32px;bottom:24px;margin:0;display:inline-flex;align-items:center;gap:10px;z-index:2}
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .mm-cta-row .card__cta{position:static;margin:0;inset:auto}
#main-content .layer--cards:has(.layer__cards-grid[data-cols="1"]) .mm-cta-text{color:var(--green-1);font-weight:400;font-size:.95rem;line-height:1}


/* layer--columns op mobiel: de default flex-basis 300px (bedoeld als min-BREEDTE op desktop)
   wordt in kolom-richting een min-HOOGTE van 300px -> gestapelde kolommen krijgen ~300px hoogte
   met veel loze ruimte eronder. Op mobiel op content-hoogte laten stapelen. */
@media (max-width: 760px){
  .layer--columns .layer__col{ flex-basis: auto !important; }
}

/* Vlinder-detailpagina: intro-quote in cursieve Playfair Display + thema-groen (zelfde variant als .subtitle). Gescoped op de content/vlinders-hero zodat blogs/andere artikelen ongemoeid blijven. */
#main-content .layer--article-detail:has(.article__hero img[src*="content/vlinders/"]) .article__intro{font-family:"Playfair Display",serif;font-style:italic;font-weight:600;color:var(--green-1)}


/* Kaartenraster responsive: .layer__cards-grid[data-cols="4"/"2"] (specificiteit 0,2,0)
   overschrijft de framework-collapse @media{.layer__cards-grid{1fr}} (0,1,0) -> op mobiel
   bleven 't 4 kolommen (kaarten ~58px). Herstel de bedoelde collapse met hogere specificiteit.
   data-cols="1" (nieuws-banner) uitgesloten (die heeft eigen opmaak). */
@media (max-width: 980px){
  #main-content .layer__cards-grid[data-cols]:not([data-cols="1"]){ grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 620px){
  #main-content .layer__cards-grid[data-cols]:not([data-cols="1"]){ grid-template-columns: 1fr !important; }
}

/* Evenementen-detailpagina: galerij-foto zonder donkere overlay, klein "+" rechtsonderin,
   en de originele beeldverhouding behouden (geen geforceerde 4/3-crop).
   Gescoped op de galerij-foto met /evenementen/-bron -> vlinder/blog-artikelen ongemoeid. */
.layer--article-detail:has(.article__gallery img[src*="/evenementen/"]) .article__photo::before{display:none!important}
.layer--article-detail:has(.article__gallery img[src*="/evenementen/"]) .article__photo::after{
  inset:auto!important;top:auto!important;left:auto!important;right:10px!important;bottom:10px!important;
  transform:none!important;margin:0!important;width:30px!important;height:30px!important;
  line-height:1!important;font-size:20px!important;border-radius:50%!important;
  display:flex!important;align-items:center!important;justify-content:center!important}
.layer--article-detail:has(.article__gallery img[src*="/evenementen/"]) .article__photo{aspect-ratio:auto!important}
.layer--article-detail:has(.article__gallery img[src*="/evenementen/"]) .article__photo img{
  aspect-ratio:auto!important;height:auto!important;object-fit:contain!important}

/* Footer Multiminded-beeldmerk: hele logo-box klikbaar (de inline-SVG liet klikken in de
   transparante gaten van de "M" doorvallen). Link zelf zit al in het framework (-> multiminded.nl). */
.site-footer__credit-link{display:inline-block;line-height:0}
.site-footer__credit-logo{pointer-events:none}

/* WhatsApp-widget: de onzichtbare container (.wa, 338x326) ving met pointer-events:auto
   klikken af over o.a. het Multiminded-footerlogo. Container niet laten vangen; alleen de
   knop + het chatpaneel blijven klikbaar. */
.wa{pointer-events:none!important}
.wa__fab,.wa__panel{pointer-events:auto!important}

/* Dunne, thema-meekleurende scrollbar. De framework-default hiervoor zit in
   variables.css, maar deze oudere site-arch laadt die niet -> hier lokaal. De thumb is
   een subtiele afgeleide van de thema-voorgrondkleur, dus 'ie kleurt mee. scrollbar-width
   en scrollbar-color zijn de standaard-props (Chrome 121+, Firefox, Safari 18.2+). */
html {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--color-fg, var(--ink, #333)) 32%, transparent) transparent;
}
/* Midweek availability */
.midweek-searchbar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:end;gap:.8rem;margin:1.25rem 0 1.5rem;padding:1rem;background:#f4f6f1;border:1px solid rgba(46,96,66,.16)}
.midweek-searchbar label{display:grid;gap:.35rem;color:#5d625e;font-size:.78rem;font-weight:600}
.midweek-searchbar input{width:100%;box-sizing:border-box;min-height:2.65rem;padding:.55rem .65rem;border:1px solid rgba(46,96,66,.25);background:#fff;color:var(--ink,#292723);font:inherit}
.midweek-searchbar button{min-height:2.65rem;padding:.55rem 1rem;border:0;background:var(--green-1,#2e6042);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.midweek-searchbar button:hover{filter:brightness(.92)}
.midweek-availability__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;list-style:none;margin:1.5rem 0 0;padding:0}
.midweek-availability__year{grid-column:1/-1;margin:1.25rem 0 .1rem}
.midweek-availability__year:first-child{margin-top:0}
.midweek-availability__year h3{margin:0;color:var(--green-1,#2e6042);font-family:var(--font-display,Georgia,serif);font-size:1.45rem;font-weight:600}
.midweek-availability__item{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:.9rem;min-height:7.5rem;padding:1.1rem 1.15rem;border:1px solid rgba(46,96,66,.18);border-top:3px solid var(--green-1,#2e6042);background:#fff;box-shadow:0 4px 14px rgba(41,39,35,.06)}
.midweek-availability__date{display:grid;gap:.3rem}
.midweek-availability__date strong{font-size:1.02rem;line-height:1.35}
.midweek-availability__date span{font-size:.88rem;color:#5d625e}
.midweek-availability__link{flex:none;margin-top:auto}
.midweek-availability__status{margin:1rem 0;color:#5d625e}
.midweek-matrix{margin-top:2rem}
.midweek-matrix__filters{display:flex;justify-content:flex-end;margin-bottom:1rem}
.midweek-matrix__filters,.midweek-matrix__filters .searchbar__field--guests{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.midweek-matrix .searchbar__field{background:transparent!important;border:0!important;box-shadow:none!important}
.midweek-matrix__filters .searchbar__field--guests{position:relative;min-width:10rem}
.midweek-matrix__filters .searchbar__label,.midweek-matrix__month > span{display:block;margin-bottom:.3rem;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#9a9384}
.midweek-matrix__label-short{display:none}
.midweek-matrix__filters .guests-btn{display:block;width:100%;padding:0;border:0;background:none;color:var(--ink);font:inherit;line-height:1.2;text-align:left;cursor:pointer}
.midweek-matrix__filters .guests-btn{min-height:46px;padding:.5rem .75rem;border:1px solid #e7e1d6;border-radius:10px;background:#fff}
.midweek-matrix__filters .guests-btn [data-guests-summary]{font-size:var(--field-value-size);font-weight:var(--field-value-weight)}
.layer--midweek-matrix > .layer__sc > .layer__inner{width:90%;max-width:var(--maxw,1280px);margin-inline:auto}
.midweek-matrix__status{margin:1rem 0;color:#5d625e}
.midweek-matrix__toolbar{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.8rem}
.midweek-matrix__toolbar-tools{display:flex;align-items:center;gap:.75rem}
.midweek-matrix__toolbar-tools .midweek-matrix__filters{margin:0}
.midweek-matrix__month,.midweek-matrix__toolbar-tools .midweek-matrix__filters{width:10rem;min-width:10rem}
.midweek-matrix__month select,.midweek-matrix__filters .searchbar__field--guests{width:100%;box-sizing:border-box}
.midweek-matrix__month .select-display{min-height:46px;padding:.5rem .75rem;border-color:#e7e1d6;border-radius:10px}
.midweek-matrix__month .select-display .select-label{white-space:nowrap}
.midweek-matrix__nav{border:1px solid var(--accent,#ffad06);border-radius:999px;background:var(--accent,#ffad06);color:#fff;padding:.6rem 1rem;font:inherit;font-size:.9rem;font-weight:600;line-height:1;cursor:pointer;transition:filter .2s ease,transform .2s ease}
.midweek-matrix__nav:hover{filter:brightness(.94);transform:translateY(-1px)}
.midweek-matrix__nav:disabled{opacity:.45;cursor:not-allowed;transform:none}
.midweek-matrix__scroll{overflow-x:auto;border:1px solid rgba(46,96,66,.18);background:#fff}
.midweek-matrix__table{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-variant-numeric:tabular-nums}
.midweek-matrix__table th,.midweek-matrix__table td{min-width:7.2rem;padding:.42rem .5rem;border-right:1px solid rgba(46,96,66,.12);border-bottom:1px solid rgba(46,96,66,.12);text-align:center;vertical-align:middle}
.midweek-matrix__table thead th{background:#f5f7f3;font-size:.85rem;line-height:1.25}
.midweek-matrix__table .midweek-matrix__accommodation{position:sticky;left:0;z-index:2;min-width:18rem;width:18rem;text-align:left;background:#fff}
.midweek-matrix__table thead .midweek-matrix__accommodation{z-index:3;background:#f5f7f3}
.midweek-matrix__accommodation a{display:flex;align-items:center;gap:.65rem;color:inherit;text-decoration:none}
.midweek-matrix__accommodation img{width:4.5rem;height:3.35rem;object-fit:cover;flex:none}
.midweek-matrix__accommodation span{display:grid;gap:.2rem}
.midweek-matrix__accommodation strong{font-size:.95rem}
.midweek-matrix__accommodation small{font-weight:400;color:#5d625e}
.midweek-matrix__cell{background:#eaf4e5;color:#3c7d38;font-weight:600}
.midweek-matrix__cell a{display:grid;gap:.25rem;color:inherit;text-decoration:none}
.midweek-matrix__cell a:hover{text-decoration:underline}
.midweek-matrix__cell small{font-size:.68rem;font-weight:400;color:#416b3d}
.midweek-matrix__cell--empty{background:#f2f2f2;color:#8b8b8b;font-weight:400}
@media (max-width:640px){
  .midweek-searchbar{grid-template-columns:1fr}
  .midweek-availability__list{grid-template-columns:1fr}
  .midweek-availability__item{align-items:stretch;flex-direction:column}
  .midweek-availability__link{align-self:flex-start}
  .midweek-matrix__toolbar{align-items:center}
  .midweek-matrix__toolbar{gap:.5rem}
  .midweek-matrix__toolbar-tools{flex:1 1 auto;min-width:0;flex-direction:row;align-items:flex-end;gap:.5rem}
  .midweek-matrix__month,.midweek-matrix__toolbar-tools .midweek-matrix__filters{flex:1 1 0;width:auto;min-width:0}
  .midweek-matrix__month select[data-select]{visibility:visible;width:100%;height:46px;box-sizing:border-box;margin:0;padding:.5rem .75rem;border:1px solid #e7e1d6;border-radius:10px;background:#fff;color:var(--ink);font:inherit;opacity:1}
  .midweek-matrix__label-full{display:none}
  .midweek-matrix__label-short{display:inline}
  .midweek-matrix__nav{flex:0 0 2rem;width:2rem;padding:.5rem .25rem}
  .midweek-matrix__nav-label{display:none}
  .midweek-matrix__table .midweek-matrix__accommodation{min-width:10.5rem;width:10.5rem}
  .midweek-matrix__accommodation a{gap:.4rem}
  .midweek-matrix__accommodation img{width:3.25rem;height:2.5rem}
  .midweek-matrix__accommodation strong{font-size:.82rem}
  .midweek-matrix__accommodation small{font-size:.72rem;line-height:1.2}
}