@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Lora:ital,wght@0,500;0,600;1,500;1,600&display=swap";:root{--navy:#123f5d;--sea:#82b7c5;--sand:#dec9a3;--sage:#7c906d;--cream:#faf7f1;--ink:#2e3436;--white:#fff;--line:#e7e1d7;--shadow:0 18px 55px #1c35411f;--radius:24px;--container:1180px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:var(--ink);background:var(--cream);margin:0;font-family:DM Sans,system-ui,sans-serif;line-height:1.6}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}h1,h2,h3{color:var(--navy);margin-top:0;font-family:Lora,Georgia,serif;line-height:1.12}h1{letter-spacing:-.04em;font-size:clamp(2.6rem,6vw,5.7rem)}h2{letter-spacing:-.03em;font-size:clamp(2rem,4vw,3.5rem)}h3{font-size:1.25rem}.container{width:min(calc(100% - 40px),var(--container));margin:auto}.page-top{padding-top:150px}.narrow{max-width:900px}.eyebrow{letter-spacing:.14em;text-transform:uppercase;color:var(--sage);font-size:.78rem;font-weight:700}.section-heading{max-width:780px;margin-bottom:34px}.section-heading p{color:#596164;font-size:1.12rem}.site-header{z-index:50;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#faf7f1eb;border:1px solid #ffffff80;border-radius:22px;align-items:center;gap:28px;width:min(100% - 28px,1220px);height:88px;padding:8px 12px 8px 18px;display:flex;position:fixed;top:14px;left:50%;transform:translate(-50%);box-shadow:0 8px 35px #14323c1c}.brand{align-items:center;display:flex}.brand img{width:auto;height:68px;display:block}.desktop-nav{gap:22px;margin-left:auto;display:flex}.desktop-nav a{color:#526065;font-size:.92rem;font-weight:600}.desktop-nav a.active,.desktop-nav a:hover{color:var(--navy)}.header-actions{align-items:center;display:flex}.btn{cursor:pointer;border:0;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:13px 20px;font-weight:700;display:inline-flex}.btn-primary{background:var(--navy);color:#fff}.btn-secondary{border:1px solid var(--line);color:var(--navy);background:#fff}.btn-light{background:var(--cream);color:var(--navy)}.btn-ghost{color:#fff;background:#ffffff14;border:1px solid #ffffffb3}.icon-button{color:var(--navy);background:0 0;border:0}.mobile-only,.mobile-menu,.mobile-cta{display:none}.hero{background:#234;align-items:flex-end;min-height:780px;display:flex;position:relative;overflow:hidden}.hero-image{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.hero-overlay{background:linear-gradient(#0019261f 15%,#051f2bb8 85%);position:absolute;inset:0}.hero-content{color:#fff;padding-bottom:84px;position:relative}.hero-content h1{color:#fff;max-width:900px;margin:10px 0 20px}.hero-content p{max-width:690px;font-size:1.2rem}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:26px;display:flex}.quick-facts{z-index:4;box-shadow:var(--shadow);background:#fff;border-radius:22px;grid-template-columns:repeat(4,1fr);margin-top:-38px;display:grid;position:relative;overflow:hidden}.quick-facts>div{border-right:1px solid var(--line);grid-template-columns:30px 1fr;align-items:center;column-gap:11px;padding:24px;display:grid}.quick-facts svg{color:var(--navy);grid-row:1/3}.quick-facts strong{color:var(--navy)}.quick-facts span{color:#6b7477;font-size:.84rem}.photo-mosaic{border-radius:var(--radius);grid-template-rows:230px 230px;grid-template-columns:2fr 1fr 1fr;gap:10px;display:grid;overflow:hidden}.photo-mosaic img{object-fit:cover;width:100%;height:100%}.mosaic-main{grid-row:1/3}.center{text-align:center;margin-top:20px}.text-link{color:var(--navy);font-weight:700}.split-section{grid-template-columns:1fr 1fr;align-items:center;gap:60px;display:grid}.split-section.reverse .split-copy{order:2}.rounded-image{object-fit:cover;border-radius:var(--radius);width:100%;height:560px;box-shadow:var(--shadow)}.rounded-image.illustration{object-fit:contain;background:#fff}.feature-list{gap:14px;margin:28px 0;padding:0;list-style:none;display:grid}.feature-list li{align-items:center;gap:12px;display:flex}.feature-list svg{color:var(--sage)}.context-band{background:var(--navy);color:#eaf0f2;padding:84px 0}.context-band h2{color:#fff}.context-inner{grid-template-columns:1fr 260px;align-items:center;gap:30px;display:grid}.context-inner>div:first-child{max-width:760px}.context-icon{justify-content:center;align-items:center;display:flex}.context-icon svg{width:160px;height:160px;color:var(--sea);opacity:.55}.booking-banner{background:var(--sage);color:#fff;padding:74px 0}.booking-banner .container{justify-content:space-between;align-items:center;gap:40px;display:flex}.booking-banner h2{color:#fff;max-width:780px}.site-footer{padding:60px max(20px,calc((100% - var(--container))/2));color:#d8e4e8;background:#0d2f45;grid-template-columns:1fr auto;gap:20px;display:grid}.fineprint{color:#a9bec7;grid-column:1/-1;font-size:.82rem}.gallery-grid{grid-template-columns:repeat(3,1fr);gap:18px;display:grid}.gallery-grid figure{background:#fff;border-radius:18px;margin:0;overflow:hidden}.gallery-grid img{object-fit:cover;width:100%;height:280px}.gallery-grid figcaption{color:#667073;padding:10px 14px;font-size:.84rem}.content-grid{grid-template-columns:1fr 1fr;gap:60px;margin-top:64px;display:grid}.info-card{border:1px solid var(--line);background:#fff;border-radius:18px;margin:12px 0;padding:22px}.amenity-list{grid-template-columns:1fr 1fr;gap:10px;display:grid}.amenity-list div{background:#fff;border-radius:12px;align-items:center;gap:9px;padding:12px;display:flex}.request-form{border:1px solid var(--line);background:#fff;border-radius:24px;gap:18px;padding:28px;display:grid}.request-form label{color:var(--navy);gap:7px;font-weight:700;display:grid}.request-form input,.request-form textarea{color:var(--ink);background:#fff;border:1px solid #ccd3d6;border-radius:12px;padding:13px}.form-row{grid-template-columns:1fr 1fr;gap:14px;display:grid}.form-note{color:#6a7477;gap:8px;font-size:.86rem;display:flex}.story-cards,.destination-grid{grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0;display:grid}.story-cards article,.destination-grid article{border:1px solid var(--line);background:#fff;border-radius:18px;padding:24px}.destination-grid svg{color:var(--sea)}.faq details{border:1px solid var(--line);background:#fff;border-radius:14px;margin:10px 0;padding:18px 20px}.faq summary{color:var(--navy);cursor:pointer;font-weight:700}:root{--shadow-soft:0 10px 30px #1c354114}body{-webkit-font-smoothing:antialiased}::selection{background:var(--sea);color:#0b2833}:focus-visible{outline:3px solid var(--sea);outline-offset:2px;border-radius:6px}.btn{transition:transform .18s,box-shadow .18s,background-color .18s,border-color .18s}.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px #123f5d2e}.btn:active{transform:translateY(0);box-shadow:0 4px 12px #123f5d24}.btn-primary:hover{background:#0e3450}.btn-secondary:hover{border-color:var(--sea);background:#f6fbfc}.btn-ghost:hover{background:#ffffff2e}.desktop-nav a{transition:color .15s;position:relative}.desktop-nav a:after{content:"";background:var(--sea);height:2px;transition:right .2s;position:absolute;bottom:-6px;left:0;right:100%}.desktop-nav a.active:after,.desktop-nav a:hover:after{right:0}.hero-image{animation:16s ease-out forwards heroZoom}@keyframes heroZoom{0%{transform:scale(1.06)}to{transform:scale(1)}}.hero-overlay{background:linear-gradient(#041c2a29 0%,#041c2a4d 45%,#041c2ac7 100%)}.hero-content>.eyebrow.light{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff21;border:1px solid #ffffff42;border-radius:999px;padding:8px 16px;display:inline-flex}.quick-facts>div{grid-template-columns:46px 1fr}.quick-facts svg{background:#edf4f6;border-radius:13px;width:40px;height:40px;padding:9px}.photo-mosaic img,.gallery-grid img{transition:transform .5s}.photo-mosaic img:hover{transform:scale(1.03)}.gallery-grid figure{box-shadow:var(--shadow-soft);transition:transform .25s,box-shadow .25s;position:relative}.gallery-grid figure:hover{box-shadow:var(--shadow);transform:translateY(-4px)}.gallery-grid figure:hover img{transform:scale(1.045)}.gallery-grid figcaption{color:var(--navy);letter-spacing:.05em;text-transform:uppercase;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#faf7f1f0;border-radius:999px;padding:6px 13px;font-size:.76rem;font-weight:700;position:absolute;top:12px;left:12px}.info-card,.story-cards article,.destination-grid article{box-shadow:var(--shadow-soft);transition:transform .22s,box-shadow .22s}.info-card:hover,.story-cards article:hover,.destination-grid article:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.amenity-list div{border:1px solid var(--line)}.amenity-list svg{color:var(--sage);flex-shrink:0}.context-band{background:linear-gradient(135deg,#123f5d 0%,#0d2f45 100%)}.booking-banner{background:linear-gradient(135deg,#7c906d 0%,#677a5b 100%)}.request-form{box-shadow:var(--shadow-soft)}.request-form input:focus,.request-form textarea:focus{border-color:var(--sea);outline:none;box-shadow:0 0 0 3px #82b7c540}.form-status{border:1px solid var(--sand);color:#6b5b33;background:#fcf6e8;border-radius:12px;margin:0;padding:14px 16px;font-size:.93rem}.faq details{transition:border-color .2s}.faq details[open]{border-color:var(--sea)}.faq summary{list-style-position:outside}.text-link:hover{text-underline-offset:4px;text-decoration:underline}.header-actions{gap:12px}.lang-switch{gap:2px;display:flex}.lang-switch a{letter-spacing:.06em;color:#68757a;border-radius:8px;padding:6px 7px;font-size:.72rem;font-weight:700;transition:color .15s,background-color .15s}.lang-switch a:hover{color:var(--navy);background:#f0ede6}.lang-switch a.active{color:var(--navy);background:#e8f1f4}.mobile-menu .lang-switch{justify-content:center;padding-top:4px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}:root{--sage-ink:#5a6c4d;--sand-tint:#f4ede1;--sea-ink:#3e7086}h1,h2,h3{text-wrap:balance}.eyebrow{color:var(--sage-ink)}.eyebrow.light{color:#e5f1f4}.skip-link{z-index:100;background:var(--navy);color:#fff;border-radius:0 0 12px;padding:12px 18px;font-weight:700;position:absolute;top:0;left:-9999px}.skip-link:focus{left:0}.wave-rule{width:56px;height:8px;color:var(--sea);margin:14px 0 0;display:block;overflow:visible}.section-heading .wave-rule{margin-bottom:4px}.hero-content em,.context-band em,.booking-banner em{color:var(--sand);font-style:italic}.section,.band{padding:104px 0}.band-sand{background:var(--sand-tint)}.band-sand .info-card,.band-sand .amenity-list div{border-color:#e6dcc9}.hero:after{content:"";pointer-events:none;background:linear-gradient(#0000,#faf7f129);height:90px;position:absolute;bottom:0;left:0;right:0}.section-heading p{color:#535b5f}.story-cards article,.destination-grid article{padding:28px}.story-cards article h3,.destination-grid article h3{margin:16px 0 8px}.destination-grid svg,.story-cards>article>svg{width:46px;height:46px;color:var(--sea-ink);background:#e8f1f4;border-radius:14px;padding:11px}.btn svg{transition:transform .18s}.btn:hover svg{transform:translate(2px)}.faq summary{padding-right:26px;position:relative}.faq summary::marker{color:var(--sea-ink)}.faq details p{color:#4a5356;margin-bottom:4px}.site-footer{border-top:3px solid var(--sea);background:linear-gradient(#0d2f45,#0a2636);grid-template-columns:1fr auto;row-gap:26px;padding-top:64px;padding-bottom:64px}.footer-brand{gap:4px;display:grid}.footer-brand strong{color:#fff;font-family:Lora,Georgia,serif;font-size:1.35rem}.footer-brand span{color:#a9bec7;font-size:.9rem}.footer-brand .wave-rule{color:var(--sea);margin-top:10px}.footer-nav{flex-wrap:wrap;align-items:center;gap:18px;display:flex}.footer-nav a{color:#d8e4e8;font-size:.92rem;font-weight:600;transition:color .15s}.footer-nav a:hover{color:#fff}@media (width<=900px){.section,.band{padding:72px 0}.site-footer{grid-template-columns:1fr}}@media (width<=600px){.section,.band{padding:60px 0}}@media (width<=900px){.desktop-nav,.desktop-only{display:none}.mobile-only{display:block}.site-header{justify-content:space-between}.mobile-menu{background:var(--cream);box-shadow:var(--shadow);border-radius:18px;gap:12px;padding:18px;display:grid;position:absolute;top:96px;left:0;right:0}.mobile-menu a{padding:10px}.hero{min-height:720px}.quick-facts{grid-template-columns:1fr 1fr}.photo-mosaic{grid-template-rows:300px 190px 190px;grid-template-columns:1fr 1fr}.mosaic-main{grid-area:1/1/auto/3}.split-section,.content-grid,.context-inner{grid-template-columns:1fr}.split-section.reverse .split-copy{order:initial}.rounded-image{height:440px}.gallery-grid{grid-template-columns:1fr 1fr}.story-cards,.destination-grid{grid-template-columns:1fr}.booking-banner .container{display:grid}.site-footer{grid-template-columns:1fr}.fineprint{grid-column:auto}.mobile-cta{z-index:45;background:#fff;border-radius:18px;justify-content:space-between;align-items:center;padding:10px 12px;font-size:.86rem;display:flex;position:fixed;bottom:10px;left:10px;right:10px;box-shadow:0 10px 35px #00000029}.site-footer{padding-bottom:100px}}@media (width<=600px){.container{width:min(calc(100% - 28px),var(--container))}.section{padding:64px 0}.page-top{padding-top:132px}.hero{min-height:680px}.hero-content{padding-bottom:58px}.hero-content p{font-size:1rem}.quick-facts{grid-template-columns:1fr;margin-top:-18px}.quick-facts>div{border-right:0;border-bottom:1px solid var(--line)}.photo-mosaic{scroll-snap-type:x mandatory;border-radius:18px;display:flex;overflow-x:auto}.photo-mosaic img{scroll-snap-align:start;min-width:88%;height:310px}.gallery-grid{grid-template-columns:1fr}.content-grid{gap:28px}.amenity-list,.form-row{grid-template-columns:1fr}.rounded-image{height:360px}.site-header{height:76px;top:8px}.brand img{height:56px}} /* Het mobiele menu wordt door JavaScript getoond en verborgen via het hidden-attribuut. De media query hierboven zet .mobile-menu op display:grid; deze regel is specifieker (klasse + attribuut) en wint dus in beide volgordes, zonder !important. */ .mobile-menu[hidden]{display:none} /* ---- UI/UX-pass september 2026 ------------------------------------------- Herstelt wat in de herbouw naar statische HTML brak en wat de eerste versie al niet goed had. Bewust als aanvulling onderaan, zodat het incumbent ontwerp hierboven leesbaar en intact blijft. */ /* Iconen: vaste maat, nooit de container vullen. */ .btn svg{width:18px;height:18px;flex-shrink:0} .feature-list svg,.amenity-list svg{width:20px;height:20px;flex-shrink:0} .form-note svg{width:18px;height:18px;flex-shrink:0;margin-top:2px} .form-note{align-items:flex-start} /* Header: niets mag breken. Navigatielabels op één regel, CTA op één regel; onder 1200px de korte CTA-tekst. */ .desktop-nav{gap:18px} .desktop-nav a,.site-header .btn{white-space:nowrap} .site-header .cta-short{display:none} @media (width<=1200px){ .site-header .cta-long{display:none} .site-header .cta-short{display:inline} } /* Hero: de content is onderaan uitgelijnd; zonder ruimte bovenin schuift de kicker onder de vaste header. Kop iets kleiner zodat drie regels passen. */ h1{font-size:clamp(2.6rem,5.2vw,5rem)} .hero{min-height:min(780px,100svh)} .hero-content{padding-top:150px} @media (width<=600px){.hero-content{padding-top:120px}} /* Taalwisselaar: aanraakbaar. */ .lang-switch a{min-height:32px;display:inline-flex;align-items:center;justify-content:center;min-width:32px} @media (width<=900px){ .lang-switch a{min-width:40px;min-height:40px;font-size:.8rem} .mobile-menu{max-height:calc(100dvh - 110px);overflow:auto} .mobile-menu a{min-height:44px;display:flex;align-items:center} .footer-nav a{padding:10px 2px} } /* Eén primaire actie per scherm. De hero bezit de vouw; de header-CTA is secundair (omlijnd) en de vaste mobiele balk verdwijnt op de pagina waar het formulier zelf de actie is. */ .page-availability .mobile-cta{display:none} @media (width<=900px){.page-availability .site-footer{padding-bottom:64px}} /* Mobiele hero: donkerder onderin, want daar staan tekst en knoppen op het lichtste deel van de foto. */ @media (width<=600px){ .hero-overlay{background:linear-gradient(#041c2a33 0%,#041c2a80 40%,#041c2ae6 100%)} } /* Open menu: scrim erachter, en de hamburger wordt een kruis (site.js). */ .menu-scrim{position:fixed;inset:0;background:#0d2f4559;z-index:45;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .menu-scrim[hidden]{display:none} .mobile-menu{z-index:50} .icon-button{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px} .icon-button [hidden]{display:none} /* Verblijf: slaapplekken als rij van drie, voorzieningen als vier kolommen. */ .stay-facts{display:grid;gap:56px;margin-top:56px} .stay-facts h3{margin-bottom:16px} .sleeping-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .sleeping-grid .info-card{margin:0} .amenity-list--wide{grid-template-columns:repeat(4,1fr)} .amenity-list div{padding:11px 13px;font-size:.95rem} @media (width<=900px){ .sleeping-grid{grid-template-columns:1fr} .amenity-list--wide{grid-template-columns:repeat(2,1fr)} } @media (width<=600px){.amenity-list--wide{grid-template-columns:1fr}} /* Ritme: niet elke sectie even zwaar. Het intro-blok sluit dichter aan op de quick-facts, het beslismoment krijgt juist lucht; boven een kop meer ruimte dan eronder; een stap tussen h2 en de kaarttitels. */ .section-heading{margin-bottom:28px} .section-heading h2,.split-copy h2{margin-top:14px;margin-bottom:14px} .page-home .quick-facts + * ,.page-home .section:first-of-type{padding-top:72px} .booking-banner{padding:96px 0} .booking-banner p{font-size:1.05rem;color:#f4f7f0} .context-band p{color:#dfe8ec} h3{font-size:clamp(1.25rem,1.5vw,1.45rem)} .info-card strong{font-size:1.1rem;display:block;margin-bottom:4px} .info-card p{margin:0;color:#4f585b} /* Header-correctie: de hamburger is alleen mobiel (de generieke .icon-button- regel hierboven overschreef .mobile-only), het logo mag nooit krimpen, en de lange CTA-tekst past pas comfortabel vanaf 1320px naast vijf nav-items en vier talen. */ .icon-button.mobile-only{display:none} @media (width<=900px){.icon-button.mobile-only{display:inline-flex}} .brand{flex-shrink:0} .brand img{max-width:none} @media (width<=1320px){ .site-header .cta-long{display:none} .site-header .cta-short{display:inline} } /* Tussen 901 en 1100px past de header-CTA niet naast vijf nav-items en vier talen; de hero en de boekingsband dragen daar de actie. Logo en nav iets compacter. */ @media (width<=1100px){ .site-header .btn{display:none} .brand img{height:56px} .desktop-nav{gap:14px} .desktop-nav a{font-size:.86rem} } /* ---- Mobiel en foto's, september 2026 ----------------------------------- */ /* Header op een telefoon. Hierboven mocht het logo niet krimpen en had elke taal 40px; samen was dat breder dan het scherm, en de vierde taal en de hamburger vielen eraf. Nu hebben talen en hamburger een vaste maat en neemt het logo wat overblijft: op 360px zo'n 40px hoog, vanaf ~410px de volle maat. Altijd helemaal in beeld, met lucht boven en onder. */ @media (width<=900px){ .site-header{gap:10px;padding:8px 8px 8px 14px} .brand{flex:1 1 auto;min-width:0} .brand img{width:auto;height:auto;max-width:100%;max-height:54px} .header-actions{flex-shrink:0;gap:6px} .lang-switch{gap:0} .lang-switch a{min-width:31px;min-height:40px;padding:6px 3px;font-size:.72rem;letter-spacing:.04em} } @media (width<=600px){ .brand img{max-height:50px} } /* Galerij op de verblijfpagina: zes kolommen, zodat de twee veranda-frames samen een rij delen (elk drie kolommen) en de andere foto's met drie per rij staan. Alle rijen even hoog. Op een tablet krijgt elk veranda-frame een eigen volle rij op natuurlijke hoogte; op een telefoon staat alles onder elkaar. */ .gallery-grid{grid-template-columns:repeat(6,1fr)} .gallery-grid figure{grid-column:span 2} .gallery-grid figure.wide{grid-column:span 3} .gallery-grid figure.wide img{height:280px} .gallery-grid a{display:block} @media (width<=900px){ .gallery-grid{grid-template-columns:repeat(2,1fr)} .gallery-grid figure{grid-column:span 1} .gallery-grid figure.wide{grid-column:span 2} .gallery-grid figure.wide img{height:auto;max-height:380px} } @media (width<=600px){ .gallery-grid{grid-template-columns:1fr} .gallery-grid figure,.gallery-grid figure.wide{grid-column:auto} .gallery-grid figure.wide img{height:auto;max-height:none} } /* Mozaiek op de homepage: de foto's zijn nu links (naar de lightbox), dus de grid- en scrollregels die op de img stonden horen op de link. */ .photo-mosaic a{display:block;min-width:0;overflow:hidden} .photo-mosaic a img{width:100%;height:100%} @media (width<=600px){ .photo-mosaic a{flex:0 0 88%;scroll-snap-align:start} .photo-mosaic a img{min-width:0;height:310px} } .photo-mosaic a:focus-visible,.gallery-grid a:focus-visible{outline-offset:-4px} /* Lightbox: een foto op groot formaat met titel en tekst eronder, en pijlen om door de reeks te bladeren. De