/* =========================================================
   Droomreizen by Angélique
   Concept, augustus 2026. Cinematisch donker, luxe reisgevoel.
   ========================================================= */

/* ---------- fonts ---------- */
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-garamond-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-garamond-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-garamond-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-garamond-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant";src:url("../fonts/cormorant-garamond-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/plus-jakarta-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/plus-jakarta-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Jakarta";src:url("../fonts/plus-jakarta-sans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

/* ---------- basis ---------- */
:root{
  /* Donker blijft de basis, maar de warme tinten komen uit het palet dat
     Quinten aanwees (reisadviseurdanja.nl): taupe, zand en creme. */
  --inkt:#0B0A09;
  --nacht:#12100E;
  --diep:#1C1713;
  --room:#F9F3EE;      /* crème, exact van het voorbeeld */
  --beige:#E8E2DA;     /* lichte scheidingstint */
  --zand:#C6B8A8;      /* zand */
  --taupe:#7B6F5F;     /* warm bruingrijs */
  --goud:#C9A464;
  --goud-licht:#E6CE9B;
  --tekst:#F4EDE4;
  --zacht:rgba(240,231,220,.66);
  --zachter:rgba(240,231,220,.44);
  --lijn:rgba(198,184,168,.20);
  --lijn-sterk:rgba(198,184,168,.40);
  --wa:#25D366;
  --rand:clamp(20px,5vw,64px);
  --maat:1220px;
  --sec:clamp(88px,13vh,168px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0}
body{
  background:var(--inkt);color:var(--tekst);
  font-family:"Jakarta",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* height:auto is hier geen sierregel: zonder deze regel wint het height-attribuut
   uit de HTML van de aspect-ratio en wordt elke kaart 1250px hoog. */
img,video{max-width:100%;height:auto;display:block}
/* De foto's zitten in een <picture> zodat de telefoon een kleinere versie
   krijgt. display:contents zorgt dat die wikkel zelf geen vakje maakt, dus de
   opmaak blijft precies hetzelfde als met een losse img. */
picture{display:contents}
figure,blockquote,dl,dd{margin:0}
a{color:inherit}
::selection{background:var(--goud);color:#1A1410}

/* De letterschaal is bewust ingetogen. Hij stond op 132px voor een h1 en
   74px voor een h2, en dan schreeuwt een pagina in plaats van dat hij chic
   is. Bij het duurdere segment is de tekst juist kleiner en staat er meer
   lucht omheen. Ruimer regelafstand en iets meer letterafstand erbij, dat
   leest rustiger op grote koppen. */
h1,h2,h3,.serif{font-family:"Cormorant",Georgia,"Times New Roman",serif;font-weight:300;line-height:1.1;letter-spacing:-.008em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,4.2vw,62px);line-height:1.08}
h2{font-size:clamp(27px,2.9vw,42px);line-height:1.12}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.22}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.wrap{width:100%;max-width:var(--maat);margin-inline:auto;padding-inline:var(--rand)}
.sectie{position:relative;padding-block:var(--sec);z-index:2}
.eyebrow{
  font-family:"Jakarta",sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.34em;text-transform:uppercase;color:var(--goud);
  display:flex;align-items:center;gap:14px;margin:0 0 26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--goud);opacity:.75;flex:none}
.eyebrow.midden{justify-content:center}
.lood{font-size:clamp(15.5px,1.05vw,17.5px);color:var(--zacht);max-width:58ch;line-height:1.8}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Jakarta",sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;cursor:pointer;
  padding:16px 30px;border-radius:999px;border:1px solid transparent;
  transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .35s,color .35s,border-color .35s,box-shadow .35s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:focus-visible{outline:2px solid var(--goud-licht);outline-offset:3px}
.btn-goud{background:linear-gradient(135deg,var(--goud-licht),var(--goud));color:#1C1509;box-shadow:0 16px 40px -18px rgba(201,164,100,.85)}
.btn-lijn{border-color:var(--lijn-sterk);color:var(--tekst);background:rgba(255,255,255,.02)}
.btn-lijn:hover{border-color:var(--goud);color:var(--goud-licht)}
/* Geen WhatsApp-groen meer. Twee knopsoorten is genoeg en oogt rustiger: een
   volle gouden knop voor de hoofdactie en een lijnknop voor de rest. Het groen
   vloekte met het palet en trok de aandacht naar het verkeerde knopje. */
.btn-wa{
  background:transparent;color:var(--tekst);border-color:var(--lijn-sterk);
}
.btn-wa:hover{border-color:var(--goud);color:var(--goud-licht);background:rgba(201,164,100,.06)}
.btn-wa svg{color:var(--goud)}
.btn svg{width:17px;height:17px;flex:none}

/* ---------- kop- en navigatiebalk ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px var(--rand);
  transition:background-color .5s,backdrop-filter .5s,padding .5s,border-color .5s;
  border-bottom:1px solid transparent;
}
.topbar.vast{background:rgba(11,10,9,.78);backdrop-filter:blur(14px);border-bottom-color:var(--lijn);padding-block:13px}
.merk{display:flex;flex-direction:column;line-height:1;text-decoration:none}
.merk b{font-family:"Cormorant",serif;font-weight:400;font-size:clamp(19px,2vw,25px);letter-spacing:.01em}
.merk span{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--goud);margin-top:6px}
.topnav{display:flex;align-items:center;gap:34px}
.topnav a{
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;color:var(--zacht);transition:color .3s;position:relative;
  /* het klikvlak was 20px hoog; de norm voor aanwijsdoelen is 24 bij 24. De
     extra ruimte zit in padding, dus de tekst blijft staan waar hij stond. */
  padding-block:6px;
}
.topnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--goud);transition:width .4s cubic-bezier(.22,1,.36,1)}
.topnav a:hover{color:var(--tekst)}
.topnav a:hover::after{width:100%}
.topnav .btn{padding:12px 24px;font-size:12px}
/* Omslagpunt gemeten en niet gegokt. Met zes items lag dat op 1260px. Er is
   sinds Reisverhalen een zevende bijgekomen en toen was 1347px nodig: bij
   1260px liep het menu 194px over het logo heen en tussen 1300 en 1360px viel
   het over twee regels, waardoor de balk van 87 naar 93px groeide.
   Twee dingen daartegen: de tussenruimte gaat op smallere schermen van 34 naar
   26px (scheelt 48px, dus nog 1299px nodig) en de grens schuift naar 1320px.
   Zo houdt een laptop van 1366px de volle navigatie. */
@media(max-width:1500px){.topnav{gap:26px}}
@media(max-width:1320px){.topnav a:not(.btn){display:none}}

/* ---------- het vaste videodoek ---------- */
.doek{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--inkt)}
.doek video,.doek .poster{
  position:absolute;top:50%;left:50%;width:100%;height:100%;
  transform:translate(-50%,-50%) scale(1.06);object-fit:cover;
  will-change:transform;
  /* het goud in de beelden wordt olijfgroen zodra je het verdonkert,
     een beetje extra verzadiging houdt het warm */
  filter:saturate(1.12);
}
.doek .poster{background-size:cover;background-position:center}
/* De film is 2,35:1 bioscoopformaat. Op een staand telefoonscherm houdt
   object-fit:cover daar nog maar een vijfde van de breedte van over en dan
   is er van de compositie niets meer te herkennen. Daarom staat hij daar als
   brede band in beeld in plaats van beeldvullend. */
@media(max-aspect-ratio:1/1){
  .doek video{width:100%;height:100%;object-fit:cover}
}
.sluier{position:absolute;inset:0;background:#130D07;opacity:.34}
/* Het echte materiaal is fel goud in plaats van het donkere testbeeld, dus de
   witte koptekst had veel meer schaduw nodig dan eerst. Deze lagen samen halen
   de achtergrond onder de tekst omlaag zonder de kleuren dood te slaan. */
.verloop{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(70% 46% at 50% 47%,rgba(11,10,9,.52) 0%,rgba(11,10,9,.24) 58%,rgba(11,10,9,0) 100%),
    linear-gradient(180deg,rgba(11,10,9,.7) 0%,rgba(11,10,9,.06) 26%,rgba(11,10,9,.06) 50%,rgba(11,10,9,.84) 100%),
    radial-gradient(120% 80% at 50% 40%,rgba(11,10,9,0) 42%,rgba(11,10,9,.5) 100%);
}
/* inset was -200%: dat maakt een geanimeerd ruisvlak van vijf bij vijf
   schermen, terwijl de animatie maar een paar procent verschuift. */
.korrel{
  position:absolute;inset:-12%;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:korrelen 640ms steps(2) infinite;
}
@keyframes korrelen{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- hero ---------- */
/* Eén scherm hoog, niet 420vh. Met 420vh scrolde je vier schermen door een
   vastgezette tekst die van hoofdstuk wisselde voordat de pagina begon; nu
   scroll je meteen door en staan die andere teksten gewoon als secties onder
   het manifest. svh en niet vh, want op een telefoon telt vh de adresbalk mee
   en steekt de hero er dan onderuit. */
#hero{position:relative;height:100vh;height:100svh;z-index:2}

/* De twee teksten die eerst over de film schoven, nu als gewone sectie. */
.wrap-midden{max-width:820px;text-align:center}
.sectie-verhaal h2{
  font-family:"Cormorant",serif;font-weight:300;
  font-size:clamp(30px,4.4vw,54px);line-height:1.08;color:var(--room);
  margin:0 0 20px;text-wrap:balance;
}
.sectie-verhaal .lood{margin-inline:auto;max-width:58ch}
.sectie-verhaal .knoppen{
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;
}
@media(max-width:479px){
  .sectie-verhaal .knoppen{flex-direction:column;align-items:stretch}
  .sectie-verhaal .knoppen .btn{width:100%}
}
/* absolute binnen de hero, niet fixed over het scherm. Fixed bleef over de
   hele pagina staan en moest door JavaScript verborgen worden; nu scrollt
   de tekst gewoon met de hero mee weg. */
.hoofdstukken{
  position:absolute;inset:0;z-index:3;display:grid;place-items:center;
  /* minmax(0,1fr) en niet de standaard auto-kolom: anders groeit de kolom mee
     met de inhoud en heeft de max-width van 100% op het hoofdstuk niets om
     zich aan te meten. Op een scherm van 280px stak de hero er dan uit. */
  grid-template-columns:minmax(0,1fr);
  padding:0 var(--rand);pointer-events:none;
}
.hoofdstuk{
  /* min() en niet alleen 1000px: het blok wordt op zijn inhoud gemeten, dus
     op een scherm van 280px stak de tekst van 46ch er anders buiten */
  grid-area:1/1;max-width:min(1000px,100%);text-align:center;opacity:0;
  display:flex;flex-direction:column;align-items:center;
}
/* De hero is schermvullend, dus die mag een maat groter dan de rest van de
   pagina, maar niet meer de 121px van eerst. */
.hoofdstuk h1,.hoofdstuk h2{
  font-size:clamp(37px,4.9vw,74px);
  color:var(--room);
  text-shadow:0 2px 40px rgba(0,0,0,.9),0 6px 90px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.55);
}
.hoofdstuk .lood{
  color:rgba(247,242,232,.95);margin-top:22px;text-align:center;max-width:46ch;
  text-shadow:0 2px 26px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.5);
}
.hero-merknaam{text-shadow:0 2px 22px rgba(0,0,0,.8)}
.hoofdstuk .lijn-regel{display:block;overflow:hidden}
.hero-merknaam{
  font-family:"Jakarta",sans-serif;font-size:clamp(10px,1.1vw,12px);font-weight:700;
  letter-spacing:.44em;text-transform:uppercase;color:var(--goud-licht);
  margin-bottom:clamp(20px,3vh,34px);text-indent:.44em;
}
.hoofdstuk .knoppen{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:34px;pointer-events:auto}
/* Op een heel smal scherm (de buitenkant van een vouwtelefoon, 280px) waren
   de heroknoppen en de bovenbalk samen breder dan het venster en kreeg je een
   horizontale schuifbalk. Ze mogen daar afbreken in plaats van uitsteken. */
@media(max-width:340px){
  .hoofdstuk .knoppen{width:100%}
  .hoofdstuk .knoppen .btn{max-width:100%;white-space:normal;text-align:center}
  .topbar{gap:10px;padding-inline:14px}
  .merk{min-width:0}
  .topnav .btn{padding-inline:13px;letter-spacing:.06em;white-space:nowrap}
}

/* ---------- de opening ----------
   Deze veeg wacht bewust niet op GSAP. De vijf scriptbestanden zijn samen
   ruim 200 kB en daardoor stond het scherm de eerste 0,4 seconde helemaal
   leeg: het hele blok is immers opacity 0 tot JavaScript hem aanzet. Nu
   start de veeg zodra het stijlblad binnen is, dus binnen een tiende
   seconde, en neemt GSAP het daarna over voor de scroll.
   fill-mode is backwards en niet both: na afloop laat de animatie de
   waarden weer los, zodat GSAP de opacity gewoon kan overnemen. Met both
   zou de eindstand blijven winnen en zou het hoofdstuk nooit uitfaden. */
.js .hoofdstuk[data-hoofdstuk="1"]{opacity:1}
.js .hoofdstuk[data-hoofdstuk="1"] > *{
  animation:veeg-binnen .95s cubic-bezier(.16,.86,.36,1) backwards;
}
.js .hoofdstuk[data-hoofdstuk="1"] > .hero-merknaam{animation-delay:.06s}
.js .hoofdstuk[data-hoofdstuk="1"] > h1{animation-delay:.2s}
.js .hoofdstuk[data-hoofdstuk="1"] > .lood{animation-delay:.44s}
@keyframes veeg-binnen{
  from{opacity:0;transform:translate3d(-15%,0,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}

.scrolhint{
  position:absolute;left:50%;bottom:clamp(22px,4vh,44px);transform:translateX(-50%);
  z-index:4;display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:rgba(247,242,232,.6);
  pointer-events:none;
}
.scrolhint i{display:block;width:1px;height:56px;background:linear-gradient(180deg,rgba(247,242,232,.7),transparent);position:relative;overflow:hidden}
.scrolhint i::after{content:"";position:absolute;left:0;top:0;width:1px;height:18px;background:var(--goud-licht);animation:zak 2.1s cubic-bezier(.55,0,.25,1) infinite}
@keyframes zak{0%{transform:translateY(-20px);opacity:0}30%{opacity:1}100%{transform:translateY(56px);opacity:0}}

/* ---------- inhoud die over het doek schuift ---------- */
.blad{position:relative;z-index:2;background:transparent}
.blad-donker{background:linear-gradient(180deg,rgba(11,10,9,0) 0%,rgba(11,10,9,.92) 12%,var(--inkt) 30%,var(--inkt) 100%)}

/* manifest */
.manifest{text-align:center}
.manifest .groot{
  font-family:"Cormorant",serif;font-weight:300;
  font-size:clamp(24px,3.1vw,42px);line-height:1.35;letter-spacing:-.006em;
  max-width:26ch;margin:0 auto;color:var(--room);
}
.manifest .groot em{font-style:italic;color:var(--goud-licht)}
.manifest .lood{margin:38px auto 0;text-align:center}

/* over Angélique */
.over{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(36px,6vw,96px);align-items:center}
@media(max-width:900px){.over{grid-template-columns:1fr}}
.portret,.verhaal-beeld{position:relative}
.lijst{
  position:relative;overflow:hidden;border-radius:2px;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.95);
}
.portret img,.verhaal-beeld img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.portret .avatar{
  position:absolute;left:-14px;bottom:-24px;width:clamp(80px,8.5vw,112px);
  aspect-ratio:1;object-fit:cover;border-radius:50%;
  border:2px solid var(--goud);background:var(--nacht);
  box-shadow:0 20px 44px -18px rgba(0,0,0,.95);
}
.bijschrift{
  display:block;margin-top:15px;text-align:right;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--zachter);
}

