/* ═══════════════════════════════════════════════════
   CASA FLAMINGO — prototype
   Tokens eerst (worden straks Webflow-variabelen),
   breakpoints op het Webflow-raster: 991 / 767 / 479.
   ═══════════════════════════════════════════════════ */

:root{
  /* kleur — uit de fotoshoot */
  --kalk:      #f6f1e7;  /* muren */
  --zand:      #ede3d0;  /* linnen */
  --terra:#d08040;
  --grond-terra:#b4633a;  /* vloeren */
  --terra-d:#b56a30;
  --olijf:     #4E5A3F;  /* tuin */
  --inkt:      #22261f;  /* avond */
  --zwembad:   #2e9fb4;  /* water — alleen als accent */
  --wit:       #fdfbf6;

  /* typografie */
  --font-kop:  "Fraunces", Georgia, serif;
  --font-body: "Karla", -apple-system, sans-serif;
  --maat-hero:  clamp(3.4rem, 11vw, 9.5rem);
  --maat-h2-xl: clamp(2.1rem, 4.6vw, 4.2rem);
  --maat-h2:    clamp(1.7rem, 3.2vw, 2.8rem);
  --maat-h3:    clamp(1.25rem, 1.9vw, 1.6rem);
  --maat-body:  clamp(1rem, 1.15vw, 1.125rem);
  --maat-klein: .8rem;

  /* maat & ritme */
  --sectie-y:   clamp(5rem, 12vh, 9rem);
  --wrap-max:   80rem;
  --wrap-smal:  46rem;
  --marge-x:    clamp(1.25rem, 4vw, 3rem);
  --radius:     .375rem;
  --vlot:       cubic-bezier(.22,1,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  font-size:var(--maat-body);
  line-height:1.65;
  color:var(--inkt);
  background:var(--grond-terra);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--marge-x)}
.wrap--smal{max-width:var(--wrap-smal)}

/* ── typokoppen ── */
.kop{font-family:var(--font-kop);font-weight:390;font-size:var(--maat-h2);line-height:1.08;letter-spacing:-.01em}
.kop--groot{font-size:var(--maat-h2-xl)}
.kop em{font-style:italic;font-weight:340;color:var(--terra)}
.intro .kop em{color:inherit;opacity:.68}
.ligging .kop em,.drempel .kop em,.boeken .kop em,.drempel__kop em,.boeken__kop em{color:var(--terra)}

/* regel-reveal: elke .regel knipt zijn kind af */
.regel{display:block;overflow:hidden;padding:.06em .08em .16em;margin:-.06em -.08em -.16em}
.regel>span{display:block}  /* verbergen gebeurt in JS (gsap.from) — geen JS = alles leesbaar */

/* ── nav ── */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem var(--marge-x);
  color:var(--wit);
  transition:background .4s,color .4s,box-shadow .4s;
}
.nav{will-change:transform}
.nav.is-weg{transform:translateY(-115%)}
.nav{transition:background .4s,color .4s,box-shadow .4s,transform .4s var(--vlot)}
.nav.is-vast{background:color-mix(in srgb, var(--kalk) 42%, transparent);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);color:var(--inkt);box-shadow:0 1px 0 rgb(0 0 0/.06)}
.nav.is-vast.nav--donker{background:rgb(22 19 14/.38);color:var(--kalk);box-shadow:0 1px 0 rgb(255 255 255/.08)}
.nav__acties{display:flex;align-items:center;gap:1.1rem}
.nav__taal{display:flex;align-items:center;gap:.4rem;font-size:.9rem}
.nav__taal a{text-decoration:none;opacity:.5}
.nav__taal a.is-actief{opacity:1;font-weight:600}
.nav__taal span{opacity:.35}
.nav__merk{display:block}
.nav__merk img{height:2.05rem;width:auto;display:block}
.nav__merk .logo-donker{display:none}
.nav.is-vast:not(.nav--donker) .logo-wit{display:none}
.nav.is-vast:not(.nav--donker) .logo-donker{display:block}
.nav__links{display:flex;gap:1.5rem}
.nav__links a{font-size:.95rem;text-decoration:none;letter-spacing:.03em;opacity:.8;position:relative;padding-bottom:.25rem}
.nav__links a.is-actief{opacity:1}
.nav__links a.is-actief::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;background:var(--terra)}
.nav--donker .nav__links a.is-actief::after{background:var(--terra)}
.nav__links a:hover{opacity:1}

