/* ==================================================================
   ComoKompas — alle opmaak van de site.
   Dit bestand hoort bij index.php en appartement.php; beide pagina's
   gebruiken dezelfde kopbalk, knoppen, kleuren en typografie.
   ================================================================== */

/* ==================================================================
   ComoKompas — richting 2: "De zeekaart"
   Donker meerwater als drager, papierwit als rustpunt, een peilstrook
   (bearing strip) als navigatie en een kompassectie die per stand
   volledig van kleur verschiet.
   ================================================================== */
:root{
  /* Het donker is bewust een slag lichter dan echt meerwater 's nachts: nog
     steeds diep genoeg om beeld te dragen, maar zonder dat de pagina zwaar
     wordt. --goud-diep is de variant die leesbaar blijft op licht papier. */
  --inkt:#1A4257;
  --inkt-diep:#0F2E3E;
  --meer:#1E7F98;
  --goud:#E8B04B;
  --goud-diep:#8A6111;
  --terra:#C0674A;
  --kalk:#F7F3EC;
  --papier:#FCFAF5;
  --tekst:#14202A;
  --zacht:#516471;
  --lijn-licht:rgba(14,42,56,.13);
  --lijn-donker:rgba(245,240,232,.18);

  --stand-vakantie:#1E7F98;
  --stand-dromer:#7C8C4E;
  --stand-koper:#4C5BA8;
  --stand-eigenaar:#5E8C6A;
  --accent:var(--stand-dromer);

  --kop:"Playfair Display","Fraunces",Georgia,serif;
  --ui:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --traag:900ms;
  --midden:650ms;
  --pad:clamp(4.5rem,9vw,9.5rem);
  --schaduw:0 30px 70px -38px rgba(4,20,28,.75);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--inkt);color:var(--kalk);
  font-family:var(--ui);font-size:clamp(1rem,.97rem + .18vw,1.07rem);line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}

/* Een klasse met display: erin wint het van het hidden-attribuut, waardoor
   verborgen dingen tóch bleven staan: het mobiele hero-beeld over de video
   heen, en de lege balk met "naar je bericht" in de vragenbank. */
[hidden]{display:none !important}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--goud);outline-offset:3px;border-radius:3px}
::selection{background:var(--goud);color:var(--inkt)}
h1,h2,h3{font-family:var(--kop);font-weight:500;line-height:1.06;letter-spacing:-.018em;margin:0}
h2{font-size:clamp(2.1rem,1.3rem + 2.9vw,3.7rem)}
h3{font-size:clamp(1.2rem,1.05rem + .7vw,1.65rem);line-height:1.2}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
em,.cursief{font-family:var(--kop);font-style:italic}

.wrap{width:min(1240px,90vw);margin-inline:auto}
.wrap--breed{width:min(1500px,95vw);margin-inline:auto}
.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}
.skip{position:absolute;left:1rem;top:-4rem;z-index:300;background:var(--goud);color:var(--inkt);padding:.7rem 1.1rem;border-radius:6px;font-weight:500;transition:top 250ms}
.skip:focus{top:1rem}
.blok{padding:var(--pad) 0;position:relative}
.blok--licht{background:var(--kalk);color:var(--tekst)}
.blok--papier{background:var(--papier);color:var(--tekst)}

/* peilingen: structuur die het kompas letterlijk maakt */
.peil{
  font-family:var(--ui);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  display:flex;align-items:center;gap:.8rem;margin:0 0 1.5rem;color:var(--goud);font-weight:500;
}
.peil::before{content:"";width:2.4rem;height:1px;background:currentColor;opacity:.6}
.blok--licht .peil,.blok--papier .peil{color:var(--meer)}
.intro{font-size:clamp(1.05rem,1rem + .45vw,1.28rem);color:rgba(245,240,232,.72);max-width:60ch}
.blok--licht .intro,.blok--papier .intro{color:var(--zacht)}

/* signature: gradient sweep (meerblauw naar zongoud) over koppen */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .sweep{
    background-image:linear-gradient(100deg,
      currentColor 0%,currentColor 42%,
      #1E7F98 47%,#E8B04B 52%,#1E7F98 57%,
      currentColor 62%,currentColor 100%);
    background-size:280% 100%;background-position:100% 0;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    padding-bottom:.06em;
  }
  .sweep.is-in{animation:sweep 1800ms var(--ease) forwards}

  /* De hero-kop komt woord voor woord opzetten, en dat gebeurt met een
     transform op elk woord. Een ouder met background-clip:text kan daar niet
     doorheen tekenen: de letters bleven dan volledig onzichtbaar. In de hero
     laten we het verloop daarom achterwege en houden we gewone kleur. */
  .hero h1.sweep{
    background-image:none;
    -webkit-text-fill-color:currentColor;
    color:var(--kalk);
  }
}
@keyframes sweep{from{background-position:100% 0}to{background-position:0% 0}}

/* reveals */
[data-reveal]{opacity:0;will-change:transform,opacity}
[data-reveal="op"]{transform:translate3d(0,36px,0);transition:opacity var(--traag) var(--ease),transform var(--traag) var(--ease)}
[data-reveal="links"]{transform:translate3d(-44px,0,0);transition:opacity var(--traag) var(--ease),transform var(--traag) var(--ease)}
[data-reveal="rechts"]{transform:translate3d(44px,0,0);transition:opacity var(--traag) var(--ease),transform var(--traag) var(--ease)}
[data-reveal="veeg"]{clip-path:inset(0 0 100% 0);opacity:1;transition:clip-path 1200ms var(--ease)}
[data-reveal="zoom"]{transform:scale(1.07);transition:opacity var(--traag) var(--ease),transform 1500ms var(--ease)}
/* will-change weer loslaten zodra het element onthuld is: anders houdt de
   pagina 27 losse compositielagen aan die tijdens het scrollen verkeerd
   opnieuw getekend kunnen worden */
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);will-change:auto}

/* knoppen */
.knop{
  display:inline-flex;align-items:center;gap:.7rem;padding:1rem 1.8rem;border:0;cursor:pointer;
  background:var(--goud);color:var(--inkt);font-weight:500;font-size:.97rem;text-decoration:none;
  border-radius:2px;transition:transform 450ms var(--ease),box-shadow 450ms var(--ease),background 300ms;
  box-shadow:0 12px 30px -18px rgba(232,176,75,.95);
}
.knop:hover{background:#F0BE60}
.knop--leeg{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.knop--leeg:hover{background:rgba(245,240,232,.1)}
.knop .pijl{transition:transform 450ms var(--ease)}
.knop:hover .pijl{transform:translateX(5px)}
.link{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:500;font-size:.95rem;
  color:var(--goud);padding-bottom:3px;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:gap 350ms var(--ease),color 300ms,background-size 450ms var(--ease);
}
.link:hover{gap:.85rem}
.blok--licht .link,.blok--papier .link{color:var(--meer)}
.ic{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ==================================================================
   Kop + peilstrook
   ================================================================== */
.kop-balk{position:fixed;inset:0 0 auto;z-index:100;transition:background 500ms var(--ease),box-shadow 500ms}
/* Geen backdrop-filter op deze balk: hij staat vast aan het scherm en is
   schermbreed, waardoor de browser bij elke scrollstap de volledige
   achtergrond erachter moet vastleggen. Dat liet tijdens het scrollen een
   lichte strook van de vorige sectie achter. Een dekkende kleur doet
   visueel hetzelfde en is stabiel. */
.kop-balk.vast{background:var(--inkt-diep);box-shadow:0 1px 0 rgba(245,240,232,.12)}
.kop-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.1rem 0;transition:padding 500ms var(--ease)}
.kop-balk.vast .kop-in{padding:.65rem 0}
.logo{display:flex;align-items:center;gap:.75rem;text-decoration:none;color:var(--kalk)}
.logo svg{width:2.2rem;height:2.2rem;flex:none}
.logo b{font-family:var(--kop);font-weight:500;font-size:1.15rem;letter-spacing:.01em;display:block}
.logo small{font-size:.63rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,240,232,.55)}
.menu{display:flex;align-items:center;gap:2.1rem}
.menu a{text-decoration:none;font-size:.9rem;color:rgba(245,240,232,.82);position:relative;padding:.3rem 0}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--goud);transform:scaleX(0);transform-origin:right;transition:transform 500ms var(--ease)}
.menu a:hover::after,.menu a.actief::after{transform:scaleX(1);transform-origin:left}
.menu a.actief{color:#fff}
.menu .knop{padding:.6rem 1.2rem;font-size:.86rem}
.hamburger{display:none;background:none;border:1px solid rgba(245,240,232,.3);padding:.55rem .7rem;cursor:pointer;border-radius:3px}
.hamburger span{display:block;width:20px;height:1.5px;background:currentColor;margin:4.5px 0;transition:transform 350ms var(--ease),opacity 250ms}
.menu-uit .hamburger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-uit .hamburger span:nth-child(2){opacity:0}
.menu-uit .hamburger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* de peilstrook: schuift mee met de scrollpositie */
.peilstrook{
  position:fixed;left:0;right:0;bottom:0;z-index:99;height:2.6rem;overflow:hidden;
  background:var(--inkt-diep); /* dekkend, om dezelfde reden als de kopbalk */
  border-top:1px solid rgba(245,240,232,.14);display:flex;align-items:center;
}
.peilstrook .lint{display:flex;gap:0;white-space:nowrap;will-change:transform;padding-left:50%}
.peilstrook .tik{
  display:inline-flex;align-items:center;gap:.55rem;padding:0 1.5rem;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(245,240,232,.4);border-left:1px solid rgba(245,240,232,.16);height:1.3rem;
  transition:color 400ms ease;text-decoration:none;
}
.peilstrook .tik b{font-weight:500;font-variant-numeric:tabular-nums}
.peilstrook .tik.hier{color:var(--goud)}
.peilstrook::after{
  content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--goud);opacity:.9;
}
@media(max-width:760px){.peilstrook{display:none}}