/* verhaalsectie met de marktfoto, spiegelbeeld van het over-mij blok */
.verhaal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:clamp(36px,6vw,92px);align-items:center}
@media(max-width:900px){
  .verhaal{grid-template-columns:1fr}
  .verhaal-beeld{order:-1;margin-bottom:30px}
  .portret .avatar{left:-8px;bottom:-18px}
}
.portret .kader{position:absolute;inset:18px -18px -18px 18px;border:1px solid var(--lijn-sterk);border-radius:2px;z-index:-1}
@media(max-width:900px){.portret .kader{inset:14px -14px -14px 14px}.portret{margin-bottom:26px}}
.prijsje{
  display:inline-flex;align-items:center;gap:11px;padding:10px 18px;margin-bottom:26px;
  border:1px solid rgba(201,164,100,.55);border-radius:999px;
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--goud-licht);
  background:linear-gradient(135deg,rgba(230,206,155,.18),rgba(201,164,100,.08));
}
.prijsje svg{width:15px;height:15px;color:var(--goud)}
.bijschrift{color:var(--zand);opacity:.85}
.cijfers{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,54px);margin-top:44px;padding-top:34px;border-top:1px solid var(--lijn)}
/* dezelfde goudloop als de hoofdknop, maar dan als tekst */
.cijfer b{
  display:block;font-family:"Cormorant",serif;font-weight:400;font-size:clamp(38px,4.4vw,58px);line-height:1;
  background:linear-gradient(135deg,var(--goud-licht),var(--goud));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.cijfer span{display:block;margin-top:9px;font-size:12px;letter-spacing:.11em;text-transform:uppercase;color:var(--zachter)}

/* bestemmingen, horizontaal */
#bestemmingen{overflow:hidden}
/* de sectie wordt vastgezet, dus hij moet in één scherm passen. Ook op
   telefoon: daar was het een veegcarrousel, maar dan zie je alleen de eerste
   kaart staan en blader je er nooit doorheen. */
#bestemmingen{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(40px,6vh,88px)}
/* de marge zat eerst aan de hint "Blijf scrollen"; die is weg, dus de ruimte
   tussen de kop en de kaarten hoort nu hier */
.baan-houder{padding-block:4px;margin-top:clamp(30px,4.5vh,56px)}
.baan{display:flex;gap:clamp(16px,2vw,30px);padding-left:var(--rand);will-change:transform}
.kaart{
  flex:none;width:clamp(232px,25vw,330px);position:relative;
  border-radius:2px;overflow:hidden;
  background:linear-gradient(180deg,#221C17,var(--diep));
  box-shadow:0 40px 80px -46px rgba(0,0,0,.9);
}
.kaart img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s cubic-bezier(.22,1,.36,1);filter:saturate(.92)}
.kaart:hover img{transform:scale(1.06)}
.kaart .tekst{position:absolute;inset:auto 0 0 0;padding:26px 24px;background:linear-gradient(180deg,transparent,rgba(9,8,7,.9) 62%)}
.kaart h3{color:var(--room);margin-bottom:7px}
.kaart p{font-size:14px;line-height:1.5;color:rgba(242,236,225,.72);margin:0}
.kaart .nr{
  position:absolute;top:18px;right:20px;font-family:"Cormorant",serif;font-size:15px;
  letter-spacing:.16em;color:var(--zand);opacity:.75;
}
/* op telefoon mogen de kaarten flink groter, er staat er toch maar één
   tegelijk in beeld en anders zie je de foto nauwelijks */
@media(max-width:759px){
  .kaart{width:min(78vw,300px)}
  .kaart .tekst{padding:22px 20px}
  .baan{gap:14px}
}

/* ---------- voorbeeldroute: de auto die de weg aflegt ---------- */
/* overflow-x:clip en niet overflow:hidden. Hidden maakt van deze sectie een
   scrollcontainer en dan werkt position:sticky van de fotolaag niet meer,
   waardoor de foto na het eerste stuk uit beeld schoof. Clip snijdt wel af
   maar laat sticky met rust. */
#route{overflow-x:clip}
/* De foto van de bestemming staat achter de weg. Hij plakt aan de bovenkant
   van het scherm terwijl de sectie langsscrolt, dus je rijdt als het ware door
   het landschap van die dag. */
.route-doek{position:absolute;inset:0;z-index:0;pointer-events:none}
/* geen position:sticky: ScrollSmoother verschuift de pagina met een transform,
   waardoor de browser denkt dat er niets scrolt en sticky dood is. Deze laag
   wordt daarom door ScrollTrigger vastgezet. */
.route-beelden{
  position:relative;height:100vh;overflow:hidden;background:var(--inkt);
  contain:paint;
  /* het kleurfilter staat hier en niet op de acht losse foto's: anders doet de
     browser acht filterbewerkingen per beeldje in plaats van één */
  filter:saturate(.92);
}
.route-beeld{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;visibility:hidden;transform:scale(1.07);
  /* bewust geen will-change: dat zou alle acht permanent als aparte laag in
     het geheugen houden, terwijl er maar één tegelijk zichtbaar is */
}
/* Zonder deze waas is er geen beginnen aan: witte tekst op een foto van
   wijngaarden of een strand leest niet. */
.route-waas{
  position:absolute;inset:0;
  background:
    radial-gradient(95% 65% at 50% 50%,rgba(11,10,9,.24) 0%,rgba(11,10,9,.46) 100%),
    linear-gradient(180deg,rgba(11,10,9,.8) 0%,rgba(11,10,9,.38) 20%,rgba(11,10,9,.38) 80%,rgba(11,10,9,.84) 100%);
}
#route > .wrap,#route > .routebaan,#route > .route-slot{position:relative;z-index:1}
/* geen eigen padding: de kaarten worden op procenten van deze doos gezet en
   moeten precies hetzelfde vlak gebruiken als de svg eronder */
.routebaan{
  position:relative;margin:clamp(34px,5vw,64px) auto 0;
  width:100%;max-width:calc(var(--maat) - 2 * var(--rand));
  padding-inline:0;
}
svg.weg{width:100%;height:auto;display:block;overflow:visible}  /* alleen de routetekening: .weg is ook de wegschuifklasse van de hulpknop en het TUI-kaartje */
/* de autolaag ligt er precies overheen met dezelfde viewBox */
.weg-auto{position:absolute;inset:0;width:100%;height:auto;display:block;overflow:visible;pointer-events:none}
.asfalt-rand{fill:none;stroke:rgba(233,220,198,.14);stroke-linecap:round;stroke-linejoin:round}
.asfalt{fill:none;stroke:#241C16;stroke-linecap:round;stroke-linejoin:round}
.streep{fill:none;stroke:var(--goud);stroke-linecap:round;opacity:.85}
.auto-body{fill:url(#autoverloop)}
.auto-dak{fill:rgba(20,15,9,.55)}
.auto-ruit{fill:rgba(20,15,9,.4)}
.auto-wiel{fill:#15110C}
.auto-licht{fill:#FFF6DE}
.auto-schaduw{fill:rgba(0,0,0,.45)}
/* het stuk over zee, net voor dag 4 tot een eindje erna. Geen middenstreep
   erin: streepjes maken er meteen weer een weg van. */
.vaarwater-rand{fill:none;stroke:rgba(174,214,221,.2);stroke-linecap:round;stroke-linejoin:round}
.vaarwater{fill:none;stroke:url(#zeeverloop);stroke-linecap:round;stroke-linejoin:round}
.boot-romp{fill:url(#autoverloop)}
.boot-kajuit{fill:rgba(20,15,9,.55)}
.boot-ruit{fill:rgba(20,15,9,.4)}
.boot-licht{fill:#FFF6DE}
.boot-schaduw{fill:rgba(0,0,0,.4)}
.boot-kielzog{fill:none;stroke:rgba(196,226,231,.55);stroke-width:2;stroke-linecap:round}

/* zonder JavaScript blijven de dagen gewoon onder elkaar staan;
   pas als de route echt gebouwd is gaan ze op de weg liggen */
.dagen{list-style:none;margin:0;padding:0}
.dag{margin-bottom:34px;width:100%}
.routebaan.gebouwd .dagen{position:absolute;inset:0}
.routebaan.gebouwd .dag{position:absolute;margin:0;width:clamp(210px,25vw,300px);opacity:0}
.routebaan.gebouwd .dag.links{text-align:right}
.dagnr{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:#1C1509;margin-bottom:11px;padding:5px 13px;border-radius:999px;
  background:linear-gradient(135deg,var(--goud-licht),var(--goud));
  box-shadow:0 12px 28px -14px rgba(201,164,100,.9);
}
.dag h3{margin-bottom:8px;color:var(--room);text-shadow:0 2px 20px rgba(0,0,0,.9),0 1px 3px rgba(0,0,0,.6)}
.dag p{font-size:14.5px;line-height:1.6;color:rgba(244,237,228,.86);margin:0;text-shadow:0 2px 16px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.6)}
.stip{fill:var(--inkt);stroke:var(--goud);transition:none}

/* het weerblokje per dag */
.weer{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  padding:7px 14px 7px 11px;border-radius:999px;
  border:1px solid rgba(201,164,100,.32);
  background:linear-gradient(135deg,rgba(230,206,155,.14),rgba(201,164,100,.05));
}
.weer svg{width:19px;height:19px;color:var(--goud-licht);flex:none}
.weer b{font-family:"Cormorant",serif;font-weight:500;font-size:22px;line-height:1;color:var(--goud-licht)}
.weer span{font-size:11px;letter-spacing:.06em;color:var(--zachter);text-transform:none}
/* bij een kaart die rechts uitlijnt schuift de pil mee naar rechts,
   maar de volgorde binnenin blijft gewoon icoon, graden, dag */
.route-weerbron{font-size:15px;line-height:1.7;color:var(--zacht);margin-top:18px;max-width:72ch}
.route-weerbron b{color:var(--goud-licht);font-weight:600}

.route-slot{margin-top:clamp(46px,6vw,80px);display:flex;flex-direction:column;align-items:flex-start;gap:24px}
@media(max-width:760px){
  .routebaan.gebouwd .dag{width:auto}
  .routebaan.gebouwd .dag.links{text-align:left}
  .dag h3{font-size:21px}
  .dag p{font-size:14px}
}

/* waarom: het lichte blok. Bewust crème gebleven en niet goud gemaakt, dat
   was juist de rust in de pagina. Het goud zit in de accenten eromheen. */
.licht{
  position:relative;z-index:2;color:#4A4441;
  background:
    radial-gradient(120% 90% at 8% -10%,#FFFDFA 0%,rgba(255,253,250,0) 62%),
    var(--room);
}
/* zachte overgang van het donker naar het goud en weer terug */
.licht::before,.licht::after{content:"";position:absolute;left:0;right:0;height:60px;pointer-events:none}
.licht::before{top:0;background:linear-gradient(180deg,rgba(11,10,9,.14),transparent)}
.licht::after{bottom:0;background:linear-gradient(0deg,rgba(11,10,9,.16),transparent)}
.licht h2,.licht h3{color:#393635}
.licht .eyebrow{color:var(--taupe)}
.licht .eyebrow::before{background:var(--taupe);opacity:.85}
.licht .lood{color:#575757}

.redenen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(46px,6vw,74px)}
.reden{padding:clamp(26px,3vw,42px);border-left:1px solid rgba(123,111,95,.26)}
.reden:first-child{border-left:0;padding-left:0}
.reden:last-child{padding-right:0}
.reden .nr{font-family:"Cormorant",serif;font-size:15px;letter-spacing:.2em;color:var(--taupe);display:block;margin-bottom:18px}
.reden h3{font-size:clamp(20px,1.9vw,26px);margin-bottom:12px}
.reden p{font-size:15px;line-height:1.66;color:#575757;margin:0}
@media(max-width:920px){
  .redenen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reden{padding:clamp(24px,4vw,34px)}
  .reden:nth-child(odd){border-left:0;padding-left:0}
  .reden:nth-child(even){padding-right:0}
  .reden:nth-child(n+3){border-top:1px solid rgba(123,111,95,.26);padding-top:clamp(26px,4vw,36px)}
}
@media(max-width:560px){
  .redenen{grid-template-columns:1fr}
  .reden{border-left:0;padding-inline:0;border-top:1px solid rgba(123,111,95,.26);padding-block:26px}
  .reden:first-child{border-top:0;padding-top:0}
}

/* ---------- lichte secties in de warme tinten van het voorbeeld ----------
   De bovenste helft van de pagina blijft filmisch donker (hero, verhaal,
   bestemmingen, route). Vanaf "waarom" wordt het licht en warm: dat is het
   praktische deel waar mensen lezen, vergelijken en invullen. */
.licht-beige{
  position:relative;z-index:2;color:#4A4441;
  background:
    radial-gradient(100% 70% at 90% 0%,#F5F0E9 0%,rgba(245,240,233,0) 60%),
    var(--beige);
}
.licht-beige::before{content:"";position:absolute;top:0;left:0;right:0;height:50px;background:linear-gradient(180deg,rgba(123,111,95,.10),transparent);pointer-events:none}
.licht-beige h2,.licht-beige h3{color:#393635}
.licht-beige .eyebrow{color:var(--taupe)}
.licht-beige .eyebrow::before{background:var(--taupe);opacity:.85}
.licht-beige .lood{color:#575757}

/* het contactblok, crème zoals bij het voorbeeld */
.licht-creme{position:relative;z-index:2;color:#4A4441;background:var(--room)}
.licht-creme h2,.licht-creme h3{color:#393635}
.licht-creme .eyebrow{color:var(--taupe)}
.licht-creme .eyebrow::before{background:var(--taupe);opacity:.85}
.licht-creme .lood{color:#575757}

/* beoordelingen */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:clamp(18px,1.8vw,28px);margin-top:clamp(44px,5vw,68px);align-items:stretch}
/* op de telefoon schuiven de ervaringen zijwaarts voorbij terwijl je omlaag
   scrolt, en daarna loopt de pagina gewoon door */
@media(max-width:760px){
  #beoordelingen{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(56px,8vh,92px);overflow:hidden}
  #beoordelingen .quotes{display:flex;flex-wrap:nowrap;width:max-content;gap:14px;margin-top:30px;will-change:transform}
  #beoordelingen .quote{flex:none;width:76vw;display:flex;flex-direction:column}
  #beoordelingen .quote blockquote{flex:1}
  .quote-teller{
    display:flex;align-items:center;gap:12px;margin-top:22px;
    font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--zachter);
  }
  .quote-teller i{display:block;height:1px;flex:1;background:var(--lijn);position:relative;overflow:hidden}
  .quote-teller i::after{content:"";position:absolute;inset:0 auto 0 0;width:33%;background:var(--goud);transition:transform .4s ease}
}
/* De ervaringen krijgen een bredere baan dan de rest van de pagina. In de
   standaardbreedte werden de kolommen zo smal dat de citaten in slierten van
   drie woorden vielen. */
#beoordelingen .wrap{max-width:1420px}
.quote{
  /* een <figure> krijgt van de browser 40px marge links en rechts, waardoor
     elke kaart 80px smaller werd dan zijn kolom */
  margin:0;
  border:1px solid var(--lijn);border-radius:2px;
  padding:clamp(28px,2.6vw,42px);
  background:linear-gradient(160deg,rgba(198,184,168,.07),rgba(198,184,168,.02));
  display:flex;flex-direction:column;
}
.quote blockquote{flex:1}
.quote .sterren{display:flex;gap:5px;margin-bottom:20px}
.quote .sterren svg{width:14px;height:14px;color:var(--goud)}
.quote blockquote{margin:0;font-family:"Cormorant",serif;font-size:clamp(18px,1.45vw,21px);line-height:1.5;font-weight:300;color:var(--room)}
.quote cite{display:block;margin-top:22px;font-style:normal;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--zachter)}

/* aanvraagformulier */
#contact{position:relative}
.formblok{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(36px,5vw,84px);align-items:start}
@media(max-width:900px){.formblok{grid-template-columns:1fr}}
.gegevens .rij{display:flex;align-items:flex-start;gap:16px;padding:20px 0;border-bottom:1px solid var(--lijn)}
.gegevens .rij:first-of-type{border-top:1px solid var(--lijn)}
.gegevens .rij svg{width:18px;height:18px;color:var(--goud);flex:none;margin-top:4px}
.gegevens .rij b{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--zachter);font-weight:600;margin-bottom:5px}
/* het mailadres is één onbreekbaar woord van 283px en duwde op schermen van
   320px een horizontale schuifbalk de pagina in. Nu mag hij afbreken. */
/* het klikvlak van telefoon en e-mail was 21px hoog, ook op een computer.
   Met wat ruimte eronder haalt hij de 24px die de norm vraagt. */
.gegevens .rij a{display:inline-block;padding-block:3px;margin-block:-1px}
.gegevens .rij a,.gegevens .rij span{font-size:16px;color:var(--tekst);text-decoration:none;overflow-wrap:anywhere}
.gegevens .rij a:hover{color:var(--goud-licht)}
.tijden{margin-top:26px;font-size:14px;color:var(--zacht);line-height:1.9}
.tijden dl{display:grid;grid-template-columns:auto 1fr;gap:0 18px;margin:8px 0 0}
/* De twee kolommen van de openingstijden hebben samen 282px nodig. Op een
   scherm van 280px duwden ze het hele contactblok breder dan het venster,
   want een rasteronderdeel krimpt niet onder zijn inhoud. Daar dus onder
   elkaar. */
@media(max-width:360px){
  .tijden dl{grid-template-columns:1fr;gap:0}
  .tijden dd{margin-bottom:8px}
  /* "Stuur mijn reiswens" met 30px marge aan weerskanten vroeg 232px terwijl
     er 208px was, en de tekst brak niet af. Op zo'n smal scherm mag hij dat
     wel, en de zijmarge kan smaller. */
  form.aanvraag .btn{padding-inline:16px;white-space:normal}
}
.tijden dt{color:var(--zachter)}
.tijden dd{margin:0}

form.aanvraag{border:1px solid var(--lijn);border-radius:2px;padding:clamp(24px,3.2vw,44px);background:rgba(255,255,255,.022)}
.veldrij{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:620px){.veldrij{grid-template-columns:1fr}}
/* min-width:0 want een keuzelijst is standaard net zo breed als zijn langste
   optie. "Verre reis op maat" vroeg 264px en een rasteronderdeel krimpt niet
   onder zijn inhoud, dus dat duwde het hele contactblok breder dan een scherm
   van 280px. Met deze regel mag het veld gewoon meekrimpen. */
.veld{margin-bottom:18px;position:relative;min-width:0}
.veld select{max-width:100%}
.veld label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--zachter);font-weight:600;margin-bottom:9px}
.veld input,.veld select,.veld textarea{
  /* min-width:0 hoort hierbij. Een invoerveld is van zichzelf zo'n twintig
     tekens breed en krimpt daar niet onder, ook niet met width:100%. Samen
     met de binnenmarge kwam het formulier zo op 282px terwijl er 240px was. */
  width:100%;min-width:0;font-family:inherit;font-size:16px;color:var(--tekst);
  background:rgba(255,255,255,.03);border:1px solid var(--lijn);border-radius:2px;
  padding:14px 16px;transition:border-color .3s,background-color .3s,box-shadow .3s;
}
.veld textarea{min-height:112px;resize:vertical;line-height:1.6}
.veld select{
  appearance:none;cursor:pointer;padding-right:44px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C9A464' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
}
.veld select option{background:var(--nacht);color:var(--tekst)}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--goud);background:rgba(201,164,100,.06);
  box-shadow:0 0 0 3px rgba(201,164,100,.13);
}
.veld input::placeholder,.veld textarea::placeholder{color:rgba(242,236,225,.3)}
.veld.fout input,.veld.fout select{border-color:#D4634A;background:rgba(212,99,74,.08)}
.veld .melding{display:none;font-size:12.5px;color:#E8927B;margin-top:8px;letter-spacing:.01em}
.veld.fout .melding{display:block}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form.aanvraag .btn{width:100%;margin-top:8px;padding-block:19px}
.kleine-letter{font-size:12.5px;color:var(--zachter);margin-top:18px;line-height:1.6}
.kleine-letter a{color:var(--zacht)}

.verstuurd{display:none;text-align:center;padding:clamp(30px,5vw,60px) 10px}
.verstuurd.aan{display:block}
.verstuurd .vink{
  width:70px;height:70px;margin:0 auto 26px;border-radius:50%;
  border:1px solid var(--goud);display:grid;place-items:center;background:rgba(201,164,100,.1);
}
.verstuurd .vink svg{width:30px;height:30px;color:var(--goud-licht)}
/* h2 in plaats van h3: de kop van een bevestiging volgde direct op de h1 en
   dat was een kopsprong. Zelfde maat als daarvoor. */
.verstuurd h2,.kompas-klaar h2{font-size:clamp(27px,3vw,38px);color:var(--room);margin-bottom:14px}
.verstuurd p{color:var(--zacht);max-width:42ch;margin-inline:auto}
.verstuurd .knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}

/* voettekst */
footer.voet{
  position:relative;z-index:2;background:var(--nacht);border-top:1px solid var(--lijn);
  padding-block:clamp(46px,6vw,72px) clamp(96px,10vw,60px);
}
/* Vier kolommen: gegevens plus drie groepen links. Eerst stond hier een
   kolom met vierentwintig links onder elkaar, bijna duizend pixels hoog; dat
   las als een sitemap in plaats van als afsluiting van de pagina. */
.voet-in{
  display:grid;gap:clamp(30px,4vw,54px);align-items:start;
  grid-template-columns:minmax(260px,1.35fr) repeat(3,minmax(140px,1fr));
}
.voet .merk{margin-bottom:14px}
.voet-wie{font-size:14px;color:var(--zacht);max-width:34ch;margin:0 0 20px}

/* De gegevens waren platte tekst met <br> ertussen, dus je kon een nummer of
   mailadres niet aantikken. Nu is elke regel een echte link met een raakvlak
   van minstens 44px hoog, ook op een telefoon. */
.voet-gegevens{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.voet-gegevens a{
  display:flex;align-items:center;gap:11px;min-height:44px;padding:5px 0;
  font-size:14px;color:var(--zacht);text-decoration:none;transition:color .3s;
}
.voet-gegevens a:hover,.voet-gegevens a:focus-visible{color:var(--goud-licht)}
.voet-gegevens svg{width:17px;height:17px;flex:none;color:var(--goud);opacity:.8}
.voet-gegevens span{min-width:0;overflow-wrap:anywhere}

.voet-kolom h2{
  font-family:inherit;font-size:11px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--zachter);margin:0 0 14px;
}
.voet-kolom > div{display:flex;flex-direction:column;gap:1px}
/* padding-block van 6 naar 12 op een telefoon: de links waren 34px hoog en
   dat is onder de maat waarop je met een duim betrouwbaar mikt. Op desktop
   blijft de voettekst compact, daar klik je met een muis. */
.voet-kolom a{
  font-size:13.5px;color:var(--zacht);text-decoration:none;
  transition:color .3s;padding-block:6px;
}
@media(max-width:899px){
  .voet-kolom a{padding-block:12px}
}
.voet-kolom a:hover{color:var(--goud-licht)}

/* onderregel: waarborgen links, het kleine spul rechts */
/* De verplichte TUI-vermelding staat op een eigen regel boven de kleine
   links, want hij moet eenvoudig vindbaar zijn en niet wegvallen tussen de
   voetnoten. Vandaar kolom in plaats van rij. */
.voet-onder{
  display:flex;flex-direction:column;gap:18px;align-items:flex-start;
  margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--lijn);
}
/* 13,5px is de ondergrens die de mobiele controle bewaakt: dit is geen
   bijschrift maar informatie waar de bezoeker recht op heeft. */
/* Met .voet ervoor, want ".voet p" hieronder is specifieker en zou de kleur
   anders terugzetten naar het lichtste grijs. Volgorde helpt daar niet tegen. */
.voet .tui-verplicht{
  margin:0;max-width:92ch;font-size:13.5px;line-height:1.7;color:var(--zacht);
}
.voet-klein{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center}
.voet-klein span,.voet-klein a{font-size:12.5px;color:var(--zachter);text-decoration:none}
.voet-klein a{transition:color .3s;padding-block:6px}
.voet-klein a:hover{color:var(--goud-licht)}
/* Deze regel moet NA .voet-klein a staan, anders wint die op volgorde en
   blijven de links 33px hoog. */
@media(max-width:899px){
  .voet-klein a,.voet-klein span{padding-block:12px;display:inline-block}
}

/* De zwevende hulpbel staat rechtsonder vast aan het scherm en dekte de
   laatste link van de onderregel af. De bel hoort daar te blijven staan (dat
   is bewust de laatste kans om contact op te nemen), dus wijkt de tekst. */
@media(min-width:900px){.voet-onder{padding-right:210px}}
/* .voet-onder is nu altijd een kolom, dus deze regel is overbodig geworden. */
@media(max-width:899px){
  .voet-in{grid-template-columns:1fr 1fr}
  .voet-merk{grid-column:1 / -1}
}
@media(max-width:539px){
  .voet-in{grid-template-columns:1fr}
  /* Onder elkaar werd de voettekst 1640px hoog, twee schermen aan links. In
     twee kolommen halveert dat, zonder JavaScript en zonder open- en
     dichtklappen. */
  .voet-kolom > div{display:grid;grid-template-columns:1fr 1fr;gap:1px 14px}
}

.voet p{font-size:13.5px;color:var(--zachter);line-height:1.8;margin:0}
/* ---------- het reiswensformulier in twee stappen ----------
   Zonder JavaScript staan beide stappen onder elkaar. Met JavaScript zet
   app.js de klasse stappen-aan en is alleen de actieve stap te zien. */
.aanvraag.stappen-aan .vormstap:not(.actief){display:none}
/* Bij het wisselen van stap scrollt app.js naar de stap; zonder deze marge
   schoof de kop "Stap 2 van 2" onder de vaste bovenbalk. */
.vormstap{scroll-margin-top:118px}
.vormstap-kop{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:0 0 22px;
  font-family:"Cormorant",serif;font-weight:400;font-size:clamp(22px,2.4vw,28px);color:var(--room);
}
.vormstap-nr{
  font-family:"Jakarta",sans-serif;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--goud);
}
.vormstap-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:6px}
.vormstap-hint{font-size:13.5px;color:var(--zachter)}
.vormstap-terug{
  background:none;border:0;padding:12px 4px;min-height:44px;cursor:pointer;
  font:inherit;font-size:14px;color:var(--zacht);text-decoration:underline;text-underline-offset:4px;
}
.vormstap-terug:hover{color:var(--goud-licht)}
.licht-creme .vormstap-kop{color:#393635}
.licht-creme .vormstap-terug{color:#5C564E}
.licht-creme .vormstap-hint{color:#6B6153}
.licht-creme .vormstap-nr{color:#8A6A22}

/* ---------- naar de inhoud ----------
   Eerste link op elke pagina. Staat buiten beeld tot hij focus krijgt, dan
   verschijnt hij linksboven als gouden pil. Alleen toetsenbordgebruikers
   zien hem ooit. */
.overslaan{
  position:absolute;left:16px;top:-80px;z-index:200;
  padding:12px 18px;border-radius:999px;background:var(--goud);color:#1C1509;
  font-size:14px;font-weight:600;text-decoration:none;transition:top .2s;
}
.overslaan:focus{top:16px;outline:2px solid var(--room);outline-offset:3px}

/* ---------- social-iconen in de voettekst ----------
   Lijnicoontjes in een cirkel, in dezelfde gouden familie als de rest. Bewust
   geen ingekleurde merkvlaggen: vijf felle logo's onderin trekken de aandacht
   weg van de contactgegevens en vloeken met de rustige stijl.
   Een icoon zonder adres wordt geen link maar een gedimd bolletje, zodat er
   nooit een dode link op de site staat terwijl het ontwerp wel te zien is. */
.soc-rij{display:flex;gap:11px;margin-top:20px;flex-wrap:wrap}
.soc{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  border:1px solid rgba(201,164,100,.55);color:var(--goud-licht);
  background:rgba(201,164,100,.1);
  transition:color .3s,border-color .3s,background-color .3s,transform .3s,box-shadow .3s;
}
.soc svg{width:20px;height:20px;display:block}
/* Bij zweven vult het bolletje zich met goud en wordt het icoon donker. Dat
   leest als een knop en niet als decoratie. */
a.soc:hover,a.soc:focus-visible{
  color:#0B0A09;border-color:var(--goud);
  background:linear-gradient(160deg,var(--goud-licht),var(--goud));
  transform:translateY(-3px);
  box-shadow:0 12px 26px -10px rgba(201,164,100,.6);
}
a.soc:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
/* Zonder adres blijft het goud, alleen wat rustiger: het moet opvallen dat ze
   er zijn, maar het is nog geen link. */
.soc-leeg{opacity:.55;cursor:help}
/* Op een telefoon staan ze los onder de gegevens en is er ruimte zat, dus
   mogen ze groter. Op desktop staan ze naast een kolom met links en zou 52px
   die kolom uit balans trekken. */
@media(max-width:639px){
  .soc-rij{gap:13px;margin-top:22px}
  .soc{width:52px;height:52px}
  .soc svg{width:24px;height:24px}
}

/* ook hier een klikvlak van minstens 24px hoog; de gap gaat omlaag zodat de
   rij links even hoog blijft als eerst */

/* vaste actiebalk onderaan */
.balk{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:flex;gap:10px;padding:11px var(--rand) calc(11px + env(safe-area-inset-bottom));
  background:rgba(11,10,9,.9);backdrop-filter:blur(14px);border-top:1px solid var(--lijn);
  transform:translateY(200%);opacity:0;pointer-events:none;
}
.balk.aan{pointer-events:auto}
.balk .btn{flex:1;padding:14px 16px;font-size:12.5px}
@media(min-width:900px){
  .balk{left:auto;right:26px;bottom:26px;border-radius:999px;border:1px solid var(--lijn);padding:9px}
  .balk .btn{flex:none}
}
/* op smalle schermen alleen bij de twee icoonknoppen het woord weglaten,
   de hoofdknop houdt zijn tekst want anders is hij leeg */
@media(max-width:430px){
  .balk .btn-wa span,.balk .btn-lijn span{position:absolute;left:-9999px}
  .balk .btn-wa,.balk .btn-lijn{flex:0 0 58px;padding:14px 0}
}

/* ---------- hulpvenster rechtsonder ---------- */
.hulp{position:fixed;right:22px;bottom:22px;z-index:75;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  transition:opacity .35s ease,transform .35s cubic-bezier(.22,1,.36,1)}
/* uit de weg bij het kompas en het formulier, daar staan knoppen onder */
.hulp.weg{opacity:0;transform:translateY(22px) scale(.88);pointer-events:none}
/* kleiner dan eerst: een zwevend venster mag nooit de hoofdrol spelen */
.hulp-bel{
  position:relative;width:52px;height:52px;padding:0;border-radius:50%;cursor:pointer;
  border:2px solid var(--goud);background:var(--nacht);overflow:visible;
  box-shadow:0 18px 40px -14px rgba(0,0,0,.85),0 0 0 6px rgba(201,164,100,.12);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s;
}
.hulp-bel:hover{transform:scale(1.06)}
.hulp-bel img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.stip{
  position:absolute;right:1px;bottom:3px;width:13px;height:13px;border-radius:50%;
  background:#3FCB6B;border:2px solid var(--nacht);
}
.hulp-tip{
  background:var(--room);color:#1B1206;font-size:13px;font-weight:600;
  padding:9px 15px;border-radius:var(--hoek,2px);white-space:nowrap;
  box-shadow:0 14px 32px -16px rgba(0,0,0,.8);opacity:0;transform:translateY(6px);
  pointer-events:none;
}
.hulp-kaart{
  width:min(340px,calc(100vw - 40px));
  background:linear-gradient(180deg,#191410,var(--nacht));
  border:1px solid rgba(201,164,100,.28);border-radius:var(--hoek,2px);overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.95);
  opacity:0;transform:translateY(14px) scale(.96);transform-origin:100% 100%;
}
.hulp-kop{display:flex;align-items:center;gap:12px;padding:16px 16px 14px;border-bottom:1px solid var(--lijn)}
.hulp-kop img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:1px solid rgba(201,164,100,.5)}
.hulp-wie{flex:1;min-width:0;line-height:1.3}
.hulp-wie b{display:block;font-family:"Cormorant",serif;font-weight:500;font-size:20px;color:var(--room)}
.hulp-wie span{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--zachter)}
.hulp-wie .stip{position:static;width:8px;height:8px;border-width:0;flex:none}
.hulp-dicht{background:none;border:0;color:var(--zachter);cursor:pointer;padding:6px;border-radius:var(--hoek,2px);transition:color .3s,background-color .3s}
.hulp-dicht:hover{color:var(--room);background:rgba(255,255,255,.06)}
.hulp-dicht svg{width:17px;height:17px;display:block}
.hulp-groet{margin:16px 16px 14px;font-size:14.5px;line-height:1.55;color:var(--zacht)}
.hulp-knoppen{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 16px}
.hulp-knop{
  display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:var(--hoek,2px);
  border:1px solid var(--lijn);background:rgba(255,255,255,.025);
  font-size:13px;font-weight:600;color:var(--tekst);text-decoration:none;
  transition:border-color .3s,background-color .3s,color .3s;
}
.hulp-knop:hover{border-color:rgba(201,164,100,.6);background:rgba(201,164,100,.09);color:var(--goud-licht)}
.hulp-knop svg{width:16px;height:16px;flex:none;color:var(--goud)}
.hulp-balk{display:flex;gap:8px;padding:14px 16px 4px}
.hulp-balk input{
  /* 16px is geen smaakkeuze: onder de 16px zoomt iOS automatisch in zodra je
     in een veld tikt, en dat is precies wat we niet willen */
  flex:1;min-width:0;font-family:inherit;font-size:16px;color:var(--tekst);
  background:rgba(255,255,255,.04);border:1px solid var(--lijn);border-radius:999px;padding:11px 16px;
  transition:border-color .3s,background-color .3s;
}
.hulp-balk input::placeholder{color:rgba(242,236,225,.42)}
.hulp-balk input:focus{outline:none;border-color:var(--goud);background:rgba(201,164,100,.07)}
.hulp-balk button{
  flex:none;width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;
  background:linear-gradient(135deg,var(--goud-licht),var(--goud));color:#1C1509;
  display:grid;place-items:center;transition:transform .3s;
}
.hulp-balk button:hover{transform:scale(1.07)}
.hulp-balk button svg{width:18px;height:18px}
.hulp-voet{margin:10px 16px 16px;font-size:11px;color:var(--zachter);letter-spacing:.03em}

/* Op desktop doet het zwevende hulpvenster het werk en is de onderbalk
   overbodig. Op telefoon is het precies andersom: daar staat het hulpvenster
   uit (het lag over de tekst) en is de balk het enige vaste contactpunt.

   Dit ging eerder mis: beide regels stonden aan, dus op een telefoon was er
   geen enkele knop die meescrolt. Gemeten op vier pagina's en zeven
   scrollposities: de balk kwam nergens in beeld. */
.balk{display:none}
@media(max-width:899px){
  .balk{display:flex}
}
@media(max-width:899px){
  /* Op telefoon geen zwevend venster meer: dat lag onvermijdelijk over de
     tekst heen, en twee contactknoppen tegelijk (bubbel plus balk) oogt
     rommelig. De vaste onderbalk doet hier het werk. */
  .hulp{display:none}
  .hulp{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .hulp-bel{width:48px;height:48px}
  .hulp-kaart{width:min(340px,calc(100vw - 32px))}
  .hulp-tip{font-size:12.5px;padding:8px 13px}
}

/* concept-strook, linksonder zodat hij het logo en de knoppen vrijlaat */
.concept{pointer-events:none;
  position:fixed;right:10px;bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  background:rgba(201,164,100,.9);color:#1C1509;padding:3px 9px;font-weight:700;border-radius:999px;
}
@media(min-width:900px){.concept{bottom:12px;left:12px;right:auto}}

/* ---------- animatie-startstanden (JS zet ze weer aan) ---------- */
.js .op{opacity:0}
.js .omhoog{opacity:0;transform:translateY(34px)}
/* Elke kopregel zit in een masker zodat hij van onderaf kan invliegen. Met een
   regelhoogte van 1,04 vallen de staarten van de g, j, p en q buiten dat masker
   en werden ze afgeknipt. De extra ruimte onderin wordt met een even grote
   negatieve marge weer weggehaald, dus de opmaak blijft exact hetzelfde. */
.split-regel{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}

/* ---------- minder beweging ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .korrel{display:none}
  .js .op,.js .omhoog,.js .binnen-l,.js .binnen-r{opacity:1;transform:none}
  .js .hoofdstuk[data-hoofdstuk="1"] > *{animation:none}
}

/* ---- ervaringen op beige ---- */
.licht-beige .quote{
  border-color:rgba(123,111,95,.24);
  background:linear-gradient(160deg,#FFFDFA,#FBF8F4);
  box-shadow:0 20px 44px -34px rgba(60,50,40,.5);
}
.licht-beige .quote blockquote{color:#393635}
.licht-beige .quote cite{color:var(--taupe)}
.licht-beige .quote .sterren svg{color:#C9A464}
.licht-beige .quote-teller{color:var(--taupe)}
.licht-beige .quote-teller i{background:rgba(123,111,95,.25)}

/* ---- contact op creme ---- */
.licht-creme .gegevens .rij{border-color:rgba(123,111,95,.22)}
.licht-creme .gegevens .rij:first-of-type{border-top-color:rgba(123,111,95,.22)}
.licht-creme .gegevens .rij svg{color:var(--taupe)}
.licht-creme .gegevens .rij b{color:var(--taupe)}
.licht-creme .gegevens .rij a,.licht-creme .gegevens .rij span{color:#393635}
.licht-creme .gegevens .rij a:hover{color:#8A6A22}
.licht-creme .tijden{color:#575757}
.licht-creme .tijden dt{color:var(--taupe)}

.licht-creme form.aanvraag{
  border-color:rgba(123,111,95,.22);
  background:#FFFDFA;
  box-shadow:0 30px 70px -50px rgba(60,50,40,.55);
}
.licht-creme .veld label{color:var(--taupe)}
.licht-creme .veld input,.licht-creme .veld select,.licht-creme .veld textarea{
  color:#393635;background:#FFFFFF;border-color:rgba(123,111,95,.26);
}
.licht-creme .veld input::placeholder,.licht-creme .veld textarea::placeholder{color:#A79C8E}
.licht-creme .veld select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B6F5F' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center;background-size:17px;
}
.licht-creme .veld select option{background:#FFFFFF;color:#393635}
.licht-creme .veld input:focus,.licht-creme .veld select:focus,.licht-creme .veld textarea:focus{
  border-color:var(--goud);background:#FFFCF5;box-shadow:0 0 0 3px rgba(201,164,100,.2);
}
.licht-creme .veld.fout input,.licht-creme .veld.fout select{border-color:#C4553C;background:#FDF3F0}
.licht-creme .veld .melding{color:#B24C33}
.licht-creme .kleine-letter{color:var(--taupe)}
.licht-creme .kleine-letter a{color:#8A6A22}
.licht-creme .verstuurd .vink{border-color:var(--goud);background:rgba(201,164,100,.14)}
.licht-creme .verstuurd .vink svg{color:#8A6A22}
.licht-creme .verstuurd h2{color:#393635}
.licht-creme .verstuurd p{color:#575757}

/* ---------- klikbare bestemmingen: de lade ---------- */
.vw{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kaart{cursor:pointer}
/* De knop dekt de hele kaart af (dat is het klikvlak), maar het pilletje
   erbinnen stond op align-items:flex-end en landde daardoor precies op de
   tekst onderin: gemeten lag hij van 826 tot 855 binnen een tekstblok van 748
   tot 875, pal over een alinea heen.
   Nu linksboven, over de foto. Daar staat per definitie geen tekst, en het
   nummer van de bestemming staat rechtsboven, dus die twee bijten elkaar ook
   niet. Zolang de tekst onderin blijft kan dit niet meer misgaan. */
.kaart-knop{
  position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:flex-start;padding:16px;
}
.kaart-cta{
  font-family:"Jakarta",sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#1C1509;background:linear-gradient(135deg,var(--goud-licht),var(--goud));
  padding:8px 15px;border-radius:999px;opacity:0;transform:translateY(-8px);
  box-shadow:0 8px 22px -8px rgba(0,0,0,.75);
  transition:opacity .35s,transform .35s cubic-bezier(.22,1,.36,1);
}
.kaart:hover .kaart-cta,.kaart-knop:focus-visible .kaart-cta{opacity:1;transform:translateY(0)}
.kaart-knop:focus-visible{outline:2px solid var(--goud-licht);outline-offset:-4px}
.kaart .detail{display:none}

.lade{position:fixed;inset:0;z-index:110}
.lade-scherm{position:absolute;inset:0;background:rgba(6,5,4,.72);backdrop-filter:blur(3px);opacity:0}
.lade-paneel{
  position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);
  background:linear-gradient(180deg,#191410,var(--nacht));
  border-left:1px solid rgba(201,164,100,.26);
  overflow-y:auto;overscroll-behavior:contain;transform:translateX(100%);
  box-shadow:-40px 0 90px -40px rgba(0,0,0,.95);
}
.lade-dicht{
  position:absolute;top:16px;right:16px;z-index:2;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--lijn);background:rgba(11,10,9,.6);backdrop-filter:blur(8px);
  color:var(--tekst);cursor:pointer;display:grid;place-items:center;transition:border-color .3s,color .3s;
}
.lade-dicht:hover{border-color:var(--goud);color:var(--goud-licht)}
.lade-dicht svg{width:18px;height:18px}
.lade-beeld{position:relative;aspect-ratio:16/10;overflow:hidden}
.lade-beeld img{width:100%;height:100%;object-fit:cover}
.lade-beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,.25),rgba(11,10,9,.1) 40%,var(--nacht) 100%)}
.lade-inhoud{padding:0 clamp(22px,4vw,40px) clamp(30px,5vw,48px);margin-top:-40px;position:relative;z-index:1}
.lade-inhoud h3{font-size:clamp(30px,4vw,44px);color:var(--room);margin-bottom:18px}
.lade-tekst p{font-size:15.5px;line-height:1.7;color:var(--zacht);margin:0}
.lade-feiten{margin:26px 0 0;display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn);border-radius:2px;overflow:hidden}
.lade-feiten > div{background:var(--nacht);padding:15px 18px}
.lade-feiten dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--goud);margin-bottom:5px}
.lade-feiten dd{margin:0;font-size:14.5px;line-height:1.55;color:var(--tekst)}
.lade-hoog{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.lade-hoog li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.5;color:var(--zacht)}
.lade-hoog li::before{
  content:"";position:absolute;left:0;top:7px;width:12px;height:12px;border-radius:50%;
  border:1px solid var(--goud);background:rgba(201,164,100,.16);
}
.lade-knoppen{display:flex;flex-wrap:wrap;gap:11px;margin-top:30px}
.lade-knoppen .btn{flex:1 1 190px;padding-block:15px}
@media(max-width:620px){
  .lade-paneel{top:auto;height:92vh;width:100%;border-left:0;border-top:1px solid rgba(201,164,100,.26);
    border-radius:var(--hoek,2px) var(--hoek,2px) 0 0;transform:translateY(100%)}
}

/* ---------- reiskompas ---------- */
.kompas-kaart{
  background:#FFFDFA;
  border:1px solid rgba(123,111,95,.22);border-radius:var(--hoek,2px);
  padding:clamp(26px,3.2vw,52px);
  box-shadow:0 34px 80px -56px rgba(60,50,40,.6);
}
/* Op een laptop is de kaart een brede tweekolommer: links de uitleg met de
   voortgang, rechts de vragen. In één smalle kolom bleef er te veel leegte
   naast staan. */
@media(min-width:940px){
  .kompas-kaart{
    display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
    gap:clamp(38px,4.6vw,78px);align-items:start;
  }
  .kompas-zij{border-right:1px solid rgba(123,111,95,.18);padding-right:clamp(24px,3vw,44px)}
}
.kompas-zij h1,.kompas-zij h2{font-size:clamp(30px,3.4vw,50px);color:#393635;margin:0 0 18px}
.kompas-zij .eyebrow{margin-bottom:18px}
.kompas-intro{font-size:15.5px;line-height:1.7;color:#575757;margin:0 0 30px}
.kompas-hoofd{min-width:0}
.kompas-voortgang{height:3px;border-radius:999px;background:rgba(123,111,95,.16);overflow:hidden;max-width:260px}
.kompas-voortgang i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--goud-licht),var(--goud));transition:width .5s cubic-bezier(.22,1,.36,1)}
.kompas-stap{margin:16px 0 6px;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.kompas-kop{font-family:"Cormorant",serif;font-weight:300;font-size:clamp(25px,2.5vw,34px);line-height:1.16;color:#393635;margin:0 0 24px}
/* min(255px,100%): op een heel smal scherm mag de kolom kleiner worden dan
   255px, anders duwt hij de pagina zijwaarts open */
.kompas-opties{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(255px,100%),1fr));gap:12px}
.kompas-optie{
  display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:var(--hoek,2px);border:1px solid rgba(123,111,95,.24);
  background:#FFFFFF;font-family:inherit;font-size:15.5px;color:#393635;
  transition:border-color .25s,background-color .25s,transform .25s cubic-bezier(.22,1,.36,1);
}
.kompas-optie:hover{border-color:var(--goud);background:#FFFBF2;transform:translateY(-2px)}
.kompas-optie:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.kompas-optie b{display:block;font-weight:600}
.kompas-optie small{display:block;font-size:12.5px;color:#7B6F5F;margin-top:3px;font-weight:400}
.kompas-optie .bol{
  flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(201,164,100,.14);color:#8A6A22;font-family:"Cormorant",serif;font-size:17px;
}
.kompas-terug{
  margin-top:20px;background:none;border:0;cursor:pointer;padding:6px 0;
  font-family:inherit;font-size:13px;color:var(--taupe);text-decoration:underline;text-underline-offset:3px;
}
.kompas-terug:hover{color:#393635}

.kompas-profiel-label,.kompas-suggestie-label{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin:0 0 10px;
}
.kompas-uitkomst h3{font-family:"Cormorant",serif;font-weight:300;font-size:clamp(30px,4vw,46px);color:#393635;margin:0 0 12px}
.kompas-profiel-tekst{font-size:16px;line-height:1.7;color:#575757;margin:0 0 30px;max-width:60ch}
.kompas-suggestie-label{margin-top:6px}
.kompas-suggesties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:34px}
@media(max-width:560px){.kompas-suggesties{grid-template-columns:1fr 1fr}}
.kompas-sug{
  position:relative;border-radius:var(--hoek,2px);overflow:hidden;border:1px solid rgba(123,111,95,.2);
  background:#fff;text-align:left;cursor:pointer;padding:0;font-family:inherit;
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s;
}
.kompas-sug:hover{transform:translateY(-3px)}
.kompas-sug img{width:100%;aspect-ratio:4/3;object-fit:cover}
.kompas-sug span{display:block;padding:12px 14px;font-size:15px;font-weight:600;color:#393635}
.kompas-sug span small{display:block;font-weight:400;font-size:12.5px;color:var(--taupe);margin-top:2px}
.kompas-form{border-top:1px solid rgba(123,111,95,.2);padding-top:28px}
.kompas-vraagje{font-size:15.5px;color:#575757;margin:0 0 20px}
.kompas-form .btn{width:100%;margin-top:6px;padding-block:18px}
.kompas-klaar{text-align:center;padding:20px 0 6px}
.kompas-klaar .vink{width:62px;height:62px;margin:0 auto 20px;border-radius:50%;border:1px solid var(--goud);background:rgba(201,164,100,.14);display:grid;place-items:center}
.kompas-klaar .vink svg{width:27px;height:27px;color:#8A6A22}
.kompas-klaar h2{margin-bottom:10px}
.kompas-klaar p{color:#575757;max-width:44ch;margin-inline:auto}
.kompas-opnieuw{
  display:block;margin:24px auto 0;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--taupe);text-decoration:underline;text-underline-offset:3px;
}
.kompas-opnieuw:hover{color:#393635}

/* ---------- tikdoelen op de telefoon ----------
   Losse tekstlinks waren maar 21 tot 22 px hoog. Met wat lucht eromheen
   worden het doelen waar je met een duim niet naast tikt. */
@media(max-width:900px){
  .voet-links{gap:0}
  .voet-links a{display:block;padding-block:10px}
  .gegevens .rij a{display:inline-block;padding-block:8px;margin-block:-2px}
  .merk{padding-block:4px}
  .tijden dl{line-height:2.1}
}

/* ---------- zekerheden: ANVR, SGR en TUI at Home ---------- */
.zekerheden{margin-top:clamp(46px,6vw,76px);padding-top:clamp(34px,4vw,50px);border-top:1px solid rgba(123,111,95,.26)}
.zekerheden-kop{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--taupe);margin:0 0 26px;
}
.zekerheden-rij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,44px)}
.zeker{display:flex;gap:15px;align-items:flex-start}
.zeker svg{
  flex:none;width:38px;height:38px;padding:8px;border-radius:50%;
  color:#8A6A22;background:rgba(201,164,100,.16);border:1px solid rgba(201,164,100,.4);
}
.zeker b{display:block;font-size:15.5px;font-weight:600;color:#393635;margin-bottom:6px}
.zeker p{font-size:14px;line-height:1.6;color:#575757;margin:0}
@media(max-width:820px){.zekerheden-rij{grid-template-columns:1fr;gap:22px}}

/* de korte herhaling vlak boven de verzendknop */
.zeker-regel{
  display:flex;align-items:flex-start;gap:11px;margin:4px 0 18px;
  font-size:13.5px;line-height:1.55;color:var(--taupe);
}
.zeker-regel svg{flex:none;width:19px;height:19px;color:#8A6A22;margin-top:1px}

/* de privacylink in de kleine letters was maar 16px hoog om aan te tikken */
.kleine-letter a{display:inline-block;padding-block:11px;text-decoration:underline;text-underline-offset:3px}

/* ---------- onthulling van de grote foto's ----------
   Zelfde principe als .omhoog, maar het beeld zoomt tegelijk zachtjes uit.
   Alleen opacity en transform, dus het gaat over de grafische kaart en kost
   geen hertekening. */
.js .onthul-beeld{opacity:0;transform:translateY(30px)}
.js .onthul-beeld .lijst img{transform:scale(1.09)}

/* ---------- blokken die van buiten naar binnen schuiven ----------
   Foto en tekst komen van de twee buitenranden naar elkaar toe. Staat na
   .onthul-beeld, want de foto draagt beide klassen en deze transform moet
   winnen. De sectie klipt zijwaarts, anders duwt de startstand een
   horizontale schuifbalk de pagina in. */
#over,#onderweg{overflow-x:clip}
.js .binnen-l{opacity:0;transform:translateX(-68px)}
.js .binnen-r{opacity:0;transform:translateX(68px)}
@media(max-width:900px){
  .js .binnen-l{transform:translateX(-32px)}
  .js .binnen-r{transform:translateX(32px)}
}

/* ---------- de drie cijfers op telefoon ----------
   Naast elkaar werd het op een smal scherm een rommelige wikkel. Onder
   elkaar over de volle breedte, met het getal links en het label rechts. */
@media(max-width:640px){
  .cijfers{display:block;margin-top:38px;padding-top:0;border-top:0}
  .cijfer{
    display:flex;align-items:baseline;justify-content:space-between;gap:18px;
    padding:17px 0;border-top:1px solid var(--lijn);
  }
  .cijfer:last-child{border-bottom:1px solid var(--lijn)}
  .cijfer b{font-size:42px}
  .cijfer span{margin-top:0;text-align:right}
}

/* naamsvermelding bij de foto in de lade, want CC BY en CC BY-SA vragen daarom */
.lade-credit{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:26px 20px 10px;font-size:10.5px;letter-spacing:.04em;
  color:rgba(244,237,228,.55);text-align:right;pointer-events:none;
}

/* ---------- reisorganisaties waar ze mee werkt ---------- */
.organisaties{margin-top:clamp(40px,5vw,64px);padding-top:clamp(30px,3.5vw,44px);border-top:1px solid rgba(123,111,95,.26)}
.organisaties-kop{
  font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  /* een tint donkerder dan --taupe: op 11px haalde die 4,4 op 1 en de norm
     voor kleine tekst is 4,5. Gemeten komt deze op 4,8 */
  color:#756956;margin:0 0 20px;
}
.organisaties-rij{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  gap:10px 12px;align-items:center;
}
.organisaties-rij li{
  font-family:"Cormorant",serif;font-size:clamp(17px,1.7vw,22px);color:#393635;
  padding:7px 16px;border:1px solid rgba(123,111,95,.26);border-radius:999px;
  background:#FFFDFA;white-space:nowrap;
}

/* ---------- de doorlopende merkbanden ----------
   De band loopt van de ene rand naar de andere en vervaagt aan beide kanten,
   zodat de namen uit het niets komen en er weer in verdwijnen. De lus zelf is
   één transform van 0 naar -50 procent: de rij staat er twee keer in, dus op
   -50 procent ziet het er precies hetzelfde uit als bij 0 en zie je de sprong
   niet. app.js kloont net zo lang tot één helft breder is dan het scherm. */
.merkbanden{display:flex;flex-direction:column;gap:12px}
/* De banden lopen van schermrand tot schermrand, buiten de tekstkolom om.
   overflow-x:clip op de sectie hoort erbij: zonder dat zou 50vw op een
   computer met een zichtbare schuifbalk net iets breder zijn dan het venster
   en kreeg je een horizontale schuifbalk. Clip kan niet scrollen, dus dat kan
   simpelweg niet meer gebeuren. */
#waarom{overflow-x:clip}
.merkband.loopt{
  overflow:hidden;
  margin-inline:calc(50% - 50vw);
  padding-inline:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.merkband.loopt .organisaties-rij{
  flex-wrap:nowrap;width:max-content;
  animation:merken-schuif var(--duur,44s) linear infinite;
  animation-play-state:paused;
  will-change:transform;
}
.merkband.loopt[data-richting="rechts"] .organisaties-rij{animation-direction:reverse}
/* pas laten lopen als de band echt in beeld staat, dat scheelt werk verderop */
.merkband.loopt.in-beeld .organisaties-rij{animation-play-state:running}
.merkband.loopt:hover .organisaties-rij{animation-play-state:paused}
@keyframes merken-schuif{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media(prefers-reduced-motion:reduce){
  .merkband.loopt .organisaties-rij{animation:none}
}
.organisaties-voet{margin:22px 0 0;font-size:14px;line-height:1.6;color:#575757;max-width:56ch}

/* ---------- tabbladen: reiswens of belafspraak ---------- */
.tabs{display:flex;gap:8px;margin-bottom:16px}
.tab{
  flex:1;padding:14px 16px;border-radius:999px;cursor:pointer;
  border:1px solid var(--lijn-sterk);background:transparent;
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--zand);
  transition:background-color .3s,color .3s,border-color .3s;
}
.tab:hover{border-color:var(--goud);color:var(--tekst)}
.tab.aan{background:linear-gradient(135deg,var(--goud-licht),var(--goud));border-color:transparent;color:#1C1509}
.tab:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
@media(max-width:520px){.tabs{flex-direction:column}.tab{flex:none}}

.bel-uitleg{font-size:15.5px;line-height:1.65;color:#575757;margin:0 0 22px}
/* ---- de maandagenda ---- */
.agenda{
  border:1px solid rgba(123,111,95,.24);border-radius:var(--hoek,2px);background:#FFFFFF;
  padding:16px 16px 14px;max-width:420px;
}
.agenda-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.agenda-maand{
  font-family:"Cormorant",serif;font-size:22px;color:#393635;text-transform:capitalize;
  flex:1;text-align:center;
}
.agenda-nav{
  width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;
  border:1px solid rgba(123,111,95,.24);background:#FFFDFA;color:var(--taupe);
  display:grid;place-items:center;transition:border-color .25s,color .25s,opacity .25s;
}
.agenda-nav svg{width:17px;height:17px}
.agenda-nav:hover:not(:disabled){border-color:var(--goud);color:#393635}
.agenda-nav:disabled{opacity:.3;cursor:default}
.agenda-nav:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
/* minmax(0,1fr) en niet 1fr: met 1fr kan een kolom niet smaller worden dan
   zijn inhoud, en dan duwden zeven dagen samen het hele contactblok breder
   dan een scherm van 280px. Gemeten stond het raster op 282px in een vak van
   240px. Zo krimpen de dagen gewoon mee. */
.agenda-weekdagen,.agenda-dagen{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
@media(max-width:360px){
  .agenda-weekdagen,.agenda-dagen{gap:2px}
  .agenda-weekdagen span{font-size:9px;letter-spacing:.04em}
  .agenda-dag{font-size:15px}
}
.agenda-weekdagen span{
  text-align:center;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe);padding-bottom:8px;
}
.agenda-dag{
  aspect-ratio:1;border:0;border-radius:50%;cursor:pointer;background:transparent;
  font-family:"Cormorant",serif;font-size:17px;color:#393635;
  display:grid;place-items:center;position:relative;
  transition:background-color .2s,color .2s,transform .2s cubic-bezier(.22,1,.36,1);
}
.agenda-dag:hover:not(:disabled){background:rgba(201,164,100,.16);transform:scale(1.08)}
.agenda-dag:focus-visible{outline:2px solid var(--goud);outline-offset:1px}
.agenda-dag.aan{
  background:linear-gradient(135deg,var(--goud-licht),var(--goud));color:#1C1509;font-weight:600;
  box-shadow:0 8px 18px -8px rgba(201,164,100,.9);
}
.agenda-dag.nu::after{
  content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--goud);
}
.agenda-dag.aan.nu::after{background:#1C1509}
/* gesloten dagen: wel zichtbaar, niet te kiezen, met een streepje erdoor */
.agenda-dag.dicht{color:rgba(123,111,95,.42);cursor:not-allowed;text-decoration:line-through}
.agenda-dag.voorbij{color:rgba(123,111,95,.28);cursor:not-allowed}
.agenda-leeg{aspect-ratio:1}
.agenda-uitleg{margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--taupe)}

.dagdeelkeuze{display:flex;flex-wrap:wrap;gap:8px}
.deelknop{
  cursor:pointer;border-radius:999px;border:1px solid rgba(123,111,95,.26);
  background:#FFFFFF;font-family:inherit;color:#393635;padding:12px 18px;font-size:14px;font-weight:600;
  transition:border-color .25s,background-color .25s,transform .25s cubic-bezier(.22,1,.36,1);
}
.deelknop:hover{border-color:var(--goud);background:#FFFBF2;transform:translateY(-2px)}
.deelknop.aan{background:linear-gradient(135deg,var(--goud-licht),var(--goud));border-color:transparent;color:#1C1509}
.deelknop:focus-visible{outline:2px solid var(--goud);outline-offset:2px}
.veld.fout .agenda{border-color:#C4553C}
.veld.fout .dagdeelkeuze .deelknop{border-color:#C4553C}

/* =========================================================================
   Blokken voor de langere pagina's (soorten reizen, sportreizen, cruises,
   rondreizen, zakelijk) en voor de extra blokken op de bestaande pagina's.

   Alles is hier eerst voor de donkere achtergrond opgeschreven, want dat is
   de standaard van de site. Waar zo'n blok in een lichte sectie belandt zet
   een override het terug. Andersom werken zou meer regels kosten.
   ========================================================================= */

/* .redenen bestond al, maar alleen voor een lichte sectie: de tekstkleur
   #575757 stond hard in de regel. Op een donker blad las dat als niets. */
.blad-donker .reden p{color:var(--zacht)}
.blad-donker .reden{border-left-color:var(--lijn)}
@media(max-width:920px){.blad-donker .reden:nth-child(n+3){border-top-color:var(--lijn)}}
@media(max-width:560px){.blad-donker .reden{border-top-color:var(--lijn)}}

/* ---------- raster met soorten reizen ---------- */
.soortenraster{
  list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(292px,100%),1fr));
}
.soort > a,.soort > div{
  display:block;height:100%;text-decoration:none;color:inherit;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);overflow:hidden;background:rgba(255,255,255,.02);
  transition:border-color .4s,background-color .4s,transform .4s cubic-bezier(.22,1,.36,1);
}
.soort > a:hover{border-color:rgba(201,164,100,.5);background:rgba(201,164,100,.06);transform:translateY(-3px)}
.soort picture{display:block}
.soort img{width:100%;height:200px;object-fit:cover;display:block;
  filter:saturate(.94);transition:transform .8s cubic-bezier(.22,1,.36,1),filter .5s}
.soort > a:hover img{transform:scale(1.045);filter:saturate(1.02)}
.soort-tekst{padding:clamp(20px,2vw,26px)}
.soort-tekst h3{font-size:clamp(21px,1.7vw,25px);margin-bottom:10px}
.soort-tekst p{font-size:14.5px;line-height:1.68;color:var(--zacht);margin:0}
.soort-meer{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;
  font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--goud);
}
.soort-meer svg{width:16px;height:16px;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.soort > a:hover .soort-meer svg{transform:translateX(4px)}
.licht .soort-tekst p,.licht-creme .soort-tekst p,.licht-beige .soort-tekst p{color:#575757}
.licht .soort > a,.licht .soort > div,
.licht-creme .soort > a,.licht-creme .soort > div,
.licht-beige .soort > a,.licht-beige .soort > div{
  border-color:rgba(123,111,95,.26);background:rgba(255,255,255,.5);
}

/* ---------- puntenlijst naast een verhaal ---------- */
.puntlijst{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:11px}
.puntlijst li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.6;color:var(--zacht)}
.puntlijst li::before{
  content:"";position:absolute;left:0;top:.52em;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--goud);
}
.licht .puntlijst li,.licht-creme .puntlijst li,.licht-beige .puntlijst li{color:#575757}

/* ---------- genummerde stappen ---------- */
.stappen{
  list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;gap:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.stap{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,2vw,26px);align-items:start;
  padding:clamp(24px,2.6vw,34px);border-top:1px solid var(--lijn)}
.stap:nth-child(odd){border-right:1px solid var(--lijn);padding-left:0}
.stap:nth-child(even){padding-right:0}
.stap:nth-child(1),.stap:nth-child(2){border-top:0;padding-top:0}
.stap-nr{font-family:"Cormorant",serif;font-size:clamp(26px,2.6vw,36px);font-weight:300;
  color:var(--goud);line-height:1;opacity:.85}
.stap h3{font-size:clamp(19px,1.5vw,23px);margin-bottom:9px}
.stap p{font-size:14.5px;line-height:1.7;color:var(--zacht);margin:0}
.licht .stap p,.licht-creme .stap p,.licht-beige .stap p{color:#575757}
.licht .stap,.licht-creme .stap,.licht-beige .stap{border-color:rgba(123,111,95,.26)}
@media(max-width:820px){
  .stappen{grid-template-columns:1fr}
  .stap{padding-inline:0;border-right:0 !important}
  .stap:nth-child(2){border-top:1px solid var(--lijn);padding-top:clamp(24px,4vw,32px)}
  .licht .stap:nth-child(2),.licht-creme .stap:nth-child(2),.licht-beige .stap:nth-child(2){border-top-color:rgba(123,111,95,.26)}
}

/* ---------- feitenraster ---------- */
.feitenraster{
  margin:clamp(40px,5vw,64px) 0 0;display:grid;gap:0;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.feit{padding:clamp(24px,2.6vw,34px);border-top:1px solid var(--lijn);border-left:1px solid var(--lijn)}
.feit:nth-child(3n+1){border-left:0;padding-left:0}
.feit:nth-child(3n){padding-right:0}
.feit:nth-child(-n+3){border-top:0;padding-top:0}
.feit dt{font-family:"Cormorant",serif;font-weight:400;font-size:clamp(19px,1.5vw,23px);
  color:var(--tekst);margin-bottom:10px}
.feit dd{margin:0;font-size:14.5px;line-height:1.7;color:var(--zacht)}
.licht .feit dt,.licht-creme .feit dt,.licht-beige .feit dt{color:#393635}
.licht .feit dd,.licht-creme .feit dd,.licht-beige .feit dd{color:#575757}
.licht .feit,.licht-creme .feit,.licht-beige .feit{border-color:rgba(123,111,95,.26)}
/* De beste reistijd per seizoen (21-10-2026): per periode een tussenkop en
   meerdere alinea's, en een toelichting onder het raster. */
.seizoenen .seizoen-sub{display:block;margin:-2px 0 12px;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--goud)}
.seizoenen .feit dd p{margin:0}
.seizoenen .feit dd p+p{margin-top:12px}
.feiten-na{margin:clamp(32px,4vw,48px) 0 0;max-width:72ch;font-size:13.5px;line-height:1.7;color:var(--zacht);font-style:italic}
.licht .feiten-na,.licht-creme .feiten-na,.licht-beige .feiten-na{color:#575757}
@media(max-width:900px){
  .feitenraster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feit:nth-child(3n+1){border-left:1px solid var(--lijn);padding-left:clamp(24px,4vw,34px)}
  .feit:nth-child(3n){padding-right:clamp(24px,4vw,34px)}
  .feit:nth-child(odd){border-left:0;padding-left:0}
  .feit:nth-child(even){padding-right:0}
  .feit:nth-child(3){border-top:1px solid var(--lijn);padding-top:clamp(24px,4vw,32px)}
}
@media(max-width:560px){
  .feitenraster{grid-template-columns:1fr}
  .feit{border-left:0 !important;padding-inline:0 !important;
    border-top:1px solid var(--lijn);padding-top:24px}
  .feit:first-child{border-top:0;padding-top:0}
}

/* ---------- veelgestelde vragen ---------- */
.vragen{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--lijn)}
.vraag{border-bottom:1px solid var(--lijn)}
.vraag summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:clamp(20px,2.2vw,27px) 0;
  font-family:"Cormorant",serif;font-weight:400;font-size:clamp(19px,1.6vw,24px);
  color:var(--tekst);transition:color .3s;
}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary:hover{color:var(--goud-licht)}
.vraag summary i{position:relative;flex:0 0 auto;width:16px;height:16px}
.vraag summary i::before,.vraag summary i::after{
  content:"";position:absolute;left:0;top:7px;width:16px;height:1.5px;background:var(--goud);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
}
.vraag summary i::after{transform:rotate(90deg)}
.vraag[open] summary i::after{transform:rotate(0)}
.vraag-uit{padding:0 0 clamp(22px,2.4vw,28px);max-width:74ch;overflow:hidden;
  /* menu.js (drKlapper) zet de hoogte, dit laat hem uitlopen */
  transition:height .48s cubic-bezier(.22,1,.36,1),padding-bottom .48s cubic-bezier(.22,1,.36,1),opacity .34s ease}
.vraag-uit p{margin:0;font-size:15px;line-height:1.78;color:var(--zacht)}
.licht .vragen,.licht-creme .vragen,.licht-beige .vragen,
.licht .vraag,.licht-creme .vraag,.licht-beige .vraag{border-color:rgba(123,111,95,.26)}
.licht .vraag summary,.licht-creme .vraag summary,.licht-beige .vraag summary{color:#393635}
.licht .vraag summary:hover,.licht-creme .vraag summary:hover,.licht-beige .vraag summary:hover{color:var(--taupe)}
.licht .vraag-uit p,.licht-creme .vraag-uit p,.licht-beige .vraag-uit p{color:#575757}

/* ---------- vergelijking zelf of samen ---------- */
.vergelijk{margin-top:clamp(40px,5vw,64px);border-top:1px solid var(--lijn)}
.vgl-hoofd,.vgl-rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1.35fr);
  gap:clamp(16px,2.4vw,34px);align-items:start}
.vgl-hoofd{padding:16px 0;border-bottom:1px solid var(--lijn)}
.vgl-hoofd span{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;color:var(--zachter)}
.vgl-hoofd .vgl-uit{color:var(--goud)}
.vgl-rij{padding:clamp(20px,2.2vw,26px) 0;border-bottom:1px solid var(--lijn)}
.vgl-rij p{margin:0;font-size:14.5px;line-height:1.68;color:var(--zacht)}
.vgl-punt{font-family:"Cormorant",serif !important;font-size:clamp(18px,1.4vw,22px) !important;
  color:var(--tekst) !important;line-height:1.3 !important}
.vgl-b{color:var(--tekst) !important}
.licht .vergelijk,.licht-creme .vergelijk,.licht-beige .vergelijk,
.licht .vgl-hoofd,.licht-creme .vgl-hoofd,.licht-beige .vgl-hoofd,
.licht .vgl-rij,.licht-creme .vgl-rij,.licht-beige .vgl-rij{border-color:rgba(123,111,95,.26)}
.licht .vgl-rij p,.licht-creme .vgl-rij p,.licht-beige .vgl-rij p{color:#6B6560}
.licht .vgl-punt,.licht-creme .vgl-punt,.licht-beige .vgl-punt,
.licht .vgl-b,.licht-creme .vgl-b,.licht-beige .vgl-b{color:#393635 !important}
.licht .vgl-hoofd span,.licht-creme .vgl-hoofd span,.licht-beige .vgl-hoofd span{color:var(--taupe)}
@media(max-width:760px){
  .vgl-hoofd{display:none}
}

/* ---------- citaten ---------- */
.citaten{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(14px,1.6vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.citaat{margin:0;padding:clamp(26px,2.6vw,34px);border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  background:rgba(255,255,255,.02);display:flex;flex-direction:column;gap:18px}
.citaat blockquote{margin:0;flex:1}
.citaat blockquote p{margin:0;font-family:"Cormorant",serif;font-weight:300;
  font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--tekst)}
.citaat blockquote p::before{content:"\201C";color:var(--goud);margin-right:2px}
.citaat blockquote p::after{content:"\201D";color:var(--goud);margin-left:2px}
.citaat figcaption{font-size:11px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  color:var(--goud)}
.citaat figcaption span{display:block;margin-top:6px;font-weight:500;letter-spacing:.06em;
  text-transform:none;font-size:13px;color:var(--zachter)}
.licht .citaat,.licht-creme .citaat,.licht-beige .citaat{border-color:rgba(123,111,95,.26);background:rgba(255,255,255,.5)}
.licht .citaat blockquote p,.licht-creme .citaat blockquote p,.licht-beige .citaat blockquote p{color:#393635}
.licht .citaat figcaption,.licht-creme .citaat figcaption,.licht-beige .citaat figcaption{color:var(--taupe)}
.licht .citaat figcaption span,.licht-creme .citaat figcaption span,.licht-beige .citaat figcaption span{color:#6B6560}

/* ---------- het afsluitblok onder aan een pagina ----------
   LET OP: dit heette eerst .kaart-cta, maar die klasse bestond al als het
   gouden pilletje dat in een bestemmingskaart pas bij hover verschijnt. Die
   staat op opacity:0, dus het hele afsluitblok was onzichtbaar. Een eigen
   naam voorkomt dat een tweede keer. */
.slotkaart{
  padding:clamp(34px,4vw,56px);border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  background:
    radial-gradient(120% 140% at 88% -20%,rgba(201,164,100,.13),transparent 62%),
    rgba(255,255,255,.025);
  max-width:none;
}
.slotkaart h2{font-size:clamp(25px,2.6vw,38px);margin-bottom:16px}
.slotkaart .lood{max-width:60ch;margin-bottom:clamp(24px,2.6vw,32px)}
.licht .slotkaart,.licht-creme .slotkaart,.licht-beige .slotkaart{
  border-color:rgba(123,111,95,.26);
  background:radial-gradient(120% 140% at 88% -20%,rgba(201,164,100,.16),transparent 62%),rgba(255,255,255,.55);
}

/* zes redenen lezen prettiger als twee rijen van drie dan als vier plus twee */
.redenen.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
.redenen.drie .reden:nth-child(3n+1){border-left:0;padding-left:0}
.redenen.drie .reden:nth-child(3n){padding-right:0}
.redenen.drie .reden:nth-child(n+4){border-top:1px solid rgba(123,111,95,.26);padding-top:clamp(26px,3vw,38px)}
.blad-donker .redenen.drie .reden:nth-child(n+4){border-top-color:var(--lijn)}
@media(max-width:920px){
  .redenen.drie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .redenen.drie .reden:nth-child(3n+1){border-left:1px solid rgba(123,111,95,.26);padding-left:clamp(24px,4vw,34px)}
  .redenen.drie .reden:nth-child(odd){border-left:0;padding-left:0}
  .redenen.drie .reden:nth-child(even){padding-right:0}
  .redenen.drie .reden:nth-child(3){border-top:1px solid rgba(123,111,95,.26);padding-top:clamp(26px,4vw,36px)}
}
@media(max-width:560px){
  .redenen.drie{grid-template-columns:1fr}
  .redenen.drie .reden{border-left:0 !important;padding-inline:0 !important;
    border-top:1px solid rgba(123,111,95,.26);padding-block:26px}
  .redenen.drie .reden:first-child{border-top:0;padding-top:0}
}
/* vier kaarten naast elkaar in plaats van drie plus een losse */
/* 248 en niet 258: de .wrap heeft binnenmarge, dus er is bij 1440px scherm
   1092px te verdelen en geen 1220. Bij 258 kwam de vierde kolom zes pixels
   tekort en viel hij eronder. */
.soortenraster.vier{grid-template-columns:repeat(auto-fit,minmax(min(248px,100%),1fr))}
.soortenraster.vier .soort img{height:172px}

/* De inleiding boven aan een pagina is kort. Met de volle sectiehoogte eronder
   staat er tot 336px niets tussen de inleiding en het eerste blok, en dat las
   als een gat in de pagina in plaats van als rust. */
.sectie-intro{padding-bottom:clamp(22px,3vh,44px)}

/* De startstand van een blok dat zijwaarts binnenkomt staat 32 tot 68 pixels
   buiten beeld. Voor #over en #onderweg was dat al afgevangen met een clip op
   de sectie, maar de nieuwe blokken op de homepagina en op de soortenpagina's
   hebben geen eigen id. Nu klipt elke sectie die zo'n blok bevat.
   Geen van de vastgezette secties (#hero, #bestemmingen, #route) gebruikt
   deze klassen, dus het pinnen blijft ongemoeid. */
.sectie:has(.binnen-l),.sectie:has(.binnen-r){overflow-x:clip}

/* Op 280px is "Vertel me je droomreis" met nowrap 258px breed en past hij
   niet meer tussen de marges. Onder de 380px mag hij afbreken. */
@media(max-width:380px){
  .btn{white-space:normal;text-align:center;padding:15px 22px;letter-spacing:.04em}
  .slotkaart{padding:26px 20px}
}

/* ---------- concrete adressen ---------- */
.adressen{margin-top:clamp(40px,5vw,64px);display:grid;gap:clamp(20px,2.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(min(258px,100%),1fr))}
.adresgroep{padding-top:20px;border-top:1px solid var(--goud);border-image:linear-gradient(90deg,var(--goud),transparent) 1}
.adresgroep h3{font-size:clamp(17px,1.3vw,20px);margin-bottom:14px;color:var(--goud-licht)}
.adresgroep ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.adresgroep li{font-size:14.5px;line-height:1.55;color:var(--zacht)}
.licht .adresgroep h3,.licht-creme .adresgroep h3,.licht-beige .adresgroep h3{color:var(--taupe)}
.licht .adresgroep li,.licht-creme .adresgroep li,.licht-beige .adresgroep li{color:#575757}

/* De officiële aanduiding boven aan "over mij". Staat er op verzoek van
   Quinten voor het vertrouwen: mensen geven eerder vijftien mille uit als er
   een bekende naam achter de adviseur staat. Overal elders op de site blijft
   de regel gelden dat er geen partnernamen staan. */
.merkregel{
  margin:16px 0 0;font-family:"Jakarta",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--goud);
  display:inline-flex;align-items:center;gap:11px;
}
.merkregel::before{content:"";width:26px;height:1px;background:var(--goud);opacity:.7}
.licht .merkregel,.licht-creme .merkregel,.licht-beige .merkregel{color:var(--taupe)}
.licht .merkregel::before,.licht-creme .merkregel::before,.licht-beige .merkregel::before{background:var(--taupe)}

/* De knop in de bovenbalk kreeg de onderstreping van een gewone navigatielink,
   dus onder de pil "Plan jouw reis" verscheen bij hover en op de eigen pagina
   een gouden streep. Die hoort daar niet. */
.topnav a.btn::after{display:none}
.topnav a.btn.nu::after{display:none}

/* Op telefoon stond "Zelf:" vóór de tekst op dezelfde regel. Daardoor begon de
   eerste regel ingesprongen en de rest niet, en dat leest als een fout.
   Nu staat het label als kopje boven de tekst, en dan lijnt alles links uit. */
@media(max-width:760px){
  .vgl-rij{grid-template-columns:1fr;gap:16px}
  .vgl-a::before,.vgl-b::before{
    display:block;margin-bottom:5px;font-family:"Jakarta",sans-serif;
    font-size:10px;font-weight:700;letter-spacing:.19em;text-transform:uppercase;
  }
  .vgl-a::before{content:"Zelf boeken";color:var(--zachter)}
  .vgl-b::before{content:"Met mij";color:var(--goud)}
  .licht .vgl-a::before,.licht-creme .vgl-a::before,.licht-beige .vgl-a::before{color:#8C837A}
  .licht .vgl-b::before,.licht-creme .vgl-b::before,.licht-beige .vgl-b::before{color:var(--taupe)}
  .vgl-punt{margin-bottom:2px !important}
}

/* Het tekstveld dat openklapt bij de keuze "Anders". Staat binnen hetzelfde
   .veld, dus het schuift de rest van het formulier netjes naar beneden in
   plaats van eroverheen te vallen. */
.veld-anders{margin-top:12px;animation:anders-open .32s cubic-bezier(.22,1,.36,1) both}
.veld-anders[hidden]{display:none}
.veld-anders label{margin-bottom:7px}
@keyframes anders-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ---------- hamburger en uitklapmenu op de telefoon ----------
   De balk verbergt onder 1000px alle links behalve de knop. Daardoor kon je op
   een telefoon alleen nog via de voettekst naar een andere pagina. Rechts van
   "Plan jouw reis" staat nu een knop die het hele menu openklapt. */
.hamburger{
  display:none;position:relative;width:44px;height:44px;flex:0 0 auto;margin-left:4px;
  background:none;border:0;padding:0;cursor:pointer;
}
.hamburger span{
  position:absolute;left:11px;width:22px;height:1.5px;background:var(--tekst);border-radius:2px;
  transition:transform .38s cubic-bezier(.22,1,.36,1),opacity .2s;
}
.hamburger span:nth-child(1){top:16px}
.hamburger span:nth-child(2){top:21.5px}
.hamburger span:nth-child(3){top:27px}
/* De middelste streep krimpt naar het midden in plaats van alleen te verdwijnen,
   en de buitenste twee draaien pas als hij weg is. Dat leest als één beweging. */
.hamburger span:nth-child(2){transition:opacity .18s ease .04s,transform .3s cubic-bezier(.22,1,.36,1)}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0;transform:scaleX(.2)}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.hamburger[aria-expanded="true"] span{background:var(--goud-licht)}
@media(max-width:1320px){.hamburger{display:block}}

.mobielmenu{
  position:fixed;inset:0;z-index:98;display:grid;place-items:center;
  background:
    radial-gradient(120% 80% at 80% 0%,rgba(201,164,100,.13),transparent 60%),
    rgba(9,8,7,.97);
  backdrop-filter:blur(8px);
  opacity:0;transition:opacity .34s ease;
}
.mobielmenu[hidden]{display:none}
.mobielmenu.aan{opacity:1}
.mobielmenu.uit{opacity:0;transition:opacity .24s ease .3s}
.mobielmenu nav{
  display:flex;flex-direction:column;gap:2px;text-align:center;
  padding:96px var(--rand) 40px;width:100%;max-height:100%;overflow-y:auto;
}
.mobielmenu a{
  font-family:"Cormorant",serif;font-weight:300;font-size:clamp(21px,5.4vw,27px);
  color:var(--tekst);text-decoration:none;padding:9px 0;
  opacity:0;transform:translateY(14px);
}
.mobielmenu.aan nav > a,.mobielmenu.aan nav > .menugroep{animation:menu-in .5s cubic-bezier(.22,1,.36,1) forwards}
/* Bij het sluiten schoven de regels er niet uit maar verdween het hele doek in
   één keer. Nu vallen ze eerst weg, van onder naar boven, en pas daarna gaat
   het doek dicht. Dat is dezelfde beweging als bij het openen, teruggespoeld. */
.mobielmenu.uit nav > a,.mobielmenu.uit nav > .menugroep{
  /* "both" en niet "forwards": met alleen forwards valt de regel tijdens zijn
     vertraging terug op de ruststand (opacity:0) en zie je hem alsnog
     wegspringen in plaats van weganimeren. */
  animation:menu-uit .24s cubic-bezier(.55,0,.68,.19) both;
}
/* Expliciet vanaf zichtbaar beginnen. De ruststand van een menuregel is
   opacity:0 (daar komt hij vandaan bij het openen), dus zonder een eigen
   from-stand sprong hij bij het sluiten meteen op onzichtbaar en zag je de
   uitanimatie helemaal niet. Gemeten: regel bleef 0.00 gedurende de hele
   sluitbeweging. */
@keyframes menu-uit{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-10px)}}
.mobielmenu a.nu{color:var(--goud-licht)}
/* Alleen de laatste link van het menu zelf is de knop. Zonder "nav >" raakte
   deze regel ook de laatste regel binnen de uitklapgroep, en dan stond
   "Volledig privé" ineens in hoofdletters alsof het de knop was. */
.mobielmenu nav > a:last-child{
  margin-top:16px;font-family:"Jakarta",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.19em;text-transform:uppercase;color:var(--goud);
}
@keyframes menu-in{to{opacity:1;transform:none}}
/* met het menu open mag de pagina eronder niet meescrollen */
html.menu-open,html.menu-open body{overflow:hidden}
@media(prefers-reduced-motion:reduce){
  .mobielmenu,.mobielmenu a,.hamburger span{transition:none;animation:none}
  .mobielmenu.aan a{opacity:1;transform:none}
}

/* ---------- de hamburger wordt zelf het kruisje ----------
   Er stond eerst een aparte sluitknop rechtsboven in het uitklapmenu, omdat de
   balk op z-index 60 staat en het menu op 98: de hamburger verdween er dus
   onder. Twee knoppen voor één handeling, en op twee plekken. Nu tilt het
   geopende menu de hele balk erboven, zodat de hamburger op zijn eigen plek
   blijft staan en daar in een kruisje verandert. Het logo blijft meteen
   zichtbaar, en dat oogt rustiger dan een leeg scherm met alleen een kruisje. */
html.menu-open .topbar{
  z-index:99;background:transparent;backdrop-filter:none;border-bottom-color:transparent;
}
/* De knop in de balk zou naast de knop onder in het menu komen te staan. Eén is genoeg. */
html.menu-open .topnav .btn{
  opacity:0;pointer-events:none;transition:opacity .22s ease;
}
.topnav .btn{transition:opacity .3s ease .12s,transform .35s cubic-bezier(.22,1,.36,1),background-color .35s,color .35s,border-color .35s}

.mobielmenu nav{padding-top:78px;gap:0}
.menugroep{opacity:0;transform:translateY(14px)}

.menugroep summary{
  list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:"Cormorant",serif;font-weight:300;font-size:clamp(21px,5.4vw,27px);
  color:var(--tekst);padding:9px 0;
}
.menugroep summary::-webkit-details-marker{display:none}
.menugroep summary i{position:relative;width:11px;height:11px;flex:0 0 auto}
.menugroep summary i::before,.menugroep summary i::after{
  content:"";position:absolute;left:0;top:5px;width:11px;height:1.4px;background:var(--goud);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.menugroep summary i::after{transform:rotate(90deg)}
.menugroep[open] summary i::after{transform:rotate(0)}
/* Open- en dichtklappen van boven naar beneden. Een <details> klapt van
   zichzelf hard open, dus menu.js zet de hoogte in pixels en laat die hier
   uitlopen. Padding en randkleur moeten mee: met alleen de hoogte op nul zie
   je bij dicht nog de twee randlijnen en de padding staan. */
.menugroep > div{
  display:flex;flex-direction:column;gap:1px;padding:6px 0 12px;
  border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);margin:4px 0 8px;
  overflow:hidden;
  transition:height .42s cubic-bezier(.22,1,.36,1),
             padding-top .42s cubic-bezier(.22,1,.36,1),
             padding-bottom .42s cubic-bezier(.22,1,.36,1),
             border-color .3s ease,opacity .26s ease;
}

/* De laatste regel van het menu is de oproep tot actie en ziet er hetzelfde
   uit als de knop in de balk erboven. */
.mobielmenu nav > a.menu-knop{
  align-self:center;margin-top:10px;
  font-family:"Jakarta",sans-serif;font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:16px 34px;border-radius:999px;
  background:linear-gradient(135deg,var(--goud-licht),var(--goud));color:#1C1509;
  box-shadow:0 16px 40px -18px rgba(201,164,100,.85);
}
.mobielmenu nav > a.menu-knop.nu{color:#1C1509}
.menugroep > div a{
  font-family:"Jakarta",sans-serif;font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:8px 0;opacity:1;transform:none;animation:none;color:var(--zacht);
}
.menugroep > div a.nu{color:var(--goud-licht)}

/* Achtergrond op slot terwijl de bestemmingenlade openstaat. Alleen het
   scrollen wordt geblokkeerd; de hoogte van de pagina blijft staan, zodat de
   vastgezette carrousel niet wordt afgebroken en er bij het sluiten dus ook
   niets terug hoeft te springen. */
html.lade-open{overflow:hidden}
html.lade-open body{overflow:hidden}
/* het paneel houdt zijn eigen scroll, en die loopt niet door naar de pagina */
.lade-paneel{overscroll-behavior:contain}

/* ---------- persoonlijk of zakelijk, boven aan het formulier ----------
   Twee kaartjes in plaats van een keuzelijst: het is de eerste vraag die de
   toon van het hele gesprek zet, en dan hoort hij niet weggestopt te zijn in
   een dropdown. */
.vormkeuze{border:0;padding:0;margin:0 0 clamp(22px,2.6vw,30px)}
.vormkeuze legend{
  padding:0;margin-bottom:14px;font-family:"Jakarta",sans-serif;font-size:13px;
  font-weight:600;letter-spacing:.02em;color:var(--zacht);
}
.vormopties{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vormoptie{position:relative;display:block;cursor:pointer}
.vormoptie input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.vormoptie span{
  display:block;padding:17px 18px;border:1px solid var(--lijn);border-radius:var(--hoek,2px);
  background:rgba(255,255,255,.02);
  transition:border-color .3s,background-color .3s,transform .3s cubic-bezier(.22,1,.36,1);
}
.vormoptie b{
  display:block;font-family:"Cormorant",serif;font-weight:400;font-size:20px;
  color:var(--tekst);margin-bottom:5px;
}
.vormoptie small{display:block;font-size:12.5px;line-height:1.5;color:var(--zachter)}
.vormoptie:hover span{border-color:rgba(201,164,100,.45)}
.vormoptie input:checked + span{
  border-color:var(--goud);
  background:radial-gradient(120% 140% at 88% -20%,rgba(201,164,100,.16),transparent 62%),rgba(201,164,100,.06);
}
.vormoptie input:focus-visible + span{outline:2px solid var(--goud-licht);outline-offset:2px}
.licht .vormkeuze legend,.licht-creme .vormkeuze legend,.licht-beige .vormkeuze legend{color:#575757}
.licht .vormoptie span,.licht-creme .vormoptie span,.licht-beige .vormoptie span{
  border-color:rgba(123,111,95,.26);background:rgba(255,255,255,.55);
}
.licht .vormoptie b,.licht-creme .vormoptie b,.licht-beige .vormoptie b{color:#393635}
.licht .vormoptie small,.licht-creme .vormoptie small,.licht-beige .vormoptie small{color:#6B6560}
@media(max-width:520px){.vormopties{grid-template-columns:1fr}}

/* ---------- de bovenbalk op een telefoon ----------
   Gemeten voordat dit erin stond: op 280px werd het logo platgedrukt van 101
   naar 24 pixels, op 360px werd de balk 126 in plaats van 93 hoog omdat de
   knoptekst op twee regels brak, en op 390px stak de hamburger vijf pixels
   buiten de balk. Alle drie hebben dezelfde oorzaak: de balk is een flexrij
   die op desktop is ingesteld en op een smal scherm gewoon blijft persen. */
@media(max-width:1320px){
  /* Het merk is de identiteit van de site en mag nooit ingedrukt worden. */
  .topbar .merk{flex:0 0 auto;min-width:auto}
  /* Knop en hamburger horen bij elkaar; 34px ertussen las als twee losse
     dingen. De navigatie krijgt hier zijn eigen, krappe afstand. */
  .topnav{gap:8px;flex-wrap:nowrap;flex:0 0 auto}
  .hamburger{margin-left:0}
  /* De knop in de balk mag nooit afbreken. De regel die tekst laat afbreken
     onder 380px is voor de knoppen in de inhoud bedoeld, niet voor deze. */
  .topnav .btn{white-space:nowrap;padding:12px 17px;font-size:11px;letter-spacing:.1em}
  .topbar{gap:12px}
}
/* Onder de 380px is er simpelweg geen ruimte voor logo, knop én hamburger:
   samen zijn ze breder dan het scherm. De knop staat als eerste in het
   uitklapmenu en onderaan elke pagina, dus hij is nergens onbereikbaar. */
@media(max-width:380px){
  .topnav .btn{display:none}
  .topbar{padding-inline:16px}
}

/* Op de kaartpagina's draait app.js niet, dus daar zet geen enkel script de
   balk in beeld. Die pagina's hebben ook geen hero waar hij achter hoort te
   blijven, dus hij mag daar meteen staan. Zonder deze regel bleef hij op
   telefoon op alle zeven kaartpagina's onzichtbaar. */
@media(max-width:899px){
  .kaartpagina .balk{transform:none;opacity:1;pointer-events:auto}
}

/* ---------- contactpagina op telefoon: eerst het formulier ----------
   Gemeten: het formulier begon pas op 1047px, dus je scrolde eerst langs
   telefoonnummer, mailadres en openingstijden voordat je iets kon invullen.
   Wie op "Plan jouw reis" tikt wil plannen, en bellen kan altijd via de vaste
   balk onderaan. De kop en de inleiding blijven bovenaan staan, alleen de
   contactregels schuiven onder het formulier.

   display:contents maakt de kinderen van .gegevens directe roostervakken van
   .formblok, zodat ze los van elkaar geordend kunnen worden. */
@media(max-width:900px){
  .formblok{display:grid;grid-template-columns:1fr}
  .formblok .gegevens{display:contents}
  .formblok .gegevens > .eyebrow{order:1}
  .formblok .gegevens > h1{order:2}
  .formblok .gegevens > .lood{order:3}
  .formblok .gegevens > .afwezig{order:3;margin-top:0}
  .formblok > .formhouder{order:4;margin-top:clamp(26px,4vw,36px)}
  .formblok .gegevens > .rij{order:5}
  .formblok .gegevens > .rij:first-of-type{border-top:1px solid var(--lijn);margin-top:clamp(30px,5vw,44px)}
  .formblok .gegevens > *:not(.eyebrow):not(h1):not(.lood):not(.afwezig):not(.rij){order:6}
}

/* ---------- zacht bewegend licht achter de donkere bladen ----------
   De donkere pagina's oogden vlak. Dit zijn drie grote, zwaar vervaagde
   gouden vlekken die heel langzaam langs elkaar schuiven. Je ziet het niet
   bewust bewegen, je merkt alleen dat het beeld leeft.

   Bewust geen JavaScript, ook al staat GSAP er al: dit moet ook werken op de
   kaartpagina's waar geen animatiebibliotheek draait, en een keyframe op
   transform en opacity wordt volledig door de grafische kaart afgehandeld.
   De drie looptijden zijn priemgetallen, zodat het patroon zich pas na ruim
   een half uur herhaalt en je nooit een lus herkent. */
.gloed{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
  contain:strict;
}
.kaartpagina > .gloed{position:fixed}
/* Posities in vh vanaf de bovenkant, niet in % van de paginahoogte: met %
   schoven de vlekken mee zodra foto's en lettertypes de pagina langer maakten,
   en dat telde als layout shift (CLS 0,5 op Bestemmingen, gemeten 14-10-2026). */
/* GEEN filter:blur(). Dat kostte gemeten 35 fps op een soortenpagina en 49 op
   de wereldkaart (61 naar 26, en 60 naar 11): een blur van 90px over een vlak
   van 52vw wordt elk beeld opnieuw uitgerekend. Een radiaal verloop met een
   zachte uitloop ziet er hetzelfde uit en kost niets, want dat is een keer
   tekenen en daarna alleen nog verschuiven. */
.gloed i{
  position:absolute;display:block;border-radius:50%;
  opacity:.85;will-change:transform;
}
.gloed i:nth-child(1){
  width:64vw;height:64vw;left:-20vw;top:8vh;
  background:radial-gradient(circle closest-side,
    rgba(201,164,100,.17) 0%,rgba(201,164,100,.10) 34%,rgba(201,164,100,.04) 60%,transparent 78%);
  animation:gloed-a 37s ease-in-out infinite alternate;
}
.gloed i:nth-child(2){
  width:56vw;height:56vw;right:-18vw;top:120vh;
  background:radial-gradient(circle closest-side,
    rgba(146,116,196,.11) 0%,rgba(146,116,196,.06) 38%,rgba(146,116,196,.02) 64%,transparent 80%);
  animation:gloed-b 53s ease-in-out infinite alternate;
}
.gloed i:nth-child(3){
  width:72vw;height:72vw;left:18%;top:230vh;
  background:radial-gradient(circle closest-side,
    rgba(230,206,155,.10) 0%,rgba(230,206,155,.05) 40%,rgba(230,206,155,.02) 66%,transparent 82%);
  animation:gloed-c 61s ease-in-out infinite alternate;
}
@keyframes gloed-a{to{transform:translate3d(16vw,10vh,0) scale(1.18)}}
@keyframes gloed-b{to{transform:translate3d(-13vw,-12vh,0) scale(.86)}}
@keyframes gloed-c{to{transform:translate3d(-18vw,-9vh,0) scale(1.12)}}
/* de inhoud hoort er altijd bovenop te liggen */
.blad-donker > *:not(.gloed){position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){
  .gloed i{animation:none}
}

/* Reisadvies-waarschuwing in een bestemmingskaart. Zelfde oranje als in het
   landpaneel op de wereldkaart, want het gaat om dezelfde kleurcode. */
.d-let-op{
  margin:0 0 14px;padding:11px 14px;border-radius:var(--hoek,2px);
  font-size:13px;line-height:1.55;
  color:#F0D9B8;background:rgba(214,128,42,.13);
  border:1px solid rgba(214,128,42,.45);
}

/* =========================================================
   Reviewblok op de homepagina (sitebouw.reviewblok)
   ---------------------------------------------------------
   Angélique staat vrijstaand vóór twee rijen reviews die
   doorlopen. Geen kaart, gloed of blur om haar heen; haar
   onderrand valt samen met de onderkant van de rijen. De rijen
   stoppen nooit, ook niet bij aanwijzen of aanraken. Alleen wie
   minder beweging vraagt krijgt een stilstaande, scrollbare rij.
   ========================================================= */
.reviewblok{overflow:hidden}
.rv-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding-left:max(var(--rand),calc(var(--rand) + 230px))}
.rv-kop h2{margin:0}
.rv-podium{position:relative;margin-top:clamp(40px,5vw,64px)}
.rv-angelique{position:absolute;z-index:3;bottom:0;left:max(8px,calc(50% - var(--maat)/2 - 40px));
  margin:0;pointer-events:none}
.rv-angelique img{display:block;height:clamp(520px,46vw,660px);width:auto;border-radius:0}
.rv-angelique figcaption{position:absolute;left:-10px;bottom:24px;background:var(--room);color:var(--taupe);
  border-radius:var(--hoek,2px);padding:9px 15px;font:600 12px/1.35 "Jakarta",sans-serif;box-shadow:0 10px 28px rgba(0,0,0,.35)}
.rv-angelique figcaption b{display:block;font:500 20px/1.1 "Cormorant",Georgia,serif;color:var(--inkt);letter-spacing:.01em}
.rv-band{display:grid;gap:14px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rv-rij{overflow:hidden}
.rv-spoor{display:flex;gap:14px;width:max-content;animation:rv-loop 70s linear infinite}
.rv-terug .rv-spoor{animation-direction:reverse;animation-duration:80s}
@keyframes rv-loop{to{transform:translate3d(calc(-50% - 7px),0,0)}}
.rv-kaart{width:282px;flex:none;margin:0;display:flex;flex-direction:column;gap:10px;
  padding:20px 22px;border-radius:var(--hoek,2px);background:#F3EDE5;border:1px solid rgba(255,255,255,.5);
  box-shadow:0 18px 40px rgba(0,0,0,.28)}
.rv-sterren{display:flex;gap:2px;color:var(--goud)}
.rv-sterren svg{width:13px;height:13px}
.rv-kaart h3{margin:0;font:500 20px/1.15 "Cormorant",Georgia,serif;color:var(--inkt);letter-spacing:.005em}
.rv-kaart blockquote{margin:0}
.rv-kaart p{margin:0;font-size:13.5px;line-height:1.58;color:#575757}
.rv-kaart p::before{content:"\201C"}
.rv-kaart p::after{content:"\201D"}
.rv-kaart figcaption{margin-top:auto;display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;color:#393635}
.rv-kaart figcaption small{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--taupe)}
.rv-g{width:14px;height:14px;flex:none}
.rv-letter{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--inkt);color:var(--goud-licht);font:600 13px/1 "Jakarta",sans-serif}
.rv-rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.rv-score{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;
  background:rgba(249,243,238,.06);border:1px solid var(--lijn);font-size:13px;color:var(--zacht);white-space:nowrap}
.rv-score b{color:var(--room);font-size:15px}
.rv-score .rv-g{width:16px;height:16px}
.rv-noot{margin-top:22px;font-size:12.5px;color:var(--zachter);text-align:right}

@media (max-width:900px){
  .rv-kop{padding-left:var(--rand)}
  .rv-angelique{position:relative;left:auto;bottom:auto;margin:0 0 0 4px;width:max-content}
  .rv-angelique img{height:390px}
  .rv-angelique figcaption{left:auto;right:-118px;bottom:38px}
  .rv-noot{text-align:left}
}
@media (max-width:640px){
  .rv-terug{display:none}            /* telefoon: één rij */
  .rv-kaart{width:262px;padding:18px 20px}
  .rv-rechts{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .rv-spoor{animation:none}
  .rv-rij{overflow-x:auto;scrollbar-width:none}
  .rv-kaart[aria-hidden="true"]{display:none}
}

/* =========================================================
   Reisbeeld op de homepagina (sitebouw.reisbeeld)
   ---------------------------------------------------------
   Twee tegenpolen naast elkaar: de warme savanne en het
   ijzige noorderlicht. In de naad een gouden "of", en een
   gestippelde route die ze verbindt: het maakt niet uit
   welke kant je op wilt. Daaronder alles wat ertussen zit.
   ========================================================= */
.rb-kop{text-align:center;max-width:720px;margin:0 auto}
.rb-kop h2{margin:0}
.rb-kop .lood{margin:22px auto 0;max-width:56ch}
.rb-duo{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:clamp(40px,5vw,60px);
  border-radius:var(--hoek,2px);overflow:hidden;isolation:isolate}
.rb-helft{position:relative;display:block;aspect-ratio:5/4;overflow:hidden;color:var(--room);text-decoration:none}
.rb-helft img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rb-helft:hover img{transform:scale(1.04)}
.rb-helft::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,.05) 35%,rgba(11,10,9,.82))}
.rb-links::after{background:linear-gradient(180deg,rgba(60,35,10,.05) 30%,rgba(11,10,9,.85)),linear-gradient(90deg,rgba(201,140,60,.12),transparent)}
.rb-rechts::after{background:linear-gradient(180deg,rgba(10,25,40,.10) 30%,rgba(11,10,9,.85)),linear-gradient(270deg,rgba(60,140,170,.12),transparent)}
.rb-bijschrift{position:absolute;z-index:2;left:clamp(20px,3vw,34px);right:clamp(20px,3vw,34px);bottom:clamp(20px,3vw,32px);
  display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.5;color:var(--zacht)}
.rb-rechts .rb-bijschrift{text-align:right;align-items:flex-end}
.rb-bijschrift b{font:500 clamp(24px,2.4vw,30px)/1.1 "Cormorant",Georgia,serif;color:var(--room)}
.rb-plek{font:700 10.5px/1 "Jakarta",sans-serif;letter-spacing:.26em;text-transform:uppercase;color:var(--goud-licht)}
.rb-route{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.rb-route path{fill:none;stroke:var(--goud-licht);stroke-width:1.6;stroke-dasharray:3 9;stroke-linecap:round;
  vector-effect:non-scaling-stroke;opacity:.85}
.rb-of{position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;background:var(--inkt);border:1px solid var(--goud);color:var(--goud-licht);
  font:italic 400 30px/1 "Cormorant",Georgia,serif;box-shadow:0 0 0 8px rgba(11,10,9,.45),0 12px 34px rgba(0,0,0,.5)}
.rb-onder{text-align:center;max-width:680px;margin:clamp(44px,5vw,64px) auto 0}
.rb-sub{margin:0;font:italic 400 clamp(28px,3.2vw,38px)/1.15 "Cormorant",Georgia,serif;color:var(--goud-licht)}
.rb-onder .lood{margin:16px auto 0;max-width:54ch}
.rb-ertussen{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:26px 0 0;font-size:13px;color:var(--zachter)}
.rb-ertussen span{margin-right:4px}
.rb-ertussen a{padding:7px 14px;border-radius:999px;border:1px solid var(--lijn);color:var(--tekst);font-size:13px;text-decoration:none;transition:border-color .2s,color .2s}
.rb-ertussen a:hover{border-color:var(--goud);color:var(--goud-licht)}
.rb-knoppen{display:flex;justify-content:center;flex-wrap:wrap;gap:22px;margin-top:34px}
.rb-gerust{margin:16px 0 0;font-size:12.5px;color:var(--zachter)}
@media (max-width:760px){
  .rb-duo{grid-template-columns:1fr;border-radius:var(--hoek,2px)}
  .rb-helft{aspect-ratio:4/3}
  .rb-rechts .rb-bijschrift{text-align:left;align-items:flex-start}
  .rb-route{display:none}
  .rb-of{width:58px;height:58px;font-size:24px}
  .rb-knoppen{flex-direction:column;align-items:stretch;gap:14px}
  .rb-knoppen .btn{width:100%}
}
.prijsje .prijsbron{display:block;margin-top:2px;font-size:10px;letter-spacing:.14em;opacity:.7}

/* =========================================================
   Homepagina v2 (sitebouw: soortenblok, ontdekblok, waaromblok)
   Donker en licht beige wisselen elkaar af.
   ========================================================= */
.home-licht{border-radius:var(--hoek,2px);margin-inline:clamp(8px,1.5vw,20px)}
.home-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(34px,4vw,54px)}
.home-kop h2{margin:0}
.home-kop .lood{margin:0;max-width:52ch}
.home-meer{text-align:center;margin:clamp(30px,4vw,44px) 0 0}
/* soorten: één grote, acht kleine */
.sr-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:clamp(170px,17vw,240px);gap:12px}
.sr-kaart{position:relative;overflow:hidden;border-radius:var(--hoek,2px);color:var(--room);text-decoration:none;isolation:isolate}
.sr-kaart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;transition:transform 1s cubic-bezier(.2,.7,.2,1);z-index:-1}
.sr-kaart::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,10,9,0) 40%,rgba(11,10,9,.82))}
.sr-kaart:hover img{transform:scale(1.05)}
.sr-groot{grid-column:span 2;grid-row:span 2}
.sr-tekst{position:absolute;left:18px;right:52px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.sr-tekst b{font:500 clamp(20px,1.8vw,24px)/1.1 "Cormorant",Georgia,serif;color:var(--room)}
.sr-groot .sr-tekst b{font-size:clamp(28px,2.8vw,38px)}
.sr-tekst span{font-size:14px;line-height:1.55;color:var(--zacht);max-width:44ch}
.sr-pijl{position:absolute;right:14px;bottom:14px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(249,243,238,.35);color:var(--room);transition:background .2s,border-color .2s,color .2s}
.sr-pijl svg{width:15px;height:15px}
.sr-kaart:hover .sr-pijl{background:var(--goud);border-color:var(--goud);color:var(--inkt)}
/* ontdekken: drie kaarten op beige */
.od-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.od-kaart{display:flex;flex-direction:column;background:#FBF8F3;border-radius:var(--hoek,2px);overflow:hidden;text-decoration:none;
  color:#4A4441;box-shadow:0 1px 0 rgba(123,111,95,.12),0 18px 40px -24px rgba(57,54,53,.35);transition:transform .25s,box-shadow .25s}
.od-kaart:hover{transform:translateY(-4px)}
.od-beeld{display:block;aspect-ratio:4/3;overflow:hidden}
.od-beeld img{width:100%;height:100%;object-fit:cover;border-radius:0}
.od-tekst{display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px}
.od-tekst b{font:500 26px/1.1 "Cormorant",Georgia,serif;color:#2F2B28}
.od-tekst span{font-size:14.5px;line-height:1.6;color:#5D5752}
.od-tekst em{margin-top:6px;font-style:normal;font:700 12px/1 "Jakarta",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#7A5E2A;display:inline-flex;align-items:center;gap:8px}
.od-tekst em svg{width:15px;height:15px}
/* waarom + zakelijk */
.wm-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(32px,6vw,90px);align-items:center}
.wm-tekst .lood p+p{margin-top:14px}
.wm-tekst .btn{margin-top:30px}
.wm-zakelijk{position:relative;display:block;border-radius:var(--hoek,2px);overflow:hidden;min-height:440px;color:var(--room);text-decoration:none;isolation:isolate}
.wm-zakelijk img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;z-index:-1;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.wm-zakelijk:hover img{transform:scale(1.04)}
.wm-zakelijk::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,10,9,.05) 30%,rgba(11,10,9,.88))}
.wm-zt{position:absolute;left:28px;right:28px;bottom:26px;display:flex;flex-direction:column;gap:8px}
.wm-zt .eyebrow{margin:0}
.wm-zt b{font:500 30px/1.1 "Cormorant",Georgia,serif}
.wm-zt>span:not(.eyebrow){font-size:14.5px;line-height:1.6;color:var(--zacht)}
.wm-zt em{font-style:normal;font:700 12px/1 "Jakarta",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-licht);display:inline-flex;align-items:center;gap:8px;margin-top:4px}
.wm-zt em svg{width:15px;height:15px}
@media (max-width:900px){
  .home-kop{grid-template-columns:1fr;align-items:start;gap:18px}
  .sr-raster{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:190px}
  .sr-groot{grid-row:span 2}
  .od-raster{grid-template-columns:1fr}
  .wm-grid{grid-template-columns:1fr}
  .wm-zakelijk{min-height:400px}
}
@media (max-width:520px){
  .sr-raster{grid-auto-rows:160px;gap:10px}
  .sr-tekst{left:14px;right:44px;bottom:12px}
  .sr-tekst b{font-size:18px}
  .sr-groot .sr-tekst b{font-size:28px}
  .sr-pijl{width:28px;height:28px;right:10px;bottom:10px}
  .home-licht{border-radius:var(--hoek,2px);margin-inline:6px}
}

/* Licht beige: knoppen, bijschriften en kopjes moeten ook hier leesbaar zijn.
   De standaard (crème op donker) gaf contrast 1,1 op beige. */
.licht-beige .btn-lijn{color:#2F2B28;border-color:rgba(57,54,53,.38)}
.licht-beige .btn-lijn:hover{background:#2F2B28;border-color:#2F2B28;color:var(--room)}
.licht-beige .bijschrift{color:#6B5F4F}
.licht-beige .eyebrow{color:#6B5F4F}
.licht-beige .eyebrow::before{background:#6B5F4F}
.rv-kaart figcaption small{color:#6E6355}
.licht-beige .bijschrift{opacity:1}

/* TUI at Home-kaartje linksonder bij het openen van de homepagina; schuift weg
   zodra je scrolt (sitebouw.TUIKAARTJE). Op een telefoon boven de vaste balk. */
.tui-kaartje{position:fixed;left:24px;bottom:24px;z-index:72;width:160px;pointer-events:none;
  transition:transform .55s cubic-bezier(.22,1,.36,1),opacity .4s ease;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.45))}
.tui-kaartje img{display:block;width:100%;height:auto;border-radius:0}
.tui-kaartje.weg{transform:translateY(calc(100% + 40px)) rotate(-4deg);opacity:0}
@media (max-width:899px){
  .tui-kaartje{left:14px;bottom:calc(78px + env(safe-area-inset-bottom));width:120px}
}
@media (prefers-reduced-motion:reduce){
  .tui-kaartje{transition:opacity .2s linear}
  .tui-kaartje.weg{transform:none}
}
/* golflijn als slot van de footer */
.voet-golf img{display:block;width:100%;height:auto;border-radius:0}
/* Vaste hoogte: het ballonnetje werd 2px lager zodra Jakarta binnenkwam, en de
   hele hulpknop schoof mee (CLS 0,1 op elke pagina, gemeten 14-10-2026). */
.hulp-tip{height:36px;width:178px;box-sizing:border-box;display:flex;align-items:center;justify-content:center;line-height:1}
/* kleine taupe tekst op de lichte vlakken haalde net geen 4,5:1 */
.licht-beige,.licht-creme{--taupe:#675B4C}
/* zakelijk-kaart: de tekst stond op een drukke foto, onderkant donkerder */
.wm-zakelijk::after{background:linear-gradient(180deg,rgba(11,10,9,0) 18%,rgba(11,10,9,.62) 48%,rgba(11,10,9,.93) 78%)}
.wm-zt .eyebrow{color:var(--goud-licht)}
/* golflijn netjes in het midden */
/* ontdekken-kaarten op donker (het beige vlak is eraf) */
.od-kaart{background:linear-gradient(160deg,rgba(249,243,238,.06),rgba(249,243,238,.02));border:1px solid var(--lijn);
  color:var(--zacht);box-shadow:none}
.od-kaart:hover{border-color:rgba(201,164,100,.4)}
.od-tekst b{color:var(--room)}
.od-tekst span{color:var(--zacht)}
.od-tekst em{color:var(--goud-licht)}
/* golflijn over de volledige breedte (Quinten: "groter, volledige breedte") */
.voet-golf{display:block;width:100%;max-width:none;margin:clamp(36px,4vw,56px) 0 0;padding:0 0 clamp(18px,2vw,28px)}
/* nieuwe portretfoto bij Over mij: gezicht in beeld houden bij het 4:5-kader */
.verhaal-beeld img[src*="over-angelique-telefoon"]{object-position:50% 30%}
/* telefoon: kleinere "of", en het bijschrift van de bovenste foto iets omhoog
   zodat de "of" er niet meer in staat */
@media (max-width:760px){
  .rb-of{width:42px;height:42px;font-size:19px;box-shadow:0 0 0 5px rgba(11,10,9,.45),0 8px 22px rgba(0,0,0,.5)}
  .rb-links .rb-bijschrift{bottom:46px}
}
/* reisbeeld: de twee foto's zijn geen link meer, dus ook geen zoom bij aanwijzen */
.rb-helft:hover img{transform:none}
/* kop zonder inleiding ernaast */
.home-kop-los{grid-template-columns:1fr}

/* =========================================================
   Slotblok homepagina (sitebouw.bouw_home, 14-10-2026)
   Foto van Angélique met de reisgidsen als achtergrond; zij
   rechts, de tekst links over een warme donkere waas.
   ========================================================= */
.sn-paneel{position:relative;overflow:hidden;border-radius:var(--hoek,2px);isolation:isolate;min-height:clamp(520px,44vw,640px);
  display:flex;align-items:center;border:1px solid var(--lijn)}
.sn-foto{position:absolute;inset:0;z-index:-2}
.sn-foto img{width:100%;height:100%;object-fit:cover;object-position:70% 22%;border-radius:0}
.sn-paneel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(18,14,10,.94) 0%,rgba(18,14,10,.86) 30%,rgba(18,14,10,.45) 48%,rgba(18,14,10,0) 62%),
             linear-gradient(0deg,rgba(18,14,10,.35),rgba(18,14,10,0) 40%)}
.sn-tekst{position:relative;max-width:520px;padding:clamp(40px,5vw,72px)}
.sn-tekst h2{margin:0;font-size:clamp(44px,5.4vw,72px);line-height:1}
.sn-tekst h2 em{font-style:italic;color:var(--goud-licht)}
.sn-tekst .lood{margin:22px 0 0;max-width:40ch;color:var(--tekst)}
.sn-knoppen{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.sn-zeker{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12.5px;color:var(--zacht)}
.sn-zeker li{display:inline-flex;align-items:center;gap:8px}
.sn-zeker li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--goud)}
@media (max-width:760px){
  .sn-paneel{display:block;min-height:0;border-radius:var(--hoek,2px);background:var(--nacht)}
  .sn-foto{position:relative;display:block;inset:auto;aspect-ratio:1/1}
  .sn-foto img{object-position:50% 20%}
  .sn-paneel::before{background:linear-gradient(180deg,rgba(18,14,10,0) 45%,rgba(18,14,10,.75) 82%,var(--nacht) 100%);height:calc(100vw - 32px);bottom:auto}
  .sn-tekst{padding:0 22px 30px;margin-top:-40px}
  .sn-knoppen{flex-direction:column;align-items:stretch;gap:12px}
  .sn-knoppen .btn{width:100%}
}
/* picture staat elders op display:contents; daarom de positionering op het img zelf */
.sn-paneel .sn-foto{display:block}
.sn-paneel .sn-foto img{position:absolute;inset:0;width:100%;height:100%;z-index:-2}
@media (max-width:760px){
  .sn-paneel .sn-foto{position:relative;aspect-ratio:1/1}
}

/* =========================================================
   Over mij (14-10-2026): compact verkiezingslabel en de
   galerij met haar eigen reisfoto's.
   ========================================================= */
.prijsje{display:inline-flex;align-items:center;gap:12px;width:fit-content;max-width:100%;
  padding:10px 16px 10px 12px;border-radius:var(--hoek,2px);white-space:normal;text-transform:none;letter-spacing:0}
.prijsje svg{width:22px;height:22px;flex:none}
.prijs-tekst{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.prijs-tekst b{font:700 11px/1.3 "Jakarta",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--goud-licht)}
.prijs-tekst small{font:500 11.5px/1.3 "Jakarta",sans-serif;letter-spacing:.02em;color:var(--zacht);text-transform:none}
.over .portret img{object-position:50% 18%}
.ow-kop{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(34px,4vw,54px)}
.ow-kop h2{margin:0}
.ow-kop .lood p+p{margin-top:12px}
.ow-galerij{columns:4 230px;column-gap:12px}
.ow-foto{position:relative;margin:0 0 12px;break-inside:avoid;border-radius:var(--hoek,2px);overflow:hidden}
.ow-foto img{display:block;width:100%;height:auto;border-radius:0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.ow-foto:hover img{transform:scale(1.04)}
.ow-foto figcaption{position:absolute;left:10px;bottom:10px;padding:5px 10px;border-radius:999px;
  background:rgba(11,10,9,.72);backdrop-filter:blur(6px);font:700 10px/1 "Jakarta",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--goud-licht)}
@media (max-width:900px){.ow-kop{grid-template-columns:1fr;align-items:start;gap:16px}}
@media (max-width:640px){.ow-galerij{columns:2;column-gap:8px}.ow-foto{margin-bottom:8px;border-radius:var(--hoek,2px)}}
.sectie-werkfotos{padding-block:clamp(10px,2vw,30px)}
.werkfotos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
/* Zes foto's (21-10-2026): drie per rij, zodat er geen halve rij overblijft. */
@media (min-width:701px){.werkfotos:has(> :nth-child(6)),.werkfotos:not(:has(> :nth-child(4))){grid-template-columns:repeat(3,minmax(0,1fr))}}
.wf-foto{position:relative;margin:0;border-radius:var(--hoek,2px);overflow:hidden;aspect-ratio:3/4}
.wf-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:0}
.wf-foto figcaption{position:absolute;left:12px;right:12px;bottom:12px;font:500 18px/1.15 "Cormorant",Georgia,serif;color:var(--room);
  text-shadow:0 2px 12px rgba(0,0,0,.6)}
.wf-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,10,9,0) 55%,rgba(11,10,9,.7));pointer-events:none}
.wf-foto figcaption{z-index:1}
@media (max-width:700px){.werkfotos{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.wf-foto{border-radius:var(--hoek,2px)}}
/* De wereld door mijn ogen: hoogstens zes eigen reisfoto's, drie naast elkaar (opdrachten 18-10, punt 22) */
.reisfotos{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:clamp(34px,4vw,54px)}
.reisfotos .wf-foto figcaption{font-size:clamp(16px,1.4vw,19px)}
@media (max-width:700px){.reisfotos{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================
   Overgenomen uit overgang.css (14-10-2026). Dat bestand is niet meer geladen
   sinds de paginaovergang eruit ging, maar hier stonden ook gewone regels in:
   de bovenmarge van losse pagina's, het actieve menu-item, de doorverwijzingen
   onder het slotblok en de ruimte onder de footer. Zonder deze regels werden
   de pijlen in de doorverwijzingen schermvullend.
   ========================================================= */
/* ---------- losse pagina's ---------- */
.losse-pagina{background:var(--inkt)}
/* de bovenbalk staat vast, dus de inhoud begint eronder */
.losse-main{padding-top:clamp(74px,10vh,104px)}
/* Op de homepagina begint dit blad doorzichtig, zodat de film erdoorheen
   schemert. Op een eigen pagina is er geen film, dus daar moet het dicht. */
.blad-vast{background:var(--inkt)}
.losse-main .sectie:first-of-type{padding-top:clamp(30px,5vh,56px)}
.topnav a.nu{color:var(--goud-licht)}
.topnav a.nu::after{width:100%}

/* ---------- de doorverwijzingen op de homepagina ---------- */
.verderlijst{
  list-style:none;margin:clamp(30px,4vh,48px) 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
}
.verderlijst a{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:14px;
  padding:22px 24px;text-decoration:none;
  border:1px solid var(--lijn);border-radius:var(--hoek,2px);background:rgba(255,255,255,.02);
  transition:border-color .35s,background-color .35s,transform .35s cubic-bezier(.22,1,.36,1);
}
.verderlijst a:hover{
  border-color:rgba(201,164,100,.55);background:rgba(201,164,100,.07);transform:translateY(-2px);
}
.verderlijst b{
  grid-column:1;font-family:"Cormorant",serif;font-weight:400;font-size:24px;color:var(--tekst);
}
.verderlijst span{grid-column:1;font-size:13.5px;line-height:1.6;color:var(--zachter);margin-top:6px}
.verderlijst i{grid-column:2;grid-row:1/3;color:var(--goud);display:grid;place-items:center}
.verderlijst i svg{width:20px;height:20px;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.verderlijst a:hover i svg{transform:translateX(4px)}

/* de korte variant onder een afsluiter: alleen een titel, geen uitleg */
.verderlijst.kort{margin-top:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.verderlijst.kort a{padding:17px 22px;align-items:center}
.verderlijst.kort b{font-size:19px;grid-row:1}
.verderlijst.kort i{grid-row:1}
.slotsectie{padding-block:clamp(48px,7vh,96px) clamp(60px,9vh,120px)}
/* De voettekst houdt afstand van de vaste onderbalk, zodat er nooit iets
   achter verdwijnt. Op desktop staat de balk rechtsonder als losse knoppen,
   daar is minder ruimte nodig. */
@media(max-width:900px){
  .voet{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
}
@media(min-width:901px){
  .voet{padding-bottom:clamp(96px,10vw,140px)}
}
/* Reviewkaarten donker met een gouden rand en gouden koppen (Quinten, 14-10-2026;
   de zandkleur van eerder vandaag is teruggedraaid). */
.rv-kaart{background:linear-gradient(160deg,rgba(249,243,238,.07),rgba(249,243,238,.025)),var(--nacht);
  border:1px solid rgba(201,164,100,.55);box-shadow:0 18px 40px rgba(0,0,0,.35)}
.rv-kaart h3{color:var(--goud-licht)}
.rv-kaart p{color:var(--zacht)}
.rv-kaart figcaption{color:var(--tekst)}
.rv-kaart figcaption small{color:var(--zachter)}
.rv-sterren{color:var(--goud)}
.rv-letter{background:rgba(201,164,100,.16);color:var(--goud-licht)}
/* Telefoon: Angélique staat vóór de reviewrij, de kaarten lopen achter haar langs */
@media (max-width:900px){
  .rv-podium{padding-top:90px}
  .rv-angelique{position:absolute;left:0;bottom:0;margin:0;width:auto;z-index:3}
  .rv-angelique img{height:min(380px,92vw)}
  .rv-angelique figcaption{left:auto;right:-96px;bottom:28px}
}
/* Geen gouden gloed achter knoppen en gouden vlakken (Quinten, 14-10-2026: "niet mooi") */
.btn-goud,.btn-goud:hover,.mobielmenu nav > a.menu-knop,.dagnr,.agenda-dag.aan,a.soc:hover,a.soc:focus-visible{box-shadow:none}
/* telefoon: haar naamkaartje onder haarzelf, niet over de naam van een reviewer */
@media (max-width:900px){.rv-angelique figcaption{left:8px;right:auto;bottom:16px}}
/* Onderweg: alleen de kop, de tekst ernaast is weg (Quinten, 14-10-2026) */
.ow-kop{grid-template-columns:1fr}
/* voorbeeldreis: de inspiratie-toevoeging (akkoord Angélique 14-10-2026) */
.sectie-noot{padding-block:0 clamp(20px,3vw,40px)}
.voorbeeld-noot{max-width:70ch;margin:0;padding:18px 22px;border-left:2px solid var(--goud);border-radius:0 10px 10px 0;
  background:rgba(201,164,100,.07);font-size:14.5px;line-height:1.7;color:var(--zacht)}
/* introductiezin onder "Hoi, ik ben Angélique" */
.intro-regel{margin:14px 0 0;font:italic 400 clamp(22px,2.4vw,28px)/1.25 "Cormorant",Georgia,serif;color:var(--goud-licht)}

/* Soorten reizen: fotoraster (siteinhoud.soortenraster, 14-10-2026)
   4 kolommen: Rondreizen 2x2, Cruises 2x1, negen tegels en de uitnodiging */
.sectie-soortenraster{padding-top:0}
.sr-breed{grid-column:span 2}
.sr-cta{display:block;background:linear-gradient(160deg,rgba(201,164,100,.16),rgba(201,164,100,.04)),var(--nacht);border:1px solid rgba(201,164,100,.5)}
.sr-cta::after{display:none}
.sr-cta .sr-tekst b{color:var(--goud-licht)}
.sr-cta .sr-tekst span{display:block}
.sr-breed .sr-tekst span{max-width:52ch}
@media (max-width:900px){.sr-raster-soorten .sr-breed{grid-column:span 2}}
@media (max-width:900px){.sr-raster-soorten .sr-breed{grid-row:span 2}}
.sr-breed .sr-tekst b{font-size:clamp(28px,2.8vw,38px)}

/* ---------- pop-up India, 8 t/m 23 november 2026 (menu.js) ---------- */
.popup-laag{
  position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;
  background:rgba(9,8,7,.74);-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transition:opacity .5s ease;
}
.popup-laag.aan{opacity:1}
html.popup-open{overflow:hidden}
.popup-kaart{
  position:relative;
  /* het beeld is 4:5; de voetbalk eronder is zo'n 76px */
  width:min(470px,100%,calc((100svh - 32px - 76px) * .8));
  border-radius:var(--hoek,2px);overflow:hidden;
  background:var(--nacht);
  border:1px solid rgba(201,164,100,.55);
  box-shadow:0 50px 120px -30px rgba(0,0,0,.9),0 0 0 6px rgba(201,164,100,.07);
  opacity:0;transform:translateY(28px) scale(.94);
  transition:opacity .7s cubic-bezier(.22,1,.36,1) .08s,transform 1s cubic-bezier(.22,1,.36,1) .08s;
}
.popup-laag.aan .popup-kaart{opacity:1;transform:none}
.popup-kaart img{display:block;width:100%;height:auto;aspect-ratio:4/5}
.popup-voet{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-top:1px solid rgba(201,164,100,.25);
}
.popup-voet .btn{padding:13px 22px;font-size:12px}
.popup-later{
  background:none;border:0;cursor:pointer;padding:10px 4px;
  font:600 12px/1 "Jakarta",sans-serif;letter-spacing:.08em;text-transform:uppercase;
  color:var(--zand);
}
.popup-later:hover,.popup-later:focus-visible{color:var(--goud-licht)}
.popup-dicht{
  /* linksboven: rechtsboven staat in het beeld "Op reis naar" */
  position:absolute;top:12px;left:12px;z-index:1;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(11,10,9,.62);border:1px solid rgba(201,164,100,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .25s ease,transform .25s ease;
}
.popup-dicht svg{width:16px;height:16px;fill:none;stroke:var(--room);stroke-width:1.8;stroke-linecap:round}
.popup-dicht:hover,.popup-dicht:focus-visible{background:rgba(11,10,9,.85);transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){
  .popup-kaart{transform:none;transition:opacity .3s ease}
  .popup-dicht:hover{transform:none}
}

/* Zekerheden op een donker blad (Waarom is sinds 16-10-2026 donker). De
   kleuren hierboven zijn voor creme; op donker vielen titel en tekst weg. */
.blad-donker .zekerheden{border-top-color:var(--lijn)}
.blad-donker .zekerheden-kop{color:var(--goud)}
.blad-donker .zeker svg{color:var(--goud-licht);background:rgba(201,164,100,.1)}
.blad-donker .zeker b{color:var(--room)}
.blad-donker .zeker p{color:var(--zacht)}

/* Reiskompas op een donker blad (sinds 16-10-2026). De kaart was creme met
   donkere tekst; de kop werd door het donkere blad licht en viel weg. Nu in
   dezelfde stijl als het aanvraagformulier: donkere kaart, gouden accenten. */
.blad-donker .kompas-kaart{
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  border-color:rgba(201,164,100,.32);box-shadow:0 40px 90px -50px rgba(0,0,0,.9);
}
.blad-donker .kompas-zij{border-right-color:var(--lijn)}
.blad-donker .kompas-zij h1,.blad-donker .kompas-zij h2,
.blad-donker .kompas-kop,.blad-donker .kompas-uitkomst h3{color:var(--room)}
.blad-donker .kompas-intro,.blad-donker .kompas-profiel-tekst,.blad-donker .kompas-vraagje{color:var(--zacht)}
.blad-donker .kompas-voortgang{background:var(--lijn)}
.blad-donker .kompas-stap,.blad-donker .kompas-profiel-label,.blad-donker .kompas-suggestie-label{color:var(--goud)}
.blad-donker .kompas-optie{background:rgba(255,255,255,.03);border-color:var(--lijn-sterk);color:var(--room)}
.blad-donker .kompas-optie:hover{background:rgba(201,164,100,.08);border-color:var(--goud)}
.blad-donker .kompas-optie small{color:var(--zachter)}
.blad-donker .kompas-optie .bol{background:rgba(201,164,100,.12);color:var(--goud-licht)}
.blad-donker .kompas-terug{color:var(--zachter)}
.blad-donker .kompas-terug:hover{color:var(--room)}
.blad-donker .kompas-sug{background:rgba(255,255,255,.04);border-color:var(--lijn)}
.blad-donker .kompas-sug span{color:var(--room)}
.blad-donker .kompas-sug span small{color:var(--zachter)}
.blad-donker .kompas-form{border-top-color:var(--lijn)}
.blad-donker .kompas-klaar .vink svg{color:var(--goud-licht)}

/* Afwezigheidsmelding op de contactpagina (8 t/m 23 november 2026), zie menu.js */
.afwezig{margin-top:22px;padding:16px 18px;border:1px solid var(--goud);border-radius:var(--hoek,2px);
  background:rgba(201,164,100,.08);color:var(--tekst);font-size:15px;line-height:1.6}
.afwezig b{color:var(--goud-licht);font-weight:600}
.afwezig[hidden]{display:none}

/* ---------- Eén hoek voor alles (17-10-2026) ----------
   Quinten: alle afbeeldingen, reviews en panelen krijgen de hoek van de foto
   bij "Hoi, ik ben Angélique" (.lijst, 2px). Die strakke hoek oogt luxer dan
   de 14 tot 28px die hier verspreid stond. Knoppen (pil) en ronde portretjes
   blijven rond; dat zijn bewuste vormen, geen afbeeldingen in een kader.
   Hier en niet per regel, zodat ook de telefoonvarianten in de media queries
   hierboven worden overschreven. Zie ook het slot van verhalen.css en kaart.css. */
:root{--hoek:2px}
.lijst,.kaart,.od-kaart,.od-beeld,.sr-kaart,.wm-zakelijk,.wm-zakelijk img,
.rb-duo,.rb-helft,.rb-helft img,.sn-paneel,.sn-foto,.sn-foto img,.home-licht,
.rv-kaart,.rv-angelique figcaption,.citaat,.wf-foto,.ow-foto,.ow-foto img,
.soort > a,.soort > div,.soort img,.kompas-kaart,.kompas-sug,.kompas-optie,
.popup-kaart,.popup-kaart img,.afwezig,.prijsje,.voorbeeld-noot,.hulp-tip,
.formhouder,.vormoptie span,.p-kader{border-radius:var(--hoek)}
@media (max-width:700px){.wf-foto,.ow-foto{border-radius:var(--hoek)}}

/* ---------- Genummerde redenen, nieuw ontwerp (17-10-2026) ----------
   Gekozen uit vier ontwerpvoorstellen van Higgsfield (Quinten: "luxe travel
   design"): grote cijfers als gouden contourlijn, een kort gouden streepje
   onder de titel, ragfijne gouden lijnen tussen de kolommen. Geen kaarten,
   geen schaduw, geen gloed. Bij hover vult het cijfer zich heel licht. */
.redenen{margin-top:clamp(50px,6.5vw,84px)}
.reden{border-left-color:rgba(201,164,100,.30) !important;padding-block:clamp(6px,1vw,12px) clamp(10px,1.4vw,18px)}
.reden .nr{
  font-family:"Cormorant",Georgia,serif;font-weight:300;letter-spacing:-.02em;line-height:.86;
  font-size:clamp(68px,6.6vw,104px);margin:0 0 clamp(16px,1.6vw,22px);
  color:var(--goud);transition:color .6s ease;
  /* hoge cijfers: Cormorant zet standaard oude-stijlcijfers (1 als I, 0 als o) */
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1;
}
@supports (-webkit-text-stroke:1px black){
  .reden .nr{color:transparent;-webkit-text-stroke:1px var(--goud)}
  .reden:hover .nr{color:rgba(201,164,100,.14)}
}
.reden h3::after{content:"";display:block;width:56px;height:1px;background:var(--goud);margin-top:clamp(18px,1.8vw,24px)}
.reden h3{margin-bottom:clamp(16px,1.6vw,20px)}
@media(max-width:920px){.reden:nth-child(n+3){border-top-color:rgba(201,164,100,.30) !important}}
@media(max-width:560px){
  .reden{border-top-color:rgba(201,164,100,.30) !important;padding-block:30px}
  .reden .nr{font-size:64px}
}

/* Over mij: twee kenmerken (opdrachten 18-10, punt 21), rustig naast elkaar,
   ook op een telefoon. Daar staat het cijfer boven het label. */
.cijfers.twee{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px clamp(24px,4vw,54px)}
@media(max-width:640px){
  .cijfers.twee{display:grid;gap:18px;padding-top:28px;border-top:1px solid var(--lijn)}
  .cijfers.twee .cijfer{display:block;border:0;padding:0}
  .cijfers.twee .cijfer span{text-align:left;margin-top:8px}
}

/* Eén foto onder "Zo werkt het" (Deel 2, punt 04), zonder onderschrift. */
.losse-foto{max-width:440px;margin-inline:auto}
.losse-foto img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;object-position:50% 20%}
/* Liggende losse foto (21-10-2026): de auto met Angélique op Over mij. */
.losse-foto-breed{max-width:860px}
.losse-foto-breed img{aspect-ratio:auto;object-position:50% 50%}

/* Waarom: slotregel onder de vier redenen (Deel 2, punt 26) */
.waarom-slot{margin-top:clamp(40px,5vw,60px);max-width:66ch}
.waarom-slot h3{font-size:clamp(22px,2vw,28px);margin-bottom:10px}
.waarom-slot p{margin:0;color:var(--zacht);font-size:15.5px;line-height:1.7}
.reden p + p{margin-top:10px}

/* Soorten reizen: de categorienaam in de lijst is een link (Deel 2, punt 07) */
.feit dt a{color:inherit;text-decoration:none;background-image:linear-gradient(var(--goud),var(--goud));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .4s,color .3s}
.feit dt a:hover,.feit dt a:focus-visible{color:var(--goud-licht);background-size:100% 1px}

/* Foto onder de tekst van 'Waarom een reisadviseur' op de homepagina (21-10-2026) */
.wm-foto{margin:clamp(28px,3vw,40px) 0 0;border-radius:var(--hoek,2px);overflow:hidden}
.wm-foto img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:55% 45%}
/* Drie werkfoto's op de telefoon: de derde over de volle breedte, geen gat ernaast (21-10-2026) */
@media (max-width:700px){.werkfotos:not(:has(> :nth-child(4))) > .wf-foto:nth-child(3){grid-column:span 2;aspect-ratio:4/3}}