/* ── knoppen ── */
.btn{
  display:inline-block;background:var(--terra);color:var(--wit);
  font-family:var(--font-body);font-weight:500;font-size:.9rem;letter-spacing:.03em;
  padding:.85rem 1.7rem;border-radius:99px;text-decoration:none;border:0;cursor:pointer;
  transition:background .25s,transform .25s var(--vlot);
}
.btn:hover{background:var(--terra-d)}
.btn--klein{padding:.55rem 1.1rem;font-size:.8rem}
.btn--groot{padding:1.05rem 2.3rem;font-size:1rem}
.lijn{font-size:.95rem;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:.1em;opacity:.85}
.lijn:hover{opacity:1}

/* ═══ 1. HERO ═══ */
.hero{position:relative;height:130vh}
.hero__beeld{position:sticky;top:0;height:100vh;overflow:hidden}
.hero__stapel{position:absolute;inset:0;transform:scale(1.12);will-change:transform}
.hero__stapel picture{position:absolute;inset:0}
.hero__stapel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 65%;opacity:0;transition:opacity 1.6s ease;will-change:transform,opacity}
.hero__stapel img.is-actief{opacity:1}
.hero__beeld::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 46% at 50% 52%,rgb(0 0 0/.42),transparent 78%),linear-gradient(180deg,rgb(0 0 0/.35),rgb(0 0 0/.1) 35%,rgb(0 0 0/.1) 55%,rgb(0 0 0/.5))}
.hero__inhoud{
  position:absolute;top:0;left:0;height:100vh;width:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  color:var(--wit);z-index:2;padding-inline:var(--marge-x);
}
.hero__plaats{font-family:var(--font-kop);font-style:italic;font-size:1.3rem;margin-bottom:1.2rem;text-shadow:0 1px 14px rgb(0 0 0/.55)}
.hero__titel{font-family:var(--font-kop);font-weight:340;font-size:var(--maat-hero);line-height:.98;letter-spacing:-.02em;text-shadow:0 2px 18px rgb(0 0 0/.35),0 2px 60px rgb(0 0 0/.3)}
.hero__onder{max-width:26rem;margin-top:1.6rem;font-size:1.05rem;opacity:.95;text-shadow:0 1px 12px rgb(0 0 0/.5)}
.hero__balk{
  position:absolute;left:var(--marge-x);right:var(--marge-x);top:calc(100vh - 5.2rem);z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:end;
  color:var(--wit);font-size:.98rem;letter-spacing:.04em;text-shadow:0 1px 10px rgb(0 0 0/.5);
}
.hero__balk p{margin:0}
.hero__balk-links span+span::before{content:"·";margin-inline:.7rem;opacity:.6}
.hero__balk-rechts{text-align:right}
.hero__balk .pin{width:1.05em;height:1.05em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em;margin-right:.5rem}
.hero__balk-rechts{color:inherit;text-decoration:none}
.hero__balk-rechts:hover .sterren5{opacity:.85}
.sterren5{color:var(--terra);letter-spacing:.14em;margin-right:.55rem;text-shadow:none;transition:opacity .25s}
.hero__scroll{justify-self:center;width:26px;height:42px;border:1.5px solid rgb(255 255 255/.7);border-radius:999px;position:relative;display:block;transition:border-color .25s}
.hero__scroll:hover{border-color:var(--wit)}
.hero__scroll i{position:absolute;left:50%;top:8px;width:4px;height:7px;margin-left:-2px;border-radius:999px;background:var(--wit);animation:muisglijd 2s ease-in-out infinite}
@keyframes muisglijd{0%{top:8px;opacity:0}20%{opacity:1}60%{top:25px;opacity:1}80%,100%{top:25px;opacity:0}}

/* ═══ 2. INTRO ═══ */
.intro{padding-block:calc(var(--sectie-y)*1.3) max(34vh,var(--sectie-y))}
.intro .kop{max-width:56rem}
.intro__tekst{max-width:38rem;margin-top:2.5rem;display:grid;gap:1.2rem;opacity:.92}
.cijfers{
  list-style:none;display:flex;flex-wrap:wrap;gap:2.5rem 4rem;
  margin-top:4rem;padding-top:2.5rem;border-top:1px solid rgb(255 255 255/.18);
}
.cijfers b{display:block;font-family:var(--font-kop);font-weight:340;font-size:clamp(2.2rem,4vw,3.6rem);line-height:1}
.cijfers span{font-size:1rem;opacity:.8}

