/* Verhuurservice Texel — Kirby-thema
   Look-and-feel van de bestaande site (Work Sans + Inter, teal / cyaan / goud),
   opnieuw opgebouwd zonder page builder: mobile first, één stylesheet. */

:root {
  --teal: #1a748e;
  --cyaan: #55c4d7;
  --goud: #d38e31;
  --zand: #ffd186;
  --ijs: #d1e3e8;
  --lucht: #99e0f5;
  --nacht: #324a51;
  --tekst: #252525;
  --grijs: #595959;
  --lijn: #d8d8d8;
  --wit: #fff;

  --font-kop: "Work Sans", system-ui, sans-serif;
  --font-tekst: "Inter", system-ui, sans-serif;
  --breed: 1320px;
  --midden: 1080px;
  --smal: 860px;
  --rand: clamp(16px, 4vw, 40px);
  --schaduw: 0 2px 15px 5px rgba(0, 0, 0, .18);

  /* Variabelen die wj-bookzo van het thema overneemt. */
  --donker: var(--nacht);
  --paars: var(--teal);
  --roze: var(--goud);
  --mint: var(--ijs);
  --licht: var(--ijs);
  --radius: 4px;
  --font-head: var(--font-kop);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0;
  background: var(--wit);
  color: var(--tekst);
  font: 400 16px/1.65 var(--font-tekst);
  overflow-x: clip; /* clip, geen hidden: hidden maakt van body een eigen scrollcontainer */
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--teal); }
h1, h2, h3, h4 { font-family: var(--font-kop); line-height: 1.12; margin: 0 0 .5em; }
h2 { font-size: clamp(26px, 3.2vw, 35px); font-weight: 600; }
p { margin: 0 0 1em; }
.tekst p:last-child { margin-bottom: 0; }
.tekst a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }

.container { width: 100%; max-width: calc(var(--breed) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.container--midden { max-width: calc(var(--midden) + 2 * var(--rand)); }
.container--smal { max-width: calc(var(--smal) + 2 * var(--rand)); }

.sr, .skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 8px 14px; background: var(--wit); }
:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 2px; }

.kop-goud { color: var(--goud); font-weight: 900; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  min-height: 39px; padding: 6px 30px; border: 1px solid transparent; border-radius: 99px;
  font: 500 15px/1.2 var(--font-tekst); letter-spacing: .02em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s;
}
.knop--vol { background: var(--teal); border-color: var(--teal); color: var(--wit); }
.knop--vol:hover { background: var(--wit); color: var(--teal); }
.knop--wit { background: var(--wit); color: var(--teal); }
.knop--wit:hover { background: var(--teal); border-color: var(--teal); color: var(--wit); }
.knop--rand { background: var(--wit); border-color: var(--teal); color: var(--teal); }
.knop--rand:hover { background: var(--teal); color: var(--wit); }

.pijllink { color: var(--teal); text-decoration: none; font-size: 15px; }
.pijllink::after { content: " →"; font-weight: 700; }
.pijllink:hover { text-decoration: underline; }

/* ---------- topbar ---------- */
.topbar { background: #333; color: #aaa; font-size: 14px; }
.topbar__in { display: flex; justify-content: flex-end; align-items: center; gap: 24px; min-height: 39px; }
.topbar a { color: var(--wit); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { text-decoration: underline; }
.topbar__link svg { width: 15px; fill: currentColor; }
.topbar__taal span { font-size: 12px; letter-spacing: .05em; }
.vlag { display: block; border-radius: 1px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }

/* ---------- kop + menu ---------- */
.kop { position: sticky; top: 0; z-index: 50; background: var(--wit); transition: box-shadow .2s; }
.kop.is-geschoven { box-shadow: 0 2px 14px rgba(0, 0, 0, .12); }
.kop__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 92px; }
.kop__logo img { display: block; width: clamp(130px, 14vw, 170px); height: auto; }

.kop__knop {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 4px; border: 0; background: none;
  color: var(--teal); font: 500 16px var(--font-kop); cursor: pointer;
}
.kop__burger { display: grid; gap: 5px; width: 26px; }
.kop__burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s, opacity .25s; }
.kop__knop[aria-expanded="true"] .kop__burger i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kop__knop[aria-expanded="true"] .kop__burger i:nth-child(2) { opacity: 0; }
.kop__knop[aria-expanded="true"] .kop__burger i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu {
  position: absolute; top: 100%; left: 0; right: 0; display: none;
  padding: 10px var(--rand) 28px; background: var(--wit); box-shadow: 0 14px 20px rgba(0, 0, 0, .1);
}
.menu.is-open { display: block; }
.menu__lijst { list-style: none; margin: 0 0 18px; padding: 0; }
.menu__lijst a {
  display: block; padding: 12px 0; border-bottom: 1px solid #eee;
  color: var(--teal); font: 500 19px var(--font-kop); letter-spacing: 1px; text-decoration: none;
}
/* actief: dezelfde donkere teal (leesbaar op melkglas), dikker + streep eronder */
.menu__lijst a:hover { color: var(--teal); }
.menu__lijst a[aria-current="page"] { color: var(--teal); font-weight: 600 !important; }

@media (min-width: 1100px) {
  .kop__knop { display: none; }
  .menu { position: static; display: flex; align-items: center; gap: clamp(20px, 2.4vw, 40px); padding: 0; box-shadow: none; background: none; }
  .menu__lijst { display: flex; gap: clamp(18px, 2.2vw, 40px); margin: 0; }
  .menu__lijst a { padding: 4px 0; border: 0; border-bottom: 2px solid transparent; font-size: clamp(16px, 1.35vw, 19px); }
  .menu__lijst a { border-bottom-width: 3px; }
  .menu__lijst a[aria-current="page"] { border-bottom-color: var(--teal); }
  .menu__lijst a:hover { border-bottom-color: rgba(26, 116, 142, .35); }
  .menu__boeken { white-space: nowrap; }
}

