/* ═══════════════════════════════════════
   Vakantiehuis – style.css
   ═══════════════════════════════════════ */

/* Skip link toegankelijkheid */
.skip-link {
  position:absolute; top:-100px; left:1rem; z-index:9999;
  background:#2e2a25; color:#fff; padding:.6rem 1.2rem;
  border-radius:0 0 8px 8px; font-size:.9rem; text-decoration:none;
  transition:top .2s;
}
.skip-link:focus { top:0; }

/* Toegankelijkheid: zichtbare focus voor toetsenbord + reduced motion */
a:focus-visible, button:focus-visible, .cal-day:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
@media(prefers-reduced-motion:reduce){
  .hero-bg { animation:none; }
  .hero-content { animation:none; }
  .reveal { transition:none; }
}

:root {
  color-scheme: light;
  --accent:    #c8b47e;
  --accent-lt: #dfc4b0;
  --bg:        #ffffff;
  --bg2:       #faf8f5;
  --bg3:       #f4f1ec;
  --border:    #e8e2d9;
  --text:      #2e2a25;
  --muted:     #6e645c;
  --sage:      #8fa896;
  --r:         20px;
  --nav-bg:    rgba(255,255,255,.96);
  --nav-link:  #8a7f75;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:clip; width:100%; }
body { font-family:'DM Sans',sans-serif; background:var(--bg); color:var(--text); overflow-x:clip; width:100%; max-width:100%; position:relative; }

/* ── NAV ── */
nav {
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  /* column-gap: gegarandeerde ademruimte tussen logo/huisnaam en het menu */
  padding:1.2rem 4rem; column-gap:2.5rem;
  transition:background .4s, box-shadow .4s;
}
nav.scrolled {
  background:var(--nav-bg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);
  justify-content:space-between;
}
/* Desktop: verberg nav-links, hamburger en logo vóór scrollen */
@media(min-width:769px){
  nav:not(.scrolled) .nav-links { display:none; }
  nav:not(.scrolled) .nav-hamburger { display:none; }
  nav:not(.scrolled) .nav-logo { display:none; }
}

/* Tablet + laptop: hamburger i.p.v. volledig menu, zodat de huisnaam ruimte houdt.
   Grens op 1400px: het menu van 7 items is ~1068px breed; daaronder moet de
   huisnaam zo klein worden dat een hamburger prettiger is. */
@media(min-width:769px) and (max-width:1400px){
  /* !important omdat Poster en Costa het menu met !important ook ongescrold tonen */
  nav .nav-links { display:none !important; }
  nav .nav-hamburger { display:flex !important; }
  nav.scrolled .nav-hamburger span { background:var(--text) !important; }
  .nav-logo-img { height:96px; }
  .nav-logo-merk { height:72px; }
}
/* Mobiel: nav altijd zichtbaar met logo */
@media(max-width:768px){
  nav {
    background:rgba(255,255,255,.97) !important;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    box-shadow:0 1px 0 var(--border);
    justify-content:space-between !important;
    padding:1.2rem 1rem !important;
  }
  nav:not(.scrolled) .nav-links { display:none; }
  nav:not(.scrolled) .nav-hamburger { display:flex !important; }
  nav .nav-hamburger span { background:var(--text) !important; }
  .nav-logo { margin-left:-.4rem; }
  .nav-hamburger { margin-right:-.2rem; }
}

.nav-logo { display:flex; align-items:center; gap:.7rem; text-decoration:none; transition:opacity .3s; min-width:0; flex:1 1 0; container-type:inline-size; }
@media(hover:hover){ .nav-logo:hover { opacity:.85; } }
/* object-fit + object-position: als de ruimte krapper is dan het logo breed is,
   krimpt het logo binnen zijn vak zonder te vervormen (img heeft max-width:100%) */
.nav-logo-img { width:auto; display:block; height:70px; object-fit:contain; object-position:left center; }
/* Logo nooit groter tonen dan het bestand zelf is — anders wordt het uitgerekt en
   oogt het wazig. --logo-h komt uit index.php (echte pixelhoogte van het bestand)
   en klemt elke thema-hoogte af; zonder de variabele verandert er niets. */
.nav-logo-img, .footer-logo-img { max-height:var(--logo-h, none); }
.nav-logo-merk { width:auto; display:block; height:64px; }
@media(min-width:769px){ .nav-logo-img { height:130px; } .nav-logo-merk { height:84px; } }
/* Tekst-fallback als er geen logo is ingesteld */
.nav-logo-text {
  font-family:'Cormorant Garamond',serif; font-weight:300;
  letter-spacing:.02em;
  color:var(--text);
  /* Nooit afkappen. Breken mag alleen op een spatie, nooit midden in een woord. */
  white-space:normal; overflow-wrap:normal; word-break:normal; hyphens:none; line-height:1.05;
  /* Vaste terugval voor browsers zonder containerqueries */
  font-size:clamp(22px, 3vw, 38px);
}
/* Huisnaam mag nooit afgekapt worden: de lettergrootte volgt de ruimte die
   overblijft naast het menu, gedeeld door het aantal tekens. De .naam-*-class
   komt uit PHP (mb_strlen) en zet alleen --naam-tekens; .437 is de gemiddelde
   tekenbreedte van Cormorant Garamond in em. Thema's die zelf een font-size op
   nav .nav-logo-text zetten (Costa) winnen qua specificiteit en blijven zoals ze zijn. */
.nav-logo-text.naam-t8   { --naam-tekens:8; }
.nav-logo-text.naam-t10  { --naam-tekens:10; }
.nav-logo-text.naam-t12  { --naam-tekens:12; }
.nav-logo-text.naam-t14  { --naam-tekens:14; }
.nav-logo-text.naam-t17  { --naam-tekens:17; }
.nav-logo-text.naam-t20  { --naam-tekens:20; }
.nav-logo-text.naam-t24  { --naam-tekens:24; }
.nav-logo-text.naam-t28  { --naam-tekens:28; }
.nav-logo-text.naam-t34  { --naam-tekens:34; }
.nav-logo-text.naam-t40  { --naam-tekens:40; }
.nav-logo-text.naam-t48  { --naam-tekens:48; }
/* 100cqi = de breedte die de flexbox het logo geeft, dus wat er ná het menu
   overblijft. Daar gaat het logo-merkje (92px incl. gap) vanaf; de rest wordt
   verdeeld over het aantal tekens. Werkt zo bij elk thema, ongeacht hoe breed
   dat menu is — geen hardcoded aannames meer. */
@supports (container-type:inline-size){
  .nav-logo-text { font-size:clamp(15px, calc((100cqi - 92px) / var(--naam-tekens,17) / .437), 46px); }
}
.nav-hamburger { flex-shrink:0; }
@media(max-width:768px){
  .nav-logo-text { font-size:clamp(15px, calc((100cqi - 66px) / var(--naam-tekens,17) / .437), 34px); }
  .nav-logo-merk { height:clamp(48px, 14vw, 64px); }
}
/* Mobiel: hero h1 visueel verbergen (logo in navbar toont de naam al) —
   sr-only patroon i.p.v. display:none zodat de h1 voor SEO en screenreaders blijft bestaan */
@media(max-width:768px){
  .hero-title { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
}
/* Hero logo bovenin de hero — alleen desktop */
.hero-logo { height:150px; width:auto; display:block; margin:0 auto 1.8rem; filter:drop-shadow(0 2px 12px rgba(0,0,0,.25)); }
@media(max-width:768px){ .hero-logo { display:block; height:100px; margin:0 auto 1.2rem; } }
.hero-logo-text {
  font-family:'Cormorant Garamond',serif; font-weight:300; font-style:italic;
  font-size:clamp(2rem,6vw,3.5rem); letter-spacing:.22em; text-transform:uppercase;
  color:#fff; text-align:center; margin-bottom:1.5rem;
  text-shadow:0 2px 20px rgba(0,0,0,.35);
}

.nav-links { display:flex; gap:2.5rem; list-style:none; flex-shrink:0; }
.nav-links a { white-space:nowrap; }
.nav-links a { color:rgba(255,255,255,.85); text-decoration:none; font-size:.9625rem; font-weight:300; letter-spacing:.18em; text-transform:uppercase; transition:color .2s; }
nav.scrolled .nav-links a { color:var(--nav-link); }
@media(hover:hover){ .nav-links a:hover { color:var(--accent) !important; } }
/* 1201-1600px: menu en nav-padding compacter, anders blijft er te weinig
   over voor de huisnaam zodra het menu weer zichtbaar wordt. */
@media(min-width:1401px) and (max-width:1600px){
  nav { padding-left:2rem !important; padding-right:2rem !important; }
  .nav-links { gap:1.4rem !important; }
}


/* Hamburger */
.nav-hamburger { display:none; position:relative; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; cursor:pointer; padding:.4rem; min-width:44px; min-height:44px; z-index:300; }
.nav-hamburger span { display:block; width:24px; height:1.5px; background:#fff; border-radius:2px; transition:transform .3s, opacity .3s, background .4s; }
/* Desktop (hamburger tot 1400px zichtbaar): iets dikkere streepjes, anders
   oogt het knopje te iel naast een groot logo. De translateY van het kruisje
   blijft kloppen: gap 5px + streep ~2px centreert op dezelfde 6.5-7px. */
@media(min-width:769px){
  /* nav-prefix voor extra specificiteit: theme-ibiza/costa zetten zelf een
     dunnere maat op .nav-hamburger span en laden na dit bestand */
  nav .nav-hamburger span { width:26px; height:2px; }
  nav .nav-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  nav .nav-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
}
nav.scrolled .nav-hamburger span { background:var(--text); }
.nav-hamburger.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity:0; }
.nav-hamburger.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* Language switcher in nav */
.nav-lang { position:relative; display:flex; align-items:center; z-index:250; }
.nav-lang-trigger {
  display:flex; align-items:center; gap:.4rem; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2); color:#fff; padding:.42rem .8rem .42rem .65rem;
  border-radius:50px; font-size:.78rem; font-weight:500; letter-spacing:.05em; cursor:pointer;
  font-family:'DM Sans',sans-serif; transition:background .2s, border-color .2s;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
@media(hover:hover){ .nav-lang-trigger:hover { background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.35); } }
nav.scrolled .nav-lang-trigger { background:#f5f1ec; border-color:var(--border); color:var(--text); }
@media(hover:hover){ nav.scrolled .nav-lang-trigger:hover { background:#ebe5dc; } }
.nav-lang-flag { font-size:1.05rem; line-height:1; }
.nav-lang-code { font-weight:600; }
.nav-lang-trigger svg { transition:transform .2s; opacity:.7; }
.nav-lang.open .nav-lang-trigger svg { transform:rotate(180deg); }
.nav-lang-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  box-shadow:0 12px 36px rgba(0,0,0,.12); padding:.45rem; min-width:180px;
  opacity:0; visibility:hidden; transform:translateY(-6px); transition:all .18s;
}
.nav-lang.open .nav-lang-menu { opacity:1; visibility:visible; transform:translateY(0); }
.nav-lang-item {
  display:flex; align-items:center; gap:.6rem; padding:.55rem .8rem;
  text-decoration:none; color:var(--text); font-size:.88rem; font-weight:400;
  border-radius:9px; transition:background .15s;
}
@media(hover:hover){ .nav-lang-item:hover { background:var(--bg2); } }
.nav-lang-item.is-active { background:var(--bg2); color:var(--accent); font-weight:500; }

@media(max-width:900px){
  .nav-lang { margin-left:auto; margin-right:.35rem; }
  .nav-lang-trigger { padding:.38rem .65rem .38rem .55rem; font-size:.75rem; }
  .nav-lang-code { display:none; }
  .nav-lang-menu { right:-.5rem; min-width:160px; }
}

/* Mobile drawer */
.nav-drawer { display:none; position:fixed; top:var(--nav-h,94px); left:0; right:0; z-index:190; max-height:calc(100vh - var(--nav-h,94px)); overflow-y:auto; -webkit-overflow-scrolling:touch; background:rgba(255,255,255,.98); -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); flex-direction:column; align-items:center; gap:1.4rem; padding:1.8rem 1rem 2.2rem; box-shadow:0 12px 24px rgba(0,0,0,.08); border-top:1px solid var(--border); border-bottom:3px solid var(--accent); }
.nav-drawer.open { display:flex; }
/* Tap-vanger achter het menu: tikken naast het menu sluit het.
   Ook nodig op iPad: bovenaan de pagina heeft de nav geen achtergrond/backdrop-filter
   en dus geen eigen compositielaag — iOS geeft de tik op het kruisje dan aan de
   (wel geblurde) drawer. De translateZ hieronder tilt de nav weer bovenop. */
.nav-drawer-overlay { display:none; position:fixed; inset:0; z-index:180; background:transparent; }
.nav-drawer-overlay.open { display:block; }
/* Menu open: de navbalk krijgt dezelfde behandeling als bij scrollen — een eigen
   achtergrond + backdrop-filter. Dat geeft de nav een eigen compositielaag (iOS
   legt een geblurde drawer anders over de nav heen) en het kruisje komt in
   tekstkleur op een dekkende balk te staan i.p.v. wit-op-wit. */
body.drawer-open nav { background:var(--nav-bg); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--border); }
body.drawer-open .nav-hamburger span { background:var(--text) !important; }
.nav-drawer a { font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300; color:var(--text); text-decoration:none; letter-spacing:.1em; transition:color .2s; }
.design-default .nav-drawer { gap:.1rem; padding-top:1.4rem; }
.design-default .nav-drawer a { font-size:.95rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; width:100%; max-width:300px; text-align:center; padding:.95rem 0 1.05rem; position:relative; }
.design-default .nav-drawer a + a { border-top:1px solid rgba(46,42,37,.10); }
.design-default .nav-drawer a::after { content:''; position:absolute; left:50%; bottom:.55rem; transform:translateX(-50%); width:0; height:1.5px; background:var(--accent); transition:width .28s ease; }
@media(hover:hover){ .design-default .nav-drawer a:hover::after { width:30px; } }
@media(hover:hover){ .nav-drawer a:hover { color:var(--accent); } }
.nav-drawer-close { display:none; }

/* ── HERO ── */
.hero { height:64vh; min-height:440px; position:relative; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 55%; animation:heroZoom 14s ease-out forwards; }
/* Hero-slider: actief zodra extra foto's (ws-hero-img2/3) zijn ingesteld */
.hero-slide { position:absolute; inset:0; opacity:0; z-index:0; }
.hero-slide.prev { opacity:1; z-index:0; }
.hero-slide.active { opacity:1; z-index:1; transition:opacity 1.4s ease; }
#heroSlider .hero-overlay { z-index:2; }
#heroSlider .hero-content { z-index:3; }
#heroSlider .hero-slider-nav { z-index:4; }
.hero-slide .hero-bg { position:absolute; inset:0; }
.hero-slider-nav { position:absolute; bottom:.9rem; left:0; right:0; z-index:3; display:flex; align-items:center; justify-content:center; gap:.1rem; }
.hero-slider-dot { width:44px; height:44px; position:relative; background:transparent; padding:0; }
.hero-slider-dot::before { content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,.85); background:transparent; }
.hero-slider-dot.active::before { background:#fff; border-color:#fff; }
@keyframes heroZoom { from{transform:scale(1.06)} to{transform:scale(1)} }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(to bottom,rgba(20,16,12,.17) 0%,rgba(20,16,12,.43) 100%); }
.hero-content { position:relative; z-index:2; padding:0 2rem; animation:fadeUp .9s .2s both; margin-top:-4rem; }
@keyframes fadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.hero-tag { font-size:.74rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent-lt); font-weight:300; margin-bottom:1rem; }
.hero-title { font-family:'Cormorant Garamond',serif; font-size:clamp(2.7rem,5vw,4.8rem); font-weight:300; color:#fff; line-height:1; margin-bottom:1rem; overflow-wrap:break-word; word-break:break-word; }
.hero-title em { font-style:normal; color:var(--accent); }
.hero-sub { font-size:1.1rem; font-weight:300; color:rgba(255,255,255,.78); margin-bottom:1.4rem; overflow-wrap:break-word; }
.hero-cta { display:inline-block; padding:1rem 2.8rem; border:1px solid rgba(255,255,255,.65); color:#fff; text-decoration:none; font-size:.76rem; letter-spacing:.2em; text-transform:uppercase; font-weight:300; border-radius:50px; transition:background .25s; }
@media(hover:hover){ .hero-cta:hover { background:rgba(255,255,255,.18); } }

/* ── STATS BAR ── */
.stats-bar { background:var(--bg2); border-bottom:1px solid var(--border); display:flex; justify-content:center; }
.stat-item { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:1.4rem 5rem 3.4rem; border-right:1px solid var(--border); flex:1; max-width:280px; }
.stat-item:last-child { border-right:none; }
.stat-item svg { opacity:.75; width:40px; height:40px; }
.stat-num { font-family:'Cormorant Garamond',serif; font-size:4rem; font-weight:300; color:var(--text); line-height:1; margin:-.2rem 0 .8rem; }
/* Zwembad heeft geen cijfer: icoon + label als groepje in het midden van de
   tegel. De gewone tegels hebben bewust meer padding onder (3.4rem) dan boven
   (1.4rem); zonder correctie centreert het groepje daardoor te hoog. Gelijke
   padding (2.4rem = het gemiddelde) zet het optisch écht in het midden. */
.stat-item.stat-item-zwembad { justify-content:center; gap:1rem; padding-top:2.4rem; padding-bottom:2.4rem; }
.stat-label { font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); font-weight:300; text-align:center; }

/* ── SHARED ── */
.section-label { font-size:.7rem; letter-spacing:.32em; text-transform:uppercase; color:var(--accent); font-weight:400; margin-bottom:1.2rem; display:block; }
/* Moderne DM Sans-kopjes (zoals Casa Hero-site) voor de serif-thema's: Summer Breeze/Ibiza/Pink. Coastal/Costa/Noir zetten hun eigen --font-head. */
.section-heading { font-family:'DM Sans',sans-serif; font-size:clamp(2.2rem,4.4vw,3.7rem); font-weight:700; letter-spacing:-.025em; color:var(--text); line-height:1.12; margin-bottom:1.4rem; overflow-wrap:break-word; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.section-heading em { font-style:normal; color:var(--accent); font-weight:inherit; }

/* Summer Breeze (standaardthema): font-eenheid in DM Sans — gelijk aan Pretty Pink */
.design-default .intro-body, .design-default .location-body, .design-default .vz-subtekst, .design-default .feature-desc, .design-default .location-list li, .design-default .faq-item p { font-family:'DM Sans',sans-serif; font-size:clamp(1.15rem,1.6vw,1.4rem); }
.design-default .hero-title, .design-default .stat-num, .design-default .dist, .design-default .cal-result-price, .design-default .score-num, .design-default .feature-name, .design-default .faq-item h3, .design-default .seo-block h4, .design-default .cal-book-title, .design-default .cal-month-title, .design-default .cal-result-title, .design-default .text-popup-title, .design-default .text-popup-body h2 { font-family:'DM Sans',sans-serif; font-weight:700; letter-spacing:-.02em; }
.design-default .nav-links a { font-size:1.0225rem; }
.design-default .nav-logo-text, .design-default .hero-logo-text, .design-default .nav-drawer a, .design-default .gallery-more-btn, .design-default .footer-logo, .design-default .review-avatar-placeholder { font-family:'DM Sans',sans-serif; }
.design-default .stat-num, .design-default .dist { font-weight:500; }
.design-default .dist { font-size:1.74rem; }
.design-default .location-body, .design-default .tip-card p { font-size:clamp(1.21rem,1.6vw,1.46rem); }

/* Summer Breeze finetuning (design review 07-2026) — alleen design-default */
/* Primaire CTA in de hero: volle accent-pill i.p.v. ghost (conversie), consistent met .contact-btn */
.design-default .hero-cta { background:var(--accent); border-color:var(--accent); font-weight:500; }
@media(hover:hover){ .design-default .hero-cta:hover { background:var(--text); border-color:var(--text); } }
/* Hero-tekst leesbaar op lichte foto's */
.design-default .hero-title, .design-default .hero-sub, .design-default .hero-tag { text-shadow:0 1px 16px rgba(0,0,0,.45); }
/* Teksten die buiten het clamp-systeem vielen alsnog meetrekken */
.design-default .review-text { font-size:1.05rem; }
.design-default .seo-block p { font-size:clamp(1.08rem,1.4vw,1.22rem); }
.design-default .rule-text h4 { font-size:1.08rem; }
.design-default .rule-text p { font-size:1rem; }
.design-default .section-label { font-size:.76rem; }
/* Gallery-knop in lijn met het knoppensysteem (was 1.46rem serif-erfenis) */
.design-default .gallery-more-btn { font-size:1.02rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:1.05rem 2.6rem; }
@media(max-width:480px){ .design-default .gallery-more-btn { font-size:.9rem; letter-spacing:.08em; padding:.95rem 1.6rem; } }

/* ── INTRO ── */
.intro { display:grid; grid-template-columns:1fr 1fr; }
.intro-text { background:var(--bg2); padding:8rem 1rem 8rem 8rem; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; }
.intro-body { font-size:1.1rem; font-weight:300; line-height:1.9; color:var(--muted); max-width:68ch; text-align:center; }
.intro-body-wrap { position:relative; }
.intro-lees-meer, .intro-lees-minder { display:none; }
@media(max-width:768px){
  .intro-body-wrap:not(.expanded) .intro-body { max-height:19em; overflow:hidden; position:relative; }
  .intro-body-wrap:not(.expanded) .intro-body::after { content:''; position:absolute; bottom:0; left:0; right:0; height:2.5em; background:linear-gradient(transparent, var(--bg2)); pointer-events:none; }
  .intro-lees-meer, .intro-lees-minder { display:inline-block; background:none; border:1px solid var(--accent); color:var(--accent); padding:.5rem 1.4rem; font-family:'DM Sans',sans-serif; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; font-weight:500; cursor:pointer; margin-top:.8rem; border-radius:var(--r); transition:all .2s; }
  @media(hover:hover){ .intro-lees-meer:hover { background:var(--accent); color:#fff; } }
  /* Zichtbaarheid volgt de state van de wrapper — geen inline styles meer.
     LET OP: beide selectors apart kwalificeren; een losse .intro-lees-minder
     verborg de knop voorheen altijd. */
  .intro-body-wrap.expanded .intro-lees-meer { display:none; }
  .intro-body-wrap:not(.expanded) .intro-lees-minder { display:none; }
}
.intro-image { position:relative; overflow:hidden; min-height:540px; }
.intro-image img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }

/* ── FEATURES ── */
.features { padding:8rem 5rem; background:var(--bg); }
.features-header { text-align:center; margin-bottom:4rem; }
.features-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
.feature-card { background:var(--bg2); padding:1.4rem 1.6rem; text-align:center; border:1px solid var(--border); border-radius:var(--r); transition:transform .3s, box-shadow .3s; }
@media(hover:hover){ .feature-card:hover { transform:translateY(-6px); box-shadow:0 24px 56px rgba(0,0,0,.07); } }
.feature-icon { width:60px; height:60px; margin:0 auto 1.5rem; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; border:1px solid var(--border); }
.feature-icon svg { width:28px; height:28px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.feature-name { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:600; margin-bottom:.7rem; color:var(--text); }
.feature-desc { font-size:1rem; color:var(--muted); font-weight:300; line-height:1.65; }

/* ── GALLERY ── */
.gallery { padding:8rem 5rem; background:var(--bg2); }
.gallery-header { margin-bottom:2.5rem; text-align:center; }
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gallery-item { aspect-ratio:4/3; overflow:hidden; cursor:pointer; border-radius:var(--r); transition:transform .35s, box-shadow .35s; position:relative; background:var(--bg3); }
.gallery-item img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s; }
@media(hover:hover){ .gallery-item:hover { transform:scale(1.02); box-shadow:0 24px 60px rgba(0,0,0,.14); } }
@media(hover:hover){ .gallery-item:hover img { transform:scale(1.04); } }
.gallery-more-wrap { display:flex; justify-content:center; margin-top:2.5rem; }
.gallery-more-btn {
  display:inline-flex; align-items:center; gap:.8rem;
  padding:1.1rem 3rem;
  background:var(--bg); border:1px solid var(--accent);
  color:var(--accent); border-radius:50px; cursor:pointer;
  font-family:'Cormorant Garamond',serif;
  font-size:1.46rem; font-weight:300; letter-spacing:.08em; white-space:nowrap;
  transition:background .3s, color .3s, box-shadow .3s;
  box-shadow:0 4px 20px rgba(176,125,98,.1);
}
@media(hover:hover){ .gallery-more-btn:hover { background:var(--accent); color:#fff; box-shadow:0 8px 32px rgba(176,125,98,.25); } }
.gallery-more-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; transition:transform .3s; }
@media(hover:hover){ .gallery-more-btn:hover svg { transform:rotate(90deg); } }
@media (max-width:480px) {
  .gallery-more-btn { font-size:1.1rem; padding:1rem 1.8rem; letter-spacing:.04em; gap:.6rem; }
  .gallery-more-btn svg { width:18px; height:18px; }
}

/* ── LIGHTBOX ── */
.lightbox { display:none; position:fixed; inset:0; z-index:1000; background:rgba(20,16,12,.96); align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lb-figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:.9rem; max-width:88vw; max-height:88vh; }
.lb-img { max-width:88vw; max-height:85vh; min-height:0; border-radius:var(--r); object-fit:contain; animation:lbIn .25s ease; }
/* Bijschrift onder de foto — donkere pill met witte tekst zodat het leesbaar
   blijft op zowel lichte als donkere lightbox-achtergronden (per thema anders) */
.lb-caption { display:none; flex-shrink:0; max-width:min(88vw,68ch); text-align:center; color:#fff; background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); padding:.55rem 1.15rem; border-radius:14px; font-size:.95rem; line-height:1.45; }
.lb-caption.show { display:block; }
@keyframes lbIn { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }
.lb-close { position:fixed; top:2rem; right:2.5rem; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); color:#fff; width:44px; height:44px; border-radius:50%; font-size:1.4rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
@media(hover:hover){ .lb-close:hover { background:rgba(255,255,255,.25); } }
.lb-prev, .lb-next { position:fixed; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:#fff; width:52px; height:52px; border-radius:50%; font-size:1.6rem; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s; }
@media(hover:hover){ .lb-prev:hover, .lb-next:hover { background:rgba(255,255,255,.25); } }
.lb-prev { left:2rem; } .lb-next { right:2rem; }
.lb-counter { position:fixed; bottom:2rem; left:50%; transform:translateX(-50%); color:rgba(255,255,255,.55); font-size:.8rem; letter-spacing:.15em; }
/* Mobiel: compacte navigatie — de knoppen dekten voorheen een flink deel van
   de foto af. !important omdat thema's .lb-prev/.lb-next zonder media query
   overschrijven (Ibiza zet ze bijvoorbeeld op 72px). */
@media(max-width:768px){
  /* Alleen formaat en positie forceren — kleur en vorm blijven van het thema. */
  .lb-prev, .lb-next { width:38px !important; height:38px !important; font-size:1.1rem !important; }
  .lb-prev { left:.5rem !important; } .lb-next { right:.5rem !important; }
  .lb-close { width:40px; height:40px; font-size:1.2rem; top:1rem; right:1rem; }
  .lb-img { touch-action:pan-y; }
}
/* Desktop: grotere, beter zichtbare lightbox-navigatie (sneller vindbaar) */
@media(min-width:769px){
  .lb-prev, .lb-next { width:70px; height:70px; font-size:2.2rem; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
  @media(hover:hover){ .lb-prev:hover, .lb-next:hover { background:rgba(255,255,255,.32); } }
  .lb-close { width:58px; height:58px; font-size:1.7rem; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.4); }
}

/* ── LOCATION ── */
.location { display:grid; grid-template-columns:1fr 1fr; }
.location-image { position:relative; overflow:hidden; min-height:560px; }
.location-image img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.location-text { background:var(--bg3); padding:8rem 5.5rem; display:flex; flex-direction:column; justify-content:center; }
.location-body { font-size:1.18rem; font-weight:300; line-height:1.85; color:var(--muted); margin-bottom:2.5rem; }
.vz-subtekst { margin-top:.8rem; font-size:1.15rem; font-weight:300; color:var(--text); line-height:1.8; max-width:680px; margin-left:auto; margin-right:auto; }
.location-list { list-style:none; display:flex; flex-direction:column; }
.location-list li { display:flex; align-items:center; gap:1.2rem; font-size:1.11rem; font-weight:300; color:var(--text); padding:1rem 0; border-bottom:1px solid var(--border); }
.location-list li:last-child { border-bottom:none; }
/* Tablet (iPad): twee kolommen worden hier te krap — de tekstkolom knelt en de
   foto wordt een smalle strook. Stapel de sectie zoals op mobiel, met een
   ruimere fotohoogte en compactere tekst-padding. */
@media(min-width:769px) and (max-width:1024px){
  .location { grid-template-columns:1fr; }
  .location-image { min-height:380px; }
  .location-text { padding:4rem 3rem; }
}
.dist { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:400; color:var(--accent); min-width:85px; flex-shrink:0; white-space:nowrap; }

/* ── TIPS ── */
.tips { padding:8rem 5rem; background:var(--bg); text-align:center; }
.tips-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:3rem; }
.tip-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:2.5rem 2rem; text-align:center; }
.tip-header { display:flex; flex-direction:column; align-items:center; gap:.6rem; margin-bottom:.8rem; }
.tip-icon-svg { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; border:1px solid var(--border); }
.tip-icon-svg svg { width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.tip-card h3 { margin:0 0 .8rem; font-size:1.7rem; font-weight:400; color:var(--text); }
.tip-card p { font-size:.95rem; color:var(--muted); font-weight:300; line-height:1.7; }

/* ── HOUSE RULES ── */
.rules { padding:8rem 5rem; background:var(--bg2); }
.rules-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:3rem; }
.rule-item { display:flex; gap:1rem; align-items:flex-start; padding:1.5rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); }
.rule-icon { width:40px; height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg3); border-radius:50%; }
.rule-icon svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.rule-text h4 { font-size:1rem; font-weight:500; color:var(--text); margin-bottom:.3rem; }
.rule-text p { font-size:.9rem; color:var(--muted); font-weight:300; line-height:1.6; }

.cal-book-form { margin:1.5rem 0 1rem; padding:1.8rem; background:var(--bg); border:1.5px solid var(--accent-lt); border-radius:var(--r); text-align:left; box-shadow:0 4px 20px rgba(176,125,98,.08); }
.cal-book-title { font-family:'Cormorant Garamond',serif; font-size:1.8rem; font-weight:400; color:var(--text); margin-bottom:.4rem; text-align:center; }
.cal-book-sub { font-size:.9rem; color:var(--muted); text-align:center; margin-bottom:1.4rem; font-weight:300; }
.cal-book-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cal-book-form .form-group label { font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text); font-weight:500; }
.cal-book-form .form-group input,
.cal-book-form .form-group textarea { background:#fff; border:1.5px solid var(--border); color:var(--text); font-weight:400; }
.cal-book-form .form-group input::placeholder,
.cal-book-form .form-group textarea::placeholder { color:#bbb; }
.cal-book-form .form-group input:focus,
.cal-book-form .form-group textarea:focus { border-color:var(--accent); }
@media(max-width:600px){ .cal-book-grid { grid-template-columns:1fr; } }

/* ── CALENDAR ── */
.calendar-section { padding:8rem 5rem; background:var(--bg); }
.calendar-inner { max-width:940px; margin:0 auto; }
.calendar-header { text-align:center; margin-bottom:3rem; }
.calendar-sub { font-size:1.05rem; color:var(--muted); font-weight:300; }
.cal-legend { display:flex; gap:2.5rem; justify-content:center; margin-bottom:2.5rem; flex-wrap:wrap; }
.leg { display:flex; align-items:center; gap:.65rem; font-size:1rem; color:var(--muted); font-weight:300; }
.leg-dot { width:15px; height:15px; border-radius:50%; flex-shrink:0; }
.leg-dot.free   { background:transparent; border:2px solid var(--border); }
.leg-dot.booked { background:var(--accent-lt); }
.leg-dot.today  { background:var(--text); }
.cal-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.cal-month { background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); padding:2rem; }
.cal-month-title { font-family:'Cormorant Garamond',serif; font-size:1.7rem; font-weight:400; color:var(--text); text-align:center; margin-bottom:1.4rem; display:flex; align-items:center; justify-content:space-between; }
.cal-nav-btn { background:none; border:1px solid var(--border); cursor:pointer; color:var(--accent); font-size:1.1rem; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
@media(hover:hover){ .cal-nav-btn:hover { background:var(--bg3); } }
.cal-weekdays { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; margin-bottom:.5rem; }
.cal-weekdays span { font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:400; padding:.3rem 0; }
.cal-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.cal-day { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:1.05rem; font-weight:300; color:#2e2a25; border-radius:50%; cursor:pointer; transition:background .15s; position:relative; user-select:none; -webkit-user-select:none; touch-action:manipulation; }
/* Tijdens drag-select moeten kinderen geen pointer events vangen — anders kan een
   pointer over een <small>/<span> een cell-grens kruisen zonder dat we het merken */
.cal-day > * { pointer-events:none; }
@media(hover:hover){ .cal-day:hover:not(.booked):not(.empty):not(.past) { background:var(--bg3); } }
.cal-day.empty { cursor:default; }
.cal-day.today  { background:#2e2a25; color:#fff; font-weight:400; }
.cal-day.booked { background:var(--accent-lt); color:#2e2a25; cursor:not-allowed; font-weight:400; }
/* Desktop: tooltipje "Bezet" boven de dag (tekst komt vertaald uit data-bezet).
   Op touch blijft de bestaande klik-bubbel (toonBezetHint) het werk doen. */
@media(hover:hover){
  .cal-day.booked::after { content:attr(data-bezet); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translate(-50%,4px); background:#2e2a25; color:#fff; font-size:.68rem; font-family:'DM Sans',sans-serif; letter-spacing:.08em; text-transform:uppercase; padding:.32rem .6rem; border-radius:8px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; z-index:6; }
  .cal-day.booked:hover::after { opacity:1; transform:translate(-50%,0); }
}
.cal-day.selected { background:var(--accent); color:#fff; font-weight:400; }
.cal-day.in-range { background:rgba(176,125,98,.12); border-radius:0; color:#2e2a25; }
.cal-day.range-start { border-radius:50% 0 0 50%; }
.cal-day.range-end   { border-radius:0 50% 50% 0; }
.cal-day.past { color:#ccc; cursor:default; }
.cal-result { margin-top:1.5rem; padding:2.2rem; background:var(--bg2); border:1px solid var(--border); border-radius:var(--r); text-align:center; display:none; }
.cal-result.show { display:block; }
.cal-result-title { font-family:'Cormorant Garamond',serif; font-size:2.3rem; color:#2e2a25; margin-bottom:.5rem; }
.cal-result-end { display:block; }
.cal-result-nights { font-size:1.15rem; color:#6e6861; font-weight:300; margin-bottom:.6rem; }
.cal-result-price { font-family:'Cormorant Garamond',serif; font-size:3rem; font-weight:300; color:#2e2a25; margin-bottom:1rem; }
.cal-result-price small { font-family:'DM Sans',sans-serif; font-size:.95rem; color:#6e6861; font-weight:300; display:block; margin-top:.5rem; line-height:1.45; }
.cal-result-price small .excl-fees { display:block; font-size:.85rem; opacity:.85; }
.cal-result-excl { display:none; margin-bottom:1.2rem; padding:.8rem 1.2rem; background:var(--bg3); border-radius:12px; text-align:left; font-size:.9rem; color:#6e6861; font-weight:300; }
.excl-label { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:#6e6861; margin-bottom:.5rem; }
.excl-row { display:flex; align-items:baseline; gap:.6rem; color:var(--text); padding:.45rem 0; border-bottom:1px solid var(--border); }
.excl-row:last-child { border-bottom:none; }
/* Bedragen in tekstkleur i.p.v. accent: de accentkleur is in meerdere thema's
   te licht op de zachte achtergrond van dit blok. */
.excl-row strong { margin-left:auto; font-weight:500; color:var(--text); white-space:nowrap; font-variant-numeric:tabular-nums; }
/* Melding bij het aantikken van een bezette datum */
.cal-bezet-hint { position:fixed; z-index:400; max-width:min(15rem,80vw); background:#2e2a25; color:#fff; font-family:'DM Sans',sans-serif; font-size:.82rem; font-weight:400; letter-spacing:0; text-transform:none; line-height:1.35; text-align:center; padding:.5rem .85rem; border-radius:10px; pointer-events:none; opacity:0; transform:translate(-50%,0); transition:opacity .18s ease, transform .18s ease; box-shadow:0 6px 20px rgba(0,0,0,.18); }
.cal-bezet-hint::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:6px solid transparent; border-top-color:#2e2a25; }
.cal-bezet-hint.show { opacity:1; transform:translate(-50%,-8px); }
.cal-day.bezet-shake { animation:calBezetShake .34s ease; }
@keyframes calBezetShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-3px)} 50%{transform:translateX(3px)} 75%{transform:translateX(-2px)} }
@media(prefers-reduced-motion:reduce){ .cal-day.bezet-shake { animation:none; } .cal-bezet-hint { transition:none; } }
.cal-clear { background:none; border:1px solid var(--border); color:var(--muted); padding:.7rem 1.6rem; cursor:pointer; font-size:.76rem; letter-spacing:.15em; text-transform:uppercase; border-radius:50px; transition:border-color .2s, color .2s; }
@media(hover:hover){ .cal-clear:hover { border-color:var(--accent); color:var(--accent); } }

/* ── AANVRAAG-POPUP (alle thema's) ── */
.cs-book-open { display:inline-block; width:100%; margin:0 0 1rem; padding:1.2rem 2rem; background:var(--accent); color:#fff; border:none; cursor:pointer; font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; border-radius:50px; transition:filter .2s, transform .2s, box-shadow .2s; font-family:inherit; }
@media(hover:hover){ .cs-book-open:hover { filter:brightness(.92); transform:translateY(-1px); box-shadow:0 6px 18px rgba(46,42,37,.18); } }
.cs-book-overlay { position:fixed; inset:0; z-index:400; background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:1.2rem; }
.cs-book-overlay.open { display:flex; }
.cs-book-modal { position:relative; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); max-width:620px; width:100%; max-height:88vh; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(20,16,12,.28); }
.cs-book-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:1.2rem; overscroll-behavior:contain; }
.cs-book-modal .cal-book-form { margin:0; padding:1.2rem .6rem .4rem; border:none; background:transparent; box-shadow:none; }
.cs-book-modal .contact-btn { font-size:1.05rem; padding:1.35rem 2rem; }
.cs-book-close { position:absolute; top:.9rem; right:.9rem; width:44px; height:44px; border:1px solid var(--border); border-radius:50%; background:var(--bg); font-size:1.6rem; line-height:1; color:var(--text); z-index:3; display:flex; align-items:center; justify-content:center; box-shadow:0 2px 10px rgba(20,16,12,.1); cursor:pointer; }
@media(hover:hover){ .cs-book-close:hover { background:var(--bg2); } }
.cs-book-modal::after { content:''; position:absolute; left:1px; right:1px; bottom:1px; height:76px; border-radius:0 0 calc(var(--r) - 1px) calc(var(--r) - 1px); background:linear-gradient(transparent, var(--bg) 72%); pointer-events:none; z-index:2; opacity:1; transition:opacity .25s; }
.cs-book-modal.at-end::after { opacity:0; }
/* Scroll-hint: op mobiel is niet zichtbaar dat het formulier doorloopt */
.cs-book-hint { position:absolute; left:50%; bottom:.9rem; transform:translate(-50%,0); z-index:3; display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:none; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(20,16,12,.25); transition:opacity .25s; }
.cs-book-hint svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.cs-book-modal.can-scroll .cs-book-hint { display:flex; animation:cs-book-bob 1.9s ease-in-out infinite; }
.cs-book-modal.can-scroll.scrolled .cs-book-hint { animation:none; }
.cs-book-modal.at-end .cs-book-hint { opacity:0; pointer-events:none; }
@keyframes cs-book-bob { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,5px); } }
@media(prefers-reduced-motion:reduce){ .cs-book-modal.can-scroll .cs-book-hint { animation:none; } }

/* ── CONTACT ── */
.contact-section { padding:9rem 5rem; background:var(--bg2); text-align:center; }
.contact-sub { font-size:1.05rem; color:var(--muted); font-weight:300; margin-bottom:3.5rem; }
.contact-card { max-width:720px; width:100%; margin:0 auto; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:3.5rem; box-shadow:0 8px 40px rgba(0,0,0,.05); }
.contact-form { display:flex; flex-direction:column; gap:1.4rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.form-group { display:flex; flex-direction:column; gap:.5rem; }
.form-group label { font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text); font-weight:500; }
.form-group input, .form-group textarea { background:var(--bg2); border:1px solid var(--border); border-radius:12px; padding:.9rem 1.2rem; font-family:'DM Sans',sans-serif; font-size:1rem; font-weight:300; color:var(--text); outline:none; transition:border-color .2s, box-shadow .2s; resize:none; }
.form-group input:focus, .form-group textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(176,125,98,.1); }
.form-group input.field-invalid, .form-group textarea.field-invalid { border-color:#c0392b; box-shadow:0 0 0 3px rgba(192,57,43,.12); }
.form-group input::placeholder, .form-group textarea::placeholder { color:var(--muted); opacity:.85; }
.form-success { display:none; margin-top:1rem; color:var(--text); font-size:1.25rem; font-weight:500; text-align:center; padding:1rem; background:var(--bg3); border-radius:var(--r); }
.form-success.show { display:block; }
.form-error { display:none; margin-top:.5rem; color:#c0392b; font-size:.9rem; font-weight:300; text-align:center; background:#fdf0ee; padding:.8rem 1rem; border-radius:var(--r); }
.form-error.show { display:block; }
.contact-btn { display:inline-block; width:100%; padding:1.2rem 2rem; background:var(--accent); color:#fff; text-decoration:none; font-size:.95rem; letter-spacing:.18em; text-transform:uppercase; font-weight:600; border:none; cursor:pointer; border-radius:50px; transition:background .25s; font-family:'DM Sans',sans-serif; }
@media(hover:hover){ .contact-btn:hover { background:var(--text); } }

/* ── REVIEWS ── */
.reviews-section { padding:4rem 5rem 8rem; background:var(--bg2); }
.reviews-inner { max-width:1100px; margin:0 auto; }
.reviews-score {
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; flex-wrap:wrap; margin-top:1.5rem;
}
.score-num {
  font-family:'Cormorant Garamond',serif;
  font-size:4rem; font-weight:300; color:var(--text); line-height:1;
}
.score-stars { font-size:1.6rem; color:#f4b400; letter-spacing:.1rem; }
.score-total { font-size:.9rem; color:var(--muted); font-weight:300; }
.score-link {
  display:inline-block; padding:.6rem 1.4rem;
  border:1px solid var(--border); border-radius:50px;
  font-size:.78rem; color:var(--muted); text-decoration:none;
  letter-spacing:.08em; transition:border-color .2s, color .2s;
}
@media(hover:hover){ .score-link:hover { border-color:var(--accent); color:var(--accent); } }

/* Reviews als horizontale slider — 3 zichtbaar op desktop, scrolt 1 per keer */
.reviews-slider-wrap {
  position:relative; margin-top:2rem;
}
.reviews-grid {
  display:flex; gap:1.4rem; overflow-x:auto;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:.4rem .2rem;
}
.reviews-grid::-webkit-scrollbar { display:none; }
.review-card {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--r);
  padding:2rem; display:flex; flex-direction:column; gap:1rem;
  flex:0 0 calc((100% - 2.8rem) / 3); scroll-snap-align:start;
  min-height:280px;
}
.review-header { display:flex; align-items:center; gap:1rem; }
.review-avatar {
  width:46px; height:46px; border-radius:50%; object-fit:cover;
  flex-shrink:0; background:var(--bg3);
}
.review-avatar-placeholder {
  width:46px; height:46px; border-radius:50%; flex-shrink:0;
  background:var(--accent-lt); display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-size:1.3rem; color:var(--accent); font-weight:400;
}
.review-name { font-size:1rem; font-weight:400; color:var(--text); }
.review-date { font-size:.78rem; color:var(--muted); font-weight:300; }
.review-stars { font-size:1rem; color:#f4b400; letter-spacing:.05rem; }
.review-text {
  font-size:.95rem; font-weight:300; line-height:1.75; color:var(--muted);
  flex:1;
}
.reviews-loading { text-align:center; color:var(--muted); font-size:.95rem; font-weight:300; padding:3rem; width:100%; }

/* Pijl-knoppen */
.reviews-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border-radius:50%; background:#fff;
  border:1px solid var(--border); cursor:pointer; z-index:5;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
  transition:background .15s, border-color .15s, opacity .15s;
  color:var(--text); font-family:'DM Sans',sans-serif;
}
@media(hover:hover){ .reviews-arrow:hover { border-color:var(--accent); color:var(--accent); } }
.reviews-arrow:disabled { opacity:.35; cursor:default; }
.reviews-arrow.prev { left:-22px; }
.reviews-arrow.next { right:-22px; }
.reviews-arrow svg { width:18px; height:18px; }

/* Dots */
.reviews-dots {
  display:flex; justify-content:center; align-items:center; gap:.15rem; margin-top:1.5rem;
}
/* De knop is het tikdoel (>=24x24px, WCAG 2.2); de zichtbare stip zit in ::before. */
.reviews-dot {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:24px; height:44px; padding:0; border:none; background:none; cursor:pointer;
}
.reviews-dot::before {
  content:''; width:8px; height:8px; border-radius:50%; background:var(--border);
  transition:background .2s, width .2s;
}
.reviews-dot.active::before { background:var(--accent); width:24px; border-radius:4px; }
@media(hover:hover){ .reviews-dot:hover:not(.active)::before { background:var(--muted); } }

/* Voorbeeldreviews — duidelijk gemarkeerd, niet als echt */
.reviews-voorbeeld-notice {
  max-width:680px; margin:0 auto 2rem; text-align:center;
  font-size:.82rem; color:var(--muted); font-style:italic;
  padding:.7rem 1.2rem; border:1px dashed var(--border); border-radius:var(--r);
  background:var(--bg2);
}
.review-card.is-voorbeeld { position:relative; }
.review-voorbeeld-badge {
  position:absolute; top:.8rem; right:.8rem;
  font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600;
  color:var(--muted); background:var(--bg2); border:1px solid var(--border);
  padding:.25rem .6rem; border-radius:999px;
}

@media(max-width:1100px){
  .review-card { flex:0 0 calc((100% - 1.4rem) / 2); }
}

@media(max-width:768px){
  .reviews-section { padding:2rem 1.5rem 4rem; }
  .reviews-grid { gap:1rem; padding-bottom:1rem; }
  .review-card { flex:0 0 85vw; max-width:340px; }
  .reviews-score { gap:1rem; }
  .score-num { font-size:3rem; }
  /* Op mobiel pijlen verbergen — touch-swipe volstaat */
  .reviews-arrow { display:none; }
  /* Grotere zichtbare stip op touch; het tikdoel blijft de 24x44px-knop */
  .reviews-dots { gap:.15rem; margin-top:1.2rem; }
  .reviews-dot::before { width:11px; height:11px; }
  .reviews-dot.active::before { width:34px; border-radius:6px; }
}

/* ── VOORZIENINGEN ── */
.voorzieningen-section { padding:5rem 5rem; background:var(--bg2); }
.voorzieningen-inner { max-width:1100px; margin:0 auto; }
.vz-site-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.vz-site-item { display:flex; align-items:center; gap:.9rem; padding:.65rem 1rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); font-size:.95rem; font-weight:300; color:var(--text); }
.vz-site-icon { width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:50%; border:1px solid var(--border); }
.vz-site-icon svg { width:18px; height:18px; stroke:var(--accent); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.vz-hidden { display:none !important; }

/* ── SLAAPINDELING (kamerkaarten in voorzieningen-sectie) ──
   Bewust meer gewicht dan een gemiddelde sub-sectie: de slaapindeling is na
   de foto's het belangrijkste beslissingscriterium voor gasten. */
.kamer-wrap { margin-top:3.4rem; padding:3.2rem 2.5rem 2.8rem; background:var(--bg3); border-radius:var(--r); position:relative; }
/* Pijlknoppen naast de kamerslider (door JS toegevoegd; alleen desktop).
   .kamer-pijl-uit i.p.v. verbergen: een verdwijnende knop laat de layout
   verspringen en 'einde bereikt' blijft zo zichtbaar. */
.kamer-pijl { display:none; }
@media(min-width:769px){
  .kamer-pijl { position:absolute; top:50%; transform:translateY(-50%); z-index:2;
    display:flex; align-items:center; justify-content:center;
    width:52px; height:52px; padding:0; border-radius:50%; cursor:pointer;
    background:var(--bg); border:1px solid var(--border); color:var(--text);
    box-shadow:0 4px 16px rgba(20,16,12,.10); transition:all .2s; }
  .kamer-pijl svg { width:24px; height:24px; }
  .kamer-pijl-prev { left:.9rem; }
  .kamer-pijl-next { right:.9rem; }
  .kamer-pijl:hover { border-color:var(--accent); color:var(--accent); }
  .kamer-pijl-uit { opacity:.25; cursor:default; pointer-events:none; }
  .kamer-pijl-verborgen { display:none; }
}
/* muted i.p.v. accent: de wrap heeft een bg3-achtergrond en daar haalt de
   accentkleur (goud op beige) te weinig contrast, zeker in Pretty Pink */
.kamer-label { text-align:center; font-family:'DM Sans',sans-serif; font-size:1.08rem; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem; }
.kamer-samenvatting { text-align:center; font-size:1.3rem; font-weight:300; color:var(--text); margin-bottom:2.1rem; }
/* Nooit een tweede regel kaarten: passen ze niet naast elkaar, dan wordt het
   een horizontale slider (zelfde patroon als mobiel). De auto-marges op de
   eerste/laatste kaart centreren zolang alles past en staan scrollen toe
   zodra dat niet meer zo is. De dots komen uit initKamerSlider(), die zelf
   al meet of er daadwerkelijk te scrollen valt. */
.kamer-grid { display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:1.2rem; overflow-x:auto; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; padding-bottom:.3rem; scrollbar-width:none; }
.kamer-grid::-webkit-scrollbar { display:none; }
.kamer-grid .kamer-card:first-child { margin-left:auto; }
.kamer-grid .kamer-card:last-child { margin-right:auto; }
.kamer-card { flex:0 0 300px; min-width:240px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:2.4rem 1.6rem 2.1rem; text-align:center; scroll-snap-align:center; }
.kamer-icon { width:68px; height:68px; margin:0 auto 1.2rem; display:flex; align-items:center; justify-content:center; background:var(--bg2); border:1px solid var(--border); border-radius:50%; color:var(--accent); }
.kamer-icon svg { width:33px; height:33px; }
.kamer-naam { font-family:'DM Sans',sans-serif; font-size:.84rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:.65rem; }
.kamer-bedden { font-size:1.14rem; font-weight:300; color:var(--text); line-height:1.65; }
.kamer-bedden span { display:block; }
.kamer-dots { display:flex; justify-content:center; gap:.45rem; margin-top:1.1rem; }
.kamer-dots:empty { display:none; }
/* muted+opacity i.p.v. border-kleur: border op de bg3-wrap was onzichtbaar,
   waardoor alleen de actieve (accent)dot leek te bestaan */
.kamer-dots button { width:10px; height:10px; padding:0; border:none; border-radius:50%; background:var(--muted); opacity:.35; cursor:pointer; transition:opacity .2s, background .2s, transform .2s; }
.kamer-dots button.active { background:var(--accent); opacity:1; transform:scale(1.25); }
.vz-meer-btn {
  display:inline-flex; align-items:center; gap:.6rem; margin-top:1.2rem;
  background:none; border:1px solid var(--border); border-radius:50px;
  padding:.75rem 1.8rem; cursor:pointer; font-family:'DM Sans',sans-serif;
  font-size:1rem; color:var(--muted); font-weight:300; transition:all .2s;
}
@media(hover:hover){ .vz-meer-btn:hover { border-color:var(--accent); color:var(--accent); } }
#vzMeerWrap { grid-column:1 / -1; text-align:center; }

/* ── Compacte voorzieningen (per site aan te zetten via ws-vz-compact) ──
   Rustige lijst zonder kaders, grotere leesbare tekst en minder items in beeld;
   de rest komt achter de knop vandaan. Neemt fors minder hoogte in beslag. */
.vz-compact .vz-site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 3rem; }
.vz-compact .vz-site-item { background:none; border:0; border-radius:0; padding:.9rem 0; gap:1.1rem; font-size:1.08rem; }
.vz-compact .vz-site-item + .vz-site-item { border-top:1px solid var(--border); }
.vz-compact .vz-site-icon { width:26px; height:26px; background:none; border:0; border-radius:0; }
.vz-compact .vz-site-icon svg { width:24px; height:24px; stroke:var(--text); stroke-width:1.4; }
.vz-compact #vzMeerWrap { text-align:center; }
.vz-compact .vz-meer-btn { width:100%; max-width:460px; justify-content:center; padding:1rem 1.5rem; border-radius:var(--r); color:var(--text); }

/* ── Popup met alle voorzieningen (mobiel) ── */
.vz-overlay { position:fixed; inset:0; z-index:400; background:rgba(20,16,12,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); display:none; align-items:flex-end; justify-content:center; }
.vz-overlay.open { display:flex; }
.vz-modal { background:var(--bg); width:100%; max-height:88vh; border-radius:var(--r-lg, 18px) var(--r-lg, 18px) 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -10px 40px rgba(0,0,0,.2); }
.vz-modal-kop { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.2rem 1.4rem; border-bottom:1px solid var(--border); flex-shrink:0; }
.vz-modal-kop h3 { font-size:1.15rem; font-weight:400; margin:0; color:var(--text); }
.vz-modal-sluit { width:44px; height:44px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:none; border:1px solid var(--border); border-radius:50%; color:var(--text); cursor:pointer; }
.vz-modal-lijst { overflow-y:auto; -webkit-overflow-scrolling:touch; padding:.4rem 1.4rem 2.6rem; }
.vz-modal { position:relative; }
.vz-modal::after { content:''; position:absolute; left:0; right:0; bottom:0; height:76px; background:linear-gradient(transparent, var(--bg) 72%); pointer-events:none; z-index:2; opacity:0; transition:opacity .25s; }
.vz-modal.can-scroll::after { opacity:1; }
.vz-modal.at-end::after { opacity:0; }
.vz-modal-hint { position:absolute; left:50%; bottom:.9rem; transform:translate(-50%,0); z-index:3; display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(20,16,12,.25); transition:opacity .25s; }
.vz-modal-hint svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.vz-modal.can-scroll .vz-modal-hint { display:flex; animation:cs-book-bob 1.9s ease-in-out infinite; }
.vz-modal.can-scroll.scrolled .vz-modal-hint { animation:none; }
.vz-modal.at-end .vz-modal-hint { opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce){ .vz-modal.can-scroll .vz-modal-hint { animation:none; } }
.vz-modal-lijst .vz-site-item { display:flex !important; background:none; border:0; border-radius:0; padding:.9rem 0 !important; gap:1rem; font-size:1.05rem !important; }
.vz-modal-lijst .vz-site-item + .vz-site-item { border-top:1px solid var(--border); }
.vz-modal-lijst .vz-site-icon { width:26px; height:26px; background:none; border:0; }
.vz-modal-lijst .vz-site-icon svg { width:23px; height:23px; stroke:var(--text); stroke-width:1.4; }
@media(min-width:769px){
  .vz-overlay { align-items:center; padding:2rem; }
  .vz-modal { max-width:560px; border-radius:var(--r-lg, 18px); }
}

@media(max-width:768px){
  .voorzieningen-section { padding:3.5rem 1.2rem; }
  /* minmax(0,1fr) i.p.v. 1fr — zo mogen cellen smaller worden dan hun content
     en valt de tweede kolom niet meer buiten beeld bij lange voorzieningennamen */
  .vz-site-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
  .vz-site-item { gap:.6rem; padding:.55rem .7rem !important; font-size:.8rem !important; min-width:0; overflow:visible; min-height:44px; box-sizing:border-box; align-items:center; white-space:normal; }
  .vz-site-item > *:last-child { min-width:0; white-space:normal; overflow-wrap:anywhere; word-break:break-word; hyphens:auto; line-height:1.25; }
  .vz-site-icon { width:30px; height:30px; }
  .vz-site-icon svg { width:15px; height:15px; }
  /* Compacte variant op mobiel: één kolom, ruime regels, grote tekst.
     !important omdat de reguliere mobiele regels hierboven dat ook doen. */
  .vz-compact .vz-site-grid { grid-template-columns:1fr; gap:0; }
  .vz-compact .vz-site-item { padding:.85rem 0 !important; font-size:1.05rem !important; gap:1rem; min-height:0; }
  .vz-compact .vz-site-icon { width:26px; height:26px; }
  .vz-compact .vz-site-icon svg { width:23px; height:23px; }
  .vz-compact .vz-meer-btn { max-width:none; font-size:.98rem; }
  /* Full-bleed band: de slaapindeling leest zo als eigen sectie i.p.v. als
     staartje onder de voorzieningen (voorzieningen-section heeft 1.2rem zijpadding) */
  .kamer-wrap { margin:2.4rem -1.2rem 0; padding:2.4rem 1.2rem 2.2rem; border-radius:0; }
  .kamer-label { font-size:.95rem; }
  .kamer-samenvatting { font-size:1.12rem; margin-bottom:1.4rem; }
  /* Horizontale slider: full-bleed scroll met snap; auto-marges centreren
     de kaarten zolang ze passen, en staan scrollen toe zodra het niet past */
  .kamer-grid { scroll-snap-type:x mandatory; gap:.6rem; margin:0 -1.2rem; padding:0 1.2rem .3rem; }
  .kamer-card { flex:0 0 58vw; min-width:0; max-width:none; box-sizing:border-box; scroll-snap-align:center; padding:1.6rem .9rem 1.4rem; }
  /* 1 of 2 kamers: geen slider nodig — kaarten vullen samen de volle breedte */
  .kamer-grid:not(.kamer-scroll) { flex-wrap:wrap; overflow:visible; margin:0; padding:0; gap:.7rem; }
  .kamer-grid:not(.kamer-scroll) .kamer-card { flex:1 1 0; margin:0; padding:1.8rem .8rem 1.5rem; }
  .kamer-card:first-child { margin-left:auto; }
  .kamer-card:last-child { margin-right:auto; }
  /* Bij 3+ kamers: links uitlijnen zodat de derde kaart half in beeld staat
     (duidelijke swipe-hint) + stippen eronder */
  .kamer-scroll .kamer-card:first-child { margin-left:0; }
  .kamer-scroll .kamer-card:last-child { margin-right:0; }
  .kamer-scroll .kamer-card { scroll-snap-align:start; scroll-margin-left:1.2rem; }
  .kamer-dots { margin-top:.9rem; }
  .kamer-icon { width:52px; height:52px; margin-bottom:.85rem; }
  .kamer-icon svg { width:25px; height:25px; }
  .kamer-naam { font-size:.72rem; letter-spacing:.11em; }
  .kamer-bedden { font-size:.98rem; line-height:1.5; }
}

/* ── SEO TEKST ── */
.seo-section { padding:7rem 5rem; background:var(--bg); }
.seo-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.seo-block h4 { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:300; color:var(--text); margin-bottom:1.2rem; line-height:1.25; }
.seo-block p { font-size:1.06rem; font-weight:300; line-height:1.85; color:var(--muted); margin-bottom:1rem; }
.seo-block p:last-child { margin-bottom:0; }
.seo-block strong { font-weight:500; color:var(--text); }

/* ── FAQ ── */
.faq-section { padding:7rem 5rem; background:var(--bg2); }
.faq-inner { max-width:900px; margin:0 auto; }
.faq-grid { display:flex; flex-direction:column; gap:1rem; }
.faq-item { background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:2rem; }
.faq-item h3 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:400; color:var(--text); margin-bottom:.8rem; }
.faq-item p { font-size:.95rem; font-weight:300; line-height:1.75; color:var(--muted); }

/* FAQ accordion toggle (gebruikt op mobiel + desktop bij designs die FAQ inklappen) */
.faq-toggle {
  flex-shrink:0; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:var(--bg2);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
.faq-toggle svg {
  width:14px; height:14px; stroke:var(--muted); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
  transition:transform .25s;
}
.faq-item.open .faq-toggle { background:var(--accent-lt); border-color:var(--accent); }
.faq-item.open .faq-toggle svg { transform:rotate(180deg); stroke:var(--accent); }

@media(max-width:768px){
  .faq-section { padding:4rem 1.5rem; }
  .faq-item { cursor:pointer; padding:1.2rem 1.4rem; }
  .faq-item h3 {
    font-size:1.1rem; margin-bottom:0;
    display:flex; justify-content:space-between; align-items:center; gap:.8rem;
  }
  .faq-item div[itemprop="acceptedAnswer"] {
    overflow:hidden; max-height:0;
    transition:max-height .35s ease, margin-top .35s;
  }
  .faq-item.open div[itemprop="acceptedAnswer"] {
    max-height:600px; margin-top:.9rem;
  }
}

@media(max-width:768px){
  .seo-inner { grid-template-columns:1fr; gap:2rem; }
  .seo-section { padding:4rem 1.5rem; }
}
.address-section { padding:8rem 5rem; background:var(--bg3); }
.address-inner { max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1fr 1.6fr; gap:4rem; align-items:start; }
.address-detail { font-size:1.15rem; font-weight:300; line-height:2; color:var(--text); margin:1.5rem 0 1rem; }
.address-detail strong { font-weight:400; }
.address-sub { font-size:1rem; color:var(--muted); font-weight:300; line-height:1.7; }
.address-map { height:380px; border-radius:var(--r); overflow:hidden; border:1px solid var(--border); box-shadow:0 8px 32px rgba(0,0,0,.06); }

/* ── FOOTER ── */
footer { background:var(--text); background:color-mix(in srgb, var(--accent), #000 50%); color:rgba(255,255,255,.85); padding:3rem 5rem; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:1rem; font-size:.8rem; font-weight:300; letter-spacing:.08em; }
.footer-logo { font-family:'Cormorant Garamond',serif; font-size:2.1rem; font-weight:300; color:#fff; letter-spacing:.14em; }
.footer-logo-img { height:100px; width:auto; display:block; margin:0 auto .6rem; }
footer a { color:rgba(255,255,255,.7); text-decoration:none; margin:0 .9rem; font-size:.85rem; transition:color .2s; }
@media(hover:hover){ footer a:hover { color:#fff; } }
.footer-copyright { font-size:.78rem; color:rgba(255,255,255,.6); display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:.2rem; }
.footer-copy-line a { color:rgba(255,255,255,.45); margin-left:0; }
.footer-sep { display:inline-block; }
.footer-licentie { white-space:nowrap; }
.footer-branding { margin-top:1rem; font-size:.82rem; }
.footer-branding a { color:inherit; opacity:.78; text-decoration:none; transition:color .2s, opacity .2s; display:inline-flex; align-items:center; gap:.4rem; }
@media(hover:hover){ .footer-branding a:hover { opacity:1; } }
.footer-branding-icon { flex-shrink:0; }

/* Social-links footer: duidelijke pill met gekleurd icoon + "Volg ons op ..." */
.footer-socials { display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; margin-bottom:1rem; }
.footer-social { display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 1.1rem; border-radius:50px; background:rgba(255,255,255,.9); color:#333; font-size:.85rem; font-weight:500; letter-spacing:.04em; text-transform:none; text-decoration:none; margin:0; transition:transform .2s, box-shadow .2s; box-shadow:0 2px 8px rgba(0,0,0,.08); }
@media(hover:hover){ .footer-social:hover { transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.14); color:#333; } }
.footer-social-icon { width:24px; height:24px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:7px; color:#fff; }
.footer-social-icon svg { width:15px; height:15px; }
.footer-social-ig .footer-social-icon { background:linear-gradient(45deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%); }
.footer-social-fb .footer-social-icon { background:#1877f2; }
@media (max-width:768px) {
  .footer-socials { flex-direction:column; align-items:center; gap:.7rem; }
  .footer-social { width:100%; max-width:280px; justify-content:center; }
}

/* Taalkiezer in footer — basis gaat uit van donkere footer (Coastal/Noir) */
.lang-switch { margin-top:1.2rem; display:flex; gap:.7rem; justify-content:center; flex-wrap:wrap; }
.lang-pill { display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem; border-radius:50px; background:rgba(255,255,255,.06); color:rgba(255,255,255,.65); font-size:.72rem; text-decoration:none; letter-spacing:.08em; text-transform:uppercase; transition:background .2s, color .2s; margin:0 !important; }
@media(hover:hover){ .lang-pill:hover { background:rgba(255,255,255,.14); color:#fff; } }
.lang-pill.is-active { background:rgba(255,255,255,.18); color:#fff; }
.lang-flag { font-size:1rem; line-height:1; }

/* Summer Breeze: gouden footer met donkere tekst voor leesbaarheid */
.design-default footer { background:var(--accent); color:var(--text); }
.design-default .footer-logo { color:var(--text); }
.design-default footer a, .design-default .footer-branding a { color:var(--text); }
@media(hover:hover){ .design-default footer a:hover, .design-default .footer-branding a:hover { color:#000; } }
.design-default .footer-copyright, .design-default .footer-copy-line a { color:rgba(0,0,0,.78); }
.design-default footer a[aria-label] { color:var(--text) !important; }
.design-default .lang-pill { background:rgba(0,0,0,.08); color:rgba(0,0,0,.72); }
@media(hover:hover){ .design-default .lang-pill:hover { background:rgba(0,0,0,.14); color:#000; } }
.design-default .lang-pill.is-active { background:rgba(0,0,0,.18); color:#000; }

/* Op mobiel: copyright + licentie netjes onder elkaar */
@media(max-width:600px){
  .footer-copyright { flex-direction:column; gap:.8rem; }
  .footer-sep { display:none; }
}

/* ── TEKST POPUP / BOTTOM SHEET (Huisregels & Privacyverklaring) ── */
.text-popup-overlay {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:998; opacity:0; transition:opacity .2s;
}
.text-popup-overlay.open { display:block; opacity:1; }
.text-popup {
  display:none; position:fixed; z-index:999;
  top:50%; left:50%; transform:translate(-50%, -45%);
  background:var(--bg); border-radius:14px;
  width:min(640px, calc(100vw - 3rem));
  max-height:65vh; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.25);
  opacity:0; transition:opacity .2s, transform .25s;
  flex-direction:column;
}
.text-popup.open { display:flex; opacity:1; transform:translate(-50%, -50%); }
.text-popup-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:1.3rem 1.6rem .9rem; border-bottom:1px solid var(--border);
  background:var(--bg); flex-shrink:0;
}
.text-popup-title {
  font-family:'Cormorant Garamond',serif; font-size:1.6rem; font-weight:300;
  color:var(--text); margin:0; line-height:1.2;
}
.text-popup-close {
  width:34px; height:34px; border-radius:50%; border:none;
  background:var(--bg2); cursor:pointer; color:var(--muted);
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s; flex-shrink:0;
}
@media(hover:hover){ .text-popup-close:hover { background:var(--accent-lt); color:var(--accent); } }
.text-popup-body {
  padding:1.4rem 1.6rem 1.8rem; overflow-y:auto;
  font-family:'DM Sans',sans-serif; font-size:.95rem; font-weight:300;
  line-height:1.75; color:var(--text);
  flex:1; -webkit-overflow-scrolling:touch;
}
/* Scroll-hint: privacy- en huisregelteksten zijn lang, maar dat is bij het
   openen niet te zien. Pijltje + fade verdwijnen zodra je onderaan bent. */
.text-popup::after { content:''; position:absolute; left:0; right:0; bottom:0; height:76px; border-radius:0 0 14px 14px; background:linear-gradient(transparent, var(--bg) 72%); pointer-events:none; z-index:2; opacity:0; transition:opacity .25s; }
.text-popup.can-scroll::after { opacity:1; }
.text-popup.at-end::after { opacity:0; }
.text-popup-hint { position:absolute; left:50%; bottom:.9rem; transform:translate(-50%,0); z-index:3; display:none; align-items:center; justify-content:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:var(--accent); color:#fff; cursor:pointer; box-shadow:0 6px 18px rgba(20,16,12,.25); transition:opacity .25s; }
.text-popup-hint svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.text-popup.can-scroll .text-popup-hint { display:flex; animation:cs-book-bob 1.9s ease-in-out infinite; }
.text-popup.can-scroll.scrolled .text-popup-hint { animation:none; }
.text-popup.at-end .text-popup-hint { opacity:0; pointer-events:none; }
@media(prefers-reduced-motion:reduce){ .text-popup.can-scroll .text-popup-hint { animation:none; } }
.text-popup-body strong, .text-popup-body b { font-weight:500; }
.text-popup-body em, .text-popup-body i { font-style:italic; }
.text-popup-body a { color:var(--accent); text-decoration:underline; }
.text-popup-body h2 { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:400; margin:1.4rem 0 .6rem; color:var(--text); }
.text-popup-body ul, .text-popup-body ol { padding-left:1.4rem; margin:.6rem 0; }
.text-popup-body li { margin-bottom:.4rem; }
.text-popup-body p { margin-bottom:.9rem; }

/* Mobiele bottom-sheet variant — op mobiel mag de popup wel hoger, dat is geen probleem */
@media(max-width:600px){
  .text-popup {
    top:auto; bottom:0; left:0; right:0;
    transform:translateY(100%);
    width:100%; max-width:100%;
    max-height:88vh;
    border-radius:18px 18px 0 0;
  }
  .text-popup.open { transform:translateY(0); }
  .text-popup-head { padding:1.1rem 1.3rem .8rem; }
  .text-popup-title { font-size:1.4rem; }
  .text-popup-body { padding:1.2rem 1.3rem 2rem; font-size:.9rem; line-height:1.7; }
}

/* ── REVEAL ── */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .7s,transform .7s; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── RESPONSIVE ── */
@media(max-width:768px){
  nav { padding:1.1rem 1.4rem; }
  .nav-links { display:none; }
  .nav-hamburger { display:flex; }
  .hero { height:70vh; min-height:500px; align-items:flex-end; }
  .hero-title { font-size:clamp(2.2rem,10vw,4rem); }
  .cal-result-title { font-size:1.7rem; }
  .cal-result-price { font-size:2.5rem; }
  .hero-content { padding:0 1.5rem 2.5rem; width:100%; }
  .stats-bar { flex-wrap:wrap; }
  .stat-item { flex:1 0 50%; max-width:50%; border-right:none; border-bottom:1px solid var(--border); padding:.5rem .8rem 1.2rem; }
  .stat-item:nth-child(odd) { border-right:1px solid var(--border); }
  .stat-item:last-child { border-bottom:none; }
  .stat-item:nth-last-child(2):nth-child(odd) { border-bottom:none; }
  .stat-item:last-child:nth-child(odd) { flex-basis:100%; max-width:100%; border-right:none; }
  .stat-num { font-size:2.4rem; }
  .stat-item.stat-item-zwembad { padding-top:.85rem; padding-bottom:.85rem; }
  .intro,.location { grid-template-columns:1fr; }
  .intro-image,.location-image { min-height:260px; }
  .intro-text,.location-text { padding:3.5rem 1.5rem; }
  .features { padding:4rem 1.5rem; }
  .gallery,.tips,.rules,.calendar-section,.address-section { padding:4rem 1.5rem; }
  .contact-section { padding:4rem .8rem; }
  .features-grid { grid-template-columns:1fr; gap:1rem; }
  .gallery-grid { grid-template-columns:1fr 1fr; gap:.7rem; }
  .tips-grid { grid-template-columns:1fr; }
  .tip-header { align-items:center; }
  .rules-grid { grid-template-columns:1fr; }
  .cal-grid { grid-template-columns:1fr; gap:1rem; }
  .contact-card { padding:2rem 1.1rem; }
  .form-row { grid-template-columns:1fr; gap:1rem; }
  .address-inner { grid-template-columns:1fr; gap:2rem; }
  .address-map { height:300px; }
  .section-heading { font-size:clamp(2.2rem,8vw,3.5rem); }
  footer { flex-direction:column; gap:2rem; text-align:center; padding:2.5rem 1.5rem; }
  footer a { margin:0 .6rem; }
  /* Copyright + licentie verticaal stapelen op smal scherm */
  .footer-copyright { flex-direction:column; gap:.8rem; }
  .footer-sep { display:none; }
  .footer-beheer { display:block; margin-top:.8rem; }

  /* ── Boekingsblok op mobiel even breed maken als het contactformulier ──
     De .contact-card heeft op mobiel padding:2rem 1.2rem en zit binnen een
     sectie met padding:4rem 1.5rem. Doe hetzelfde voor het kalender-resultaat
     en boekingsformulier zodat ze visueel even breed zijn en "Bedlinnen &
     handdoeken € 100" weer netjes op één regel past. */
  .cal-result { padding:2rem 1.2rem; }
  .cal-book-form { padding:1.6rem 1.2rem; }
  .cal-result-excl { padding:.7rem .9rem; }
  .excl-row { gap:.5rem; font-size:.86rem; }
  .excl-row > span { min-width:0; }
  .excl-row strong { white-space:nowrap; flex-shrink:0; }
  .excl-row em { font-size:.72rem; }
}

/* ── WHATSAPP FLOATING BUTTON ── */
.wa-float { position:fixed; bottom:1.5rem; right:1.5rem; z-index:900; width:56px; height:56px; background:#25D366; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,.25); transition:transform .2s, box-shadow .2s; }
@media(hover:hover){ .wa-float:hover { transform:scale(1.1); box-shadow:0 6px 20px rgba(0,0,0,.3); } }
@media(max-width:768px){ .wa-float { bottom:1rem; right:1rem; width:50px; height:50px; } }

/* ── Video's in het fotoalbum (Pro) ───────────────────────── */
.gallery-video { position: relative; }
.gallery-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
  pointer-events: none; /* klik gaat naar de tegel → lightbox */
}
.gallery-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, transform .2s;
}
.gallery-play svg { width: 26px; height: 26px; margin-left: 3px; }
.gallery-item:hover .gallery-play { background: rgba(0, 0, 0, .75); transform: translate(-50%, -50%) scale(1.06); }
.lb-video {
  max-width: min(92vw, 1400px);
  max-height: 82vh;
  background: #000;
}

/* ── TAALKNOP OP MOBIEL ──
   De navbalk staat op mobiel op space-between met een column-gap van 2.5rem.
   Het logo groeit mee, maar vult zijn vak niet visueel, waardoor de taalknop
   los in de witruimte tussen logo en hamburger bleef hangen. Hier hoort hij
   bij de hamburger: samen de bedieningshoek rechtsboven. */
@media(max-width:768px){
  nav { column-gap:.5rem !important; }
  .nav-lang { margin-left:auto; margin-right:0; }
  .nav-lang-trigger { padding:.34rem .55rem; gap:.28rem; }
  .nav-lang-trigger svg { width:10px; height:10px; }
  /* De balk heeft op mobiel altijd een lichte achtergrond, ook ongescrold.
     De knop hield de wit-op-donker opmaak van de hero-nav en werd daardoor
     wit op wit; hij volgt nu dezelfde opmaak als in de gescrolde balk. */
  nav:not(.scrolled) .nav-lang-trigger { background:#f5f1ec; border-color:var(--border); color:var(--text); }
}

/* ── TAALKEUZE IN HET MOBIELE MENU ──
   Op smalle schermen vecht de taalknop met de huisnaam om ruimte in de balk.
   Onder 768px verhuist de keuze naar het schuifmenu, als ingeklapte knop die
   alleen de huidige taal toont. <details> in plaats van een zwevend menu:
   het menu schuift open binnen de drawer en kan dus niet buiten beeld vallen.
   De thema's stylen .nav-drawer a fors (hoofdletters, groot), vandaar de
   selectors met hogere specificiteit hieronder. */
.taalkeuze { display:none; }
@media(max-width:768px){
  .nav-lang { display:none !important; }
  .taalkeuze { display:block; margin-top:.7rem; }
  .taalkeuze-knop {
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    min-height:44px; padding:.35rem 1rem; list-style:none; cursor:pointer;
    border:1px solid var(--border); border-radius:50px;
    font-family:inherit; font-size:.8rem; font-weight:400;
    letter-spacing:.02em; text-transform:none; color:var(--text);
  }
  .taalkeuze-knop::-webkit-details-marker { display:none; }
  .taalkeuze-knop svg { transition:transform .2s; opacity:.55; }
  .taalkeuze[open] .taalkeuze-knop svg { transform:rotate(180deg); }
  .taalkeuze-lijst { display:flex; flex-direction:column; align-items:center; gap:.3rem; margin-top:.35rem; }
  .nav-drawer .taalkeuze-item {
    display:flex; align-items:center; justify-content:center; gap:.45rem;
    min-height:44px; padding:.35rem 1rem; border-radius:50px;
    font-family:inherit; font-size:.8rem; font-weight:400;
    letter-spacing:.02em; text-transform:none; color:var(--text); width:auto;
  }
  .nav-drawer .taalkeuze-item + .taalkeuze-item { border-top:none; }
  .nav-drawer .taalkeuze-item::after { display:none; }
  .taalkeuze-vlag { font-size:1rem; line-height:1; }
}