/* ═══ 3. BUITEN ═══ */
.buiten{display:grid;grid-template-columns:1.15fr 1fr}
.buiten__beeld{position:sticky;top:0;height:100vh;overflow:hidden}
.lagen{position:relative;height:100%}
.lagen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s ease,transform 1.6s ease}
.lagen img.is-actief{opacity:1;transform:scale(1)}
.buiten__tekst article{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:4rem clamp(2rem,6vw,6rem);
}
.buiten__tekst .tel{font-family:var(--font-kop);font-style:italic;font-size:clamp(1.6rem,2.4vw,2.2rem);opacity:.35;margin-bottom:1rem;transition:color .5s,opacity .5s}
.buiten__tekst article.is-hier .tel{color:var(--terra);opacity:1}
body[data-grond="terra"] .buiten__tekst article.is-hier .tel{color:var(--kalk)}
.buiten__tekst h3{font-family:var(--font-kop);font-weight:420;font-size:var(--maat-h3);margin-bottom:.9rem}
.buiten__tekst p{max-width:26rem}

/* ═══ 4. DREMPEL ═══ */
.drempel{position:relative;height:160vh}
.drempel__beeld{position:sticky;top:0;height:100vh;overflow:hidden}
.drempel__beeld img{width:100%;height:100%;object-fit:cover;transform-origin:50% 45%}
.drempel__beeld::after{content:"";position:absolute;inset:0;background:rgb(0 0 0/.28)}
.drempel__kop{
  position:absolute;top:0;height:100vh;width:100%;z-index:2;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  color:var(--wit);font-family:var(--font-kop);font-weight:340;
  font-size:var(--maat-h2-xl);text-align:center;line-height:1.05;
}

/* ═══ 5. RAIL — sticky-kader, geen ScrollTrigger-pin: de sectie is hoog,
   het kader plakt, en JS vertaalt scrollvoortgang naar een x-verschuiving.
   Sticky-geometrie is van de browser en overleeft elke resize. ═══ */
.rail{margin-top:clamp(4rem,10vh,8rem)}
.rail__kader{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:2rem}
.rail__kop{max-width:var(--wrap-max);margin-inline:auto;padding-inline:var(--marge-x);margin-bottom:4.5rem;width:100%}
.rail__kop .kop{max-width:42rem}
.rail__spoor{display:flex;gap:clamp(1rem,2vw,2rem);padding-inline:var(--marge-x);width:max-content}
.kaart{width:min(clamp(19rem,30vw,26rem),calc((100vh - 25rem)*.8));flex-shrink:0}
.kaart img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.kaart figcaption{padding-top:.9rem}
.kaart b{font-family:var(--font-kop);font-weight:450;font-size:1.15rem;display:block}
.kaart span{font-size:.98rem;opacity:.72}

/* parallax: container knipt, beeld beweegt er iets groter in */
[data-parallax]{overflow:hidden;border-radius:var(--radius)}
[data-parallax] img{will-change:transform}

.rail__lijn{height:2px;background:rgb(0 0 0/.12);margin:2.6rem var(--marge-x) 0;position:relative;overflow:hidden}
.rail__lijn span{position:absolute;inset:0;background:var(--terra);transform-origin:left;transform:scaleX(0)}

/* ═══ 6. DETAILS ═══ */
.details{padding-block:var(--sectie-y)}
.details .kop{max-width:36rem;margin-bottom:3.5rem}
.raster{
  display:grid;gap:clamp(1rem,2vw,1.8rem);
  grid-template-columns:repeat(6,1fr);
  grid-template-areas:"a a b b c c" "e e e f f f";
}
.details .wrap{max-width:calc(var(--wrap-max) + 10rem)}
.raster__a{grid-area:a}.raster__b{grid-area:b}.raster__c{grid-area:c}
.raster__d{grid-area:d}.raster__e{grid-area:e}.raster__f{grid-area:f}
.raster figure img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius);aspect-ratio:4/3}
.raster__c img{aspect-ratio:3/4}.raster__f img{aspect-ratio:16/9}
.raster figcaption{font-size:.95rem;opacity:.72;padding-top:.6rem}