/* ==================================================================
   Hero
   ================================================================== */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;isolation:isolate;text-align:center}
.hero-beeld{position:absolute;inset:0;z-index:-2}
.hero-beeld video,.hero-beeld img{width:100%;height:100%;object-fit:cover}
.hero-beeld::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(115% 75% at 50% 42%,transparent 26%,rgba(8,29,40,.62) 78%,rgba(8,29,40,.9) 100%),
    linear-gradient(to top,rgba(8,29,40,.97) 2%,rgba(8,29,40,.55) 34%,rgba(8,29,40,.18) 62%,rgba(8,29,40,.5) 100%);
}
/* Onderin zweeft het glazen strookje met de drie cijfers. De ruimte daarvoor
   moet hier gereserveerd worden, anders schuift het over de knoppen zodra het
   scherm wat minder hoog is. */
.hero-in{position:relative;width:min(1000px,90vw);padding:8rem 0 13rem}
@media(min-height:960px){.hero-in{padding-bottom:11rem}}
.hero-roos{
  position:absolute;left:50%;top:50%;width:min(78vw,680px);aspect-ratio:1;translate:-50% -50%;
  color:var(--goud);opacity:.14;pointer-events:none;will-change:transform;z-index:-1;
}
.hero-roos .draai{transform-origin:center;animation:draai 60s linear infinite}
.hero-roos .naald{transform-origin:center;animation:wieg 16s ease-in-out infinite}
@keyframes draai{to{transform:rotate(360deg)}}
@keyframes wieg{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(6deg)}}

.hero h1{font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);font-weight:400;letter-spacing:-.03em;margin:.6rem 0 1.4rem}
.hero h1 .cursief{font-weight:400}
.woord{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em}
.woord > i{display:inline-block;font-style:inherit;transform:translateY(108%);opacity:0;animation:woordop 1000ms var(--ease) forwards;animation-delay:calc(var(--i) * 60ms + 200ms)}
.woord.schuin > i{font-family:var(--kop);font-style:italic;color:var(--goud)}
@keyframes woordop{to{transform:translateY(0);opacity:1}}
.hero-sub{max-width:46rem;margin:0 auto 2.3rem;color:rgba(245,240,232,.8);font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);opacity:0;animation:zacht 900ms var(--ease) 720ms forwards}
.hero-acties{display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap;opacity:0;animation:zacht 900ms var(--ease) 880ms forwards}
@keyframes zacht{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-glas{
  position:absolute;left:50%;bottom:4.6rem;translate:-50% 0;z-index:2;width:min(90vw,780px);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;overflow:hidden;border-radius:3px;
  background:rgba(245,240,232,.16);border:1px solid rgba(245,240,232,.2);
  backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1);
  opacity:0;animation:zacht 900ms var(--ease) 1040ms forwards;box-shadow:var(--schaduw);
}
.hero-glas div{background:rgba(8,29,40,.55);padding:1rem .9rem;text-align:center}
.hero-glas b{display:block;font-family:var(--kop);font-size:1.15rem;color:var(--goud);font-weight:500}
.hero-glas span{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,240,232,.62)}
@media(max-width:640px){
  /* Op een telefoon staat het strookje gewoon in de tekst mee. */
  .hero-glas{position:static;translate:none;width:100%;margin-top:2.6rem}
  .hero-in{padding-bottom:5rem}
}
.hero-scroll{position:absolute;left:50%;bottom:.9rem;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.5rem;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,240,232,.5);text-decoration:none}
.hero-scroll .staaf{width:1px;height:2rem;background:linear-gradient(var(--goud),transparent);position:relative;overflow:hidden}
.hero-scroll .staaf::after{content:"";position:absolute;inset:0;background:var(--goud);animation:zak 2.6s ease-in-out infinite}
@keyframes zak{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media(max-width:760px){.hero-scroll{display:none}}

/* ==================================================================
   Het kompas — de sectie verschiet van kleur per stand
   ================================================================== */
#kompas{
  background:
    radial-gradient(90% 70% at 12% 0%,color-mix(in srgb,var(--accent) 55%,transparent),transparent 62%),
    radial-gradient(80% 80% at 92% 100%,color-mix(in srgb,var(--accent) 34%,transparent),transparent 60%),
    linear-gradient(170deg,var(--inkt-diep),var(--inkt));
  transition:background 900ms var(--ease);overflow:hidden;
}
.kompas-kop{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);margin-bottom:clamp(2.4rem,4vw,3.4rem)}
@media(min-width:940px){.kompas-kop{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:4rem;align-items:end}}
.stand-naam{display:flex;align-items:baseline;gap:1.1rem;margin-top:.4rem}
.stand-naam .nr{font-family:var(--kop);font-size:clamp(2.6rem,2rem + 2.4vw,4rem);color:color-mix(in srgb,var(--accent) 70%,#fff);opacity:.5;line-height:1}
/* Hier staat sinds kort een hele vraag in plaats van één woord, dus kleiner
   en met ruimte om over twee regels te lopen. */
.stand-naam .naam{font-family:var(--kop);font-size:clamp(1.5rem,1.2rem + 1.35vw,2.5rem);font-weight:500;line-height:1.18;max-width:22ch}
.stand-uitleg{color:rgba(245,240,232,.74);border-left:1px solid rgba(245,240,232,.25);padding-left:1.3rem}

.rij{display:grid;gap:.9rem;grid-template-columns:repeat(2,minmax(0,1fr));perspective:1200px}
@media(min-width:720px){.rij{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}}
@media(min-width:1160px){.rij{grid-template-columns:repeat(6,minmax(0,1fr))}}
.rij[hidden]{display:none}
.rij > article{display:flex}
.kaart{
  --rx:0deg;--ry:0deg;width:100%;cursor:pointer;text-align:left;
  display:flex;flex-direction:column;gap:.9rem;padding:1.3rem 1.05rem 1.4rem;
  background:linear-gradient(160deg,rgba(245,240,232,.13),rgba(245,240,232,.05));
  border:1px solid rgba(245,240,232,.16);border-radius:3px;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform 600ms var(--ease),background 450ms ease,border-color 450ms ease,box-shadow 600ms var(--ease),opacity 250ms var(--ease);
}
.kaart:hover,.kaart:focus-visible{background:linear-gradient(160deg,rgba(245,240,232,.2),rgba(245,240,232,.07));border-color:rgba(232,176,75,.6);box-shadow:var(--schaduw)}
.kaart .ring{
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid rgba(232,176,75,.5);color:var(--goud);transform:translateZ(30px);
  transition:background 450ms ease,transform 600ms var(--ease);
}
.kaart:hover .ring{background:rgba(232,176,75,.14)}
.kaart .ring .ic{width:1.4rem;height:1.4rem}
.kaart .t{display:block;font-size:1rem;font-weight:600;line-height:1.25;transform:translateZ(18px)}
.kaart .r{display:block;font-size:.82rem;line-height:1.5;color:rgba(245,240,232,.62);transform:translateZ(9px)}
.kaart .open{margin-top:auto;padding-top:.4rem;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--goud);opacity:0;transform:translateY(6px);transition:opacity 400ms var(--ease),transform 400ms var(--ease)}
.kaart:hover .open,.kaart:focus-visible .open{opacity:1;transform:none}
.rij.wisselt .kaart{opacity:0;transform:perspective(900px) rotateX(-14deg) translateY(14px);transition-duration:250ms}
.kaart.komt{animation:kaartop 540ms var(--ease) backwards;animation-delay:calc(var(--i) * 55ms)}
@keyframes kaartop{from{opacity:0;transform:perspective(900px) rotateX(14deg) translateY(-12px)}to{opacity:1;transform:none}}

/* stand-switcher onderaan de sectie */
.switcher{
  margin-top:clamp(2.4rem,4vw,3.6rem);display:grid;grid-template-columns:repeat(var(--standen,4),1fr);
  border-top:1px solid rgba(245,240,232,.22);border-bottom:1px solid rgba(245,240,232,.22);position:relative;
}
.switcher::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:calc(100% / var(--standen,4));background:var(--goud);
  transform:translateX(calc(var(--stand-i,0) * 100%));transition:transform 650ms var(--ease);
}
.sw{
  background:none;border:0;border-left:1px solid rgba(245,240,232,.14);cursor:pointer;
  padding:1.15rem .7rem;display:flex;align-items:center;justify-content:center;gap:.6rem;
  color:rgba(245,240,232,.6);font-size:.9rem;line-height:1.25;text-align:center;
  transition:color 400ms ease,background 400ms ease;
}
.sw:first-child{border-left:0}
.sw:hover{color:var(--kalk);background:rgba(245,240,232,.05)}
.sw .ic{width:1.15rem;height:1.15rem}
.sw .wijzer{width:0;overflow:hidden;display:inline-flex;transition:width 450ms var(--ease);color:var(--goud)}
.sw[aria-selected="true"]{color:var(--kalk)}
.sw[aria-selected="true"] .wijzer{width:1.15rem}
.sw .nr{font-size:.66rem;letter-spacing:.16em;opacity:.65;font-variant-numeric:tabular-nums}
@media(max-width:720px){
  .switcher{grid-template-columns:repeat(2,1fr);border-bottom:0}
  .switcher::after{display:none}
  .sw{border-bottom:1px solid rgba(245,240,232,.14);justify-content:flex-start;text-align:left}
  .sw[aria-selected="true"]{background:rgba(232,176,75,.12)}
}

