@charset "UTF-8";
/* In `@layer site`: de cascade-lagen van het framework leggen de rangorde vast
   (`@layer framework, site, theme, type, item` — later wint). Zonder deze wikkel staat
   dit bestand búiten elke laag, en ongelaagde CSS wint van álles wat er wél in zit —
   ook van de opmaak die een redacteur in het CMS zet. Dat is precies wat de lagen
   opheffen: opmaak uit het CMS hoort boven de stylesheets van de site te staan. */
@layer site {
/* main.css — onder-de-vouw + andere pagina's (secties/footer/contact/detail/sitemap) + hun responsive. */

/* Framework-motion markeert lagen met data-revealed zodra ze in beeld komen. */
.has-motion .layer:not([data-revealed="true"]){opacity:0;transform:translateY(34px)}
.has-motion .layer{transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:reduce){.has-motion .layer{transition:none;transform:none;opacity:1}}

/* ============================================================
   RIBBON
   ============================================================ */

/* Alleen de lijst-reset. GEEN `display`/`grid-template-columns` hier: sinds de cascade-lagen
   wint `site` van `framework` ongeacht specificiteit, en een kale `.usps` (0,1,0) verslaat
   daarmee de layout die het framework per formaat zet — óók
   `[data-type="1"][data-view="inline"] .usps{display:inline-flex;justify-content:center}`.
   Gevolg was een 2x2-raster waar één gecentreerde rij hoort te staan. Wil een laag een
   ander raster, dan hoort dat op een specifieke haak (zie `.usps--glass` verderop). */
.usps{list-style:none;margin:26px 0 0;padding:0}
/* De layout per formaat komt sinds 1.58.1157 uit het framework (`modules/usps.css`),
   dat de laag ook zelf meestuurt. Hier stond een eigen kopie, gehaakt aan het attribuut
   `data-format` op de lijst. Dat attribuut kwam uit het eigen laag-template van deze site
   en dat template is weg, dus die regels raakten niets meer. Verwijderd in plaats van
   bijgewerkt: twee bronnen voor dezelfde layout is precies waar we vanaf wilden. Wijkt
   deze site ergens bewust af, dan hoort dat bij de tegel-opmaak hieronder, met reden. */

/* Deze selectors droegen tot 12-08-2026 een kale `[data-type]` erbij, puur om aan (0,4,0) te
   komen: `modules/usps.css` van het framework laadt ná deze stylesheet, en bij gelijke
   specificiteit (0,3,0) won die op volgorde — acht tegels waaierden dan uit als 6+2 in plaats
   van 4x2. Die truc is niet meer nodig. De cascade-lagen leggen de rangorde nu vast
   (`@layer framework, site, theme, type, item`), en `site` wint van `framework` ongeacht
   specificiteit én ongeacht laadvolgorde. Portaal-punt 241 ging hierover.
   `display:grid` blijft wél expliciet staan: dat stond alleen in de basisregel `.usps{}` en
   werd hier geërfd — expliciet is duidelijker dan leunen op wat er toevallig overblijft. */
/* ── Tegel-opmaak "Tegels op foto (glas)" — de class `usps--glass` ────────────
   Hing eerst aan het CMS-veld `tile_style` (`data-tile="glass"`). Dat was een eigen
   veld naast een mechanisme dat het framework al heeft: een `css-class` op het
   opmaak-slot `design_layer`. Zo'n effect is per definitie maatwerk in de CSS van één
   site, dus het hoort niet als keuzelijst in de seed van elke site te staan.
   Het effect en de vorm kan het design-systeem niet uitdrukken (`backdrop-filter`
   staat niet in de whitelist van de StyleCompiler, en hoort daar ook niet: het is een
   render-effect, geen merk-token). Eén CMS-keuze zet dit aan; de opmaak-slots
   (design_usps_item, _icon, _title) overschrijven het per laag.

   Maten uit het ontwerp gemeten (01-home-New-York, 1920 breed): tegel 200x195,
   tussenruimte 22px, icoon-cirkel 80px met een glyph van 44px.

   De gemeten kleuren bleken de thema-tokens zelf: het tegelvlak rgb(168,219,219) is
   `--theme-color-4` (#A7DBD9) en de icoon-cirkel #2a6a6a is `--theme-color-3`
   (#296A69). De titel mat ik op #23615e, maar dat was een antialiased letterrand op
   het tegelvlak; de onderliggende kleur is diezelfde `--theme-color-3`. Vandaar tokens
   in plaats van hex: een site met een ander palet klopt dan meteen. De 90% dekking is
   opgelost uit twee tegels boven een verschillende achtergrond, niet geschat. */
.layer--usps.usps--glass .usps{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,200px));
    justify-content:center;
    gap:22px;
}
.layer--usps.usps--glass .usps__item{
    display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;
    padding:34px 10px 28px;   /* zijkant krap: in het ontwerp loopt "optimale voorbereiding" op een regel */
    min-height:195px;
    border-radius:8px;
    background:color-mix(in srgb, var(--theme-color-4, #a7dbd9) 90%, transparent);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
}
.layer--usps.usps--glass .usps__title{
    margin:26px 0 0;
    font-size:17px;line-height:1.25;font-weight:700;text-transform:uppercase;
    color:var(--theme-color-3, #296a69);
}
.layer--usps.usps--glass .usps__text{
    margin:6px 0 0;
    font-size:16px;line-height:1.3;color:var(--theme-color-7, #fff);
}
/* Icoon: de dekkende donkere cirkel met de witte glyph zit in de SVG zelf. Hier stond die
   cirkel nog een tweede keer in CSS (80px, border-radius 50%, theme-color-3) met de SVG op
   44px erin. Dat viel niet op zolang beide cirkels dezelfde kleur hadden, maar de glyph werd
   er wel te klein van: hij is in de SVG op 80px getekend en werd naar 44px geschaald.
   Sinds framework 1.58.1163 levert de renderer de eigen maat van het bestand mee als
   `--usp-icon-size` (hier 80px), dus de wrapper heeft niets meer nodig. */
.layer--usps.usps--glass .usp__icon .media,
.layer--usps.usps--glass .usp__icon .media__viewport{display:contents}
/* Sectiekop staat op de foto: gecentreerd en wit. Er is geen `.section-head`-wrapper meer:
   die kwam uit het eigen laag-template van deze site. De framework-renderer zet tagline en
   titel als directe kinderen in `.layer__inner`, dus daar mikken we op. Let op de boom:
   `section > .layer__sc > .layer__inner` -- de inner hangt niet rechtstreeks onder de sectie. */
.layer--usps.usps--glass .layer__inner{text-align:center}
.layer--usps.usps--glass .layer__inner > .tagline{color:var(--theme-color-7, #fff);opacity:.9;font-size:19px;letter-spacing:normal;margin-bottom:6px}
.layer--usps.usps--glass .layer__inner > .heading{color:var(--theme-color-7, #fff);font-size:clamp(28px,2.4vw,40px);margin:0 0 34px}
@media (max-width:1100px){
    .layer--usps.usps--glass .usps{grid-template-columns:repeat(2,minmax(0,200px))}
}
/* Twee naast elkaar blijven, ook op een telefoon. Hier stond één kolom: met acht tegels
   werd de sectie dan 2084px hoog en scrolde je er een halve minuut doorheen. Twee past
   prima -- de tegels krimpen mee (`minmax(0,…)`) tot zo'n 165px op 375px, en dat is nog
   ruim genoeg voor het icoon met de titel eronder. De bovengrens van 200px blijft staan,
   zodat ze op een brede telefoon niet uitrekken. */
@media (max-width:560px){
    .layer--usps.usps--glass .usps{grid-template-columns:repeat(2,minmax(0,200px))}
}
@media (prefers-reduced-transparency:reduce){
    .layer--usps.usps--glass .usps__item{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--theme-color-4, #a7dbd9)}
}
/* inactief: witte knop, donkere tekst, groen icoon, geen schaduw */
.usp{display:flex;align-items:center;gap:13px;background:transparent;border:0;
    padding:15px 18px;font-weight:500;
    
    cursor:pointer;}
.usp img{flex:0 0 auto;width:26px;height:26px}
/* actief/hover: subtiele warme grijstint, groene tekst, vlakker (geen schaduw).
   Het groene icoon (transparent) blijft groen — geen filter. */
.usp:hover,.usp.is-active{background:transparent;color:var(--theme-color-2);}

/* ============================================================
   SFEER CARROUSEL (strip)
   ============================================================ */
/* De verticale ruimte van de strip zit in het CMS op de inner-container van de sfeer-laag
   (Opmaak -> inner container); hier alleen nog het clippen van de marquee. */
.strip{overflow:hidden}
.strip__track{display:flex;gap:40px;width:max-content;animation:marquee var(--marquee-duration, 50s) linear infinite;}
.strip:hover .strip__track{animation-play-state:paused;}
.strip__item{flex:0 0 auto;margin:0}

/* Diagonaal gesneden beeldrand — het terugkerende merk-element uit de stijlgids. Eén
   afgeschuinde hoek, rechtsonder; de andere drie blijven recht. Dat volgt de rest van
   de site: de pakket-kaarten snijden rechtsboven (.layer--cards, hierboven) en de hero
   linksonder, telkens één hoek. Vier hoeken tegelijk maakte er een achthoek van en dat
   is een ander vormtaaltje.

   Clip-path en geen witte overlay: een overlay werkt alleen als je de achtergrond
   kent, en deze foto's staan zowel op wit als op de teal band. */
/* De foto vult zijn kolom, op ELKE breedte. Deze regel stond in de 861px-query, waardoor de
   img op mobiel geen breedte, geen display:block en (zonder width/height-attributen in de
   markup) ook geen intrinsieke maat had. In een grid-cel klapt hij dan naar hoogte 0 en is de
   foto onzichtbaar - gemeld op home (#layer-13) en Over-mij (#layer-27). Boven 861px verandert
   er niets: daar gold exact deze regel al. `height:auto` houdt de verhouding. */
.text-image__media img{width:100%;height:auto;display:block}

.text-image__media img,
.strip__item img{
    --chamfer:clamp(14px,1.5vw,28px);
    clip-path:polygon(
        0 0, 100% 0,
        100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%,
        0 100%
    );
}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 20px))}}
@media (prefers-reduced-motion:reduce){.strip__track{animation:none}}

/* ============================================================
   MIDWEEK ONTBIJT
   ============================================================ */

/* 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);gap:clamp(32px,5vw,72px);align-items:start}
.layer--text-image.is-reversed .text-image__grid{grid-template-columns:var(--ti-cols)}
/* data-cover (media_full): media vult de volledige kolomhoogte (cover) i.p.v. natuurlijke hoogte.
   Alleen boven het stapel-breekpunt (860px). Daaronder staat het raster op een kolom en is er
   geen buurhoogte om naartoe te croppen: de cel is dan inhoud-gestuurd terwijl de inhoud 100%
   van die cel vraagt, en die kringloop eindigt op nul - de foto was op mobiel onzichtbaar
   (portaal P15). Zelfde reden waarom het framework z'n cover-regels voor kolommen achter
   `min-width: 761px` zet. */
@media (min-width:861px){
.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}
}
.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__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;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. */

/* Mobiel: één kolom. 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.

   De stapelvolgorde volgt het CMS-veld Mobiel (`btt`), dat het framework als
   `data-mobile-media-first` op de sectie zet (fw 1.58.1262). Hiervoor stond hier een
   onvoorwaardelijke `order:-1`: media altijd boven, wat de redacteur ook koos. Dat was niet
   zozeer fout als wel het enige wat kon — de renderer las `btt` nergens uit en zette geen
   haak, dus er viel niets op te selecteren.

   Let op de eerste regel hieronder: de kolom-omkering van `is-reversed` staat BUITEN elke
   media-query en gold dus ook op mobiel. Alleen de order in de media-query afzwakken haalt
   niets uit — die (0,3,0)-regel bleef de media naar boven halen. Hier zetten we 'm expliciet
   terug op 0, waarna de attribuut-regel (even zwaar, maar later in de bron) 'm weer op -1 zet
   voor wie dat in het CMS koos.

   `.text-images__photos` (de meerdere-foto's-variant) blijft onvoorwaardelijk: dat laagtype
   leest `btt` in het framework nog niet, dus daar is nog geen keuze om te volgen. */
@media (max-width:860px){
  .text-image__grid,.layer--text-image.is-reversed .text-image__grid{grid-template-columns:1fr}
  .layer--text-image.is-reversed .text-image__media,
  .layer--text-image.is-reversed .carousel{order:0}
  .layer--text-image[data-mobile-media-first] .text-image__media,
  .layer--text-image[data-mobile-media-first] .carousel{order:-1}
  .text-images__photos{order:-1}
}

/* layer_text · type=text_form — contactgegevens + gekoppeld formulier naast elkaar (Gitea #19).
   --tf-cols: CMS-kolombreedte (column_text_width) override't de default; leeg → default. */
/* (breedte/gutter komt van de algemene .layer-regel in critical.css) */
.text-form__grid{display:grid;grid-template-columns:var(--tf-cols,minmax(0,2fr) minmax(0,3fr));gap:clamp(28px,4vw,56px);align-items:start}
.layer--text-form--single .text-form__grid{grid-template-columns:1fr}
.text-form__info .layer__cta{margin-top:1.1rem}
/* Een tekstlaag kan twee knoppen dragen (link + link2). Naast elkaar, met ruimte
   ertussen, en op smal scherm onder elkaar. */
.layer__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.layer--text--centered .layer__cta{justify-content:center}
.text-form__form>.heading{margin-bottom:.4rem}
.text-form__form>.subtitle{margin-bottom:1rem}
@media (max-width:820px){.text-form__grid{grid-template-columns:1fr}}

.section-head--light{text-align:center;margin-bottom:34px}

/* generieke card-engine-grid (layer_cards) — zelfde look als .cards, data-cols-gestuurd */
/* De renderer zet het aantal kolommen uit het CMS op `data-cols`. Hier stonden alleen 2 en 4,
   dus alle andere keuzes vielen terug op de basis van 3 — zonder melding. Zichtbaar geworden
   bij de foto-strip op de home: die staat in het CMS op 6 en rendeerde als 3 kolommen over
   twee rijen. Nu de hele reeks die het CMS aanbiedt. */
.layer__cards-grid{display:grid;gap:40px;grid-template-columns:repeat(3,1fr)}
.layer__cards-grid[data-cols="1"]{grid-template-columns: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)}
.layer__cards-grid[data-cols="5"]{grid-template-columns:repeat(5,1fr)}
.layer__cards-grid[data-cols="6"]{grid-template-columns:repeat(6,1fr)}
.card{background:transparent;overflow:hidden;
    display:flex;flex-direction:column;   /* body vult de (gelijke) kaarthoogte → knop overal gelijk */
    transition:transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);   /* timing centraal in critical.css :root */
    }
/* Alleen liften als er ook echt iets te klikken valt. De pakketkaarten op de home hebben geen
   enkele link — geen <a>, geen href — en bewogen wel bij hover, inclusief een zoom op de foto.
   Dat belooft klikbaarheid die er niet is. `:has()` is veilig binnen onze browser-ondergrens. */
.card:has(a):hover{transform:translateY(-6px);}
/* .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. */
  /* 2e foto vervaagt in op hover */
.card:has(a):hover .card__photo--hover{opacity:1}
.card:has(a):hover .card__media img{transform:scale(1.06)}

/* Diagonaal gesneden beeldrand (stijlgids): rechtsboven een schuine hoek weggesneden,
   zodat de sectiekleur erdoorheen valt. Dit zat eerder in de aangeleverde beelden als
   transparante hoek, maar de kaart-transform (800x600-cover) levert een opaque webp en
   sloeg de alpha plat — ook met een png-bron. Met clip-path werkt het los van het beeld,
   dus ook bij een gewone foto zonder alpha.

   Hangt aan de CMS-instelling "Inhoud": merk-kaarten (losse banners, tarieven) krijgen
   'm, een media-album is een fotogrid en juist niet. Komt er een nieuw inhoudstype dat
   'm ook hoort te hebben, dan hoort die hier bij.

   Op de kaart zelf, niet op `.card__media`: de kaart draagt z'n eigen (CMS-ingestelde)
   achtergrond, dus alleen het beeld wegsnijden legde die witte achtergrond bloot in
   plaats van de sectiekleur. */
.layer--cards[data-content="free"] .card,
.layer--cards[data-content="module_price"] .card{
    --card-cut:clamp(28px,4.5vw,56px);
    clip-path:polygon(0 0, calc(100% - var(--card-cut)) 0, 100% var(--card-cut), 100% 100%, 0 100%);
}
/* 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}
/* Binnen `.card` gescoped: dit is de <a> die media+body omsluit en moet meegroeien tot
   de kaartbodem. LayerModuleColumn hergebruikt dezelfde class voor de <p> om z'n CTA,
   en die werd daardoor een flex-kolom die de knop over de volle breedte uitrekte. */
.card .card__link{flex:1 0 auto;display:flex;flex-direction:column}
.card__body{padding:20px 22px 24px;position:relative;flex:1 0 auto}
/* De kaart-subtitel hugt z'n tekst in plaats van de hele kaartbreedte te vullen. Zo
   wordt 'ie een pill zodra het CMS er een achtergrond op zet (de prijs op de
   pakket-kaarten), en verandert er niets als die achtergrond leeg blijft.
   `display` staat niet in de whitelist van de StyleCompiler, dus dit kan niet uit het
   CMS komen; de kleur, de ronding en de ruimte eromheen wél. */
.layer--cards .card__subtitle{display:inline-block}
.card__cta{position:absolute;right:18px;bottom:20px;height:34px;
    background:var(--theme-color-2);display:grid;place-items:center;}
.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(--theme-color-4);transform:translateX(3px)}
/* ============================================================
   BELEEF-/LOCATIE-SECTIE
   ============================================================ */

/* ============================================================
   REISINFORMATIE
   ============================================================ */
/* verticale ruimte via het CMS (design_text -> laag), net als de andere tekst-varianten */
.travel{position:relative}
.travel__card{position:relative;z-index:2;display:grid;grid-template-columns:1fr;
    background:transparent;overflow:hidden;}
/* 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{margin-bottom:8px}
.travel__block p{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(--theme-color-2);
    font-weight:600;padding:10px 16px;}
.chip img,.chip svg{flex:0 0 auto}
.link-arrow{display:inline-flex;align-items:center;gap:8px;color:var(--theme-color-3);font-weight:600;}
.link-arrow::after{content:"";width:13px;height:11px;background:url('custom/knop-pijltje-donkergroen-01.svg') center/contain no-repeat;}
.link-arrow:hover::after{transform:translateX(4px)}
.travel__green{position:absolute;left:0;right:0;bottom:0;height:55%;background:var(--theme-color-2);z-index:1}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--theme-color-2);padding-block:46px 30px}
.site-footer__socials{display:flex;gap:10px;list-style:none;margin:0;padding:0}
.site-footer__socials a{height:38px;background:transparent;
    display:grid;place-items:center;}
.site-footer__socials a:hover{background:transparent;transform:translateY(-2px)}

.site-footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-footer__col ul a{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(--theme-color-4);   /* 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;
    }
.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 transparent;flex-wrap:wrap}
.site-footer__menu{display:flex;gap:22px;list-style:none;flex-wrap:wrap}
.site-footer__menu a{opacity:.8;}
.site-footer__menu a:hover{opacity:1}
}
/* Multiminded-merk-credit rechtsonder (issue #11, hook design_footer__multiminded) */
.site-footer__credit-link{display:inline-flex;align-items:center;opacity:.6;}
.site-footer__credit-link:hover{opacity:1}
.site-footer__credit-logo{width:26px;height:auto;display:block}

/* ============================================================

/* --- responsive (onder-de-vouw) --- */
@media (max-width:980px){
    .about__grid{grid-template-columns:1fr}
    
    .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){
    .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 */
}

/* --- contact/binnenpagina-content --- */

/* Framework-FormRenderer markup (data-component="form").
   Hing eerder aan `.contact-form-wrap` — de wrapper van de site-eigen formulier-renderer.
   Sinds de overstap naar de framework-SiteApp wikkelt die z'n formulier in `.contact-grid`,
   en viel de hele opmaak weg: de velden werden smalle blokjes zonder breedte. Nu op het
   formulier zelf, want dat is wat de renderer hoe dan ook uitschrijft — een wrapper is een
   omgeving en geen eigenschap van het veld.
   De algemene layout komt uit de framework-formopmaak; hier blijven alleen NY-metriek en
   CMS-gestuurde kleurregels staan. */
[data-component="form"] .form-field__label{font-family:var(--font-body);font-weight:600;color:var(--theme-color-1)}
[data-component="form"] .form-field__required{color:var(--theme-color-3)}
[data-component="form"] .form-field__control{font:inherit;width:100%;padding:.8rem 1rem}
[data-component="form"] textarea.form-field__control{min-height:150px;resize:vertical}
[data-component="form"] .form-field__control:focus{outline:none;border-color:var(--theme-color-3)}
[data-component="form"] .form-actions{margin-top:.4rem}
/* --- foutmeldingen --------------------------------------------------------
   Drie dingen ontbraken. De melding had de gewone tekstkleur (#262626), het
   invoerveld hield een rand in exact z'n eigen achtergrondkleur -- een fout veld
   was dus niet van een goed veld te onderscheiden -- en de meldingen schoven
   tussen de velden, waardoor het formulier bij acht fouten 134px groeide en alles
   eronder verschoof.

   Geen `position:absolute` voor die sprong: dan valt de melding over het
   volgende veld heen, en bij acht tegelijk wordt dat onleesbaar. In plaats
   daarvan staat de ruimte er altijd al -- leeg of niet -- zodat er niets
   verspringt en niets overlapt.

   De kleur is een eigen token en geen thema-kleur: geen van de negen thema-
   kleuren is een foutkleur, en er een uitkiezen die toevallig roodachtig is
   maakt de huisstijl verantwoordelijk voor iets wat er niet in zit. */
[data-component="form"]{--form-error:#B3261E}
/* De melding als tooltip, half over de onderrand van het veld. Het formulier mag er
   in rust geen millimeter anders uitzien, dus geen gereserveerde band en geen extra
   ruimte tussen de velden: de melding ligt erbovenop en neemt geen plek in de flow.
   Daarmee verspringt er ook niets als hij verschijnt.

   Rechts uitgelijnd zodat hij de placeholder aan de linkerkant vrijlaat, en met een
   eigen achtergrond plus schaduw omdat hij deels op het invoerveld ligt -- zonder dat
   loopt rode tekst over grijze tekst. */
[data-component="form"] .form-field{position:relative}
[data-component="form"] .form-field__error{position:absolute;z-index:2;
    right:.5rem;bottom:-.65em;max-width:calc(100% - 1rem);
    padding:.15rem .5rem;border-radius:5px;
    background:var(--form-error);color:var(--theme-color-7,#fff);
    font-size:.8rem;line-height:1.35;font-weight:600;
    box-shadow:0 1px 4px rgba(0,0,0,.22)}
/* Twee meldingen op een veld zouden op elkaar vallen; de eerste is de bruikbare. */
[data-component="form"] .form-field__error ~ .form-field__error{display:none}
/* Een `outline` en geen `border-color`. De randkleur van een invoerveld komt uit de
   CMS-formulieropmaak en die zit in `@layer type`; die laag wint van `site`, hoe
   specifiek onze selector ook is. Nagemeten met CDP:

       [site] .form-field--error .form-field__control   border-color:var(--form-error)
       [type] form[data-component=form] .form-field__control  border-color:var(--theme-color-8)   <- wint

   `outline` zet het CMS niet, dus daar is geen gevecht. Het tekent bovendien buiten
   het vak: de velden verschuiven geen pixel als de fout verschijnt. */
[data-component="form"] .form-field--error .form-field__control,
[data-component="form"] .form-field--error .composite-input{
    outline:2px solid var(--form-error);outline-offset:0}
[data-component="form"] .form-field--error .form-field__control:focus,
[data-component="form"] .form-field--error .composite-input:focus{
    outline:3px solid var(--form-error);outline-offset:1px}
/* Samengestelde velden (naam, adres) brengen hun eigen raster mee via composite.css; alleen
   de invoervelden erin moeten dezelfde metriek krijgen als een gewoon veld. */
[data-component="form"] .composite-input{font:inherit;padding:.8rem 1rem}

/* Generieke CMS-binnenpagina: content links, form/aside rechts */

.page-prose{color:var(--theme-color-1);max-width:60ch}
.page-prose p{margin:0 0 1rem}
.page-prose>h2:first-child{margin-top:0}

/* Contactgegevens-blok (uit het CMS) */

/* ── Framework-componenten (date-picker, guests, custom-select) → site-thema ──
   Deze gebruiken framework-tokens (--color-*, --radius-*, --shadow-2); hier mappen we
   ze naar onze eigen thema-kleuren, gescoped op de componenten zelf.

   Vier van die tokens stonden op `transparent`. Dat komt uit een boekingssite waar de
   velden in een witte searchbar-pill zitten en dus géén eigen rand horen te hebben —
   die pill bestaat hier niet. Gevolg: de dropdown "Type aanvraag" op het contactformulier
   had een transparante rand én een transparante placeholder-kleur, dus er stond alleen
   een zwevend pijltje op de pagina. De waarden volgen nu de tekstvelden ernaast. */
[data-date], .date-popover, [data-guests], .guests-popup,
.select-display, .select-dropdown {
    --color-bg:            var(--theme-color-7);
    --color-bg-elev:       var(--theme-color-7);
    --color-bg-soft:       var(--theme-color-7);
    --color-border:        var(--theme-color-4);
    --color-border-strong: var(--theme-color-2);
    --color-fg:            var(--theme-color-1);
    --color-fg-muted:      var(--theme-color-5);
    --color-primary:       var(--theme-color-2);
    --color-primary-fg:    var(--theme-color-7);
    --radius-lg:           18px;
    --radius-md:           10px;
    --radius-sm:           9px;
    --shadow-2:            var(--shadow-md);
}
/* 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}

/* Sfeer-impressie: Embla foto-strip (loop + autoplay, geen controls) — 2026-06-15.
   Scoped op .sfeer zodat de bestaande kaart-carrousel ongemoeid blijft. */
/* Verticale ruimte via het CMS (Opmaak op de laag); hier alleen het clippen. */
.sfeer{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. */
/* Verticale ruimte via het CMS (Opmaak op de laag) — layer_columns heeft geen eigen
   design-slot op "Website opmaak", dus per laag i.p.v. per type. */
.layer__columns{display:flex;flex-wrap:wrap;margin-inline:auto;
  max-width:var(--cols-mw);
  column-gap:var(--cols-gx);
  row-gap:var(--cols-gy)}
/* 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) */
/* Gelijke kolommen: elke kolom krijgt 100%/aantal, gaps eraf. Een basis in pixels (stond op
   300px) laat de breedte afhangen van hoeveel er toevallig past — drie kolommen zijn dan geen
   drie gelijke derdes. Een per-kolom breedte uit het CMS komt binnen als --col-flex-d en wint.
   Gelijkgetrokken met de framework-default (layer-columns.css, 1.58.555). */
.layer__col{flex:1 1 0;min-width:0;order:var(--col-order);padding:var(--col-pad)}
/* rows-subtype: verticale ruimte tussen de gestapelde rijen (rows_spacing_vertical) */
.module-col__rows{display:flex;flex-direction:column;row-gap:var(--rows-gap)}
/* columns-subtype (type=columns): kinderen naast elkaar, bv. CTA-knoppen (#29) */
.module-col__cols{display:flex;flex-wrap:wrap;align-items:center;gap:var(--cols-gap,14px)}
.module-col__cols>.card__link{margin: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;}
.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}
/* `auto` is hier geen volle breedte: een kolom zonder ingestelde mobiele breedte krimpt tot z'n
   inhoud. Draagt die inhoud geen eigen
   breedte (foto op width:100%, SVG met alleen een viewBox, kaart die pas in JS z'n maat krijgt),
   dan hangt de kolom af van het beeld en het beeld van de kolom -> nul (portaal P16). Stretch en
   niet width:100%, want stretch grijpt alleen aan als de cross-maat auto is; een kolom met een
   breedte uit het CMS houdt die dus. Gelijk aan wat het framework in layer-columns.css doet. */
@media(max-width:760px){.layer__columns{flex-direction:column}.layer__col{width:var(--col-w-m,auto);align-self:stretch}}
/* desktop: spacing-till + kolombreedte (width) + order-till + rows-gap-till */
/* Elke var() hier heeft een fallback, en dat is geen netheid maar noodzaak: een `var()`
   naar een niet-gezette custom-prop maakt de declaratie ongeldig-bij-berekening, en dan
   valt de property terug op z'n INITIELE waarde — niet op de regel erboven. `flex:
   var(--col-flex-d)` zonder fallback werd dus `flex:0 1 auto` en niet de `1 1 0` uit de
   basisregel: kolommen zonder CMS-breedte gingen op hun inhoud staan en klapten onder
   elkaar (laag 422 op de home). */
@media(min-width:761px){
  .layer__columns{
    column-gap:var(--cols-gx-d,var(--cols-gx,2rem));
    row-gap:var(--cols-gy-d,var(--cols-gy,2rem))}
  .layer__col{flex:var(--col-flex-d,1 1 0);order:var(--col-order-d,var(--col-order,0))}
  .module-col__rows{row-gap:var(--rows-gap-d,var(--rows-gap,0))}
  .module-col__cols{gap:var(--cols-gap-d,var(--cols-gap,14px))}
}

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

@media(max-width:640px){.sfeer__strip .carousel__slide{flex-basis:80%}}

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

/* ── kaart (LayerMap → .travel__map, Leaflet lazy via map.js) ──
   Een Leaflet-container heeft geen intrinsieke breedte. Staat de kaart als enige in
   een flexkolom (.layer__col{flex:1 1 0;min-width:0}), dan krimpt die kolom tot
   enkele pixels en is de kaart onzichtbaar.

   Deze regels waren gescoped op `:has(.cd-row)` — markup die op de contactpagina niet
   meer bestaat. Daardoor viel de breedte stil weg en stond de kaart als een streepje
   op de pagina. Scoping op contentklassen is precies wat de werkwijze-regels
   verbieden; daarom nu op de kaart zelf. */
.layer__col:has(.travel__map){width:100%}
.travel__map.is-ready{display:block;width:100%}

/* ============================================================
   TARIEVEN
   ============================================================ */

/* De framework-tarievenlaag (public/modules/prices.css) is bewust thema-neutraal: structuur
   in het framework, huisstijl hier. Deze zes regels zijn dat verschil.

   `--prices-cut` is dezelfde diagonale snede die de kaarten al dragen (zie --card-cut hierboven),
   iets kleiner gehouden: een prijskaart is smaller dan een merk-kaart, en met de kaartmaat vrat
   de hoek een deel van het bedrag op. */
.layer--prices{
    --prices-cut:clamp(18px,2.5vw,34px);
    --prices-accent:var(--theme-color-2);
    --prices-panel-bg:var(--theme-color-8);
    --prices-amount-fg:var(--theme-color-3);
    --prices-border:rgba(38,38,38,.14);
    --prices-radius:0;                        /* de snede doet de vorm; ronding erbij vecht ermee */
}
}

/* ============================================================
   SITEMAP
   ============================================================ */
/* Het framework levert deze opmaak zelf in `assets/css/shell.css`, maar die stylesheet
   laadt alleen op skeleton-sites; deze site heeft een eigen layout en somt z'n
   module-stylesheets met de hand op. Overnemen kon niet: die regels leunen op
   `--line`, `--ink`, `--accent` en `--muted`, en geen van die vier bestaat hier.
   Vandaar dezelfde boomvorm, opgebouwd met onze eigen thema-tokens.
   Verdwijnt zodra het framework de sitemap-regels als module aanbiedt (punt 288). */
.sitemap__list{list-style:none;margin:0;padding:0}
.sitemap__list--root{padding-left:20px;border-left:2px solid var(--theme-color-4)}
.sitemap__item{position:relative;margin:2px 0}
/* Het horizontale streepje naar elke regel; samen met de verticale rand van de lijst
   vormt dat de boom. `top` is een halve regelhoogte, zodat het lijntje op de tekst
   uitkomt en niet op de bovenrand van de link. */
.sitemap__item::before{content:"";position:absolute;left:-20px;top:calc(0.5em + 6px);
    width:14px;border-top:2px solid var(--theme-color-4)}
.sitemap__link{display:inline-block;padding:4px 10px;border-radius:6px;font-weight:600;
    color:var(--theme-color-1);text-decoration:none;
    transition:color var(--dur-fast,.15s) var(--ease-out,ease),background-color var(--dur-fast,.15s) var(--ease-out,ease)}
.sitemap__link:hover,.sitemap__link:focus-visible{color:var(--theme-color-3);background:var(--theme-color-8)}
.sitemap__link:focus-visible{outline:2px solid var(--theme-color-3);outline-offset:2px}
/* Een pagina zonder route is geen link maar wel een niveau in de boom. */
.sitemap__link--no-route{color:var(--theme-color-5);cursor:default}
/* Onderliggende pagina's: lichter en kleiner, met een eigen inspringing. */
.sitemap__list--sub{margin:0 0 6px 20px;padding-left:18px;border-left:2px solid var(--theme-color-8)}
.sitemap__list--sub > .sitemap__item::before{left:-18px;width:12px;border-color:var(--theme-color-8)}
.sitemap__list--sub .sitemap__link{font-weight:400;font-size:.94rem}
/* Achttien regels in een kolom van 200px laat de rest van een breed scherm leeg;
   vanaf tablet dus in kolommen. `break-inside` houdt een ouder met z'n kinderen bij
   elkaar, anders valt een tak over de kolomgrens uit elkaar. */
@media (min-width:760px){
    /* De verticale rand van de lijst tekent maar in een kolomfragment, dus in
       kolommen-modus zou alleen de eerste kolom een lijn hebben. Rand eraf; de
       streepjes per regel dragen de structuur en die schalen wel mee. */
    .sitemap__list--root{columns:2;column-gap:56px;border-left:0;padding-left:16px}
    .sitemap__list--root > .sitemap__item{break-inside:avoid}
    .sitemap__list--root > .sitemap__item::before{left:-16px;width:10px}
}
@media (min-width:1100px){
    .sitemap__list--root{columns:3}
}

/* ── Kolom-knop: geen kaart ───────────────────────────────────────────────
 * `ColumnRenderer` zet de knop van een kolom in een `<p class="card__link">`, en sinds
 * fw 1.58.1261 (`cards.css`: "Het gedeelde kaart-component krijgt eindelijk z'n eigen
 * basis-opmaak") maakt die klasse van elk element een kolom-flexbox van 100% hoogte.
 * De knop is dan een flex-item: `inline-flex` blokkificeert naar `flex` en `align-items:
 * stretch` rekt 'm over de volle kolombreedte. Veertien knoppen op 463, allemaal te breed.
 *
 * De klasse hoort bij het kaart-component (`<a class="card__link">`, Card.php) en niet bij
 * dit omhulsel; dat is een framework-botsing, gemeld op multiminded/framework. Zolang die
 * naam gedeeld is, halen we hier de kaart-opmaak eraf. `p.card__link` volstaat: op 463
 * bestaat geen enkele echte `<a class="card__link">` (geteld over alle negen pagina's). */
p.card__link{display:block;height:auto}