/* ═══ 6b. VOORZIENINGEN ═══ */
.voorzieningen{padding-block:var(--sectie-y)}
.voorzieningen .wrap{max-width:62rem}
.voorz{list-style:none;margin-top:2.5rem;columns:3;column-gap:3.5rem}
.voorz--kort{columns:2;column-gap:4.5rem;max-width:58rem}
.voorz__meer{margin-top:2.4rem}
.btn--lijn{background:transparent;color:inherit;border:1px solid rgb(0 0 0/.35);cursor:pointer;font:inherit;font-size:.95rem;padding:.85rem 1.6rem;border-radius:999px;transition:border-color .25s,background .25s}
.btn--lijn:hover{background:var(--terra);border-color:var(--terra);color:var(--wit)}
.voorz-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:2rem}
.voorz-modal[hidden]{display:none}
.voorz-modal__achter{position:absolute;inset:0;background:rgb(20 18 14/.55)}
.voorz-modal__paneel{position:relative;width:min(44rem,92vw);max-height:86vh;overflow-y:auto;background:var(--kalk);color:var(--inkt);border-radius:var(--radius);padding:clamp(1.6rem,3vw,3rem)}
.voorz-modal__sluit{position:sticky;top:0;float:right;margin:-.4rem -.4rem 0 0;width:2.4rem;height:2.4rem;border:0;border-radius:50%;background:rgb(0 0 0/.06);font-size:1.4rem;line-height:1;cursor:pointer;color:inherit}
.voorz-modal__sluit:hover{background:rgb(0 0 0/.12)}
.voorz-modal__paneel h3,.voorz-modal__titel{font-family:var(--font-kop);font-weight:390;font-size:1.8rem;margin-bottom:.6rem}
.voorz-modal__paneel h4,.voorz-modal__groep{font-family:var(--font-kop);font-weight:450;font-size:1.15rem;margin-top:2rem;margin-bottom:.4rem}
.voorz-modal__paneel ul{list-style:none}
.voorz-modal__paneel li{display:flex;align-items:center;gap:.85rem;padding:.55rem 0;border-bottom:1px solid rgb(0 0 0/.08)}
.voorz-modal__paneel .voorz__ico{width:1.2rem;height:1.2rem}
.prijsmodal__noot{font-size:.92rem;opacity:.65;margin-top:.4rem}
.prijstabel{width:100%;border-collapse:collapse;margin-top:1.4rem}
.prijstabel th{text-align:left;font-size:.85rem;letter-spacing:.02em;opacity:.6;font-weight:500;padding:.5rem 0;border-bottom:1px solid rgb(0 0 0/.18)}
.prijstabel th:nth-child(n+2),.prijstabel td:nth-child(n+2){text-align:right;white-space:nowrap}
.prijstabel td{padding:.65rem 0;border-bottom:1px solid rgb(0 0 0/.08);vertical-align:top}
.prijstabel td b{font-weight:600;display:block}
.prijstabel td span{font-size:.88rem;opacity:.6}
.prijstabel + .prijsmodal__noot{margin-top:1.2rem}
.voorz__ico{width:1.35rem;height:1.35rem;flex-shrink:0;color:var(--terra);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.voorz li{break-inside:avoid;display:flex;align-items:center;gap:.9rem;padding:.6rem 0;border-bottom:1px solid rgb(0 0 0/.08)}

/* ═══ 6b. ZOOM — beeld groeit vast onder de scroll ═══ */
.zoom{height:250vh;position:relative}
.zoom__kader{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center}
.zoom__beeld{position:absolute;inset:0;overflow:hidden;will-change:transform;border-radius:0}
.zoom__beeld img{width:100%;height:100%;object-fit:cover}
.zoom__scrim{position:absolute;inset:0;background:rgb(18 15 10/.45);z-index:1}
.zoom__tekst{position:relative;z-index:2;text-align:center;color:var(--wit);padding-inline:var(--marge-x)}
.zoom__tekst h2{font-family:var(--font-kop);font-weight:340;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.05;text-shadow:0 2px 30px rgb(0 0 0/.35)}
.zoom__tekst p{max-width:30rem;margin:1.2rem auto 0;font-size:1.1rem;text-shadow:0 1px 14px rgb(0 0 0/.45)}
.zoom__cta{margin-top:2rem}

@media (max-height:760px) and (min-width:768px){
  .rail__kop{margin-bottom:1.4rem}
  .rail__kader{padding-block:1.2rem}
  .rail__kop .kop{font-size:clamp(1.5rem,2.4vw,2rem)}
}

/* ═══ 7a. REVIEWS ═══ */
.reviews{padding-block:var(--sectie-y)}
.reviews__sub{margin-top:1.2rem;opacity:.85}
.sterren{color:var(--terra);letter-spacing:.18em;margin-right:.7rem}
.reviews__rij{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,4.5rem);margin-top:3.2rem}
.review{border-top:1px solid rgb(0 0 0/.15);padding-top:1.8rem}
.review p{font-family:var(--font-kop);font-weight:360;font-size:clamp(1.25rem,1.9vw,1.65rem);line-height:1.45}
.review footer{margin-top:1.4rem}
.review b{font-family:var(--font-kop);font-size:1.1rem}
.review span{display:block;font-size:.95rem;opacity:.65;margin-top:.15rem}