/* ---------- het adviesgesprek ----------
   De enige sectie die geld oplevert, dus ook de lichtste van de pagina: waar
   de rest van de site donker meerwater is, staat dit blok in het licht. */
#advies{
  background:
    radial-gradient(75% 90% at 92% 0%,rgba(232,176,75,.16),transparent 62%),
    radial-gradient(70% 80% at 0% 100%,rgba(30,127,152,.1),transparent 60%),
    var(--papier);
  overflow:hidden;
}
.ag-kop{max-width:56rem;margin-bottom:clamp(2rem,3.4vw,3rem)}
.ag-kop .intro{margin-bottom:0}

/* De praktische feiten in één strook: duur, vorm, wie, prijs. */
.ag-feiten{
  display:grid;gap:1px;background:var(--lijn-licht);
  border:1px solid var(--lijn-licht);border-radius:3px;overflow:hidden;
  grid-template-columns:minmax(0,1fr);margin-bottom:clamp(2.2rem,3.8vw,3.2rem);
}
@media(min-width:640px){.ag-feiten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ag-feiten{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ag-feit{
  background:var(--papier);padding:1.15rem 1.3rem;
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:center;
}
.ag-feit .ic{width:1.35rem;height:1.35rem;color:var(--goud-diep);grid-row:span 2}
.ag-feit b{font-weight:600;font-size:.98rem;color:var(--tekst)}
.ag-feit span{font-size:.84rem;line-height:1.45;color:var(--zacht)}

.ag-verloop{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:860px){.ag-verloop{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}}
.ag-stap{
  display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.4rem,2.4vw,2rem);
  background:rgba(255,255,255,.6);
  border:1px solid var(--lijn-licht);border-top:2px solid var(--goud);border-radius:3px;
  transition:border-color 450ms ease,box-shadow 600ms var(--ease),transform 600ms var(--ease);
}
.ag-stap:hover{box-shadow:0 22px 50px -34px rgba(14,42,56,.5);transform:translateY(-3px)}
.ag-stap .nr{
  font-family:var(--kop);font-size:clamp(1.9rem,1.5rem + 1.2vw,2.6rem);line-height:1;
  color:var(--goud-diep);opacity:.55;
}
.ag-stap h3{margin:0;font-family:var(--kop);font-weight:500;font-size:clamp(1.2rem,1.05rem + .5vw,1.5rem);line-height:1.22;color:var(--tekst)}
.ag-stap > p{margin:0;color:var(--zacht);font-size:.95rem;line-height:1.65}

.ag-onder{
  margin-top:clamp(2.6rem,4.5vw,4rem);display:grid;gap:2.4rem;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:1020px){.ag-onder{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:3.4rem;align-items:start}}
.ag-onder h3{
  font-family:var(--kop);font-weight:500;margin:0 0 1.2rem;color:var(--tekst);
  font-size:clamp(1.25rem,1.1rem + .5vw,1.6rem);line-height:1.25;
}
.ag-vragen{display:grid;gap:.65rem}
.ag-vraag{
  display:flex;gap:.9rem;align-items:flex-start;margin:0;
  padding:.9rem 1.1rem;border-left:2px solid var(--goud);
  background:rgba(255,255,255,.62);
  font-size:.94rem;line-height:1.55;color:var(--tekst);font-style:italic;
}
.ag-vraag .ic{width:1.2rem;height:1.2rem;flex:none;margin-top:.18rem;color:var(--goud-diep)}

/* Het boekblok krijgt de donkere achtergrond die de rest van de sectie kwijt is:
   in een licht vlak is dát nu het stukje dat opvalt. */
.ag-boeken{
  background:var(--inkt);color:var(--kalk);border-radius:3px;
  padding:clamp(1.6rem,3vw,2.3rem);box-shadow:var(--schaduw);
}
.ag-boeken h3{color:var(--kalk)}
.ag-oogst{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.9rem}
.ag-oogst li{display:flex;gap:.8rem;font-size:.95rem;line-height:1.6;color:rgba(245,240,232,.8)}
.ag-oogst .ic{width:1.2rem;height:1.2rem;flex:none;margin-top:.24rem;color:var(--goud)}
.ag-eerlijk{
  margin:1.6rem 0 0;padding-top:1.4rem;border-top:1px solid rgba(245,240,232,.18);
  font-size:.86rem;line-height:1.6;color:rgba(245,240,232,.6);
}

/* ---------- de vragenbank ---------- */
.vb-kop{max-width:52rem;margin-bottom:clamp(2rem,3.6vw,3rem)}
.vb-uitleg{margin-top:1.1rem;color:var(--zacht);max-width:62ch;font-size:.97rem;line-height:1.62}
.vb-uitleg strong{color:var(--tekst);font-weight:500}

.vb-balk{
  display:flex;flex-wrap:wrap;gap:1rem 1.4rem;align-items:center;justify-content:space-between;
  padding-bottom:1.1rem;border-bottom:1px solid var(--lijn-licht);
}
.vb-filters{display:flex;flex-wrap:wrap;gap:.5rem}
.vb-f{
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  border:1px solid var(--lijn-licht);background:transparent;color:var(--zacht);
  border-radius:2rem;padding:.52rem .95rem;font-size:.88rem;font-family:var(--ui);
  transition:color 260ms ease,border-color 260ms ease,background 260ms ease;
}
.vb-f .ic{width:1.05rem;height:1.05rem}
.vb-f:hover{color:var(--tekst);border-color:rgba(14,42,56,.28)}
.vb-f[aria-selected="true"]{background:var(--inkt);border-color:var(--inkt);color:var(--kalk)}
.vb-aantal{
  font-size:.72rem;font-variant-numeric:tabular-nums;letter-spacing:.04em;
  background:rgba(14,42,56,.09);border-radius:1rem;padding:.12rem .45rem;
}
.vb-f[aria-selected="true"] .vb-aantal{background:rgba(245,240,232,.18)}

.vb-zoek{display:flex;align-items:center;gap:.6rem;flex:1 1 22rem;min-width:0;max-width:30rem}
.vb-zoek .ic{width:1.05rem;height:1.05rem;color:var(--zacht);flex:none}
.vb-zoek input{
  width:100%;border:0;border-bottom:1px solid var(--lijn-licht);background:transparent;
  padding:.55rem 0;font-family:var(--ui);font-size:.94rem;color:var(--tekst);
  transition:border-color 260ms ease;
}
.vb-zoek input::placeholder{color:rgba(81,100,113,.7)}
.vb-zoek input:focus{outline:0;border-bottom-color:var(--meer)}

.vb-tel{margin:1.2rem 0 0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--zacht)}