/* ---------- held (header homepage) ---------- */
.held { position: relative; isolation: isolate; min-height: clamp(380px, 46vw, 760px); display: flex; align-items: center; overflow: hidden; color: var(--wit); }
.held__foto { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.held__beeld { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.held__beeld .held__foto { position: absolute; inset: -6% 0 0; z-index: auto; height: 112%; will-change: transform; }
.held__lijn { position: absolute; z-index: -1; left: 2%; top: -6%; width: min(1360px, 96vw); height: auto; fill: none; stroke: #fff; stroke-width: 1.2; opacity: .85; pointer-events: none; }
.held__veeg { display: block; width: clamp(66px, 7.2vw, 104px); height: auto; margin: 0 0 .4em clamp(0px, 8vw, 220px); fill: #fff; overflow: visible; }
.held::after { /* witte golf onderaan */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(30px, 4.4vw, 86px);
  background: url(../img/header-bg.svg?v=2) no-repeat center bottom / 100% 100%;
}
.held__in { padding-top: 40px; padding-bottom: clamp(110px, 12vw, 190px); }
.held__titel {
  max-width: 13.5em; margin: 0 0 0 clamp(0px, 8vw, 220px);
  font-size: clamp(34px, 5.2vw, 80px); font-weight: 900; line-height: 1.08;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .18); white-space: pre-line;
  animation: infaden .8s .1s ease both;
}

@keyframes held-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes infaden { from { opacity: 0; } to { opacity: 1; } }

/* ---------- zoekbalk ---------- */
.zoek { position: relative; z-index: 5; margin: clamp(-150px, -9vw, -90px) auto 0; padding: 0 var(--rand); }
.zoek__vak {
  display: grid; gap: 18px; width: fit-content; max-width: 100%; margin: 0 auto; padding: clamp(22px, 3.4vw, 50px);
  background: var(--wit); box-shadow: var(--schaduw);
  animation: infaden .8s .25s ease both;
}
.zoek__label { display: block; padding-bottom: 8px; color: var(--grijs); font: 400 14px var(--font-tekst); letter-spacing: .02em; text-transform: uppercase; }
.zoek__invoer { display: flex; align-items: stretch; border: 1px solid var(--lijn); }
.zoek__invoer svg { flex: none; width: 44px; padding: 0 12px; fill: var(--grijs); border-right: 1px solid var(--lijn); }
.zoek__invoer input, .zoek__invoer select {
  min-width: 0; height: 42px; padding: 0 12px; border: 0; border-radius: 0; background: var(--wit);
  color: var(--tekst); font: 400 15px var(--font-tekst); appearance: none;
}
.zoek__invoer input + label + input { border-left: 1px solid var(--lijn); }
.zoek__invoer input[type="date"] { flex: 1 1 0; width: 0; padding: 0 8px; font-size: 14px; }
@media (min-width: 900px) { .zoek__invoer input[type="date"] { flex: none; width: 150px; padding: 0 12px; font-size: 15px; } }
.zoek__invoer select { flex: 1; min-width: 150px; padding-right: 30px; background: var(--wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23595959' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px; }
.zoek__knop { align-self: end; }
@media (min-width: 900px) {
  .zoek__vak { grid-template-columns: auto auto auto; align-items: end; column-gap: 20px; }
  .zoek__knop { margin-left: 10px; }
}

/* ---------- intro ---------- */
.intro { position: relative; padding: clamp(70px, 9vw, 150px) 0 clamp(60px, 7vw, 120px); text-align: center; }
.intro::before {
  content: ""; position: absolute; inset: clamp(-320px, -22vw, -140px) auto auto -4%; width: 90%; aspect-ratio: 1780 / 1184; z-index: -1;
  background: url(../img/introblok-bg.svg) no-repeat left top / contain; transform: scaleX(-1); opacity: .9; pointer-events: none;
}
.intro__meeuw {
  width: clamp(180px, 22vw, 300px); aspect-ratio: 293 / 101; margin: 0 0 18px clamp(-160px, -9vw, -40px);
  background: url(../img/meeuw.svg) no-repeat center / contain;
}
.intro .tekst { font-size: clamp(15px, 1.2vw, 16px); }
.intro__pijl { display: inline-block; margin-top: 34px; animation: wip 2.4s ease-in-out infinite; }
.intro__pijl img { display: block; width: 48px; }
@keyframes wip { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ---------- acties ---------- */
.acties {
  position: relative; overflow-x: clip; overflow-y: visible; padding: clamp(90px, 10vw, 140px) 0 clamp(80px, 9vw, 140px);
  background: url(../img/midden-home-bg.svg) no-repeat center top / cover;
}
.actie { display: grid; gap: 28px; align-items: center; }
.actie + .actie { margin-top: clamp(40px, 5vw, 60px); }
.actie__tekst h2 { color: var(--tekst); }
.actie__tekst .tekst { max-width: 56ch; font-size: 15px; }
.actie__tekst .knop { margin-top: 22px; }
.actie__foto { position: relative; z-index: 2; }
.actie__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 18px 44px rgba(0, 0, 0, .14); }
/* Gouden, iets verschoven cirkel achter ronde foto's (zelfde als bij de tips) */
.ring { position: relative; isolation: isolate; display: block; width: 100%; max-width: 520px; margin: 0 auto; }
.ring::before { content: ""; position: absolute; inset: -14px; z-index: -1; border: 3px solid var(--zand); border-radius: 50%; transform: translate(14px, 10px); pointer-events: none; }
@media (max-width: 899px) {
  .actie__foto { order: -1; } /* mobiel: eerst de foto, dan de tekst */
  .actie { gap: 52px; }
  .actie + .actie { margin-top: 70px; }
  .actie .ring { max-width: none; width: calc(100% - 12px); margin: 0; }
  .actie .ring::before { inset: 0; border-radius: 22px; transform: translate(12px, 12px); }
  .actie__foto img { aspect-ratio: 4 / 3; border-radius: 18px; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); }
  .actie .actie__foto { margin-bottom: 4px; }
  .actie__tekst h2 { font-size: 26px; }
}
@media (min-width: 900px) {
  .actie { grid-template-columns: 1fr 1fr; gap: 60px; }
  .actie--1 .actie__foto { margin-top: -180px; }
  .actie--1 .ring { max-width: 440px; }
  .actie--2 .actie__foto { margin-right: calc(-1 * clamp(80px, 12vw, 220px)); }
  .actie--2 .ring { max-width: 600px; }
}

/* ---------- uitgelichte huisjes ---------- */
.huisjes {
  position: relative; padding: clamp(130px, 14vw, 220px) 0 clamp(170px, 20vw, 330px);
  background: #fff url(../img/carousel-bg.svg) no-repeat center top / cover;
}
.huisjes__vuurtoren {
  --vt-w: clamp(260px, 30vw, 580px);
  position: absolute; left: 0; top: calc(var(--vt-w) * -252 / 763); width: var(--vt-w); aspect-ratio: 763 / 530;
  background: url(../img/vuurtoren-geel.svg) no-repeat left bottom / contain; pointer-events: none;
}
.huisjes--anderen { padding: clamp(40px, 5vw, 70px) 0 clamp(60px, 7vw, 100px); background: #fff; }
.huisjes__kop { text-align: center; margin-bottom: 40px; font-weight: 900; }
.huisjes__rij { display: grid; gap: 24px; }
@media (min-width: 700px) { .huisjes__rij { grid-template-columns: repeat(2, 1fr); } }
/* tablet: twee kolommen, dus geen losse derde kaart */
@media (min-width: 700px) and (max-width: 999px) { .huisjes__rij .huisje:nth-child(n+3) { display: none; } }
@media (min-width: 1000px) { .huisjes__rij { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.huisje { display: flex; flex-direction: column; background: var(--wit); border: 1px solid #e3e3e3; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.huisje__foto { display: block; overflow: hidden; aspect-ratio: 700 / 455; background: var(--ijs); }
.huisje__foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.huisje__body { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.huisje__naam { min-height: 2.3em; margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.huisje__naam a { color: var(--tekst); text-decoration: none; }
.huisje__iconen { display: flex; gap: 12px; margin: 0 0 10px; color: var(--teal); font: 600 14px var(--font-kop); }
.huisje__iconen span { display: inline-flex; align-items: center; gap: 4px; }
.huisje__iconen svg { width: 14px; fill: currentColor; }
.huisje__intro { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 14px; font-size: 13px; line-height: 1.6; }
.huisje__voet { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; margin-top: auto; }
.huisje__voet .knop { align-self: center; }
.huisje__score { display: grid; justify-items: end; line-height: 1; }
.huisje__score strong { font: 500 clamp(34px, 3vw, 42px) var(--font-kop); color: var(--tekst); }
.sterren { position: relative; display: inline-block; color: #ddd; font-size: 15px; letter-spacing: 1px; }
.sterren span { position: absolute; inset: 0 auto 0 0; width: var(--vol); overflow: hidden; color: #f0b429; white-space: nowrap; }
.sterren::before { content: "★★★★★"; }
.huisjes__alle { margin: 40px 0 0; text-align: center; }

/* ---------- texel tips (slider) ---------- */
.tips { position: relative; margin-top: 0; padding: clamp(60px, 7vw, 100px) 0 clamp(50px, 5vw, 70px); background: url(../img/tipsslider-bg.svg) no-repeat center top / cover; }
.tips::before { content: ""; position: absolute; right: 0; top: clamp(-120px, -9vw, -60px); width: 36%; aspect-ratio: 698 / 304; background: url(../img/tips-before.svg) no-repeat right top / contain; pointer-events: none; }
.tips__in { position: relative; }
.reacties__baan { align-items: stretch; }
.tips__baan, .reacties__baan { display: flex; transition: transform .6s cubic-bezier(.4, .1, .2, 1); will-change: transform; }
[data-slider] { overflow: visible; }
.tips__in { overflow-x: clip; overflow-y: visible; }
.tip { flex: 0 0 100%; display: grid; gap: 24px; align-items: center; padding: 0 clamp(30px, 6vw, 80px); }
.tip__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.tip__label { margin: 0 0 4px; color: var(--wit); font: 300 18px var(--font-kop); }
.tip h2 { color: #000; font-weight: 600; font-size: clamp(26px, 2.6vw, 36px); }
.tip p { font-size: 15px; line-height: 1.7; }
.tip .knop { margin-top: 10px; }
@media (min-width: 900px) {
  .tip { grid-template-columns: 5fr 6fr; gap: 50px; }
  .tip__foto { margin-top: clamp(-260px, -16vw, -140px); }
}
.slider__pijl {
  position: absolute; top: 50%; z-index: 3; display: grid; place-items: center; width: 44px; height: 64px; margin-top: -32px;
  padding: 10px; border: 0; background: none; cursor: pointer; opacity: .9; transition: opacity .2s, transform .2s;
}
.slider__pijl svg { width: 22px; fill: var(--wit); filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .25)); }
.slider__pijl:hover { opacity: 1; transform: scale(1.1); }
.slider__pijl--vorige { left: 0; }
.slider__pijl--volgende { right: 0; }
.slider__pijl--grijs { width: 48px; height: 48px; margin-top: -24px; padding: 0; border-radius: 50%; background: var(--wit); box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.slider__pijl--grijs svg { width: 14px; fill: var(--teal); filter: none; }
.slider__pijl--grijs.slider__pijl--vorige svg { margin-right: 2px; } .slider__pijl--grijs.slider__pijl--volgende svg { margin-left: 2px; }
.slider__stippen { display: flex; flex-wrap: nowrap; justify-content: center; gap: 6px; margin: 30px auto 0; max-width: 100%; }
/* streepjes-navigatie (tips en reacties) */
.slider__stippen button { flex: 0 1 34px; min-width: 6px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .7); cursor: pointer; transition: flex-basis .3s, background .3s; }
.slider__stippen button[aria-current="true"] { flex-basis: 60px; background: var(--teal); }
.slider__stippen--donker button { background: #dde3e5; }

/* ---------- kaart ---------- */
.kaart { padding: clamp(60px, 7vw, 90px) 0 0; text-align: center; }
.kaart .tekst { max-width: 80ch; margin: 0 auto 14px; }
.kaart__cta { margin: 26px 0 0; }
.kaart__kaart { position: relative; z-index: 0; isolation: isolate; height: clamp(320px, 38vw, 500px); margin-top: clamp(40px, 5vw, 70px); background: var(--ijs); }
.kaart__kaart .leaflet-popup-content a { font: 600 14px var(--font-kop); color: var(--teal); }
/* klik op een pin: veegbare strook met kaartjes onderin de kaart */
.kaart__kaart { position: relative; }
.kaart-strook {
  position: absolute; left: 50%; bottom: 12px; z-index: 1000; transform: translateX(-50%);
  width: max-content; max-width: min(1100px, calc(100% - 24px)); padding: 0 0 10px;
  background: var(--glas-bg); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); text-align: left; animation: infaden .25s ease both;
}
.kaart-strook[hidden] { display: none; }
.kaart-strook__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 8px 16px; color: var(--teal); font: 600 14px var(--font-kop); }
.kaart-strook__sluit { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: var(--ijs); color: var(--teal); cursor: pointer; }
.kaart-strook__rij { display: flex; gap: 10px; max-width: 100%; overflow-x: auto; padding: 0 12px 4px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.pin-kaart { flex: 0 0 220px; display: block; overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid #e6ecee; color: var(--tekst) !important; text-decoration: none; font: 400 13px/1.4 var(--font-tekst) !important; scroll-snap-align: start; }
.pin-kaart img { display: block; width: 100%; height: 110px; object-fit: cover; }
.pin-kaart__body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.pin-kaart__body small { color: var(--goud); font: 600 11px var(--font-tekst); letter-spacing: .08em; text-transform: uppercase; }
.pin-kaart__body strong { font: 600 14px/1.25 var(--font-kop); color: var(--tekst); }
.pin-kaart__feiten { display: flex; gap: 10px; color: var(--grijs); font-size: 12px; }
.pin-kaart__score { color: var(--tekst); font-weight: 600; }
.pin-kaart__body em { margin-top: 2px; color: var(--teal); font-style: normal; font-weight: 600; font-size: 12px; }
.pin-kaart:hover strong { color: var(--teal); }
.leaflet-marker-icon.is-actief { filter: drop-shadow(0 0 0 #fff) hue-rotate(-20deg) saturate(1.6); transform-origin: bottom center; z-index: 1000 !important; }
@media (max-width: 599px) { .pin-kaart { flex-basis: 68vw; } .pin-kaart img { height: 140px; } .pin-kaart__body { padding: 12px 14px 14px; } .kaart-strook { bottom: 8px; max-width: calc(100% - 16px); } #kaart.kaart__kaart:not(.kaart__kaart--klein) { height: 520px; } }
.pin-teller { cursor: pointer; pointer-events: auto; padding: 2px 8px; border: 0; border-radius: 99px; background: var(--teal); color: #fff; font: 700 11px var(--font-tekst); box-shadow: none; }
.pin-teller::before { display: none; }

/* ---------- reacties ---------- */
.reacties { position: relative; padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 110px); text-align: center; }
.reacties::before { content: ""; position: absolute; inset: 0 0 auto auto; width: 90%; aspect-ratio: 1780 / 1184; z-index: -1; background: url(../img/introblok-bg.svg) no-repeat right top / contain; pointer-events: none; }
.reacties .container { position: relative; }
.reacties .kop-goud { margin-bottom: 36px; }
.reacties__venster { overflow: hidden; overflow: clip; overflow-clip-margin: 30px; margin: 0 clamp(30px, 5vw, 60px); padding: 14px 0 30px; }
.reactie { flex: 0 0 100%; display: flex; padding: 0 18px; text-align: left; transition: opacity .4s; }
.reactie[aria-hidden="true"] { opacity: 0; }
@media (min-width: 800px) { .reactie { flex-basis: 50%; } }
.reactie__kaart { position: relative; display: flex; flex-direction: column; width: 100%; padding: 28px 30px 24px; background: var(--wit); border-radius: 18px; border: 1px solid #ececec; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.reactie__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.reactie__score { margin-bottom: 8px; }
.reactie__quote { margin: -10px -4px -40px auto; color: var(--ijs); font: 900 90px/1 Georgia, serif; }
.reactie h3 { margin: 0 0 10px; font: italic 500 20px/1.25 var(--font-kop); color: #313131; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.5em; }
.reactie__tekst { margin: 0 0 6px; font-size: 14px; line-height: 1.65; color: #3c3c3c; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; min-height: 6.6em; }
.reactie__tekst.is-open { display: block; -webkit-line-clamp: unset; }
.reactie__meer { align-self: flex-start; margin: 0 0 18px; padding: 0; border: 0; background: none; color: var(--teal); font: 600 13px var(--font-tekst); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.reactie__meer[hidden] { display: none; }
.reactie__voet { display: flex; margin-top: auto; padding-top: 14px; border-top: 1px solid #edf2f4; }
.reactie__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--teal); color: #fff; font: 600 16px var(--font-kop); flex: none; }
.reactie__wie { display: grid; line-height: 1.25; font-size: 14px; }
.reactie__wie small { color: var(--grijs); font-size: 12px; }
.reactie__acco { margin-left: 0; padding: 5px 12px; border-radius: 99px; background: var(--ijs); color: var(--teal); font: 600 12px var(--font-tekst); }

/* ---------- instagram ---------- */
.instagram { min-height: 40px; }

/* ---------- voet ---------- */
.voet { position: relative; padding: clamp(70px, 8vw, 100px) 0 clamp(60px, 9vw, 140px); background: var(--nacht) url(../img/footer-bg.svg) no-repeat center / cover; color: var(--wit); font-size: 14px; }
.voet a { color: var(--wit); }
.voet h3 { margin: 0 0 12px; font-size: 20px; font-weight: 600; }
.voet__rij { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.voet__logo img { width: 150px; }
@media (min-width: 700px) { .voet__rij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .voet__rij { grid-template-columns: 1fr 1fr 1fr 1.6fr; } }
.nieuwsbrief { display: flex; max-width: 420px; margin: 4px 0 22px; }
.nieuwsbrief input { width: 0; }
.nieuwsbrief input { flex: 1; min-width: 0; height: 42px; padding: 0 16px; border: 2px solid var(--wit); border-right: 0; border-radius: 10px 0 0 10px; background: transparent; color: var(--wit); font: 15px var(--font-tekst); }
.nieuwsbrief input::placeholder { color: rgba(255, 255, 255, .7); }
.nieuwsbrief button { padding: 0 20px; border: 2px solid var(--wit); border-radius: 0 10px 10px 0; background: var(--wit); color: var(--nacht); font: 600 14px var(--font-tekst); text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.nieuwsbrief button:hover { background: var(--teal); border-color: var(--teal); color: var(--wit); }
.voet__social { display: flex; gap: 18px; margin: 0; padding: 0; list-style: none; }
.voet__social img { display: block; width: 30px; height: 30px; transition: transform .2s; }
.voet__social a:hover img { opacity: .8; }
.voet__onder { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 50px; font-size: 13px; }
.voet__onder a { text-decoration: none; }
.voet__onder a:hover { text-decoration: underline; }
/* Webjongens-signatuur (zoals bij Tessels Onderdak) */
.wj-credit .hart { display: inline-block; color: var(--zand); transition: transform .3s ease; }
.wj-credit:hover .hart { transform: scale(1.25); }

.naarboven { position: fixed; right: 18px; bottom: 18px; z-index: 40; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, .55); opacity: 0; pointer-events: none; transition: opacity .3s; }
.naarboven svg { width: 24px; fill: var(--wit); }
.naarboven.is-zichtbaar { opacity: 1; pointer-events: auto; }

/* ---------- vervolgpagina's (fase 2) ---------- */
.paginakop { position: relative; padding: clamp(50px, 6vw, 90px) 0 30px; background: var(--ijs); }
.paginakop h1 { margin: 0; color: var(--goud); font-weight: 900; font-size: clamp(30px, 4vw, 48px); }
.paginakop--foto { min-height: 340px; display: flex; align-items: flex-end; color: var(--wit); }
.paginakop--foto h1 { color: var(--wit); text-shadow: 2px 2px 5px rgba(0, 0, 0, .46); }
.paginakop__foto { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.paginakop--foto { isolation: isolate; }
.inhoud { padding: clamp(40px, 6vw, 80px) 0; }
.inhoud__intro { font-size: 18px; }
.inhoud__opbouw { padding: 18px 22px; background: #f4f8f9; border-left: 4px solid var(--cyaan); }

/* ---------- gouden lijn bij hover (kaarten + reacties) ---------- */
.huisje, .reactie__kaart { position: relative; }
.huisje::after, .reactie__kaart::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border: 2px solid var(--zand); border-radius: inherit; pointer-events: none;
  clip-path: polygon(0 0, 0 0, 0 0); transition: clip-path .55s cubic-bezier(.4, .1, .2, 1);
  will-change: clip-path; transform: translateZ(0); /* eigen laag: geen herschildering van de foto's */
}
.huisje::after { transition-duration: .7s; }
.huisje:hover::after, .huisje:focus-within::after, .reactie__kaart:hover::after { clip-path: polygon(0 0, 200% 0, 0 200%); }

/* ---------- kaart-extra's ---------- */
.huisje__foto { position: relative; }
.huisje__badge { display: none; }
.huisje__plek { display: none; }
.huisje__score small { margin-top: 4px; color: var(--grijs); font-size: 12px; }
.icoon { width: 14px; height: 14px; fill: currentColor; flex: none; }

/* ---------- detailpagina ---------- */
.acco { padding-top: clamp(20px, 3vw, 36px); }
.acco__galerij { margin-top: 22px; }
.acco__galerij .wj-bookzo__galerij { --wjb-radius: 12px; gap: 8px; }
.acco__galerij .wj-bookzo__foto { border-radius: 12px; }
.acco__galerij .wj-bookzo__foto--groot { border-radius: 18px; }
.acco__galerij .wj-bookzo__foto[data-meer]::after { background: rgba(26, 116, 142, .78); font-family: var(--font-kop); }
.acco__kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 40px; margin-top: clamp(14px, 2vw, 26px); }
.acco__terug { margin: 0 0 8px; font-size: 14px; }
.acco__terug a { color: var(--teal); text-decoration: none; }
.acco__titel { margin: 0 0 12px; font-size: clamp(28px, 3.4vw, 42px); }
.acco__feiten { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; color: var(--teal); font: 600 15px var(--font-kop); }
.acco__feiten span { display: inline-flex; align-items: center; gap: 6px; }
.acco__feiten .icoon { width: 16px; height: 16px; }
.acco__score { display: grid; justify-items: end; gap: 2px; color: var(--tekst); text-decoration: none; line-height: 1; }
.acco__score strong { font: 500 clamp(40px, 4vw, 54px) var(--font-kop); }
.acco__score .sterren { font-size: 18px; }
.acco__score small { margin-top: 6px; color: var(--grijs); font-size: 13px; }
.acco__kolommen { display: grid; gap: 30px; margin-top: clamp(26px, 3vw, 40px); }
@media (min-width: 1000px) { .acco__kolommen { grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }
.acco__kaart { padding: clamp(22px, 3vw, 40px); background: var(--wit); border: 1px solid #ececec; border-radius: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); font-size: 15px; }
.acco__kaart h2 { margin-top: 1.4em; color: var(--teal); font-size: 22px; }
.acco__blok, .acco__usps { margin-top: 1.6em; }
.acco__usps { padding: 18px 22px; background: #f2f8fa; border-radius: 12px; }
.acco .wj-bookzo__leesmeer { border-color: var(--teal); color: var(--teal); border-radius: 99px; font-family: var(--font-tekst); text-transform: uppercase; font-size: 13px; padding: 8px 24px; }
.acco .wj-bookzo__leesmeer:hover { background: var(--teal); color: #fff; }
.acco .wj-bookzo__kenmerken { margin-top: 24px; padding: clamp(22px, 3vw, 36px); background: var(--ijs); border-radius: 18px; }
.acco .wj-bookzo__kenmerken > h2 { color: var(--goud); font-weight: 900; }
.acco .wj-bookzo__kenmerkgroep h3 { color: var(--teal); font-family: var(--font-kop); }
.acco .wj-bookzo__kenmerkgroepen { display: grid; gap: 22px 30px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.acco .wj-bookzo__kenmerkgroep ul { margin: 0; padding: 0; list-style: none; }
.acco .wj-bookzo__kenmerkgroep li { position: relative; padding: 3px 0 3px 24px; font-size: 14px; }
.acco .wj-bookzo__kenmerkgroep li::before { content: ""; position: absolute; left: 0; top: 7px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M4 8.5l2.5 2.5 5.5-6'/%3E%3C/svg%3E") center / 70% no-repeat; }
.acco__plakker { position: sticky; top: 110px; }
.acco .wj-bookzo__praktisch { padding: 28px; background: var(--nacht) url(../img/footer-bg.svg) no-repeat center / cover; color: #fff; border-radius: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); }
.acco .wj-bookzo__praktisch h3 { color: #fff; font-size: 22px; }
.acco .wj-bookzo__praktisch dt { color: rgba(255, 255, 255, .75); }
.acco .wj-bookzo__kaartlink { color: var(--zand); }
.acco .wj-bookzo__praktisch-knop { display: flex; justify-content: center; min-height: 42px; margin-top: 10px; padding: 10px 24px; border-radius: 99px; background: var(--wit); color: var(--teal); font: 500 15px var(--font-tekst); text-transform: uppercase; text-decoration: none; }
.acco .wj-bookzo__praktisch-knop:hover { background: var(--cyaan); color: var(--wit); }
.acco__ligging { padding: clamp(50px, 6vw, 80px) 0 clamp(60px, 7vw, 100px); text-align: center; }
.acco__ligging .kaart__kaart { max-width: calc(var(--breed) + 0px); width: calc(100% - 2 * var(--rand)); margin: 24px auto 0; border-radius: 18px; overflow: hidden; border: 1px solid #ececec; }
.kaart__kaart--klein { height: clamp(280px, 30vw, 420px); margin-top: 24px; }
.acco__boeken { padding: clamp(40px, 5vw, 70px) 0; }
.acco__boeken .kop-goud { text-align: center; }
.acco__boekkaart { max-width: 1100px; margin: 24px auto 0; padding: clamp(18px, 3vw, 40px); background: var(--wit); border: 1px solid #ececec; border-radius: 18px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); min-height: 160px; }
.acco__boekkaart.is-voorbeeld { display: grid; place-items: center; min-height: 200px; text-align: center; background: #f6fafb; border-style: dashed; border-color: #cfe0e5; box-shadow: none; }
.acco__boekkaart.is-voorbeeld .wj-bookzo__element { display: none; }
.acco__voorbeeld { max-width: 46ch; margin: 0; color: var(--teal); font: 500 17px/1.5 var(--font-kop); }
.reacties--acco::before { display: none; }
.acco__zwevend { white-space: nowrap; position: fixed; left: 50%; bottom: 16px; z-index: 45; transform: translateX(-50%); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
@media (min-width: 1000px) { .acco__zwevend { display: none; } }

/* =========================================================
   ONTWERPVOORSTELLEN (aan/uit via <html class="v-…">)
   ========================================================= */

/* A — transparante header over de foto */
/* A — Navbar zoals bij Tessels Onderdak: het logo staat altijd op een witte
   kaart die aan de bovenrand van de navbar hangt en er ~14px onderuit steekt.
   Homepage: boven de hero is de navbar transparant (witte links); zodra je
   scrolt (en op alle andere pagina's) krijgt de navbar melkglas. */
.v-kop { --kop-h: 92px; }
/* Melkglas van de navbar */
:root { --glas-bg: rgba(255, 255, 255, .5); --glas-filter: saturate(1.7) blur(24px); }
.v-kop .kop { isolation: isolate; background: transparent; transition: top .4s ease, box-shadow .3s, transform .35s ease; }
/* verbergen bij naar beneden scrollen (incl. de uitstekende logokaart) */
.kop.is-weg { transform: translateY(calc(-100% - 24px)); box-shadow: none; }
.v-kop .kop__in { position: relative; justify-content: flex-end; min-height: var(--kop-h); }
/* melkglas op een pseudo-element (blur op de header zelf zou het mobiele menu opsluiten) */
.v-kop .kop::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--glas-bg); -webkit-backdrop-filter: var(--glas-filter); backdrop-filter: var(--glas-filter);
  transition: opacity .4s ease;
}
.v-kop .kop.is-geschoven { box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .35); }
.v-kop .kop__logo {
  position: absolute; z-index: 2; left: var(--rand); top: 0;
  display: flex; align-items: center; min-height: calc(var(--kop-h) + 14px); padding: 10px 16px 12px;
  background: #fff; border-radius: 0 0 18px 18px; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .3);
}
.v-kop .kop__logo img { width: clamp(130px, 13vw, 165px); }

/* homepage boven de hero: transparant, witte links */
.v-kop .tpl-home .kop { position: fixed; left: 0; right: 0; top: 39px; }
.v-kop .tpl-home .kop:not(.is-geschoven)::before { opacity: 0; }
.v-kop .tpl-home .kop:not(.is-geschoven) .menu__lijst a { color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .35); }
.v-kop .tpl-home .kop:not(.is-geschoven) .menu__lijst a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.v-kop .tpl-home .kop:not(.is-geschoven) .kop__knop { color: #fff; }
.v-kop .tpl-home .kop.is-geschoven { top: 0; }
.v-kop .tpl-home .held { padding-top: 92px; }
.v-kop .menu__lijst a { transition: color .3s, text-shadow .3s; }
@media (max-width: 1099px) {
  .v-kop { --kop-h: 72px; }
  .v-kop .kop__logo { padding: 8px 12px 10px; }
  .v-kop .kop__logo img { width: 118px; }
  .v-kop .tpl-home .menu.is-open .menu__lijst a { color: var(--teal); text-shadow: none; }
}

/* B — grotere header, zoekbalk als glazen balk in de foto */
.v-held .held { min-height: min(92vh, 900px); align-items: center; }
.v-held .held__in { padding-bottom: 200px; }
.v-held .zoek { margin-top: -190px; }
.v-held .zoek__vak { padding: 20px 22px 22px 30px; border-radius: 18px; background: rgba(255, 255, 255, .93); box-shadow: 0 20px 60px rgba(0, 0, 0, .25); }
.v-held .zoek__invoer { border-color: #e4edf0; background: #fff; border-radius: 8px; overflow: hidden; }
.v-held .zoek__invoer svg { border-right: 0; fill: var(--teal); }
.v-held .zoek__label { padding-left: 16px; font-size: 12px; color: var(--teal); }
.v-held .zoek__knop { min-height: 52px; padding: 10px 40px; border-radius: 8px; }
@media (max-width: 899px) { .v-held .zoek__vak { border-radius: 18px; padding: 22px; } .v-held .held { min-height: 72vh; } }

/* C — moderne kaarten */
.v-kaarten .huisje { border: 1px solid #ececec; border-radius: 18px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.v-kaarten .huisje__badge { position: absolute; top: 14px; right: 14px; display: inline-flex; gap: 4px; align-items: center; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .94); color: var(--tekst); font: 600 14px var(--font-kop); box-shadow: 0 4px 12px rgba(0, 0, 0, .15); }
.v-kaarten .huisje__badge span { color: #f0b429; }
.v-kaarten .huisje__plek { display: block; margin: 0 0 4px; color: var(--goud); font: 600 12px var(--font-tekst); letter-spacing: .08em; text-transform: uppercase; }
.v-kaarten .huisje__naam { min-height: 0; }
.v-kaarten .huisje__iconen span { padding: 3px 10px; border-radius: 99px; background: var(--ijs); }
.v-kaarten .huisje__score { display: none; }
.v-kaarten .huisje__voet { align-items: stretch; }
.v-kaarten .huisje__voet .knop { align-self: stretch; background: var(--teal); color: #fff; }
.v-kaarten .huisje__voet .knop:hover { background: var(--wit); color: var(--teal); }

/* D — tips met gouden ring en bladerstrook */
.v-tips .tip__label { display: inline-block; padding: 4px 14px; border-radius: 99px; background: var(--teal); font-size: 14px; font-weight: 500; }

/* Header-intro met GSAP (held.js): eerst verborgen, geen CSS-fade */
.anim-titel .held__titel, .anim-titel .held__veeg, .anim-titel .zoek__vak { opacity: 0; animation: none; }
.gsap-held .held__titel, .gsap-held .zoek__vak { animation: none; }

/* ---------- sliders: geen pijlen, alleen de stippen (en vegen) ---------- */
.slider__pijl { display: none !important; }
.reacties__venster { margin-left: 0; margin-right: 0; box-sizing: border-box; transition: height .45s ease; }

/* ---------- mobiel ---------- */
@media (max-width: 1099px) {
  /* menu: meer ruimte onder de uitstekende logokaart, pagina erachter vervaagd */
  .menu { padding-top: 46px; }
  .menu-open .kop::before { opacity: 1 !important; }
  .menu-open .kop .kop__knop { color: var(--teal) !important; }
  .menu-open .kop .menu__lijst a, .menu-open .kop .menu__lijst a[aria-current="page"] { color: var(--teal) !important; text-shadow: none !important; border-bottom-color: #eee !important; }
  .menu-open .kop .menu__lijst a[aria-current="page"] { font-weight: 600 !important; }
  .menu-open body::after {
    content: ""; position: fixed; inset: 0; z-index: 40; background: rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
}
@media (max-width: 759px) {
  /* tips: minder zijruimte, foto met ring binnen de marges */
  .tips__in { padding-left: 0; padding-right: 0; }
  .tip { padding: 0 var(--rand); gap: 26px; }
  .tips .tip .ring { max-width: min(76vw, 340px); }
  .tips { padding-top: 40px; }
  /* nieuwsbrief: veld en knop onder elkaar, normale hoogte */
  .nieuwsbrief { flex-wrap: wrap; gap: 8px; }
  .nieuwsbrief input { flex: 1 1 100%; width: auto; height: 44px; border-right: 2px solid var(--wit); border-radius: 10px; font-size: 15px; }
  .nieuwsbrief button { flex: 1 1 100%; height: 44px; border-radius: 10px; }
  /* vuurtoren kleiner en niet tegen de ronde foto */
  .huisjes__vuurtoren { --vt-w: 210px; }
  .acties { padding-bottom: 150px; }
}

@media (max-width: 899px) {
  /* zoek & boek over de volle breedte */
  .zoek__vak { width: 100%; max-width: 560px; }
  /* tablet: tipfoto niet groter dan nodig */
  .tip .ring { max-width: 420px; }
}


/* ---------- datumkiezer (zoek & boek) ---------- */
.zoek__veld--periode { position: relative; }
.zoek__periode { display: flex; align-items: stretch; width: 100%; min-width: 300px; height: auto; min-height: 44px; padding: 0; cursor: pointer; text-align: left; background: #fff; font: inherit; }
.zoek__periode-tekst { flex: 1; display: flex; align-items: center; padding: 10px 14px; color: var(--grijs); font: 400 15px var(--font-tekst); }
.zoek__periode.is-gevuld .zoek__periode-tekst { color: var(--tekst); }
.zoek__periode:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 2px; }
.kalender {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 60; width: 640px; max-width: calc(100vw - 32px);
  padding: 16px 18px 14px; background: #fff; border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
  text-transform: none; color: var(--tekst); animation: infaden .2s ease both;
}
.kalender[hidden], .kalender-achter[hidden] { display: none; }
.kalender__kop { display: grid; grid-template-columns: 40px 1fr 40px auto; align-items: center; gap: 6px; margin-bottom: 6px; }
.kalender__status { margin: 0; text-align: center; color: var(--teal); font: 600 14px var(--font-kop); }
.kalender__nav, .kalender__sluit { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--ijs); color: var(--teal); font-size: 22px; line-height: 1; cursor: pointer; }
.kalender__nav:disabled { opacity: .35; cursor: default; }
.kalender__sluit { display: none; }
.sluit-icoon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.kalender__dagnamen { display: none; }
.kalender__maanden { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.kalender__maand h3 { margin: 4px 0 8px; text-align: center; font: 600 15px var(--font-kop); text-transform: capitalize; }
.kalender__maand h3 + .kalender__raster::before { content: none; }
.kalender__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; }
.kalender__wd { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; color: var(--grijs); font: 600 11px var(--font-tekst); text-align: center; text-transform: capitalize; }
.kalender__dag {
  position: relative; height: 40px; border: 0; background: none; color: var(--tekst); font: 500 14px var(--font-tekst); cursor: pointer;
}
.kalender__dag:hover:not([disabled]) { background: var(--ijs); border-radius: 10px; }
.kalender__dag[disabled] { color: #c3c9cc; cursor: default; text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .15); }
.kalender__dag.is-vandaag { font-weight: 800; color: var(--teal); }
.kalender__dag.is-tussen { background: #e7f2f5; border-radius: 0; }
.kalender__dag.is-start, .kalender__dag.is-eind { background: var(--teal) !important; color: #fff; border-radius: 10px; font-weight: 700; }
.kalender__dag.is-start { border-radius: 10px 0 0 10px; }
.kalender__dag.is-eind { border-radius: 0 10px 10px 0; }
.kalender__dag.is-start:last-child, .kalender__dag.is-start:not(:has(~ .is-tussen, ~ .is-eind)) { border-radius: 10px; }
.kalender__voet { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #eef2f3; }
.kalender__wis { border: 0; background: none; color: var(--teal); font: 600 14px var(--font-tekst); text-decoration: underline; cursor: pointer; }
.kalender__ok { min-height: 42px; border-radius: 8px; }
.kalender__ok:disabled { opacity: .45; cursor: default; }
.kalender-achter { position: fixed; inset: 0; z-index: 900; background: rgba(0, 0, 0, .35); }
html.kalender-open { overflow: hidden; }
.zoek:has(.kalender:not([hidden])) { z-index: 70; }
@media (max-width: 759px) {
  .zoek__periode { min-width: 0; }
  /* mobiel: paneel van onderen, grote dagen, maanden onder elkaar */
  .kalender {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 901; width: 100%; max-width: none; max-height: 88vh;
    display: flex; flex-direction: column; padding: 14px 14px calc(14px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0;
    animation: kalender-omhoog .3s cubic-bezier(.2, .8, .2, 1) both;
  }
  .kalender__kop { grid-template-columns: 1fr auto; }
  .kalender__nav { display: none; }
  .kalender__status { text-align: left; font-size: 16px; padding-left: 4px; }
  .kalender__sluit { display: grid; }
  .kalender__wd { display: none; }
  .kalender__dagnamen { display: grid; grid-template-columns: repeat(7, 1fr); padding: 6px 0; border-bottom: 1px solid #eef2f3; color: var(--grijs); font: 600 12px var(--font-tekst); text-align: center; text-transform: capitalize; }
  .kalender__maanden { grid-template-columns: 1fr; gap: 18px; overflow-y: auto; overscroll-behavior: contain; padding: 6px 2px; flex: 1; }
  .kalender__maand h3 { text-align: left; padding-left: 6px; font-size: 16px; }
  .kalender__dag { height: 46px; font-size: 16px; }
  .kalender__voet { margin-top: 8px; }
  .kalender__ok { flex: 1; max-width: 60%; }
}
@keyframes kalender-omhoog { from { transform: translateY(100%); } to { transform: none; } }

/* ---------- reveal ---------- */
/* Sections faden zacht in bij het scrollen (IntersectionObserver in main.js, geen GSAP) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; }
[data-reveal].is-zichtbaar { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- accommodatie-overzicht ---------- */
.intro--pagina { padding-top: 12px; padding-bottom: clamp(40px, 5vw, 70px); }
.intro--pagina .intro__meeuw { margin-bottom: 0; }
.intro--pagina .intro__kop { font-size: clamp(30px, 3.6vw, 46px); }
/* onder de zoekbalk ruimte voor de vuurtoren, die boven het grijze vlak uitsteekt */
.zoek--pagina, .v-held .zoek--pagina { --vt-w: clamp(260px, 30vw, 580px); margin: 0 auto calc(var(--vt-w) * 252 / 763 + 24px); }
@media (max-width: 759px) { .zoek--pagina, .v-held .zoek--pagina { --vt-w: 210px; } }
.zoek--pagina .zoek__vak { box-shadow: 0 10px 40px rgba(0, 0, 0, .12); }
.huisjes--overzicht { scroll-margin-top: 90px; padding: clamp(110px, 11vw, 180px) 0 clamp(60px, 7vw, 100px); } /* onder = bovenkant van .reacties */
@media (min-width: 700px) and (max-width: 999px) { .huisjes--overzicht .huisjes__rij .huisje:nth-child(n+3) { display: flex; } }
.overzicht__kop { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin: 0 0 28px; }
.overzicht__titel { margin: 0; color: var(--nacht); font-size: clamp(20px, 2vw, 26px); font-weight: 600; }
.overzicht__acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.overzicht__sorteer { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--grijs); }
.overzicht__sorteer select {
  height: 40px; padding: 0 34px 0 14px; border: 1px solid #e4edf0; border-radius: 8px; color: var(--tekst); font: 400 14px var(--font-tekst); appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23595959' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
}
.overzicht__wis::after { content: ""; }
.overzicht__melding { max-width: 60ch; margin: 0 auto 28px; padding: 18px 22px; border-radius: 18px; background: #fff; color: var(--teal); text-align: center; font: 500 16px/1.5 var(--font-kop); }
.overzicht__paginering { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; color: var(--grijs); font-size: 14px; }
.huisje__prijs { display: grid; align-self: stretch; margin: 0; line-height: 1.3; }
.huisje__prijs strong { color: var(--tekst); font: 600 24px var(--font-kop); }
.huisje__prijs span { color: var(--grijs); font-size: 13px; }
.huisje__prijs s { color: var(--grijs); font-size: 12px; }

/* ---------- vervolgpagina's: headerfoto met golf ---------- */
.kopfoto { position: relative; overflow: hidden; height: clamp(200px, 26vw, 400px); }
.kopfoto__foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.kopfoto::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(30px, 4.4vw, 86px);
  background: url(../img/header-bg.svg?v=2) no-repeat center bottom / 100% 100%;
}
.kopfoto + .intro--pagina { padding-top: clamp(20px, 3vw, 40px); }
.kopfoto + .intro--pagina::before { display: none; }
.intro__ondertitel { margin: -.2em 0 1em; color: var(--teal); font: italic 500 clamp(16px, 1.4vw, 19px)/1.4 var(--font-kop); }

/* ---------- texel tips & blogs ---------- */
.tipslijst { padding: clamp(20px, 3vw, 40px) 0 clamp(60px, 7vw, 100px); }
.tipslijst__rij { display: grid; gap: 24px; }
@media (min-width: 700px) { .tipslijst__rij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .tipslijst__rij { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.tipkaart .huisje__plek { display: block; }
.tipkaart .huisje__naam { min-height: 0; }

/* ---------- artikel (tip / blog) ---------- */
.artikel { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 70px); }
.artikel__terug { margin: 0 0 14px; }
.pijllink--terug::after { content: none; }
.pijllink--terug::before { content: "← "; font-weight: 700; }
.artikel__kop { margin-bottom: .3em; font-size: clamp(28px, 3.4vw, 44px); }
.artikel__datum { margin: 0 0 1.4em; color: var(--grijs); font-size: 14px; }
.artikel__tekst { font-size: 16px; }
.artikel__tekst h2 { margin-top: 1.4em; color: var(--teal); font-size: clamp(22px, 2.2vw, 28px); }
.artikel__tekst h3 { margin-top: 1.2em; color: var(--tekst); font-size: clamp(18px, 1.7vw, 21px); }
.artikel__tekst ul, .artikel__tekst ol { padding-left: 1.3em; }
.artikel__tekst li { margin: .25em 0; }

/* ---------- headerfoto met titel (over ons, contact) ---------- */
.kopfoto--titel { display: flex; align-items: center; height: auto; min-height: clamp(260px, 30vw, 460px); isolation: isolate; color: var(--wit); }
.kopfoto--titel .kopfoto__foto { position: absolute; inset: 0; z-index: -1; height: 100%; }
.kopfoto__in { padding-top: 20px; padding-bottom: clamp(50px, 6vw, 90px); }
.kopfoto__titel { margin: 0 0 0 clamp(0px, 8vw, 220px); font-size: clamp(34px, 5.2vw, 72px); font-weight: 900; line-height: 1.08; text-shadow: 0 2px 18px rgba(0, 0, 0, .18); }
.intro__tekst--cursief p:first-child { font-style: italic; }

/* ---------- over ons: wie ik ben ---------- */
.overmij__in { display: grid; gap: 50px; align-items: center; }
.overmij__tekst h2 { color: var(--tekst); }
.overmij__tekst h2 + .tekst { margin-bottom: 1.6em; }
.overmij__tekst .tekst + h2 { margin-top: clamp(36px, 4vw, 56px); }
.overmij__tekst .tekst { max-width: 58ch; font-size: 15px; }
.overmij__tekst .knop { margin-top: 6px; }
.overmij__fotos { display: grid; gap: 40px; }
.overmij__fotos .ring { max-width: 380px; }
.overmij__fotos .ring:nth-child(2) { margin-top: -40px; max-width: 300px; margin-left: 0; }
.overmij__fotos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 18px 44px rgba(0, 0, 0, .14); }
@media (min-width: 900px) { .overmij__in { grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); } }
@media (max-width: 899px) {
  .overmij__fotos { grid-template-columns: 1fr 1fr; gap: 24px; order: -1; }
  .overmij__fotos .ring:nth-child(2) { margin-top: 40px; }
}

/* ---------- contact ---------- */
.contact { padding: clamp(20px, 3vw, 40px) 0 clamp(30px, 4vw, 50px); }
.contact__in { display: grid; gap: 40px; align-items: center; }
.contact__tekst h1 { margin-bottom: .5em; }
.contact__tekst .tekst { font-size: 16px; }
.contact__foto .ring { max-width: 340px; }
.contact__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; box-shadow: 0 18px 44px rgba(0, 0, 0, .14); }
@media (min-width: 800px) { .contact__in { grid-template-columns: 1fr 340px; gap: clamp(40px, 6vw, 90px); } }
@media (max-width: 799px) { .contact__foto .ring { max-width: 240px; margin: 0; } }
.faq { padding: clamp(30px, 4vw, 50px) 0 clamp(60px, 7vw, 100px); }
.faq .kop-goud { margin-bottom: 24px; }
.faq__lijst { display: grid; gap: 12px; }
.faq__item { border: 1px solid #ececec; border-radius: 18px; background: #fff; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.faq__item summary {
  position: relative; padding: 18px 56px 18px 22px; color: var(--teal); font: 600 17px/1.35 var(--font-kop); cursor: pointer; list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border: solid var(--teal); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .25s;
}
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item summary:focus-visible { outline: 3px solid var(--cyaan); outline-offset: 2px; border-radius: 18px; }
.faq__antwoord { padding: 0 22px 20px; font-size: 15px; }
.artikel--pagina { padding-top: clamp(40px, 5vw, 70px); padding-bottom: clamp(60px, 7vw, 100px); }
/* categorie zonder zoekbalk: ruimte boven de band voor de vuurtoren */
.huisjes--categorie { margin-top: calc(clamp(260px, 30vw, 580px) * 252 / 763); }
@media (max-width: 759px) { .huisjes--categorie { margin-top: calc(210px * 252 / 763); } }
/* over ons: meer lucht tussen de knop en de ronde foto van de tips-slider eronder */
.overmij { padding-bottom: clamp(100px, 9vw, 150px); }
@media (max-width: 899px) { .overmij + .tips { padding-top: 70px; } }

/* nieuwsbrief: honingpotje onzichtbaar; geslaagd = melding op de plek van het veld, fout = korte regel eronder */
.nieuwsbrief__pot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nieuwsbrief[hidden] { display: none; }
.nieuwsbrief__melding { max-width: 420px; margin: -14px 0 18px; color: var(--zand); font-size: 14px; }
.nieuwsbrief__melding.is-ok {
  display: flex; align-items: center; gap: 10px; min-height: 42px; margin: 4px 0 22px; padding: 9px 16px;
  border: 2px solid var(--wit); border-radius: 10px; color: var(--wit); font-size: 15px;
}
.nieuwsbrief__melding.is-ok::before {
  content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--zand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23324a51' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* overzicht: "Wat maakt Texel uniek?" — tekst links, ronde foto rechts op de lichte golfband */
.uniek { position: relative; overflow-x: clip; padding: clamp(60px, 8vw, 120px) 0 clamp(50px, 6vw, 90px); background: url(../img/tipsslider-bg.svg) no-repeat center top / cover; }
.uniek .actie__tekst h2 { margin-bottom: .5em; color: var(--goud); }
.uniek .actie__tekst .tekst { font-size: 16px; }
.uniek .ring { max-width: 460px; }
@media (min-width: 900px) { .uniek__in { grid-template-columns: 1.1fr .9fr; gap: clamp(40px, 6vw, 90px); } }
.uniek--zonder-foto .actie__tekst { max-width: var(--smal); margin: 0 auto; text-align: center; }

/* ---------- nieuwsbrief-landingspagina (header als homepage + formulier in de zoek-kaart) ---------- */
.held__tekst {
  max-width: 34em; margin: 18px 0 0 clamp(0px, 8vw, 220px);
  font: 500 clamp(17px, 1.6vw, 22px)/1.5 var(--font-tekst);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .25);
  animation: infaden .8s .2s ease both;
}
.held--nieuwsbrief { min-height: 0; }
.held--nieuwsbrief .held__in { padding-top: clamp(70px, 9vw, 140px); padding-bottom: clamp(100px, 9vw, 150px); }
.held--nieuwsbrief .held__tekst { font-size: clamp(18px, 1.8vw, 25px); }
.zoek--nieuwsbrief { margin-bottom: clamp(20px, 3vw, 40px); }
.zoek__vak.aanmeld { width: min(100%, 760px); }
.aanmeld__form { display: grid; grid-template-columns: minmax(0, 1fr) 12px auto; align-items: end; }
.aanmeld__form[hidden] { display: none; }
.aanmeld__label {
  display: block; padding: 0 0 4px 20px;
  color: var(--teal); font: 400 12px var(--merk-font-tekst); letter-spacing: .02em; text-transform: uppercase;
}
.aanmeld__invoer {
  width: 100%; height: 52px; padding: 0 20px;
  border: 1px solid var(--merk-lijn); border-radius: 8px;
  background: #fff; color: #000; font: 400 15px var(--merk-font-tekst);
}
.aanmeld__invoer:focus { outline: none; border-color: var(--merk-accent); box-shadow: 0 0 0 3px rgba(26, 116, 142, .15); }
.aanmeld__knop {
  grid-column: 3; height: 52px; padding: 0 1.6em; border: 0; border-radius: 8px;
  background: var(--merk-knop); color: #fff; cursor: pointer;
  font: 500 15px/1 var(--merk-font-tekst); letter-spacing: .02em; text-transform: uppercase;
  transition: background-color .3s;
}
.aanmeld__knop:hover { background: var(--merk-hover); }
.aanmeld__knop:focus-visible { outline: 3px solid var(--merk-hover); outline-offset: 2px; }
.aanmeld__knop:disabled { opacity: .6; cursor: wait; }
.aanmeld .aanmeld__melding { max-width: none; margin: 14px 0 0; color: var(--tekst); font-size: 15px; }
.aanmeld .aanmeld__melding.is-ok { min-height: 52px; margin: 0; padding: 12px 18px; border: 1px solid var(--merk-bereik); border-radius: 8px; background: var(--merk-zacht); color: var(--tekst); font-weight: 500; }
@media (max-width: 899px) {
  .aanmeld__form { grid-template-columns: 1fr; row-gap: 12px; }
  .aanmeld__label { padding-left: 4px; }
  .aanmeld__invoer { padding: 0 12px; font-size: 16px; }
  .aanmeld__knop { grid-column: 1; width: 100%; margin-top: 6px; }
}
/* gestileerde postzegel (lijnen) op de plek van de veeg boven de titel */
.held__zegel { width: clamp(44px, 4.6vw, 66px); fill: none; transform: rotate(-6deg); }
@media (max-width: 899px) {
  .held--nieuwsbrief .held__in { padding-bottom: 160px; }
}
/* mobiel: header-titel, -tekst en veeg/zegel gewoon op de containerrand (geen extra inspringing) */
@media (max-width: 899px) {
  .held__titel, .held__tekst, .held__veeg { margin-left: 0; }
}