/* ═══ 7. LIGGING ═══ */
.ligging{padding-block:calc(var(--sectie-y)*1.3) max(34vh,var(--sectie-y))}
.ligging__beeld{max-width:var(--wrap-max);margin:0 auto 4rem;padding-inline:var(--marge-x)}
.ligging__beeld img{border-radius:var(--radius);aspect-ratio:21/9;object-fit:cover;width:100%}
.ligging__intro{max-width:34rem;margin-top:1.6rem;opacity:.9}
.buurt{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;margin-top:4rem}
.buurt__ico{width:1.7rem;height:1.7rem;display:block;margin-bottom:.9rem;color:var(--terra);fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.buurt__item b{display:block;font-family:var(--font-kop);font-weight:390;font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15;margin-bottom:.5rem}
.buurt__item span{font-family:var(--font-kop);font-style:italic;font-size:1.05rem;opacity:.65}
.kaart-embed{margin-top:3rem;border-radius:var(--radius);overflow:hidden;aspect-ratio:21/9}
.kaart-embed iframe{width:100%;height:100%;border:0;filter:sepia(.14) saturate(1.04) hue-rotate(-8deg)}
.kaart-embed{cursor:pointer}
.kaart-embed iframe{pointer-events:none}
.kaart-embed.is-actief{cursor:auto}
.kaart-embed.is-actief iframe{pointer-events:auto}
.ligging__noot{margin-top:1.6rem;font-size:.95rem;opacity:.8}
.ligging__noot a{color:inherit}

/* ═══ 8. PRIJZEN ═══ */
.prijzen{padding-block:var(--sectie-y)}
.prijzen__intro{max-width:34rem;margin-top:1.4rem;opacity:.85}
.seizoenen{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem;margin-top:3.5rem}
.seizoen{border-top:1px solid rgb(0 0 0/.18);padding-top:1.4rem}
.seizoen h3{font-family:var(--font-kop);font-style:italic;font-weight:360;font-size:1.5rem;margin-bottom:1.6rem;color:var(--terra)}
.seizoen p{margin:0}
.seizoen span{display:block;font-size:.92rem;opacity:.62;margin-bottom:.25rem}
.seizoen__nacht b{font-family:var(--font-kop);font-weight:360;font-size:clamp(2.1rem,3.2vw,3rem);line-height:1}
.seizoen__week{margin-top:1.1rem !important}
.seizoen__week b{font-family:var(--font-kop);font-weight:390;font-size:1.25rem}
.prijzen__voet{display:flex;align-items:center;gap:2.5rem;margin-top:3.5rem;flex-wrap:wrap}
.prijzen__voet .btn{flex-shrink:0}
.prijzen__klein{font-size:.92rem;opacity:.6;max-width:38rem}

/* ═══ 9. FAQ ═══ */
.faq{padding-block:var(--sectie-y)}
.vragen{margin-top:2.5rem;border-top:1px solid rgb(0 0 0/.14)}
.vragen details{border-bottom:1px solid rgb(0 0 0/.14)}
.vragen summary{
  list-style:none;cursor:pointer;padding:1.25rem 2.5rem 1.25rem 0;position:relative;
  font-family:var(--font-kop);font-weight:430;font-size:1.1rem;
}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{
  content:"+";position:absolute;right:.25rem;top:50%;translate:0 -50%;
  font-family:var(--font-body);font-weight:300;font-size:1.5rem;transition:rotate .3s var(--vlot);
}
.vragen details[open] summary::after{rotate:45deg}
.vragen details>div{padding:0 0 1.4rem;max-width:38rem;opacity:.88}
.tbd{color:var(--terra-d);font-style:italic}

/* ═══ 10. BOEKEN ═══ */
.boeken{position:relative;padding-block:calc(var(--sectie-y)*1.3);color:var(--kalk);overflow:hidden}
.boeken__beeld{position:absolute;inset:0;z-index:0}
.boeken__beeld img{width:100%;height:100%;object-fit:cover}
.boeken__beeld::after{content:"";position:absolute;inset:0;background:color-mix(in srgb, var(--olijf) 78%, black 8%)}
.boeken .wrap{position:relative;z-index:1;text-align:center}
.boeken .kop{margin-inline:auto}
.boeken__tekst{max-width:30rem;margin:1.8rem auto 2.4rem;opacity:.92}
.boeken__acties{display:flex;flex-direction:column;align-items:center;gap:1.2rem}

/* ═══ VOET ═══ */
.voet{background:var(--inkt);color:var(--kalk);padding-block:3.5rem 1.8rem;font-size:.95rem}
.voet__grid{display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem}
.voet__logo{height:2.1rem;width:auto;margin-bottom:1.1rem;display:block}
.voet__kol p{opacity:.8}
.voet__kol--rechts{display:flex;flex-direction:column;gap:.55rem;text-align:right}
.voet a{color:inherit;text-decoration:none;opacity:.82;transition:opacity .2s}
.voet a:hover{opacity:1}
.voet__onder{display:flex;justify-content:space-between;gap:1.5rem;margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgb(255 255 255/.12);font-size:.85rem;opacity:.55}
.voet__links a:hover{opacity:1}

/* ═══════════ BREAKPOINTS — Webflow-raster ═══════════ */
@media (max-width:991px){
  .voorz{columns:2}
  .buiten{grid-template-columns:1fr}
  .buiten__beeld{position:relative;height:60vh}
  .lagen img{position:absolute}
  .buiten__tekst article{min-height:0;padding:3rem var(--marge-x)}
  
  .raster{grid-template-columns:repeat(2,1fr);grid-template-areas:"a b" "c e" "f f"}
}
@media (max-width:767px){
  .voet__grid,.voet__onder{flex-direction:column;align-items:flex-start}
  .voet__kol--rechts{text-align:left}
  .reviews__rij{grid-template-columns:1fr;gap:2rem}
  .buurt{grid-template-columns:repeat(2,1fr);gap:2rem}
  .seizoenen{grid-template-columns:repeat(2,1fr);gap:2rem}
  .voorz{columns:2}
  .zoom{height:220vh}
  .nav__links{display:none}
  .rail{margin-top:0}
  /* rail: geen verschuiving op mobiel — het spoor wordt zelf swipebaar.
     Een stukje van de volgende kaart blijft zichtbaar (uitnodiging tot
     swipen), de scrollbar is verborgen en de voortgangslijn loopt mee. */
  .rail__kader{position:static;min-height:0;padding-block:var(--sectie-y) 0}
  .rail__kop{margin-bottom:2.2rem}
  .kaart{width:min(72vw,24rem)}
  .rail__spoor{width:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scroll-padding-inline:var(--marge-x);padding-bottom:1.2rem;scrollbar-width:none}
  .rail__spoor::-webkit-scrollbar{display:none}
  .kaart{scroll-snap-align:start}
  .rail__lijn{margin-top:.4rem;margin-bottom:var(--sectie-y)}
  .hero{height:115vh}
  .hero__balk{font-size:.78rem;top:calc(100vh - 4.4rem)}
  .hero__balk-links span+span::before{margin-inline:.4rem}
  .hero__scroll{transform:scale(.85)}
  .cijfers{gap:1.8rem 2.4rem}
  
  
}
@media (max-width:479px){
  .buurt{grid-template-columns:1fr;gap:1.6rem}
  .seizoenen{grid-template-columns:1fr 1fr;gap:1.6rem}
  .prijzen__voet{gap:1.4rem}
  .voorz{columns:1}
  .kaart-embed{aspect-ratio:4/3}
  .hero__onder{font-size:.95rem}
  .raster{grid-template-columns:1fr;grid-template-areas:"a" "b" "c" "e" "f"}
  .kaart{width:78vw}
  
  .boeken__acties .btn--groot{width:100%}
}

/* reduced motion: alles meteen zichtbaar */
@media (prefers-reduced-motion:reduce){
  .hero__scroll i{animation:none;top:14px;opacity:1}
  html{scroll-behavior:auto}
}

/* Netlify-badge (door Netlify ingespoten iframe) nooit tonen */
#nl-badge-frame{display:none !important}

/* ═══ SEO-teksten (Claudia, 29-09-2026) — aanvullingen homepage ═══ */
.hero__titel-sub{display:block;font-size:clamp(1.15rem,2.1vw,1.7rem);font-weight:380;letter-spacing:0;line-height:1.3;margin-top:1rem;text-shadow:0 1px 14px rgb(0 0 0/.5)}
/* de hero-inhoud vervaagt en schuift onder de scroll: eigen laag, zodat de tekst
   met schaduw niet elk frame opnieuw getekend wordt (lag bovenaan, 30-09) */
.hero__inhoud{will-change:transform,opacity}
.rail__tekst,.details__tekst,.voorz__tekst,.faq__sub{max-width:38rem;margin-top:1.2rem;opacity:.88}
.details .kop{margin-bottom:0}
.details__tekst{margin-bottom:3.5rem}
.zoom__kop{font-family:var(--font-kop);font-weight:340;font-size:clamp(2.4rem,5.5vw,4.6rem);line-height:1.05;text-shadow:0 2px 30px rgb(0 0 0/.35)}
.zoom__tekst p.zoom__kop{max-width:none;margin:0;font-size:clamp(2.4rem,5.5vw,4.6rem)}
.vragen summary h3{font:inherit;display:inline}
.faq__meer{margin-top:2.2rem}
p a,.vragen a{text-underline-offset:.18em;text-decoration-thickness:1px}
.voet__grid{display:grid;grid-template-columns:1fr auto auto;gap:2.5rem 4.5rem}
.voet__ontdek{display:flex;flex-direction:column;gap:.55rem}
.voet__label{font-family:var(--font-kop);font-style:italic;opacity:.55 !important;margin-bottom:.2rem}
@media (max-width:767px){
  .voet__grid{grid-template-columns:1fr}
}

/* ═══════════ SUBPAGINA'S — eigen bouwstenen op hetzelfde systeem ═══════════ */
.btn--licht{background:var(--kalk);color:var(--inkt)}
.btn--licht:hover{background:var(--wit)}

/* paginakop: titel links, beeld rechts, op terra */
.pkop{min-height:92vh;display:flex;align-items:center;padding-block:calc(6rem + 4vh) max(20vh,var(--sectie-y))}
.pkop>.wrap{width:100%}
.pkop__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,6.5rem);align-items:center}
.kruimel{display:flex;flex-wrap:wrap;gap:.55rem;font-size:.9rem;opacity:.72;margin-bottom:2rem}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}
/* maat zo gekozen dat elke titel precies op zijn bedoelde regels valt (gemeten 1440 t/m 390, 30-09) */
.pkop__titel{font-family:var(--font-kop);font-weight:340;font-size:clamp(2rem,3.9vw,3.8rem);line-height:1.05;letter-spacing:-.015em}
.pkop__lead{max-width:34rem;margin-top:2rem;font-size:1.08rem;opacity:.92}
.pkop__acties{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem 1.8rem;margin-top:2.4rem}
.pkop__beeld{aspect-ratio:4/5;max-height:74vh;justify-self:end;width:100%}
.pkop__beeld img{width:100%;height:100%;object-fit:cover}
.pkop--smal{min-height:0;padding-bottom:max(14vh,5rem)}
.pkop--smal .pkop__grid{grid-template-columns:1fr}
.pkop--smal .pkop__titel{max-width:52rem}