/* het strookje dat bijhoudt welke vragen je hebt klaargezet */
.vb-mand{
  position:sticky;top:5.6rem;z-index:5;
  margin-top:1.1rem;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center;justify-content:space-between;
  background:var(--inkt);color:var(--kalk);border-radius:3px;
  padding:.75rem .9rem .75rem 1.1rem;box-shadow:0 14px 34px -26px rgba(4,20,28,.9);
}
.vb-mand p{margin:0;font-size:.9rem;color:rgba(245,240,232,.86)}
.vb-mand-acties{display:flex;align-items:center;gap:.9rem}
.vb-mand-wis{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;font-size:.85rem;
  color:rgba(245,240,232,.6);text-decoration:underline;text-underline-offset:.2em;
}
.vb-mand-wis:hover{color:var(--kalk)}
.knop--klein{padding:.55rem 1rem;font-size:.85rem}

/* een klaargezette vraag blijft zichtbaar aangevinkt */
.vb-v.gekozen{background:rgba(30,127,152,.1)}
.vb-v.gekozen .vb-code{color:var(--meer);font-weight:600}
.vb-v.gekozen .vb-pijl{opacity:1;transform:none;color:var(--meer)}

.vb-themas{
  margin-top:2rem;display:grid;gap:clamp(1.6rem,3vw,2.6rem);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));align-items:start;
}
.vb-thema h3{
  font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--meer);display:flex;align-items:center;gap:.6rem;
  padding-bottom:.7rem;border-bottom:1px solid var(--lijn-licht);margin-bottom:.3rem;
}
.vb-thema-nr{
  margin-left:auto;font-size:.72rem;letter-spacing:.04em;color:var(--zacht);
  font-variant-numeric:tabular-nums;text-transform:none;font-weight:400;
}
.vb-thema ul{list-style:none;margin:0;padding:0}
.vb-thema li{border-bottom:1px solid rgba(14,42,56,.07)}
.vb-v{
  width:100%;display:flex;align-items:flex-start;gap:.7rem;text-align:left;cursor:pointer;
  background:none;border:0;padding:.72rem .3rem;font-family:var(--ui);font-size:.94rem;
  line-height:1.45;color:var(--tekst);transition:background 220ms ease,padding 260ms var(--ease);
}
.vb-code{
  flex:none;font-size:.68rem;letter-spacing:.06em;color:var(--zacht);
  font-variant-numeric:tabular-nums;padding-top:.22rem;
}
.vb-tekst{flex:1 1 auto}
.vb-pijl{width:1rem;height:1rem;flex:none;color:var(--meer);opacity:0;transform:translateX(-.3rem);
  transition:opacity 260ms ease,transform 260ms var(--ease);margin-top:.18rem}
.vb-v:hover,.vb-v:focus-visible{background:rgba(30,127,152,.07);padding-left:.6rem;outline:0}
.vb-v:hover .vb-pijl,.vb-v:focus-visible .vb-pijl{opacity:1;transform:none}

.vb-geen{margin-top:2rem;color:var(--zacht);max-width:56ch}
.vb-geen button.link{
  border:0;background:none;padding:0;cursor:pointer;font:inherit;
  color:var(--meer);text-decoration:underline;text-underline-offset:.2em;
}
.vb-geen button.link:hover{color:var(--inkt)}
/* De rest van de bank staat wél in de pagina — zoekmachines zien alles — maar
   een bezoeker krijgt eerst de tien belangrijkste. */
.vb-meer-rij{margin:2rem 0 0}
.vb-meer{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font:inherit;font-size:.9rem;
  background:transparent;border:1px solid var(--lijn-licht);border-radius:2rem;
  padding:.6rem 1.15rem;color:var(--zacht);
  transition:color 260ms ease,border-color 260ms ease,background 260ms ease;
}
.vb-meer:hover{color:var(--tekst);border-color:rgba(14,42,56,.3);background:rgba(14,42,56,.04)}
.vb-meer .ic{transition:transform 400ms var(--ease)}
.vb-meer[aria-expanded="true"] .ic{transform:rotate(90deg)}
.vb-meer[hidden]{display:none}

/* De brug van de vragenbank naar het gesprek: het punt waar gratis lezen
   ophoudt en jouw eigen situatie begint. */
.vb-naar-gesprek{
  margin-top:clamp(2.6rem,4.5vw,4rem);padding:clamp(1.7rem,3vw,2.6rem);
  background:var(--inkt);color:var(--kalk);border-radius:3px;
  display:grid;gap:1.8rem;grid-template-columns:minmax(0,1fr);align-items:center;
  box-shadow:var(--schaduw);
}
@media(min-width:900px){.vb-naar-gesprek{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:3rem}}
.vb-naar-gesprek .peil{color:var(--goud)}
.vb-naar-gesprek h3{
  font-family:var(--kop);font-weight:500;margin:.5rem 0 .7rem;
  font-size:clamp(1.35rem,1.15rem + .7vw,1.9rem);line-height:1.2;
}
.vb-naar-gesprek p{margin:0;color:rgba(245,240,232,.74);font-size:.97rem;line-height:1.65;max-width:56ch}
.vb-naar-acties{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.vb-naar-gesprek .link{color:var(--goud)}

/* ---------- ons eigen appartement ---------- */
.hu-kop{
  display:flex;flex-wrap:wrap;gap:1rem 2.5rem;align-items:flex-end;justify-content:space-between;
  margin-bottom:clamp(1.8rem,3.2vw,2.6rem);
}
.hu-kop > div{max-width:46rem}
.hu-plaats{display:inline-flex;align-items:center;gap:.55rem;margin:0;font-size:.88rem;color:var(--zacht)}
.hu-plaats .ic{width:1.1rem;height:1.1rem;color:var(--meer)}

/* Eén groot beeld met drie kleintjes ernaast; op mobiel simpelweg onder elkaar. */
.hu-beeld{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){
  .hu-beeld{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,1fr)}
  .hu-groot{grid-column:span 2;grid-row:span 2}
}
.hu-beeld figure{margin:0;overflow:hidden;border-radius:3px;background:rgba(14,42,56,.06)}
.hu-groot{grid-column:span 2}
.hu-beeld img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3;transition:transform 900ms var(--ease)}
.hu-groot img{aspect-ratio:16/11}
.hu-beeld figure:hover img{transform:scale(1.04)}

.hu-onder{
  margin-top:clamp(2.2rem,3.8vw,3.2rem);display:grid;gap:2.2rem;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:960px){.hu-onder{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:3.4rem;align-items:start}}
.hu-onder p{color:var(--zacht);max-width:60ch}
.hu-eerlijk{
  margin-top:1.4rem;padding-left:1rem;border-left:2px solid var(--terra);
  font-size:.92rem;color:var(--zacht);
}
.hu-feiten{list-style:none;margin:0 0 1.8rem;padding:0;display:grid;gap:.9rem}
.hu-feiten li{display:flex;gap:.85rem;align-items:flex-start}
.hu-feiten .ic{width:1.25rem;height:1.25rem;flex:none;margin-top:.2rem;color:var(--meer)}
.hu-feiten b{display:block;font-weight:600;font-size:.95rem;color:var(--tekst)}
.hu-feiten span{font-size:.9rem;line-height:1.55;color:var(--zacht)}
.hu-door{margin:1.1rem 0 0}

