/* ReallyHolidays — premium polish-laag (v3)
   Additief bovenop style.css. Design-tokens + verfijnde motion, diepte en micro-interacties.
   Filosofie: quiet luxury (Impeccable) · invisible details (Emil) · betekenisvolle motion. */

:root {
  /* Kleuren */
  --teal-900:#0B4B48; --teal-700:#0E6360; --teal-600:#14807D; --teal-400:#2AA6A0; --teal-050:#EAF3F2;
  --flam-700:#B24E68; --flam-600:#C0567A; --flam-500:#E187A0; --flam-100:#FBEAEF; --flam-050:#FDF3F6;
  --sun-700:#B0692F; --sun-500:#DE9159; --sun-100:#FBF1E6;
  --sea-600:#3E6E92; --sea-050:#E9F1FA;
  --ink:#23322F; --ink-soft:#3d4744; --muted:#6b7572; --faint:#8a938f;
  --cream:#FCF8F1; --sand:#F6EFE4; --line:#F0E9DB; --card:#ffffff;

  /* Radii */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px; --r-pill:100px;

  /* Gelaagde schaduwen (Impeccable: diepte via meerdere lagen, niet één zware) */
  --sh-1:0 1px 2px rgba(20,60,58,.06), 0 2px 6px rgba(20,60,58,.05);
  --sh-2:0 2px 4px rgba(20,60,58,.05), 0 10px 24px -12px rgba(20,60,58,.28);
  --sh-3:0 4px 8px rgba(20,60,58,.06), 0 24px 48px -20px rgba(20,60,58,.38);
  --sh-4:0 8px 16px rgba(20,60,58,.07), 0 40px 80px -30px rgba(20,60,58,.45);
  --sh-teal:0 18px 40px -18px rgba(14,99,96,.55);
  --sh-flam:0 18px 40px -18px rgba(225,135,160,.6);

  /* Easings — sterke decel-curves (Emil: ingebouwde easings zijn te zwak) */
  --ease-out:cubic-bezier(.23,1,.32,1);        /* sterke ease-out voor entrances */
  --ease-quint:cubic-bezier(.22,1,.36,1);
  --ease-inout:cubic-bezier(.77,0,.175,1);     /* voor beweging op het scherm */
  --ease-spring:cubic-bezier(.34,1.3,.64,1);   /* subtiele bounce, alleen speelse controls */
  --ease-smooth:cubic-bezier(.4,0,.2,1);
}

/* ── Verfijnde scroll-reveal: fade + lift + micro-scale, met stagger ── */
.rh-reveal { opacity:0; transform:translateY(34px) scale(.985); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); will-change:opacity,transform; }
.rh-reveal.rh-in { opacity:1; transform:none; }
/* Kinderen kunnen gestaggerd binnenkomen via [data-stagger] */
[data-stagger] > * { opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-stagger].rh-in > * { opacity:1; transform:none; }
[data-stagger].rh-in > *:nth-child(1){transition-delay:.04s}
[data-stagger].rh-in > *:nth-child(2){transition-delay:.10s}
[data-stagger].rh-in > *:nth-child(3){transition-delay:.16s}
[data-stagger].rh-in > *:nth-child(4){transition-delay:.22s}
[data-stagger].rh-in > *:nth-child(5){transition-delay:.28s}
[data-stagger].rh-in > *:nth-child(6){transition-delay:.34s}
[data-stagger].rh-in > *:nth-child(7){transition-delay:.40s}
[data-stagger].rh-in > *:nth-child(8){transition-delay:.46s}

/* ── Beeld-omhulsel met zachte inzoom bij hover (Emil: beweging waar je 'm verwacht) ── */
.rh-imgwrap { position:relative; overflow:hidden; }
.rh-imgwrap img { transition:transform .9s var(--ease-out); will-change:transform; }
.rh-imgwrap:hover img { transform:scale(1.055); }

/* ── Kaarten: gelaagde diepte + spring-lift ── */
.area-card, .why-card, .rev-card, .rh-stat-card { box-shadow:var(--sh-2); transition:transform .45s var(--ease-spring), box-shadow .45s var(--ease-out); }
.area-card:hover, .why-card:hover, .rev-card:hover { transform:translateY(-8px); box-shadow:var(--sh-4); }
.area-card { border-radius:var(--r-lg); }
.area-card .ac-img { height:180px; }
.area-card .ac-time { backdrop-filter:blur(6px); background:rgba(20,45,44,.7); box-shadow:0 6px 16px -8px rgba(0,0,0,.5); }

/* ── Primaire CTA: subtiele sheen die er één keer overheen glijdt bij hover ── */
.rh-cta-main, #openReserve, .btn-hover-lift { position:relative; overflow:hidden; }
.rh-cta-main::after, #openReserve::after {
  content:""; position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform:translateX(-220%) skewX(-18deg); transition:transform .7s var(--ease-out); pointer-events:none;
}
.rh-cta-main:hover::after, #openReserve:hover::after { transform:translateX(320%) skewX(-18deg); }