/* hoofdstuk: kop plakt links, tekst rechts */
.hfst{padding-block:var(--sectie-y)}
.hfst__grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:clamp(1.5rem,3vw,3rem)}
.hfst__kop{grid-column:1/6;align-self:start}
.hfst__tel{font-family:var(--font-kop);font-style:italic;font-size:clamp(1.4rem,2vw,1.9rem);color:var(--terra);margin-bottom:.9rem}
.hfst__tekst{grid-column:7/13;display:grid;gap:1.2rem;align-content:start}
.hfst__tekst>p:first-child{font-size:1.12em}
.hfst__noot{font-size:.92rem;opacity:.65}

/* beeld boven een hoofdstuk: band of paar */
.hfst__beeld{max-width:calc(var(--wrap-max) + 10rem);margin:0 auto clamp(4.5rem,11vh,7.5rem);padding-inline:var(--marge-x)}
.beeldband{aspect-ratio:21/9}
.beeldband img,.beeldpaar img{width:100%;height:100%;object-fit:cover}
/* de band houdt zijn 21:9 (overflow:hidden zet de automatische minimumhoogte uit,
   anders duwt de foto hem naar zijn eigen 3:2); figuur en plek vullen hem */
.beeldband{overflow:hidden;border-radius:var(--radius)}
.beeldband>*{height:100%}
.hfst__beeld picture{display:contents}
.beeldpaar .plek{height:auto}
.beeldpaar{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(1rem,2vw,1.8rem);align-items:end}
/* verspringing omhoog (linker beeld tilt op), nooit omlaag de tekst in */
.beeldpaar>*:first-child{aspect-ratio:4/3;margin-bottom:clamp(2rem,6vw,5rem)}
.beeldpaar>*:last-child{aspect-ratio:4/5}
.hfst__beeld .kaart-embed{margin-top:0}