.verhaal-memo{
  margin-top:1.6rem;padding-left:1rem;border-left:2px solid rgba(245,240,232,.22);
  font-size:.9rem;color:rgba(245,240,232,.6);
}

@media(max-width:640px){
  .vb-balk{gap:.9rem}
  .vb-filters{width:100%}
  .vb-f{flex:1 1 auto;justify-content:center;padding:.5rem .7rem;font-size:.82rem}
}

/* uitschuivende lade met de inhoud van een kaart */
.lade-doek{
  position:fixed;inset:0;z-index:190;background:rgba(4,16,22,.62);backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity 500ms var(--ease);
}
.lade-doek.aan{opacity:1;pointer-events:auto}
.lade{
  position:fixed;top:0;right:0;bottom:0;z-index:200;width:min(30rem,92vw);
  background:linear-gradient(200deg,#123243,var(--inkt-diep));border-left:1px solid rgba(232,176,75,.35);
  transform:translateX(101%);transition:transform 650ms var(--ease);
  display:flex;flex-direction:column;box-shadow:-40px 0 90px -50px #000;
}
.lade[hidden],.lade-doek[hidden]{display:none}
.lade.aan{transform:none}
.lade-kop{display:flex;align-items:flex-start;gap:1rem;padding:1.8rem 1.7rem 1.2rem;border-bottom:1px solid rgba(245,240,232,.16)}
.lade-kop .ring{width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(232,176,75,.5);color:var(--goud);display:grid;place-items:center;flex:none}
.lade-kop h3{font-size:1.7rem;font-weight:500}
.lade-kop .sub{display:block;font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,240,232,.5);margin-bottom:.3rem}
.lade-sluit{margin-left:auto;background:none;border:1px solid rgba(245,240,232,.25);width:2.3rem;height:2.3rem;border-radius:50%;cursor:pointer;display:grid;place-items:center;flex:none;transition:transform 350ms var(--ease),background 300ms}
.lade-sluit:hover{background:rgba(245,240,232,.1);transform:rotate(90deg)}
.lade-tekst{padding:1.5rem 1.7rem;overflow-y:auto;flex:1;color:rgba(245,240,232,.78)}
.lade-voet{padding:1.2rem 1.7rem 1.8rem;border-top:1px solid rgba(245,240,232,.16)}

/* ==================================================================
   Ons verhaal — papieren dagboekpagina met beeld erdoorheen
   ================================================================== */
#verhaal{background:var(--papier);color:var(--tekst);overflow:hidden;position:relative}
.verhaal-film{position:absolute;inset:0;z-index:0}
.verhaal-film video,.verhaal-film img{width:100%;height:100%;object-fit:cover;opacity:.4;filter:saturate(.55);will-change:transform}
.verhaal-film::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(251,247,239,.97) 26%,rgba(251,247,239,.82) 56%,rgba(251,247,239,.55) 100%);
}
.verhaal-in{position:relative;z-index:1;display:grid;gap:2.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.verhaal-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);gap:4.5rem;align-items:start}}
.pagina{
  background:rgba(255,255,255,.72);border:1px solid var(--lijn-licht);border-radius:2px;
  padding:clamp(1.7rem,3.4vw,3.4rem);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 34px 70px -50px rgba(14,42,56,.55);position:relative;
}
.pagina::before{content:"";position:absolute;left:0;top:2.4rem;bottom:2.4rem;width:2px;background:var(--terra);opacity:.5}
.pagina p{color:var(--zacht)}
.pagina h2{color:var(--inkt)}
.quote{margin:2.2rem 0 0;padding-top:1.7rem;border-top:1px solid var(--lijn-licht);font-family:var(--kop);font-style:italic;font-size:clamp(1.2rem,1.05rem + .8vw,1.6rem);line-height:1.35;color:var(--inkt)}
.quote footer{margin-top:1rem;font-family:var(--ui);font-style:normal;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--terra)}
.foto{position:relative;margin:0}
.foto img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:2px;box-shadow:0 34px 70px -46px rgba(14,42,56,.7)}
.foto figcaption{margin-top:.9rem;font-size:.82rem;color:var(--zacht);border-left:2px solid var(--goud);padding-left:.8rem}
.foto .memo{position:absolute;top:1rem;right:1rem;background:var(--goud);color:var(--inkt);padding:.6rem .9rem;font-size:.74rem;font-weight:600;max-width:12rem;line-height:1.35;border-radius:2px}

/* ==================================================================
   Dorpengids — eigen coverflow (vanilla JS)
   ================================================================== */
#dorpen{background:linear-gradient(180deg,var(--inkt),var(--inkt-diep));overflow:hidden}
.baan{
  position:relative;height:clamp(24rem,62vh,36rem);margin-top:2.6rem;
  perspective:1500px;transform-style:preserve-3d;touch-action:pan-y;cursor:grab;
}
.baan.sleept{cursor:grabbing}
.baan.sleept .dorp{transition:none}
.dorp{
  position:absolute;top:0;left:50%;height:100%;width:min(76vw,32rem);margin-left:calc(min(76vw,32rem) / -2);
  border-radius:3px;overflow:hidden;background:var(--inkt-diep);box-shadow:var(--schaduw);
  transition:transform 800ms var(--ease),opacity 800ms var(--ease);will-change:transform,opacity;
}
.dorp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dorp::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(8,29,40,.96) 4%,rgba(8,29,40,.55) 46%,rgba(8,29,40,.05) 80%)}
.dorp-in{position:absolute;inset:auto 0 0;z-index:1;padding:clamp(1.3rem,2.6vw,2rem)}
.dorp-in .nr{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--goud)}
.dorp-in h3{font-size:clamp(1.8rem,1.4rem + 1.6vw,2.6rem);font-weight:500;margin:.35rem 0 .1rem}
.dorp-in .onder{font-family:var(--kop);font-style:italic;color:rgba(245,240,232,.68);font-size:1rem}
.dorp-in p{margin:.7rem 0 1rem;font-size:.94rem;color:rgba(245,240,232,.82);max-width:34ch}
.feiten{list-style:none;margin:0;padding:.9rem 0 0;display:grid;gap:.5rem;border-top:1px solid rgba(245,240,232,.22)}
.feiten li{display:flex;gap:.6rem;font-size:.82rem;color:rgba(245,240,232,.78)}
.feiten .ic{width:1rem;height:1rem;flex:none;margin-top:.24rem;color:var(--goud)}

.oever{margin-top:2.4rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.oever-lijn{position:relative;flex:1 1 20rem;display:flex;justify-content:space-between;align-items:center;padding:1.6rem 0 0}
.oever-lijn::before{content:"";position:absolute;left:0;right:0;top:1.9rem;height:1px;background:rgba(245,240,232,.25)}
.stip{position:relative;background:none;border:0;cursor:pointer;padding:.6rem .2rem 0;color:rgba(245,240,232,.5);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;transition:color 400ms}
.stip::before{content:"";display:block;width:9px;height:9px;border-radius:50%;background:rgba(245,240,232,.35);margin:0 auto .6rem;transition:transform 450ms var(--ease),background 400ms}
.stip:hover{color:var(--kalk)}
.stip.hier{color:var(--goud)}
.stip.hier::before{background:var(--goud);transform:scale(1.7)}
.stip .naam{display:none}
.stip.hier .naam{display:inline}
.baan-knoppen{display:flex;gap:.6rem}
.rond{width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(245,240,232,.3);background:none;cursor:pointer;display:grid;place-items:center;transition:background 300ms,transform 400ms var(--ease)}
.rond:hover{background:rgba(245,240,232,.12)}
.voortgang{height:2px;background:rgba(245,240,232,.18);margin-top:1.6rem;overflow:hidden}
.voortgang i{display:block;height:100%;background:var(--goud);transform-origin:left;transform:scaleX(0)}
.voortgang i.loopt{animation:vullen 5600ms linear forwards}
@keyframes vullen{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ==================================================================
   Zo helpen we je — beeldkaarten met clip die bij zweven speelt
   ================================================================== */
#diensten{background:var(--kalk);color:var(--tekst)}
.dienstenrij{display:grid;gap:1.2rem;grid-template-columns:minmax(0,1fr);perspective:1300px}
@media(min-width:680px){.dienstenrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1120px){.dienstenrij{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dienst{
  --rx:0deg;--ry:0deg;position:relative;min-height:23rem;display:flex;flex-direction:column;justify-content:flex-end;
  border-radius:3px;overflow:hidden;color:var(--kalk);background:var(--inkt);
  transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));transform-style:preserve-3d;
  transition:transform 600ms var(--ease),box-shadow 600ms var(--ease);box-shadow:0 18px 40px -32px rgba(14,42,56,.7);
}
.dienst[data-reveal]{transform:perspective(1100px) translate3d(0,36px,0)}
.dienst[data-reveal].is-in{transform:perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry))}
.dienst:hover{box-shadow:0 40px 80px -40px rgba(14,42,56,.85)}
.dienst img,.dienst video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dienst video{opacity:0;transition:opacity 700ms var(--ease)}
.dienst.speelt video{opacity:1}
.dienst .sluier{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,29,40,.95) 8%,rgba(8,29,40,.6) 48%,rgba(8,29,40,.2) 92%)}
/* de tarief-badge zweeft linksboven; genoeg kopruimte zodat een langere
   kaarttekst er nooit onder schuift */