/* ── Promotie-banner: slanke, elegante ribbon met subtiele glans (niet hinderlijk) ── */
.rh-promo{ position:relative; overflow:hidden; color:#fff; background:linear-gradient(100deg,var(--flam-500) 0%, #E8837B 55%, var(--sun-500) 100%); animation:promoSlide .55s var(--ease-out); }
.rh-promo.hidden{ display:none; }
.rh-promo-inner{ max-width:1280px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:11px; padding:9px 46px; font-size:13.5px; font-weight:700; flex-wrap:wrap; position:relative; z-index:1; }
.rh-promo-icon{ font-size:16px; }
.rh-promo-text{ text-shadow:0 1px 6px rgba(0,0,0,.18); }
.rh-promo-code{ background:rgba(255,255,255,.22); border:1px dashed rgba(255,255,255,.6); padding:2px 11px; border-radius:100px; font-weight:800; letter-spacing:.06em; }
.rh-promo-code.hidden{ display:none; }
.rh-promo-cta{ background:#fff; color:var(--flam-700); padding:4px 15px; border-radius:100px; font-weight:800; font-size:12.5px; box-shadow:0 4px 12px -4px rgba(0,0,0,.3); transition:transform .2s var(--ease-out); }
.rh-promo-cta:hover{ color:var(--flam-700); transform:translateY(-1px); }
.rh-promo-close{ position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; color:rgba(255,255,255,.85); cursor:pointer; font-size:13px; padding:6px; line-height:1; z-index:2; }
.rh-promo-close:hover{ color:#fff; }
.rh-promo::after{ content:""; position:absolute; top:0; left:0; width:35%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent); transform:translateX(-160%) skewX(-18deg); animation:promoShimmer 5s ease-in-out infinite; pointer-events:none; }
@keyframes promoSlide{ from{ transform:translateY(-100%); } to{ transform:translateY(0); } }
@keyframes promoShimmer{ 0%,100%{ transform:translateX(-160%) skewX(-18deg); } 55%{ transform:translateX(420%) skewX(-18deg); } }
@media (max-width:720px){ .rh-promo-inner{ font-size:12px; gap:8px; padding:8px 40px; } .rh-promo-cta{ display:none; } }
@media (prefers-reduced-motion: reduce){ .rh-promo, .rh-promo::after{ animation:none; } }

/* ── Hero-slideshow: beelden wisselen elke 5 s met zachte crossfade ── */
.rh-hero-slides{ position:absolute; inset:0; }
.rh-slide{ opacity:0; transition:opacity 1.4s ease; }
.rh-slide.on{ opacity:1; }

/* ── Hero-titel: dynamisch, schuin handschrift (Caveat), zoals het visitekaartje ── */
.rh-hero-script{ font-family:'Caveat',cursive !important; font-weight:700; margin:0 0 22px; max-width:820px; letter-spacing:0; }
.rh-hero-script .hero-line-sm{ display:block; font-size:44px; font-weight:600; line-height:1; transform:rotate(-2.5deg); transform-origin:left center; text-shadow:0 2px 16px rgba(0,0,0,.45); }
.rh-hero-script .hero-line-lg{ display:block; font-size:98px; font-weight:700; line-height:.84; margin:2px 0 0 6px; color:#F8E3E8; transform:rotate(-2.5deg); transform-origin:left center; text-shadow:0 3px 22px rgba(0,0,0,.5); }
@media (max-width:900px){ .rh-hero-script .hero-line-sm{ font-size:34px; } .rh-hero-script .hero-line-lg{ font-size:74px; } }
@media (max-width:720px){ .rh-hero-script .hero-line-sm{ font-size:30px; } .rh-hero-script .hero-line-lg{ font-size:58px; } }

/* ── Hero: rijkere diepte + parallax-laag ── */
.rh-hero-wrap { box-shadow:var(--sh-4); }
.rh-hero-img { will-change:transform; }
.rh-hero-h1 { letter-spacing:-.015em; }
.rh-hero-h1 .accent-i { color:#F8E3E8; }
/* Zachte korrel/vignet over de hero voor filmische diepte */
.rh-hero-wrap::after {
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2;
  box-shadow:inset 0 0 160px 20px rgba(8,40,38,.35);
  mix-blend-mode:multiply;
}
.rh-hero-pad { z-index:3; }
.rh-hero-wrap > .rh-award-chip, .rh-hero-wrap > .rh-sun-chip, .rh-hero-wrap > svg { z-index:4; }

/* Trust-balk onder de hero-knoppen */
.rh-hero-trust { display:flex; gap:18px; flex-wrap:wrap; align-items:center; margin-top:22px; font-size:13px; font-weight:600; color:rgba(255,255,255,.92); }
.rh-hero-trust span { display:inline-flex; align-items:center; gap:7px; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.rh-hero-trust .dot { width:5px; height:5px; border-radius:50%; background:rgba(255,255,255,.5); }

/* ── Statkaarten: schoon (de slinger hangt nu onder de hero, niet meer aan de labels) ── */
.rh-stat-num { font-variant-numeric:tabular-nums; }
.rh-stat-card { animation:none !important; box-shadow:0 18px 40px -20px rgba(20,60,58,.5), 0 6px 14px -8px rgba(20,60,58,.25); }
.rh-stat-card::after { content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 1px 0 rgba(255,255,255,.7); pointer-events:none; }
/* De "streep" was de 1px witte glanslijn van .rh-stat-card::after die over de badge viel.
   Badge boven die laag tillen + geen witte rand meer → schone gekleurde badge met diffuse schaduw. */
.rh-stat-card::after { z-index:0; }
.rh-stat-pin { border:none !important; top:-16px; z-index:3 !important; box-shadow:0 6px 20px -7px rgba(20,60,58,.32) !important; }
@media (max-width:720px){ .rh-stats{ margin-top:10px !important; } }

/* ── Tropische festoen die onder de herofoto hangt ── */
.rh-hero-garland{ position:relative; z-index:2; margin:-16px 18px 0; height:76px; pointer-events:none; }
.rh-hero-garland svg{ width:100%; height:100%; display:block; overflow:visible; }
/* Zachte, natuurlijke bries: kleine amplitude + gevarieerde periodes per blad (niet mechanisch synchroon) */
@keyframes rhLeafSway { 0%,100%{ transform:rotate(-3.5deg); } 50%{ transform:rotate(3.5deg); } }
.rh-hero-garland .gswing{ transform-box:fill-box; transform-origin:50% 0%; animation:rhLeafSway 4.6s ease-in-out infinite; will-change:transform; }
.rh-hero-garland > g:nth-child(odd) .gswing{ animation-duration:3.9s; }
.rh-hero-garland > g:nth-child(3n) .gswing{ animation-duration:5.4s; }
.rh-hero-garland > g:nth-child(4n+2) .gswing{ animation-duration:4.3s; }
@media (max-width:720px){ .rh-hero-garland{ display:none; } }
@media (prefers-reduced-motion: reduce){ .rh-hero-garland .gswing{ animation:none; } }

/* ── Sectiekoppen: fijn kicker-streepje ── */
.rh-kicker { display:inline-flex; align-items:center; gap:9px; }
.rh-kicker::before { content:""; width:24px; height:2px; border-radius:2px; background:currentColor; opacity:.5; }

/* ── Area-filters (categorie-chips) ── */
.rh-areafilter { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:30px; }
.rh-areafilter button {
  padding:9px 18px; border-radius:var(--r-pill); border:1.5px solid var(--line); background:var(--card);
  color:var(--ink-soft); font-size:13.5px; font-weight:700; cursor:pointer;
  transition:background .3s, color .3s, border-color .3s, transform .3s var(--ease-spring), box-shadow .3s;
}
.rh-areafilter button:hover { transform:translateY(-2px); box-shadow:var(--sh-2); }
.rh-areafilter button.active { background:var(--teal-600); border-color:var(--teal-600); color:#fff; box-shadow:var(--sh-teal); }
.area-card { transition:transform .5s var(--ease-out), box-shadow .45s var(--ease-out), opacity .45s, filter .45s; }
.area-card.rh-hide { display:none; }

/* ── Galerij: pijlen & dots verfijnd ── */
#galPrev, #galNext { backdrop-filter:blur(8px); transition:background .25s, transform .3s var(--ease-spring), box-shadow .3s; }
#galPrev:hover, #galNext:hover { background:#fff; transform:translateY(-50%) scale(1.12); box-shadow:0 12px 26px -8px rgba(0,0,0,.45); }
.rh-gallery-panel { box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
#galBadge { backdrop-filter:blur(8px); box-shadow:0 8px 20px -10px rgba(0,0,0,.4); }
#galDots button { transition:transform .3s var(--ease-out), background .3s; transform-origin:center; }
#galDots button.on { transform:scale(1.5); }

/* ── Nav: verfijnde onderlijn-hover ── */
.rh-navlink { position:relative; transition:color .25s; }
.rh-navlink::after { content:""; position:absolute; left:0; right:100%; bottom:-4px; height:2px; border-radius:2px; background:var(--teal-600); transition:right .35s var(--ease-out); }
.rh-navlink:hover { color:var(--teal-600) !important; }
.rh-navlink:hover::after { right:0; }

/* ── Toggle & tellers: fijnere druk ── */
#petToggle, #guestMin, #guestPlus, #petMin, #petPlus { transition:transform .2s var(--ease-spring), background .25s, box-shadow .2s; }
#guestPlus:active, #petPlus:active, #guestMin:active, #petMin:active { transform:scale(.88); }

/* ── WhatsApp-vrije sticky "Boek nu"-knop op mobiel (verhoogt conversie) ── */
.rh-mobile-cta {
  position:fixed; left:14px; right:14px; bottom:14px; z-index:80; display:none;
  align-items:center; justify-content:space-between; gap:12px;
  background:var(--teal-600); color:#fff; padding:13px 16px 13px 20px; border-radius:var(--r-pill);
  box-shadow:0 16px 34px -12px rgba(14,99,96,.7); text-decoration:none;
  transform:translateY(120%); transition:transform .5s var(--ease-spring);
}
.rh-mobile-cta.show { transform:translateY(0); }
.rh-mobile-cta .mc-price { font-weight:800; font-size:15px; }
.rh-mobile-cta .mc-lbl { font-size:11.5px; opacity:.85; font-weight:600; display:block; }
.rh-mobile-cta .mc-go { background:rgba(255,255,255,.2); padding:9px 16px; border-radius:var(--r-pill); font-weight:800; font-size:13.5px; }
@media (max-width:720px){
  .rh-mobile-cta{ display:flex; box-sizing:border-box; max-width:calc(100vw - 28px); }
  .rh-mobile-cta > span:first-of-type{ min-width:0; flex:1; overflow:hidden; }
  .rh-mobile-cta .mc-lbl, .rh-mobile-cta .mc-price{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .rh-mobile-cta .mc-go{ flex:none; }
  /* Topbar: boek-knop weg, maar kleine taalvlaggen blijven zichtbaar bovenaan */
  .rh-navlinks a[href="#book"]{ display:none !important; }
  .rh-navlinks > span{ display:flex !important; gap:4px !important; }
  .rh-navlinks .rh-flag img{ width:21px; height:14px; }
  .rh-mobile-menu .mm-flags{ display:none !important; }  /* niet dubbel: vlaggen staan nu bovenaan */
}
/* Vlaggen + boek-knop in het mobiele menu */
.rh-mobile-menu .mm-flags{ display:none; gap:10px; padding:12px 4px 4px; border-top:1px solid rgba(35,50,47,.08); margin-top:6px; }
.rh-mobile-menu.open .mm-flags{ display:flex; }
.rh-mobile-menu .mm-book{ display:block; text-align:center; margin-top:10px; background:#14807D; color:#fff; padding:13px; border-radius:100px; font-weight:800; font-size:14.5px; }

/* ── Zachtere, natuurlijkere reveal-timing op mobiel ── */
@media (max-width:720px){
  .rh-reveal{ transform:translateY(22px) scale(.99); transition-duration:.7s; }
  .rh-imgwrap:hover img{ transform:none; } /* geen hover-zoom op touch */
  main{ overflow-x:hidden; }
}

/* ── Focus: eleganter ── */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline:2.5px solid var(--teal-400); outline-offset:3px; border-radius:8px;
}

/* ── Skip-link voor toegankelijkheid ── */
.rh-skip { position:absolute; left:-999px; top:8px; z-index:999; background:var(--teal-600); color:#fff; padding:10px 18px; border-radius:var(--r-pill); font-weight:700; }
.rh-skip:focus { left:16px; color:#fff; }

/* ── Admin v2: tabbladen + nettere velden ── */
/* Breder beheerpaneel op desktop (mobiel houdt volle breedte via style.css) */
@media (min-width:721px){ .rh-admin{ width:690px !important; max-width:94vw !important; } }
.adm-bars{ overflow-x:auto; }
.adm-tabs { display:flex; gap:6px; margin-bottom:16px; background:#EFEADF; padding:5px; border-radius:14px; position:sticky; top:0; z-index:5; }
.adm-tabs button { flex:1; padding:9px 6px; border:none; background:none; border-radius:10px; font-weight:800; font-size:11.5px; color:var(--muted); cursor:pointer; transition:background .25s, color .25s; letter-spacing:.02em; }
.adm-tabs button.on { background:#fff; color:var(--teal-700); box-shadow:var(--sh-1); }
.adm-pane { display:none; } .adm-pane.on { display:block; animation:admFade .35s var(--ease-out); }
@keyframes admFade { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.adm-card { background:#fff; border-radius:var(--r-md); padding:18px; margin-bottom:14px; box-shadow:var(--sh-1); }
.adm-h { font-size:12px; letter-spacing:.1em; font-weight:800; margin-bottom:12px; text-transform:uppercase; }
.adm-photos { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.adm-photo { position:relative; aspect-ratio:1; border-radius:12px; overflow:hidden; border:1px solid var(--line); background:#EEE9DD; }
.adm-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.adm-photo .del { position:absolute; top:4px; right:4px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(178,78,104,.92); color:#fff; cursor:pointer; font-size:12px; display:flex; align-items:center; justify-content:center; }
.adm-photo .mv { position:absolute; bottom:4px; width:24px; height:24px; border-radius:50%; border:none; background:rgba(20,45,44,.72); color:#fff; cursor:pointer; font-size:12px; }
.adm-photo .mv.l{ left:4px; } .adm-photo .mv.r{ left:32px; }
.adm-upload { border:2px dashed #cdd6d3; border-radius:12px; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; cursor:pointer; color:var(--teal-600); font-weight:800; font-size:12px; text-align:center; transition:background .25s, border-color .25s; }
.adm-upload:hover { background:var(--teal-050); border-color:var(--teal-400); }
.adm-amen-row { display:grid; grid-template-columns:44px 1fr auto; gap:8px; align-items:start; background:#FCFAF5; border:1px solid #EEE9DD; border-radius:12px; padding:8px; margin-bottom:8px; }
.adm-amen-row input { width:100%; padding:7px 9px; border:1px solid #E2DED3; border-radius:8px; font-size:13px; background:#fff; }
.adm-amen-row .icon { text-align:center; font-size:20px; padding:7px 0; }
.adm-stat-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; margin-bottom:12px; }
.adm-stat { background:#fff; border-radius:14px; padding:14px 12px; text-align:center; box-shadow:var(--sh-1); }
.adm-stat .n { font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:700; color:var(--teal-700); line-height:1; }
.adm-stat .l { font-size:10.5px; font-weight:800; color:var(--faint); letter-spacing:.05em; margin-top:4px; text-transform:uppercase; }
.adm-bars { display:flex; align-items:flex-end; gap:4px; height:120px; padding:10px 0; }
.adm-bars .bar { flex:1; background:linear-gradient(180deg,var(--teal-400),var(--teal-600)); border-radius:5px 5px 2px 2px; min-height:3px; position:relative; transform:scaleY(0); transform-origin:bottom; transition:transform .6s var(--ease-out); }
.adm-bars .bar.grown { transform:scaleY(1); }
.adm-bars .bar span { position:absolute; top:-16px; left:50%; transform:translateX(-50%); font-size:9px; font-weight:800; color:var(--muted); }
.adm-bars .bar em { position:absolute; bottom:-16px; left:50%; transform:translateX(-50%); font-size:8.5px; color:var(--faint); font-style:normal; }

/* Admin-datumkalender (klikken om te blokkeren; roze = handmatig) */
.adm-casa-btn { flex:1; padding:9px; border:1.5px solid #E2DED3; background:#fff; border-radius:10px; font-weight:800; font-size:12.5px; cursor:pointer; transition:background .2s, color .2s, border-color .2s; }
.adm-casa-btn.on { background:var(--teal-600); color:#fff; border-color:var(--teal-600); }
.adm-cal-nav { width:32px; height:32px; border-radius:50%; border:1px solid #E2DED3; background:#FCFAF5; cursor:pointer; font-size:16px; line-height:1; }
.adm-cal-nav:hover { background:#EFEADF; }
.adm-cal-day { text-align:center; padding:9px 0; border-radius:8px; font-size:12.5px; font-weight:700; border:1px solid transparent; user-select:none; }
.adm-cal-day.free { background:#EFF7F4; color:#0E6360; border-color:#DCEEE7; cursor:pointer; transition:background .15s, transform .15s; }
.adm-cal-day.free:hover { background:#CFE9E0; transform:translateY(-1px); }
.adm-cal-day.manual { background:#F8D3DF; color:#a24d67; border-color:#EBB6C6; cursor:pointer; }
.adm-cal-day.manual:hover { background:#F3C0D0; }
.adm-cal-day.ical { background:#D9D5CC; color:#7c7566; cursor:default; }
.adm-cal-day.past { color:#c3bba9; opacity:.5; cursor:default; }
.adm-cal-day.pad { background:none; border:none; }

/* Print-stijl voor de visitekaartjes (aparte pagina gebruikt dit niet, maar handig) */
@media print { .rh-nav, .rh-mobile-cta, footer { display:none; } }

/* Akkoord-checkboxen in de reserveringsmodal (privacy/huisregels/voorwaarden) */
.rh-agree { display:flex; align-items:flex-start; gap:10px; font-size:13px; font-weight:600; color:#404b48; line-height:1.5; cursor:pointer; }
.rh-agree input[type="checkbox"] { flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:#14807D; cursor:pointer; }
.rh-agree a { color:#14807D; font-weight:800; text-decoration:underline; }
.rh-agree a:hover { color:#0E6360; }

/* Document-viewer overlay: voorwaarden lezen bovenop de reserveringsmodal.
   Enter 240ms sterke ease-out (scale .96 + fade), exit sneller (160ms). */
.rh-doc-overlay {
  position: fixed; inset: 0; z-index: 230;
  display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(20,40,38,.6); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity 160ms ease-out;
}
.rh-doc-overlay.on { opacity: 1; transition-duration: 240ms; }
.rh-doc-sheet {
  display: flex; flex-direction: column; width: 100%; max-width: 860px; height: 88vh; height: 88dvh;
  background: #FCF8F1; border-radius: 22px; overflow: hidden;
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.5);
  transform: scale(.96); transition: transform 160ms cubic-bezier(.23,1,.32,1);
}
.rh-doc-overlay.on .rh-doc-sheet { transform: scale(1); transition-duration: 240ms; }
.rh-doc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px 12px 20px; border-bottom: 1px solid #F0E9DB; background: #FCF8F1;
}
.rh-doc-title { font-weight: 800; font-size: 14px; color: #0E6360; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rh-doc-close {
  flex: 0 0 auto; min-height: 44px; padding: 10px 18px; border: none; border-radius: 100px;
  background: #14807D; color: #fff; font-weight: 800; font-size: 13.5px; cursor: pointer;
  transition: transform 160ms cubic-bezier(.23,1,.32,1), filter .15s ease;
}
.rh-doc-close:hover { filter: brightness(1.07); }
.rh-doc-close:active { transform: scale(.97); }
.rh-doc-frame { flex: 1; width: 100%; border: none; background: #FCF8F1; }
@media (max-width: 640px) {
  .rh-doc-overlay { padding: 0; }
  .rh-doc-sheet { height: 100dvh; max-width: none; border-radius: 0; }
  .rh-doc-close { font-size: 12.5px; padding: 10px 14px; }
  .rh-doc-title { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rh-doc-sheet, .rh-doc-overlay.on .rh-doc-sheet { transform: none; transition: none; }
}

/* ── Stappenplan "Zo werkt reserveren" ── */
.rh-proc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
/* Verbindingslijn achter de stappen (desktop) */
.rh-proc-grid::before {
  content:""; position:absolute; left:11%; right:11%; top:34px; height:2px;
  background:linear-gradient(90deg,#CFE4E1,#F3C4CF,#F0D6BC); opacity:.75; z-index:0;
}
.rh-proc-step {
  position:relative; z-index:1; background:#fff; border:1px solid #F0E9DB; border-radius:22px;
  padding:26px 22px 24px; text-align:center;
  box-shadow:0 20px 40px -32px rgba(20,60,58,.4);
  transition:transform .28s cubic-bezier(.23,1,.32,1), box-shadow .28s ease;
}
.rh-proc-step:hover { transform:translateY(-4px); box-shadow:0 28px 52px -30px rgba(20,60,58,.45); }
.rh-proc-num {
  width:34px; height:34px; margin:0 auto 12px; border-radius:50%;
  background:linear-gradient(135deg,#0E6360,#14807D); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px;
  box-shadow:0 8px 18px -8px rgba(14,99,96,.7);
}
.rh-proc-ic { font-size:30px; line-height:1; margin-bottom:10px; }
.rh-proc-t { font-weight:800; font-size:14.5px; color:#23322F; margin-bottom:7px; }
.rh-proc-d { font-size:13.2px; line-height:1.65; color:#5b6764; margin:0; }
@media (max-width:900px) {
  .rh-proc-grid { grid-template-columns:1fr 1fr; }
  .rh-proc-grid::before { display:none; }
}
@media (max-width:560px) {
  .rh-proc-grid { grid-template-columns:1fr; gap:14px; }
  .rh-proc-step { text-align:left; display:grid; grid-template-columns:auto 1fr; column-gap:14px; padding:20px; }
  .rh-proc-num { margin:0; grid-row:span 2; }
  .rh-proc-ic { display:none; }
  .rh-proc-t { margin-bottom:4px; }
  .rh-proc-d { grid-column:2; }
}
@media (prefers-reduced-motion:reduce) { .rh-proc-step { transition:none; } }

/* ══════════ TELEFOON-OPTIMALISATIE ══════════ */
@media (max-width: 640px) {
  /* iOS zoomt in op velden onder 16px — hinderlijk midden in het boeken */
  input:not([type=checkbox]):not([type=radio]),
  select, textarea { font-size: 16px !important; }
  /* Comfortabele raakvlakken (44px richtlijn) */
  input:not([type=checkbox]):not([type=radio]), select, textarea,
  button, .rh-cta-main, .rh-cta-ghost { min-height: 44px; }
  /* Uitzonderingen: galerij-bolletjes en pijlen moeten hun eigen maat houden,
     anders worden de puntjes uitgerekte ovalen. */
  #galDots button { min-height: 0 !important; flex: 0 0 9px; width: 9px; height: 9px; padding: 0; }
  #galPrev, #galNext { min-height: 0 !important; width: 38px; height: 38px; }
  .rh-promo-close { min-height: 0 !important; }
  .modal-close { min-width: 44px; min-height: 44px; display: inline-flex;
    align-items: center; justify-content: center; }
  /* Documentlinks in de akkoordvakjes goed aantikbaar maken */
  .rh-agree a { display: inline-block; padding: 6px 2px; }
  .rh-agree input[type=checkbox] { width: 22px; height: 22px; }
  /* Modal: ruimte voor de iPhone-homebalk, en niet tegen de schermrand */
  .rh-modal { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .rh-doc-sheet { padding-bottom: env(safe-area-inset-bottom); }
}

/* ── Woningkeuze in het boekformulier (met foto + omschrijving) ── */
.rh-homepick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rh-homebtn {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  padding: 9px 12px 9px 9px; border-radius: 100px; background: #fff;
  border: 2px solid #EDE7DA; min-height: 60px; width: 100%;
  transition: border-color .2s ease, background .2s ease, transform .16s cubic-bezier(.23,1,.32,1), box-shadow .2s ease;
}
.rh-homebtn:hover { border-color: #CFE4E1; box-shadow: 0 10px 22px -16px rgba(20,60,58,.5); }
.rh-homebtn:active { transform: scale(.985); }
.rh-homebtn img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 2px solid #fff; box-shadow: 0 2px 8px -3px rgba(0,0,0,.35); }
.rh-homebtn .hb-txt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.rh-homebtn .hb-name { font-family: 'Cormorant Garamond', serif; font-size: 19px; font-weight: 600; color: #23322F; }
.rh-homebtn .hb-sub { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8a938f; }
.rh-homebtn .hb-check {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25);
  color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; opacity: 0;
  transition: opacity .2s ease;
}
.rh-homebtn.on { background: #14807D; border-color: #14807D; }
.rh-homebtn.on .hb-name { color: #fff; }
.rh-homebtn.on .hb-sub { color: #BFE0DE; }
.rh-homebtn.on .hb-check { opacity: 1; }
.rh-homebtn.on:hover { border-color: #0E6360; }
@media (max-width: 560px) { .rh-homepick { grid-template-columns: 1fr; } }

/* ── Datumvakken (openen onze eigen kalender i.p.v. de systeemkalender) ── */
.rh-datebox {
  flex: 1; border: 1px solid #E2E8E6; border-radius: 14px; padding: 10px 14px;
  cursor: pointer; background: #fff; min-height: 62px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.rh-datebox:hover { border-color: #CFE4E1; }
.rh-datebox.active { border-color: #14807D; box-shadow: 0 0 0 3px rgba(20,128,125,.14); }
.rh-datelbl { display: block; font-size: 11px; color: #8a938f; font-weight: 700; letter-spacing: .04em; }
.rh-dateval { display: block; font-weight: 700; font-size: 14.5px; color: #23322F; margin-top: 2px; }

/* ── Reset-knop + 24u-melding bij de agenda ── */
.rh-reset-btn {
  border: 1px solid #E2DED3; background: #FCFAF5; color: #5b6764; cursor: pointer;
  border-radius: 100px; padding: 7px 13px; font-size: 11.5px; font-weight: 800;
  font-family: 'Manrope', sans-serif; white-space: nowrap;
  transition: background .16s ease, transform .16s cubic-bezier(.23,1,.32,1);
}
.rh-reset-btn:hover { background: #F2ECE0; }
.rh-reset-btn:active { transform: scale(.96); }
.rh-cal-note {
  margin-top: 9px; background: #FBF1E6; border-radius: 11px; padding: 9px 12px;
  font-size: 11.5px; font-weight: 600; color: #7a5a33; line-height: 1.55;
}
/* Dagen die te vroeg zijn (binnen 24u) subtiel markeren met uitleg via title */
.bc-day.toosoon { opacity: .4; cursor: not-allowed; }

/* ── Slaapkamers & bedden (visueel blok in de accommodatiekaart) ── */
.rh-beds { margin-bottom: 24px; }
.rh-beds-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.rh-beds-t { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #14807D; }
.rh-beds-cnt { font-size: 11.5px; font-weight: 700; color: #8a938f; background: #F4F8F7; border-radius: 100px; padding: 3px 11px; }
/* Min. 210px per kaart: lange samengestelde woorden ("eenpersoonsbedden",
   "großes Doppelbett") hebben die ruimte nodig, anders liep de tekst uit de kaart. */
.rh-beds-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.rh-bedcard {
  display: flex; align-items: center; gap: 11px;
  background: #FCFAF5; border: 1px solid #F0E9DB; border-radius: 15px; padding: 11px 13px;
  transition: transform .22s cubic-bezier(.23,1,.32,1), border-color .22s ease, box-shadow .22s ease;
}
.rh-bedcard:hover { transform: translateY(-2px); border-color: #CFE4E1; box-shadow: 0 12px 24px -18px rgba(20,60,58,.5); }
.rh-bed-ic {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 11px; background: #EAF3F2;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.rh-bed-txt { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1 1 auto; }
.rh-bed-room { font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #a8a291; white-space: nowrap; }
/* Vangnet voor smalle schermen: lange samengestelde woorden mogen afbreken i.p.v. overlopen */
.rh-bed-desc { font-size: 13.5px; font-weight: 700; color: #23322F; overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 560px) { .rh-beds-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .rh-bedcard { transition: none; } }

/* ══════════════════════════════════════════════════════════════════════════
   BEOORDELINGEN: groot gemiddelde + slider
   Kaarten worden gevuld door app.js uit assets/reviews-booking.json en de
   eigen beoordelingen uit review.html.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Groot gemiddelde cijfer ─────────────────────────────────────────────── */
.rh-revscore{
  display:flex; align-items:center; justify-content:center; gap:32px; flex-wrap:wrap;
  background:linear-gradient(180deg,#fff 0%,#FDFBF7 100%);
  border:1px solid #F0E9DB; border-radius:26px; padding:26px 34px; margin-bottom:30px;
  box-shadow:0 26px 60px -42px rgba(20,60,58,.55);
}
.rh-revscore-main{ display:flex; align-items:baseline; gap:6px; }
.rh-revscore-main .big{
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:88px; line-height:.85;
  color:#0E6360; letter-spacing:-.02em;
}
.rh-revscore-main .of{ font-size:19px; font-weight:700; color:#a8a291; }
.rh-revscore-meta{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.rh-revscore-meta .stars{ color:#E8A33D; font-size:19px; letter-spacing:3px; line-height:1; }
.rh-revscore-meta .cnt{ font-size:14.5px; font-weight:700; color:#3d4744; }
.rh-revscore-meta .pills{ display:flex; gap:8px; flex-wrap:wrap; }
.rh-revscore-meta .pill{
  display:inline-flex; align-items:center; gap:6px; background:#F7F4EC; border:1px solid #EFE7D7;
  border-radius:100px; padding:6px 13px; font-size:12.5px; font-weight:600; color:#5f6d69;
}
.rh-revscore-meta .pill b{ font-weight:700; color:#3d4744; }
.rh-revscore-meta .pill em{ font-style:normal; font-weight:800; color:#0E6360; }
.rh-revscore-meta .pill.award{ background:#FBF1E6; border-color:#F3E3CE; color:#8a5c2c; }
.rh-revscore-meta .pill.own{ background:#EAF3F2; border-color:#D6E7E5; }
.rh-revscore-meta .pill.own i{ font-style:normal; color:#5f6d69; }

/* ── Slider ──────────────────────────────────────────────────────────────── */
.rh-revslider{ position:relative; }
.rh-revview{ overflow:hidden; border-radius:20px; min-height:420px; }
.rh-revtrack{ display:flex; transition:transform .62s cubic-bezier(.4,0,.2,1); will-change:transform; }
.rh-revpage{
  flex:0 0 100%; display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  align-content:start; padding:3px;
}

/* Kaart */
.rh-revslider .rev-card{
  background:#fff; border:1px solid #F0E9DB; border-radius:18px; padding:20px 20px 17px;
  display:flex; flex-direction:column; gap:11px; position:relative; overflow:hidden;
  box-shadow:0 14px 34px -26px rgba(20,60,58,.5);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.rh-revslider .rev-card:hover{
  transform:translateY(-3px); border-color:#E4D9C2;
  box-shadow:0 22px 46px -26px rgba(20,60,58,.55);
}
/* Aanhalingsteken als watermerk */
.rh-revslider .rev-card::before{
  content:'"'; position:absolute; right:12px; top:-14px;
  font-family:'Cormorant Garamond',serif; font-size:86px; line-height:1; color:#F4EFE3; pointer-events:none;
}
.rh-revslider .rev-card .rev-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rh-revslider .rev-card .stars{ color:#E8A33D; font-size:13.5px; letter-spacing:2px; line-height:1; }
.rh-revslider .rev-card .sc{
  font-size:12.5px; font-weight:800; color:#0E6360; background:#EAF3F2;
  border-radius:100px; padding:3px 10px; white-space:nowrap;
}
.rh-revslider .rev-card p{
  font-size:13.6px; line-height:1.62; color:#3d4744; margin:0; position:relative; z-index:1;
  display:-webkit-box; -webkit-line-clamp:6; line-clamp:6; -webkit-box-orient:vertical; overflow:hidden;
}
.rh-revslider .rev-card .rev-who{
  display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:12px;
  border-top:1px solid #F4EFE3;
}
.rh-revslider .rev-card .rev-av{
  width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; flex:none;
}
.rh-revslider .rev-card .rev-name{ font-size:13.5px; font-weight:700; color:#23322F; line-height:1.25; }
.rh-revslider .rev-card .rev-from{ font-size:11.5px; color:#8a938f; line-height:1.35; }
.rh-revslider .rev-card .rev-home{
  font-size:10.5px; font-weight:600; color:#a8a291; margin-left:auto; text-align:right;
  line-height:1.35; flex:none; white-space:nowrap;
}
.rh-revslider .rev-card .rev-home b{ display:block; font-weight:700; color:#8a938f; }

/* Pijlen */
.rh-revnav{
  width:40px; height:40px; border-radius:50%; border:1px solid #EFE7D7; background:#fff;
  color:#0E6360; font-size:22px; line-height:1; cursor:pointer; display:flex;
  align-items:center; justify-content:center; padding-bottom:3px; flex:none;
  box-shadow:0 10px 22px -14px rgba(20,60,58,.5);
  transition:transform .16s ease, background .16s ease, color .16s ease;
}
.rh-revnav:hover{ background:#14807D; color:#fff; border-color:#14807D; transform:scale(1.07); }
.rh-revnav:active{ transform:scale(.96); }

/* Bolletjes + pauzeknop */
.rh-revfoot{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:22px;
              max-width:100%; flex-wrap:wrap; }
.rh-revdots{ max-width:100%; }
.rh-revdots{ display:flex; gap:7px; align-items:center; flex-wrap:wrap; justify-content:center; }
.rh-revdots button{
  width:8px; height:8px; border-radius:50%; border:none; background:#DED5C2; cursor:pointer; padding:0;
  transition:width .24s ease, background .24s ease;
}
.rh-revdots button.on{ width:26px; border-radius:100px; background:#14807D; }
.rh-revplay{
  width:26px; height:26px; border-radius:50%; border:1px solid #EFE7D7; background:#fff; cursor:pointer;
  color:#5f6d69; font-size:10px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;
}
.rh-revplay::before{ content:'❚❚'; letter-spacing:-1px; }
.rh-revplay.paused::before{ content:'▶'; }

/* Tablet: 2 kolommen */
@media (max-width:1024px){
  .rh-revpage{ grid-template-columns:repeat(2,1fr); gap:14px; }
  .rh-revscore{ gap:24px; padding:22px 26px; }
  .rh-revscore-main .big{ font-size:72px; }
}

/* Telefoon: 1 kolom, pijlen onder de kaarten zodat ze niets afdekken */
@media (max-width:640px){
  /* Raakvlakken minimaal 44 px, zoals de rest van de site */
  .rh-revnav{ width:44px; height:44px; font-size:24px; }
  .rh-revplay{ width:32px; height:32px; }
  .rh-revdots button{ height:10px; width:10px; }
  .rh-revdots button.on{ width:28px; }
  .rh-revview{ min-height:430px; }   /* voorkomt dat de pagina verspringt bij het laden */
  .rh-revscore{ flex-direction:column; gap:14px; padding:22px 18px; text-align:center; }
  .rh-revscore-meta{ align-items:center; }
  .rh-revscore-main .big{ font-size:64px; }
  .rh-revpage{ grid-template-columns:1fr; gap:12px; }
  .rh-revslider .rev-card p{ -webkit-line-clamp:5; line-clamp:5; }
  .rh-revfoot{ gap:10px; }
  .rh-revdots{ min-width:0; }
}

/* Wie animaties uit heeft staan, krijgt geen schuivende track en geen autoplay */
@media (prefers-reduced-motion:reduce){
  .rh-revtrack{ transition:none; }
  .rh-revslider .rev-card{ transition:none; }
  .rh-revslider .rev-card:hover{ transform:none; }
}

/* ── Tweede knop: "Alles over deze woning" ──────────────────────────────────
   Stond als onderstreepte tekstlink naast de gevulde boekknop en viel daardoor
   weg. Nu een omlijnde pil, zodat de twee acties als paar leesbaar zijn: de
   gevulde knop boekt, de omlijnde leest verder. */
.rh-btn-2{
  display:inline-flex; align-items:center; gap:9px; background:#fff; color:#0E6360;
  border:2px solid #0E6360; padding:15px 26px; border-radius:100px;
  font-weight:700; font-size:15px; line-height:1; white-space:nowrap;
  box-shadow:0 10px 22px -16px rgba(14,99,96,.7);
  transition:background .22s var(--ease-out), color .22s var(--ease-out), transform .22s var(--ease-out), box-shadow .22s var(--ease-out);
}
.rh-btn-2::after{ content:"→"; font-size:16px; transition:transform .22s var(--ease-out); }
.rh-btn-2:hover{ background:#0E6360; color:#fff; transform:translateY(-2px); box-shadow:0 18px 32px -16px rgba(14,99,96,.75); }
.rh-btn-2:hover::after{ transform:translateX(4px); }
.rh-btn-2:focus-visible{ outline:3px solid #E187A0; outline-offset:3px; }
/* Vergunningnummer op een eigen regel, zodat de twee knoppen naast elkaar passen. */
#homeLicense{ flex-basis:100%; }
@media (max-width:640px){ .rh-btn-2{ padding:13px 20px; font-size:14px; } }
@media (prefers-reduced-motion:reduce){ .rh-btn-2, .rh-btn-2::after{ transition:none; } .rh-btn-2:hover{ transform:none; } .rh-btn-2:hover::after{ transform:none; } }

/* ── Banner naar de gids (.gb-*) ────────────────────────────────────────────
   Staat hier en niet in home.css, want alle drie de paginasoorten gebruiken hem:
   de homepage, de twee woningpagina's en de gids zelf. Eén plek dus.

   De fotokolom staat absoluut gepositioneerd. Anders bepaalt de beeldverhouding
   van de drie foto's de hoogte van de hele banner (3 x 187 px = 560 px) en houd
   je naast de tekst een groot leeg vlak over. Nu bepaalt de tekst de hoogte en
   vullen de foto's precies die ruimte. */
.gb-band{
  position:relative; display:block; padding-left:280px;
  border-radius:26px; overflow:hidden; color:#23322F;
  background:linear-gradient(140deg,#F7F4EC,#fff 68%);
  border:1px solid rgba(35,50,47,.08); box-shadow:0 26px 56px -32px rgba(20,60,58,.5);
  transition:transform .24s cubic-bezier(.23,1,.32,1), box-shadow .24s cubic-bezier(.23,1,.32,1);
}
.gb-fotos{
  position:absolute; left:0; top:0; bottom:0; width:280px;
  display:grid; grid-template-rows:repeat(3,1fr); gap:3px;
}
.gb-fotos picture{ display:block; overflow:hidden; min-height:0; }
.gb-fotos img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.23,1,.32,1); }
.gb-fotos::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(8,32,30,.1) 0%,rgba(252,248,241,0) 60%,rgba(252,248,241,.9) 100%);
}
.gb-in{ display:flex; flex-direction:column; gap:9px; padding:26px 30px 26px 28px; min-width:0; }
.gb-eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:#5c6764;
}
.gb-eyebrow::before{ content:""; width:22px; height:2px; border-radius:2px; background:#E187A0; }
.gb-in strong{
  font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(25px,3vw,36px);
  line-height:1.14; color:#23322F;
}
.gb-in em{ font-style:normal; font-size:14.8px; line-height:1.65; color:#5c6764; max-width:56ch; }
.gb-plekken{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.gb-plek{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:100px;
  background:#fff; border:1px solid rgba(35,50,47,.1); font-size:12.8px; font-weight:600; color:#5c6764;
}
.gb-plek b{ color:#0E6360; font-weight:800; font-size:11.5px; }
.gb-knop{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:10px;
  min-height:44px; padding:0 22px; border-radius:100px; background:#14807D; color:#fff;
  font-size:13.5px; font-weight:700; box-shadow:0 14px 28px -14px rgba(14,99,96,.75);
  transition:transform .18s cubic-bezier(.23,1,.32,1);
}
.gb-knop span{ transition:transform .22s cubic-bezier(.23,1,.32,1); }
.gb-band:active{ transform:scale(.99); }

@media (hover:hover) and (pointer:fine){
  .gb-band:hover{ transform:translateY(-4px); box-shadow:0 36px 68px -34px rgba(20,60,58,.6); }
  .gb-band:hover .gb-fotos img{ transform:scale(1.06); }
  .gb-band:hover .gb-knop span{ transform:translateX(4px); }
}

@media (max-width:900px){
  .gb-band{ padding-left:0; }
  .gb-fotos{ position:static; width:auto; grid-template-rows:none; grid-template-columns:repeat(3,1fr); height:150px; }
  .gb-fotos::after{ background:linear-gradient(180deg,rgba(8,32,30,.08) 0%,rgba(252,248,241,0) 55%,rgba(252,248,241,.92) 100%); }
  .gb-in{ padding:22px 22px 24px; }
}

@media (prefers-reduced-motion:reduce){
  .gb-band, .gb-fotos img, .gb-knop span{ transition:none; }
  .gb-band:hover{ transform:none; }
}

/* Doorverwijzing vanaf een tegel op de homepage naar de bijbehorende gidspagina.
   Alleen op de tegels die echt een eigen pagina hebben, anders belooft de link
   meer dan er staat. Raakvlak 44 px voor de telefoon. */
.ac-meer{
  display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:2px;
  font-size:13px; font-weight:800; color:#0E6360;
}
.ac-meer::after{ content:"→"; transition:transform .22s cubic-bezier(.23,1,.32,1); }
.ac-meer:hover::after{ transform:translateX(4px); }