/* placeholder zolang er geen beeld is: toon van de grond, geen tekst */
.plek{display:grid;place-items:center;border-radius:var(--radius);background:color-mix(in srgb,currentColor 9%,transparent);height:100%}
.plek svg{width:2.4rem;height:2.4rem;opacity:.28;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* extra diensten (prijzen) */
.diensten{list-style:none;display:grid;gap:0;margin-top:.4rem}
.diensten li{display:grid;grid-template-columns:auto 1fr;gap:.2rem 1rem;padding:1rem 0;border-bottom:1px solid rgb(0 0 0/.1)}
.diensten .voorz__ico{grid-row:span 2;margin-top:.2rem}
.diensten b{font-family:var(--font-kop);font-weight:450;font-size:1.15rem}
.diensten span{opacity:.85}

/* faq-pagina: groepen */
.hfst .vragen{margin-top:0}

/* slot: afsluitende oproep op olijf */
.slot{padding-block:calc(var(--sectie-y)*1.2)}
.slot__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}
.slot .kop em{color:var(--terra)}
.slot__tekst{display:grid;gap:1.2rem;max-width:34rem}
.slot__acties{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.8rem;margin-top:1rem}

@media (max-width:991px){
  .pkop{min-height:0}
  .pkop__grid{grid-template-columns:1fr}
  .pkop__beeld{aspect-ratio:4/3;max-height:none;justify-self:stretch}
  .hfst__kop{grid-column:1/-1;position:static;margin-bottom:1.8rem}
  .hfst__tekst{grid-column:1/-1;max-width:40rem}
  .slot__grid{grid-template-columns:1fr;align-items:start}
}
@media (max-width:767px){
  .pkop{padding-top:7rem;padding-bottom:var(--sectie-y)}
  .kruimel{font-size:.82rem}
  .beeldband{aspect-ratio:4/3}
  .beeldpaar{grid-template-columns:1fr}
  .beeldpaar>*:first-child{margin-bottom:0}
  .beeldpaar>*:last-child{aspect-ratio:4/3}
}