.dienst-in{position:relative;padding:4.2rem 1.35rem 1.6rem;display:flex;flex-direction:column;gap:.6rem;transform:translateZ(26px)}
.dienst .tarief{position:absolute;top:1.1rem;left:1.15rem;z-index:2;background:var(--goud);color:var(--inkt);padding:.35rem .8rem;font-size:.82rem;font-weight:600;border-radius:2px}
.dienst .wanneer{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--goud)}
.dienst h3{font-size:1.35rem;font-weight:500}
.dienst p{font-size:.9rem;color:rgba(245,240,232,.76)}
.dienst .link{color:var(--goud)}

/* ==================================================================
   Waarom — grote cijfers in contour
   ================================================================== */
/* contain:paint garandeert dat niets uit deze sectie buiten haar kader
   terechtkomt. Zonder die grens kon de meelopende parallaxlaag — met een
   blendmodus én een scroll-transform — tijdens snel scrollen als lichte
   strook over de sectie hieronder blijven hangen. */
#waarom{background:var(--papier);color:var(--tekst);overflow:hidden;position:relative;contain:paint}
/* isolation houdt het blenden binnen de band zelf in plaats van tegen de
   hele pagina-achtergrond */
.diepteband{position:absolute;inset:0;z-index:0;opacity:.16;pointer-events:none;isolation:isolate}
.diepteband img{position:absolute;inset:0;width:100%;height:132%;object-fit:cover;top:-16%}
.diepteband .laag2{mix-blend-mode:multiply;opacity:.5}
#waarom > .wrap{position:relative;z-index:1}
.getallen{display:grid;gap:2rem;grid-template-columns:repeat(2,minmax(0,1fr));padding:2.6rem 0;margin-bottom:clamp(2.6rem,5vw,4.2rem);border-top:1px solid var(--lijn-licht);border-bottom:1px solid var(--lijn-licht)}
@media(min-width:900px){.getallen{grid-template-columns:repeat(4,minmax(0,1fr));gap:2.4rem}}
.getal{position:relative}
.getal .cijfer{
  font-family:var(--kop);font-size:clamp(3rem,2rem + 4.4vw,5.4rem);line-height:.92;font-weight:500;
  color:transparent;-webkit-text-stroke:1.4px var(--meer);font-variant-numeric:tabular-nums;display:block;
}
@supports not ((-webkit-text-stroke:1px black)){.getal .cijfer{color:var(--meer)}}
.getal .wat{display:block;margin-top:.8rem;font-weight:600;font-size:.98rem;color:var(--inkt)}
.getal .kleintje{display:block;font-size:.82rem;color:var(--zacht)}
.beloftes{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:880px){.beloftes{grid-template-columns:repeat(3,minmax(0,1fr));gap:3rem}}
.belofte{display:grid;gap:.8rem}
.belofte .merk{font-family:var(--kop);font-size:1.1rem;color:var(--terra)}
.belofte h3{font-size:1.5rem;color:var(--inkt)}
.belofte p{color:var(--zacht);font-size:.96rem}

/* ==================================================================
   Vragen + contact op bewegend water
   ================================================================== */
.waterblok{position:relative;isolation:isolate;background:var(--inkt-diep);overflow:hidden}
.watermesh{
  /* Was inset:-25% met een eindeloze background-position-animatie. Op een
     sectie van ~3000px hoog werd dat een laag van bijna 3000x4600 pixels die
     tijdens elke scroll opnieuw getekend moest worden — de meest waarschijnlijke
     bron van de lichte stroken die hier bleven hangen. Nu een stilstaand
     verloop: visueel hetzelfde, zonder de hertekening. */
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(44% 36% at 20% 24%,rgba(30,127,152,.55),transparent 64%),
    radial-gradient(40% 32% at 84% 18%,rgba(232,176,75,.3),transparent 66%),
    radial-gradient(52% 44% at 66% 84%,rgba(94,140,106,.34),transparent 68%),
    radial-gradient(38% 38% at 24% 82%,rgba(192,103,74,.22),transparent 64%);
  background-size:170% 170%,160% 160%,180% 180%,150% 150%;
  background-position:34% 62%,58% 38%,62% 58%,28% 42%;
}
@keyframes water{
  0%{background-position:0% 20%,100% 0%,20% 100%,80% 80%}
  50%{background-position:34% 62%,58% 38%,62% 58%,28% 42%}
  100%{background-position:62% 8%,8% 72%,92% 28%,0% 92%}
}
.zwevers{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* geen will-change: deze zweven eindeloos, dus zou de laag ook eindeloos
   blijven bestaan */
.zwever{position:absolute;color:var(--kalk);opacity:.09}
.zwever--1{top:9%;left:5%;width:9rem;animation:zweef1 28s ease-in-out infinite}
.zwever--2{top:56%;right:7%;width:13rem;animation:zweef2 36s ease-in-out infinite}
.zwever--3{bottom:8%;left:24%;width:17rem;opacity:.07;animation:zweef3 32s ease-in-out infinite}
.zwever--4{top:28%;right:28%;width:7rem;animation:zweef1 24s ease-in-out infinite reverse}
@keyframes zweef1{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(20px,-28px,0) rotate(18deg)}}
@keyframes zweef2{0%,100%{transform:translate3d(0,0,0) rotate(-6deg)}50%{transform:translate3d(-28px,22px,0) rotate(10deg)}}
@keyframes zweef3{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(32px,-16px,0)}}

/* De foto is een licht beeld in een donkere sectie. Boven uitlijnen (niet
   centreren) houdt de onderkant weg bij de vragenlijst, en de verloopsluier
   laat het beeld naar het donker toe uitdoven in plaats van er hard tegenaan
   te slaan. */
.faq-hoofd{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);align-items:start;margin-bottom:clamp(2.8rem,5vw,4.2rem)}
/* smal: het beeld loopt als brede band over de volle kolom */
.faq-foto{position:relative;margin:0;border-radius:3px;overflow:hidden;box-shadow:var(--schaduw);border:1px solid rgba(245,240,232,.2);aspect-ratio:21/9;background:var(--inkt-diep)}
/* breed: naast de tekst, en niet hoger dan de tekstkolom lang is */
@media(min-width:900px){
  .faq-hoofd{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3.5rem}
  .faq-foto{aspect-ratio:16/10;max-height:20rem}
}
.faq-foto::after{
  content:"";position:absolute;inset:auto 0 0 0;height:55%;pointer-events:none;
  background:linear-gradient(to top,rgba(8,29,40,.82),rgba(8,29,40,.28) 45%,transparent);
}
.faq-foto img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease)}
.faq-foto:hover img{transform:scale(1.04)}
.faq-foto-badge{position:absolute;bottom:1rem;left:1rem;background:rgba(8,29,40,.88);color:var(--kalk);padding:.42rem .9rem;border-radius:2px;font-size:.8rem;font-weight:500;display:inline-flex;align-items:center;gap:.45rem;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(245,240,232,.18)}
.faq-foto-badge .ic{width:1rem;height:1rem;color:var(--goud)}

.vragenlijst{display:grid;gap:.85rem;border-top:0}
.vragenlijst .vraag{
  border:1px solid rgba(245,240,232,.16);border-radius:3px;
  background:linear-gradient(160deg,rgba(245,240,232,.08),rgba(245,240,232,.03));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 14px rgba(4,20,28,.3);
  transition:border-color 300ms ease,box-shadow 300ms ease,background 300ms ease;
  overflow:hidden;
}
.vragenlijst .vraag:hover{border-color:rgba(232,176,75,.45);background:rgba(245,240,232,.12);box-shadow:var(--schaduw)}
.vragenlijst .vraag[open]{border-color:var(--goud);background:rgba(245,240,232,.14);box-shadow:var(--schaduw)}
.vragenlijst .vraag summary{
  list-style:none;cursor:pointer;padding:1.15rem 3rem 1.15rem 1.35rem;position:relative;
  font-family:var(--kop);font-size:clamp(1.05rem,1rem + .35vw,1.25rem);font-weight:500;
  display:flex;align-items:center;gap:1.1rem;color:var(--kalk);
  transition:color 300ms ease;
}
.vragenlijst .vraag summary::-webkit-details-marker{display:none}
.vragenlijst .vraag summary:hover{color:var(--goud)}
.vragenlijst .vraag summary .v-num{
  font-family:var(--ui);font-size:.78rem;font-weight:600;letter-spacing:.12em;
  color:var(--goud);opacity:.85;flex:none;
}
.vragenlijst .vraag summary .v-tekst{flex:1}
.vragenlijst .vraag summary::after{
  content:"";position:absolute;right:1.3rem;top:50%;width:.7rem;height:.7rem;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-70%) rotate(45deg);transition:transform 350ms var(--ease);
}
.vragenlijst .vraag[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.vragenlijst .vraag .antwoord{padding:0 1.35rem 1.35rem 3.15rem;color:rgba(245,240,232,.78);max-width:74ch;font-size:.96rem;line-height:1.65}
.vragenlijst .vraag[open] .antwoord{animation:zacht 450ms var(--ease)}

.contactrooster{display:grid;gap:2.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.contactrooster{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem}}
.form-kaart{background:rgba(245,240,232,.07);border:1px solid rgba(245,240,232,.18);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:clamp(1.5rem,3vw,2.6rem);border-radius:3px}
.veldrij{display:grid;gap:1.1rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:620px){.veldrij--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.veld{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.veld label{font-size:.85rem;font-weight:500}
.veld .hint{color:rgba(245,240,232,.55);font-size:.78rem}
.veld input,.veld select,.veld textarea{
  font:inherit;font-size:.95rem;padding:.85rem .95rem;border-radius:2px;color:var(--kalk);
  background:rgba(8,29,40,.5);border:1px solid rgba(245,240,232,.22);
  transition:border-color 300ms,box-shadow 300ms,background 300ms;
}
.veld select option{color:#14202A}
.veld textarea{min-height:8.5rem;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--goud);box-shadow:0 0 0 3px rgba(232,176,75,.2);background:rgba(8,29,40,.75)}
.veld--fout input,.veld--fout select,.veld--fout textarea{border-color:var(--terra)}
.foutje{font-size:.82rem;color:#F0A184}
.form-noot{margin:1.1rem 0 0;font-size:.83rem;line-height:1.6;color:rgba(245,240,232,.56);max-width:56ch}
.vinkje{display:flex;gap:.7rem;align-items:flex-start;font-size:.87rem;color:rgba(245,240,232,.72);margin-bottom:1.2rem}
.vinkje input{margin-top:.3rem;accent-color:var(--goud);width:1.05rem;height:1.05rem}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.melding{padding:1rem 1.1rem;margin-bottom:1.5rem;font-size:.93rem;border:1px solid;border-radius:2px}
.melding--ok{background:rgba(94,140,106,.18);border-color:rgba(94,140,106,.6);color:#CDE7D4}
.melding--fout{background:rgba(192,103,74,.16);border-color:rgba(192,103,74,.6);color:#F2C3B1}

.zij{display:grid;gap:1.6rem;align-content:start}
.zijkaart{border:1px solid rgba(245,240,232,.18);background:rgba(245,240,232,.05);padding:1.5rem 1.4rem;border-radius:3px}
.zijkaart h3{font-size:1.2rem;margin-bottom:1rem}
.lijst{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;font-size:.92rem}
.lijst li{display:flex;gap:.75rem;color:rgba(245,240,232,.78)}
.lijst .ic{width:1.15rem;height:1.15rem;flex:none;margin-top:.24rem;color:var(--goud)}
.lijst a{text-decoration:none;border-bottom:1px solid rgba(245,240,232,.3)}
.lijst a:hover{border-color:var(--goud);color:var(--goud)}
.uren{display:grid;gap:.45rem;font-size:.91rem}
.uren div{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.45rem;border-bottom:1px dotted rgba(245,240,232,.2);color:rgba(245,240,232,.72)}
.uren div:last-child{border-bottom:0}
.uren b{font-weight:500;color:var(--kalk)}
.kaartje{border:1px solid rgba(245,240,232,.18);border-radius:3px;overflow:hidden}
.kaartje iframe{display:block;width:100%;height:220px;border:0;filter:grayscale(.25) contrast(1.05)}
.kaartje .bij{padding:.75rem 1rem;font-size:.8rem;color:rgba(245,240,232,.62);background:rgba(8,29,40,.6)}

#nieuwsbrief{margin-top:clamp(2.6rem,5vw,4rem);border:1px solid rgba(232,176,75,.4);background:rgba(232,176,75,.07);padding:clamp(1.6rem,3vw,2.6rem);display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr);border-radius:3px}
@media(min-width:900px){#nieuwsbrief{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem;align-items:center}}
#nieuwsbrief h3{font-size:clamp(1.4rem,1.2rem + 1vw,2rem);margin-bottom:.6rem}
#nieuwsbrief p{color:rgba(245,240,232,.74);font-size:.94rem}
.nb{display:flex;gap:.7rem;flex-wrap:wrap}
.nb input{flex:1 1 14rem;font:inherit;padding:.9rem 1rem;border-radius:2px;background:rgba(8,29,40,.5);border:1px solid rgba(245,240,232,.25);color:var(--kalk)}
.nb input::placeholder{color:rgba(245,240,232,.5)}
.nb input:focus{outline:none;border-color:var(--goud)}

/* ==================================================================
   Voet
   ================================================================== */
.voet{background:var(--inkt-diep);padding:clamp(3rem,6vw,4.5rem) 0 5rem;font-size:.9rem;color:rgba(245,240,232,.68)}
.voetrooster{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:820px){.voetrooster{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.voetrooster h4{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--goud);margin:0 0 1rem;font-weight:500}
.voetrooster ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.voetrooster a{text-decoration:none}
.voetrooster a:hover{color:var(--kalk)}
.klein{margin-top:2.6rem;padding-top:1.6rem;border-top:1px solid rgba(245,240,232,.16);display:flex;gap:1.5rem;flex-wrap:wrap;justify-content:space-between;font-size:.81rem;color:rgba(245,240,232,.5)}
.klein p{max-width:64ch}

/* ==================================================================
   Responsief + toegankelijkheid
   ================================================================== */
@media(max-width:900px){
  .hamburger{display:block}
  .menu{
    position:fixed;inset:0 0 auto;padding:6rem 2rem 2.6rem;flex-direction:column;align-items:flex-start;gap:1.4rem;
    background:var(--inkt-diep); /* dekkend: vast aan het scherm, zie kopbalk */
    transform:translateY(-102%);transition:transform 600ms var(--ease);
  }
  .menu-uit .menu{transform:none}
  .menu a{font-family:var(--kop);font-size:1.5rem}
  .menu .knop{font-family:var(--ui);font-size:1rem}
  .hero-roos{width:120vw;opacity:.1}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  [data-reveal]{opacity:1 !important;transform:none !important;clip-path:none !important}
  .woord > i{transform:none;opacity:1;animation:none}
  .hero-sub,.hero-acties,.hero-glas{opacity:1;animation:none}
  .sweep{background:none;-webkit-text-fill-color:currentColor}
  .watermesh,.zwever,.hero-roos .draai,.hero-roos .naald{animation:none}
}
@media print{.kop-balk,.peilstrook,.hero-beeld,.verhaal-film,.watermesh,.zwevers,.baan-knoppen{display:none}body{background:#fff;color:#000}}
section[id],div[id],#nieuwsbrief,#formulier{scroll-margin-top:5.5rem}
.kaart-inhoud{display:none}

/* ==================================================================
   De eigen pagina van het appartement (appartement.php)
   ================================================================== */
.ap-kop{position:relative;padding:0 0 clamp(2.4rem,5vw,4rem);background:var(--inkt)}
.ap-groot{margin:0;position:relative;overflow:hidden;max-height:min(70vh,44rem)}
/* Bovenaan wat extra donker, anders valt de kopbalk weg tegen een lichte
   lucht; onderaan loopt het beeld weg in de achtergrondkleur. */
.ap-groot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
    rgba(15,46,62,.66) 0%,
    rgba(15,46,62,.24) 22%,
    rgba(15,46,62,.12) 48%,
    var(--inkt) 100%);
}
.ap-groot img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
.ap-kop-in{position:relative;z-index:1;margin-top:clamp(-6rem,-9vw,-3rem);max-width:56rem}
.ap-kop-in h1{
  font-family:var(--kop);font-weight:500;line-height:1.06;margin:.4rem 0 1rem;
  font-size:clamp(2.1rem,1.5rem + 3.2vw,4.2rem);
}
.ap-kop-in .intro{margin-bottom:1.2rem}
.ap-plaats{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.8rem;font-size:.9rem;color:rgba(247,243,236,.7)}
.ap-plaats .ic{width:1.1rem;height:1.1rem;color:var(--goud)}

.ap-verhaal{margin-top:clamp(2.2rem,4vw,3.2rem);max-width:60ch}
.ap-verhaal p{color:var(--zacht)}

.ap-ruimtes{list-style:none;margin:0 0 clamp(2.2rem,4vw,3.2rem);padding:0;display:grid;gap:1.1rem}
@media(min-width:720px){.ap-ruimtes{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2.4rem}}
@media(min-width:1080px){.ap-ruimtes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ap-ruimtes li{display:flex;gap:.9rem;align-items:flex-start}
.ap-ruimtes .ic{width:1.35rem;height:1.35rem;flex:none;margin-top:.2rem;color:var(--goud-diep)}
.ap-ruimtes b{display:block;font-weight:600;font-size:.98rem;color:var(--tekst)}
.ap-ruimtes span{font-size:.9rem;line-height:1.55;color:var(--zacht)}

.ap-feitenrij{
  display:grid;gap:1px;background:var(--lijn-licht);
  border:1px solid var(--lijn-licht);border-radius:3px;overflow:hidden;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:640px){.ap-feitenrij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.ap-feitenrij{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ap-feitenrij > div{
  background:var(--papier);padding:1.1rem 1.2rem;
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:center;
}
.ap-feitenrij .ic{width:1.3rem;height:1.3rem;color:var(--meer);grid-row:span 2}
.ap-feitenrij b{font-weight:600;font-size:.95rem}
.ap-feitenrij span{font-size:.84rem;line-height:1.45;color:var(--zacht)}

.ap-seizoenen{margin-top:clamp(1.8rem,3.4vw,2.6rem);display:grid;gap:1rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:720px){.ap-seizoenen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.ap-seizoenen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ap-seizoen{
  padding:1.3rem 1.4rem;background:#fff;border:1px solid var(--lijn-licht);
  border-top:2px solid var(--goud);border-radius:3px;
}
.ap-seizoen .tijd{margin:0;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;color:var(--zacht)}
.ap-seizoen .prijs{margin:.4rem 0 .5rem;font-family:var(--kop);font-size:clamp(1.3rem,1.1rem + .6vw,1.7rem);line-height:1.1;color:var(--tekst)}
.ap-seizoen .bij{margin:0;font-size:.88rem;line-height:1.55;color:var(--zacht)}

.ap-tweeluik{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.ap-tweeluik{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3.4rem;align-items:start}}
.ap-eerlijk{
  background:rgba(245,240,232,.07);border:1px solid rgba(245,240,232,.16);
  border-left:3px solid var(--terra);border-radius:3px;padding:clamp(1.4rem,2.6vw,2rem);
}
.ap-eerlijk h3{margin:0 0 .8rem;font-family:var(--kop);font-weight:500;font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
.ap-eerlijk p{margin:0;color:rgba(247,243,236,.76);font-size:.95rem;line-height:1.65}

.ap-aanvraag{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.ap-aanvraag{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.4rem;align-items:start}}
.ap-noot{font-size:.88rem;color:var(--zacht);max-width:48ch}
.ap-contact li{color:var(--zacht)}
.ap-contact .ic{color:var(--meer)}
.ap-contact a{color:var(--inkt)}

/* Het formulier staat hier op een lichte ondergrond in plaats van op water. */
.form-kaart--licht{background:#fff;border-color:var(--lijn-licht);backdrop-filter:none;-webkit-backdrop-filter:none}
.form-kaart--licht label{color:var(--zacht)}
.form-kaart--licht input,.form-kaart--licht textarea,.form-kaart--licht select{
  background:var(--papier);border-color:var(--lijn-licht);color:var(--tekst);
}
.form-kaart--licht .vinkje{color:var(--zacht)}

/* De fotogalerij groeit mee met het aantal foto's dat je toevoegt. */
.ap-galerij{display:grid;gap:.8rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:820px){.ap-galerij{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1280px){.ap-galerij{grid-template-columns:repeat(4,minmax(0,1fr))}}
.ap-galerij figure{margin:0;overflow:hidden;border-radius:3px;background:rgba(14,42,56,.06)}
.ap-galerij img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;transition:transform 900ms var(--ease)}
.ap-galerij figure:hover img{transform:scale(1.04)}
.ap-galerij figcaption{padding:.55rem .2rem 0;font-size:.82rem;line-height:1.45;color:var(--zacht)}
.ap-galerij:empty{display:none}

/* ==================================================================
   Verhalen van lezers (verhalen.php)
   ================================================================== */
.vh-kop{max-width:54rem;margin-bottom:clamp(2.2rem,4vw,3.2rem);padding-top:clamp(2rem,4vw,3.4rem)}
.vh-kop h1{font-family:var(--kop);font-weight:500;line-height:1.1;margin:.4rem 0 1rem;
  font-size:clamp(2rem,1.5rem + 2.4vw,3.4rem)}
.vh-leeg{max-width:52ch;color:var(--zacht)}

.vh-rooster{display:grid;gap:1.6rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:760px){.vh-rooster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1180px){.vh-rooster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vh-kaart{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn-licht);
  border-radius:3px;overflow:hidden;transition:box-shadow 600ms var(--ease),transform 600ms var(--ease);
}
.vh-kaart:hover{box-shadow:0 22px 50px -34px rgba(14,42,56,.5);transform:translateY(-3px)}
.vh-foto{display:block;overflow:hidden;background:rgba(14,42,56,.06)}
.vh-foto img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:3/2;
  transition:transform 900ms var(--ease)}
.vh-kaart:hover .vh-foto img{transform:scale(1.04)}
.vh-in{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.vh-dorp{margin:0;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-diep)}
.vh-in h2{margin:0;font-family:var(--kop);font-weight:500;line-height:1.22;
  font-size:clamp(1.15rem,1.05rem + .4vw,1.4rem)}
.vh-in h2 a{color:var(--tekst);text-decoration:none}
.vh-in h2 a:hover{color:var(--meer)}
.vh-aanzet{margin:0;font-size:.92rem;line-height:1.6;color:var(--zacht)}
.vh-voet{margin:auto 0 0;padding-top:.6rem;font-size:.82rem;color:var(--zacht)}

/* één verhaal op zijn eigen pagina */
.vh-los{max-width:46rem;padding-top:clamp(2rem,4vw,3.4rem)}
.vh-los h1{font-family:var(--kop);font-weight:500;line-height:1.12;margin:.4rem 0 .6rem;
  font-size:clamp(1.9rem,1.4rem + 2.4vw,3.2rem)}
.vh-door{margin:0 0 1.8rem;color:var(--zacht);font-size:.95rem}
.vh-beeld{margin:0 0 2rem;overflow:hidden;border-radius:3px}
.vh-beeld img{width:100%;height:auto;display:block}
.vh-tekst p{color:var(--zacht);font-size:1.02rem;line-height:1.75;margin:0 0 1.2rem;max-width:64ch}

.vh-insturen{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1fr)}
@media(min-width:980px){.vh-insturen{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:3.4rem;align-items:start}}