/* rail: de kop heeft sinds de SEO-teksten een alinea erbij; kaarten en
   kopmarge krimpen evenveel mee zodat het kader binnen 100vh blijft */
@media (min-width:768px){
  .rail__kop{margin-bottom:2.5rem}
  .kaart{width:min(clamp(19rem,30vw,26rem),calc((100vh - 31rem)*.8))}
}

/* alleen voor zoekmachines en schermlezers (bv. de dubbele punt in de H1) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hero__titel-sub::first-letter{text-transform:uppercase}

/* ═══ REVIEWS als doorlopende rij (30-09): dezelfde kaarten, schuiven langzaam door en
   zijn zelf te scrollen (trackpad, slepen, vinger). Twee identieke sets; JS zet de
   scrollpositie een set terug zodra hij voorbij de helft is, zo is er geen naad.
   Marge per kaart in plaats van flex-gap, anders klopt die halve breedte niet. ═══ */
.marquee{margin-top:3.2rem;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee::-webkit-scrollbar{display:none}
.marquee.is-slepen{cursor:grabbing;user-select:none}
.marquee__spoor{display:flex;align-items:flex-start;width:max-content}
.marquee .review{width:clamp(17rem,28vw,25rem);flex-shrink:0;margin-right:clamp(2rem,4vw,4.5rem)}
@media (prefers-reduced-motion:reduce){
  .marquee{-webkit-mask-image:none;mask-image:none}
  .marquee__spoor{padding-inline:var(--marge-x)}
  .marquee__spoor [aria-hidden="true"]{display:none}
}