/* ============================================================
   VARIANT V2 — additief bovenop style.css.
   Alleen nieuwe classes; style.css blijft ongemoeid, dus de
   live site verandert hier niet van.
   ============================================================ */

:root{
  --v2-cream:    #f9f7f2;
  --v2-parch:    #f5edd8;
  --v2-parch-dk: #e8d9b8;
  --v2-navy:     #131626;
  --v2-navy-deep:#0d1530;
  --v2-gold:     #c5a059;
  /* Donkerder goud voor kleine tekst op lichte vlakken: #9a7a3f haalde
     maar 3,4:1 op parchment, dit haalt 4,8:1 (WCAG AA). */
  --v2-gold-dp:  #806334;
  /* Het papier van de eilanden. Warm wit, geen zuiver #fff — dat zou naast
     perkament als beeldscherm aanvoelen in plaats van als vel. */
  --v2-paper:    #fdfbf6;
  --v2-ink:      #131626;
  --v2-ink-soft: #3a3f56;
}

/* ── Alleen licht ─────────────────────────────────────────
   De thema-schakelaar is eruit (Frits, 16 aug): de site staat vast op
   licht, zoals ontwerpbrief §10 al voorschreef. Het blok met
   [data-theme="dark"]-overrides dat hier stond kan nooit meer aanslaan
   en is daarom weg; het staat in de historie als donker ooit terugkomt.
   ───────────────────────────────────────────────────────── */

/* ── Nav-links (nieuw t.o.v. live) ───────────────────────── */
.nav-links{ display:flex; align-items:center; gap:1.9rem; }
.nav-links a{
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.13em;
  text-transform:uppercase; color:rgba(240,232,213,.72);
  text-decoration:none; white-space:nowrap; transition:color .2s ease;
}
.nav-links a:hover{ color:#d4af37; }

/* ── Hamburgermenu ───────────────────────────────────────── */
/* Onder 1100px pasten de links niet meer naast de logo en de knoppen, en
   verdwenen ze gewoon — dan is er op een telefoon geen navigatie meer.
   Nu klappen ze uit onder de balk. */
.nav-burger{
  display:none;                      /* alleen onder de breekpunt */
  width:40px; height:40px; padding:0; cursor:pointer;
  background:none; border:1px solid rgba(249,247,242,.45); border-radius:4px;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .2s ease;
}
.nav-burger:hover{ border-color:var(--v2-gold); }
.nav-burger:focus-visible{ outline:2px solid var(--v2-gold); outline-offset:3px; }
.nav-burger span{
  display:block; width:18px; height:1.5px; background:#f0e8d5;
  transition:transform .25s ease, opacity .2s ease;
}
/* Open: de drie streepjes worden een kruisje */
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

@media (max-width:1100px){
  .nav-burger{ display:flex; }

  /* #nav is fixed, dus top:100% hangt het paneel exact onder de balk —
     zonder dat we de hoogte van die balk ergens moeten hardcoderen. */
  .nav-links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--v2-navy-deep);
    border-bottom:1px solid rgba(197,160,89,.25);
    box-shadow:0 18px 40px rgba(4,8,20,.4);
    padding:.5rem 1.25rem 1rem;
    /* Dicht: weggeklapt en niet aanklikbaar, maar wél in de DOM zodat de
       overgang loopt en schermlezers hem niet halverwege kwijtraken. */
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav-links a{
    padding:.95rem .25rem; font-size:.72rem;
    border-bottom:1px solid rgba(240,232,213,.1);
  }
  .nav-links a:last-child{ border-bottom:none; }
}

@media (prefers-reduced-motion:reduce){
  .nav-links, .nav-burger span{ transition:none; }
}

/* ── Telefoonscherm-UI: speelknop + Time Travel Tim ──────── */
/* Afmetingen MOETEN gelijk blijven aan .zr-phone-ring in style.css en aan
   _getZrDims() in main.js — de knop moet exact op de telefoon vallen. */
.zr-phone-ui{
  position:absolute; top:50%; left:50%;
  width:280px; height:560px;
  transform:translate(-50%,-50%);
  z-index:21;                 /* boven zr-stage (20), onder de rand (22) */
  border-radius:44px; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  opacity:0;                  /* JS regelt dit mee met de r-fase */
  pointer-events:none;
}
.zr-phone-ui.is-ready{ pointer-events:auto; }

/* Op desktop staat de telefoon 80px links van het midden — het clipvenster in
   _getZrClip() en .zr-phone-ring in style.css doen dat allebei. Deze laag deed
   het niet en stond dus 80px te ver naar rechts: de speelknop zat rechts van
   het midden van de telefoon en het bijschrift ("Sloten · het jaar 1275") liep
   achter de telefoonrand langs weg. */
@media (min-width:768px){
  .zr-phone-ui{
    left:calc(50% - 80px);
    top:calc(50% + var(--hero-v-offset)); /* zelfde correctie als de rand */
  }
}

/* Het bewegende beeld. Blijft leeg tot data-video gevuld is. */
.zr-phone-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .5s ease;
}
.zr-phone-ui.is-playing .zr-phone-video[src]{ opacity:1; }

/* Leesbaarheidsverloop onder de knop — zonder dit verdrinkt goud op riet. */
.zr-phone-ui::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:52%;
  background:linear-gradient(to top, rgba(6,10,20,.78), rgba(6,10,20,0));
  pointer-events:none;
}

.zr-play{
  position:relative; z-index:2;
  width:74px; height:74px; flex:none; margin-bottom:14px;
  border-radius:50%; cursor:pointer;
  border:1px solid rgba(197,160,89,.55);
  background:rgba(13,21,48,.42);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
}
.zr-play:hover{ transform:scale(1.07); background:rgba(13,21,48,.62); border-color:var(--v2-gold); }
.zr-play:focus-visible{ outline:2px solid var(--v2-gold); outline-offset:4px; }

/* Play-driehoek in CSS; wordt een pauzestreep zodra hij speelt. */
.zr-play-glyph{
  width:0; height:0; margin-left:5px;
  border-top:13px solid transparent;
  border-bottom:13px solid transparent;
  border-left:21px solid var(--v2-gold);
  transition:border-color .2s ease;
}
.zr-phone-ui.is-playing .zr-play-glyph{
  margin-left:0;
  width:18px; height:22px; border:0;
  border-left:6px solid var(--v2-gold);
  border-right:6px solid var(--v2-gold);
  background:transparent;
  box-sizing:border-box;
}

/* Kloppende ring die de knop aanwijsbaar maakt — stopt zodra hij speelt. */
.zr-play::before{
  content:''; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(197,160,89,.5);
  animation:zrPulse 2.6s ease-out infinite;
}
.zr-phone-ui.is-playing .zr-play::before{ animation:none; opacity:0; }
@keyframes zrPulse{
  0%   { transform:scale(.9);  opacity:.75; }
  70%  { transform:scale(1.28); opacity:0; }
  100% { transform:scale(1.28); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .zr-play::before{ animation:none; }
}

.zr-play-caption{
  position:relative; z-index:2;
  width:100%; padding:0 18px 26px; text-align:center;
}
.zr-play-name{
  display:block; font-family:var(--font-ui);
  font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--v2-gold);
}
.zr-play-meta{
  display:block; margin-top:4px;
  font-family:var(--font-body); font-size:.9rem;
  color:rgba(255,255,255,.82);
}
.zr-play-progress{
  display:block; margin-top:10px; height:2px; border-radius:2px;
  background:rgba(255,255,255,.22); overflow:hidden;
}
.zr-play-progress i{ display:block; height:100%; width:0; background:var(--v2-gold); }

@media (max-width:767px){
  /* Maat komt van _syncPhoneSize() in main.js — zie style.css. */
  .zr-play{ width:52px; height:52px; margin-bottom:8px; }
  .zr-play-glyph{ border-top-width:9px; border-bottom-width:9px; border-left-width:15px; }
  .zr-phone-ui.is-playing .zr-play-glyph{ width:13px; height:16px; border-left-width:4px; border-right-width:4px; }
  .zr-play-caption{ padding:0 10px 14px; }
  .zr-play-name{ font-size:.55rem; letter-spacing:.16em; }
  .zr-play-meta{ font-size:.76rem; }
  .zr-play-progress{ margin-top:7px; }
}

/* ── USP-lijst in de landing-copy ────────────────────────── */
/* Maatvoering hier is bewust krap: dit blok deelt de hoogte van de pin-wrap
   met de telefoon ernaast, en op lagere vensters (≤800px hoog) liep het tegen
   het AI-label aan de onderkant aan. De telefoon houdt zijn formaat. */
.usp-list{
  display:flex; flex-direction:column; gap:.8rem;
  margin:1.4rem 0 0; padding:0; list-style:none;
}
.usp-item{ display:flex; align-items:flex-start; gap:.8rem; }
.usp-icon{
  flex:none; width:36px; height:36px; border-radius:50%;
  background:var(--v2-cream); border:1px solid rgba(197,160,89,.45);
  display:flex; align-items:center; justify-content:center;
}
.usp-icon i{ width:16px; height:16px; color:var(--v2-gold-dp); stroke-width:1.6; }
.usp-item-text{ display:block; }
.usp-item strong{
  font-family:var(--font-display); font-size:.98rem; font-weight:600;
  color:var(--v2-ink); display:block; margin-bottom:.15rem;
}
.usp-item-desc{
  display:block; font-family:var(--font-body);
  font-size:.92rem; line-height:1.45;
  /* Zelfde behandeling als .landing-tagline, want dit staat in dezelfde
     hero-landingcopy — niet lichter, anders valt het weg. */
  color:var(--v2-ink); opacity:.88;
}

/* landing-headline in USP-modus: kleiner en donker i.p.v. goud */
.landing-headline--usp{
  font-size:clamp(1.9rem,3.2vw,2.9rem) !important;
  line-height:1.1 !important;
  color:var(--v2-ink) !important;
  background:none !important;
  -webkit-text-fill-color:var(--v2-ink) !important;
  margin-top:10px !important;
}
#zr-landing-copy .landing-tagline{ font-size:clamp(.95rem,1.25vw,1.12rem); margin-top:14px; max-width:32rem; }
/* Fors kleiner dan de generieke .landing-cta (17px/32px, 12px letter): die
   maat maakte de knoppen 350px breed, en de goud gevulde liep dan over het
   AI-label linksonder. */
#zr-landing-copy .landing-cta{
  margin-top:18px; padding:12px 20px;
  font-size:10px; letter-spacing:.18em;
}

@media (max-width:767px){
  /* Onder de telefoon is maar een paar honderd pixels over, en de copy is
     gegroeid (kop terug, USP-lijst, tweede knop). Alles wat de kop al zegt
     gaat er hier af, anders schuift de tekst over de telefoon heen. */
  /* Onderaan blijft een strook vrij voor het AI-label linksonder (31px hoog,
     16px van de rand). Op mobiel hangt dit blok aan de onderkant
     (align-items: flex-end in style.css), dus deze marge tilt de hele tekst
     op — niet half, zoals op desktop. Zonder die strook schoof de gouden knop
     over het label: gemeten 25px op 320px breed en 5px op 360px, en dat label
     hoort zichtbaar te blijven (EU AI Act art. 50).
     Hoort samen met MOB_COPY_RUIMTE in main.js, dat de telefoon laat krimpen
     zodat deze ruimte er ook echt is. */
  #zr-landing-copy{ padding:0 1.5rem 4.25rem; }
  #zr-landing-copy .landing-headline--usp{ display:block !important; font-size:1.4rem !important; margin-top:0 !important; }
  #zr-landing-copy .landing-tagline{ display:none; }
  /* USP's blijven staan op mobiel — mobiel-eerst, dus dit is juist de
     plek waar ze het hardst nodig zijn. Wel compacter: alleen de kop. */
  #zr-landing-copy .usp-list{ margin-top:14px; gap:.55rem; text-align:left; }
  #zr-landing-copy .usp-icon{ width:32px; height:32px; }
  #zr-landing-copy .usp-icon i{ width:15px; height:15px; }
  #zr-landing-copy .usp-item strong{ font-size:.92rem; margin-bottom:0; }
  #zr-landing-copy .usp-item-desc{ display:none; }
  #zr-landing-copy .landing-cta{ margin-top:0; padding:11px 18px; font-size:10px; }
  #zr-landing-copy .landing-actions{ margin-top:14px; justify-content:center; }
}

/* ── Generieke sectie-bouwstenen ─────────────────────────── */
/* ── Eén ondergrond ───────────────────────────────────────── */
/* Elke sectie had een eigen vlak: licht, crème, licht, crème, navy, crème,
   navy. Zeven balken onder elkaar, en juist daardoor viel er niets meer op —
   als alles een eigen vlak heeft, is een vlak geen accent meer.
   Nu draagt de hele pagina één ondergrond en doen ruimte, een haarlijn en de
   typografie het scheidingswerk. Donker is er nog op twee plekken waar het
   iets betékent: de hero waar je binnenkomt en de footer waar je uitkomt.
   De klassen --light en --cream zijn daarmee verdwenen (16 stuks over negen
   pagina's); --dark blijft bestaan als echte uitzondering. */
/* De secties zijn zelf doorzichtig; de ondergrond ligt op <body>, zie
   hieronder. Zo is er geen enkele naad meer tussen secties. */
.v2-section{ padding:6.5rem 0; background:transparent; }
.v2-section--tight{ padding:3.5rem 0; }
.v2-section--dark{ background:var(--v2-navy-deep); }

/* ── De zee: perkament ────────────────────────────────────── */
/* Perkament draagt nu de hele pagina, van boven tot onder. Geen verloop meer,
   geen vlakken die ergens beginnen of ophouden: één bureau waar de rest op
   ligt. */
body{
  background-color:var(--v2-parch);
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.4'/%3E%3C/svg%3E");
  background-size:200px 200px;
  background-repeat:repeat;
}

/* ── De eilanden: vellen papier ───────────────────────────── */
/* Wit papier op het perkament. Bewust niet élke sectie — dan krijg je opnieuw
   een stapel identieke blokken, alleen in een andere kleur. Het ritme is:
   vel, vel, open zee, vel. Zie de toewijzing in variant-v2.html.
   Waar een sectie al uit kaartjes bestaat (het tourgrid) zijn díé de vellen;
   papier op papier stapelen leest rommelig. */
.v2-eiland{
  position:relative;
  background:var(--v2-paper);
  max-width:1280px;
  /* Verticale marges van buren klappen samen, dus dit is de hele zee tussen
     twee vellen — niet twee keer deze waarde. Bij 2,5rem las het als een
     stapel; nu ligt er echt water tussen.
     De binnenruimte gaat tegelijk omlaag van 6,5 naar 5rem: de rand van het
     vel bakent de sectie nu af, dus die lucht is niet meer nodig binnenín. */
  margin:4rem auto;
  padding-block:5rem;
  border-radius:24px;
  padding-inline:clamp(1.25rem, 4vw, 3rem);
  /* Twee schaduwen: een korte voor de rand van het vel, een lange en zachte
     voor de hoogte erboven. Eén schaduw leest als een doos, twee als papier. */
  box-shadow:
    0 1px 2px rgba(60,45,20,.06),
    0 18px 44px rgba(60,45,20,.07);
}

/* Katoenkorrel op het papier zelf. Fijner dan de ruis van de zee — hogere
   frequentie, minder octaven — zodat het als vezel in katoenpapier leest en
   niet als ruis op een foto. Superfijn met opzet: je hoort het niet te zien,
   je hoort te merken dat het vlak niet dood is. */
.v2-eiland::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='katoen'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23katoen)' opacity='0.35'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.028;
  mix-blend-mode:multiply;
}
/* De inhoud boven de korrel houden, anders ligt de vezel over de tekst. */
.v2-eiland > *{ position:relative; z-index:1; }

@media (max-width:767px){
  .v2-eiland{ margin:1.25rem .75rem; border-radius:16px; }
}

/* ── Navy vel ─────────────────────────────────────────────── */
/* Vier witte vellen achter elkaar werd te veel wit. Deze twee secties krijgen
   daarom het donkere materiaal: "Hoe het werkt" en "Over ons". Het blijft een
   eiland — inspringend, met dezelfde ronding en schaduw — dus het leest als
   een vel van ander papier en niet als de balken van vroeger.
   De tekstkleuren zitten hier, niet als modifier per element in de HTML: dan
   hoef je bij het omzetten van een sectie maar één klasse te wisselen. */
.v2-eiland--navy{
  background:linear-gradient(160deg,#1a2445 0%,var(--v2-navy-deep) 55%,#060e1e 100%);
  color:#f0e8d5;
  box-shadow:
    0 1px 2px rgba(8,12,30,.18),
    0 22px 52px rgba(8,12,30,.20);
}
/* Op donker papier valt de korrel juist op in plaats van weg, dus die gaat uit. */
.v2-eiland--navy::before{ display:none; }

.v2-eiland--navy .v2-eyebrow{ color:var(--v2-gold); }
.v2-eiland--navy .v2-headline{ color:#f0e8d5; }
.v2-eiland--navy .v2-lead{ color:#e5dcc5; opacity:.85; }
.v2-eiland--navy .about-body p{ color:#e5dcc5; opacity:.85; }
.v2-eiland--navy .about-body a{ color:var(--v2-gold); }

/* De drie stappen op donker papier. Goud voor de nummers, perkament voor de
   tekst — dezelfde rolverdeling als in de footer. */
.v2-eiland--navy .step-num{
  background:rgba(197,160,89,.14); border-color:rgba(197,160,89,.5);
  color:var(--v2-gold);
}
.v2-eiland--navy .step-item h3{ color:#f0e8d5; }
.v2-eiland--navy .step-item p{ color:#e5dcc5; opacity:.8; }
.v2-eiland--navy .step-badge{
  color:#e5dcc5; border-color:rgba(197,160,89,.35);
}
.v2-eiland--navy .step-badge i{ color:var(--v2-gold); }
.v2-eiland--navy .v2-btn--outline{
  color:var(--v2-gold); border-color:rgba(197,160,89,.55);
}
.v2-eiland--navy .v2-btn--outline:hover{
  background:var(--v2-gold); color:var(--v2-navy-deep); border-color:var(--v2-gold);
}

/* De haarlijn met het gouden zegel die hier stond is weg. Die was er om
   secties te scheiden toen de hele pagina één naadloos vlak was; nu doen de
   randen van de vellen en de zee ertussen dat werk. Een lijn erbij zou een
   scheiding markeren die al zichtbaar is. Staat in de historie voor als de
   eilanden ooit sneuvelen. */
/* Op een donkere sectie zou een gouden lijn eroverheen liggen; die hoort daar
   niet, want het kleurvlak scheidt daar al. */
.v2-section--dark + .v2-section::before,
.v2-section + .v2-section--dark::before{ display:none; }

.v2-wrap{ max-width:1180px; margin:0 auto; padding:0 2rem; }
.v2-wrap--narrow{ max-width:820px; }
.v2-center{ text-align:center; margin-top:3rem; }
.v2-center-text{ text-align:center; }
.v2-sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

.v2-eyebrow{
  font-family:var(--font-ui); font-size:.68rem; font-weight:500;
  letter-spacing:.38em; text-transform:uppercase;
  color:var(--v2-gold-dp); margin:0 0 1rem;
}
.v2-eyebrow--on-dark{ color:var(--v2-gold); }

.v2-headline{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.15;
  color:var(--v2-ink); margin:0 0 1.1rem;
}
.v2-headline--on-dark{ color:#f0e8d5; }

.v2-lead{
  font-family:var(--font-body); font-style:italic;
  font-size:1.25rem; line-height:1.6; color:var(--v2-ink);
  opacity:.78; max-width:44rem; margin:0 0 3rem;
}
.v2-lead--on-dark{ color:#e5dcc5; opacity:.8; }

.v2-note{
  font-family:var(--font-body); font-style:italic; font-size:1.02rem;
  color:var(--v2-ink); opacity:.72; margin:2.5rem 0 0; max-width:44rem;
}

.v2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--font-ui); font-size:.72rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.1rem; border-radius:8px; cursor:pointer;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.v2-btn i{ width:16px; height:16px; }
.v2-btn--outline{ background:transparent; color:var(--v2-gold-dp); border:1.5px solid var(--v2-gold-dp); }
.v2-btn--outline:hover{ background:var(--v2-gold-dp); color:var(--v2-cream); }
.v2-btn--solid{ background:var(--v2-gold); color:#1a1206; border:1.5px solid var(--v2-gold); }
.v2-btn--solid:hover{ background:#d4af37; border-color:#d4af37; }
.v2-btn--ghost{ background:transparent; color:#f0e8d5; border:1.5px solid rgba(240,232,213,.45); }
.v2-btn--ghost:hover{ border-color:var(--v2-gold); color:var(--v2-gold); }

/* ── Tourlijst (compact) ─────────────────────────────────── */
.tour-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--v2-parch-dk); }
.tour-list-item{
  display:grid;
  grid-template-columns:minmax(9rem,1.1fr) minmax(0,1.6fr) auto auto;
  gap:1.5rem; align-items:center;
  padding:1.5rem .5rem; border-bottom:1px solid var(--v2-parch-dk);
}
.tour-list-name{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.35rem; color:var(--v2-ink);
}
.tour-list-meta{
  font-family:var(--font-body); font-size:1.02rem;
  color:var(--v2-ink); opacity:.62;
}
.tour-list-status{
  font-family:var(--font-ui); font-size:.62rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--v2-gold-dp);
  border:1px solid rgba(197,160,89,.5); border-radius:999px;
  padding:.4rem .85rem; white-space:nowrap; justify-self:start;
}
.tour-list-status.is-soon{ color:var(--v2-ink-soft); border-color:rgba(58,63,86,.28); }
.tour-list-status.is-live{ color:#2f6b46; border-color:rgba(47,107,70,.4); }
.tour-list-cta{
  font-family:var(--font-ui); font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; white-space:nowrap;
  color:var(--v2-gold-dp); border-bottom:1px solid rgba(197,160,89,.5);
  padding-bottom:2px; justify-self:end; transition:color .2s ease;
}
.tour-list-cta:hover{ color:var(--v2-ink); border-color:var(--v2-ink); }
.tour-list-cta.is-muted{ color:var(--v2-ink); opacity:.4; border-bottom:none; }
.tour-list-item.is-available{ background:rgba(197,160,89,.07); }

@media (max-width:820px){
  .tour-list-item{ grid-template-columns:1fr auto; row-gap:.55rem; }
  .tour-list-meta{ grid-column:1/-1; order:3; }
  .tour-list-cta{ grid-column:1/-1; order:4; justify-self:start; }
}

/* ── Quotes ──────────────────────────────────────────────── */
.quote-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.6rem; }
.quote-card{
  margin:0; padding:0 0 0 1.4rem;
  border-left:2px solid var(--v2-gold);
}
.quote-card p{
  font-family:var(--font-display); font-style:italic;
  font-size:1.22rem; line-height:1.5; color:var(--v2-ink); margin:0 0 .8rem;
}
.quote-card cite{
  font-family:var(--font-ui); font-style:normal; font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--v2-ink); opacity:.5;
}

/* ── Feature-grid (wat is een tour) ──────────────────────── */
.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.6rem; }
.feature-card{
  background:rgba(245,237,216,.05); border:1px solid rgba(197,160,89,.22);
  border-radius:14px; padding:2rem 1.7rem;
}
.feature-icon{
  display:flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%;
  background:rgba(197,160,89,.12); border:1px solid rgba(197,160,89,.35);
  margin-bottom:1.2rem;
}
.feature-icon i{ width:20px; height:20px; color:var(--v2-gold); stroke-width:1.5; }
.feature-card h3{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.22rem; color:#f0e8d5; margin:0 0 .6rem;
}
.feature-card p{
  font-family:var(--font-body); font-size:1.05rem; line-height:1.55;
  color:#e5dcc5; opacity:.75; margin:0;
}
.feature-tag{
  display:inline-block; font-family:var(--font-ui); font-size:.52rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--v2-gold);
  border:1px solid rgba(197,160,89,.45); border-radius:999px;
  padding:.2rem .5rem; margin-left:.4rem; vertical-align:middle;
  font-style:normal; font-weight:500;
}

/* ── Stappen ─────────────────────────────────────────────── */
.step-list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:2.4rem;
}
.step-item{ position:relative; padding-top:.5rem; }
.step-num{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--v2-parch); border:1.5px solid var(--v2-gold);
  font-family:var(--font-display); font-size:1.2rem; color:var(--v2-gold-dp);
  margin-bottom:1.1rem;
}
.step-item h3{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.28rem; color:var(--v2-ink); margin:0 0 .55rem;
}
.step-item p{
  font-family:var(--font-body); font-size:1.08rem; line-height:1.55;
  color:var(--v2-ink); opacity:.75; margin:0;
}
.step-badges{ display:flex; gap:.6rem; margin-top:1rem; flex-wrap:wrap; }
.step-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--v2-ink-soft);
  border:1px solid rgba(58,63,86,.25); border-radius:6px; padding:.5rem .8rem;
}
.step-badge i{ width:13px; height:13px; }

/* ── Het tourspoor ───────────────────────────────────────── */
/* De naad ligt op 38%, niet op de helft. Links de kop, rechts een spoor dat
   doorloopt tot voorbij de rechterrand van het scherm. Dat afgesneden kaartje
   is het hele punt: een net afgesloten rij vraagt nergens om, een rij die het
   beeld uit loopt vraagt erom verder te kijken.

   Geen eiland eronder — het spoor moet de rand kunnen raken, en een vel met
   een marge eromheen kan dat per definitie niet. */
/* .v2-section.tour-rail en niet .tour-rail alleen: verderop staat in een
   mobiele mediaquery nog .v2-section{ padding:4.5rem 0 }, en die zou met
   gelijke gewichtsklasse én latere plek de zijmarges hier terugzetten op nul.
   Dat deed hij ook: op een telefoon plakte de hele sectie tegen de linkerrand. */
.v2-section.tour-rail{
  display:grid;
  /* 30% en niet 38%: bij 38 landde de naad op 47,5% van het scherm, en dat is
     zo dicht bij de helft dat je er niets van merkt. Nu ligt hij rond 40% —
     ver genoeg uit het midden om als keuze te lezen. */
  grid-template-columns:minmax(0, 30%) minmax(0, 1fr);
  align-items:stretch;   /* het paneel loopt van boven tot onder mee */
  gap:0;                 /* geen kier: het kaartje verdwijnt áchter het paneel */
  padding-inline:0;      /* het paneel loopt zelf tot de rand van de pagina */
  overflow:hidden;       /* het spoor mag naar rechts weg, niet de pagina breed maken */
}

/* ── Het navy paneel ─────────────────────────────────────── */
/* Loopt links het beeld uit en houdt aan de rechterkant op waar het spoor
   begint. Dat lost meteen het lelijkste van deze sectie op: de kaartjes werden
   hard afgekapt op een onzichtbare grens, en nu schuiven ze zichtbaar áchter
   iets langs. Een rand die iets ís, leest als diepte; een rand die alleen
   afkapt, leest als een fout.
   Dit is ook de naad uit het Van Gogh-voorbeeld: een kleurvlak en beeld die
   elkaar raken buiten het midden. */
.rail-kop{
  background:linear-gradient(160deg,#1a2445 0%,var(--v2-navy-deep) 58%,#060e1e 100%);
  color:#f0e8d5;
  padding:4.5rem clamp(1.5rem, 3vw, 2.75rem) 4.5rem
          max(1.25rem, calc((100vw - 1180px) / 2));
  display:flex; flex-direction:column; justify-content:center;
  position:relative; z-index:2;    /* boven het spoor, zodat het écht dekt */
  box-shadow:14px 0 34px rgba(8,12,30,.16);   /* schaduw ván het paneel óp het spoor */
}
.rail-kop .v2-eyebrow{ color:var(--v2-gold); }
.rail-kop .v2-headline{ color:#f0e8d5; }
.rail-kop .v2-lead{ color:#e5dcc5; opacity:.85; max-width:26rem; }

/* De wenk onder de kop: een lijn die naar rechts wijst, precies de kant op
   waar het spoor heen gaat. Verdwijnt zodra je gescrold hebt — een aanwijzing
   die blijft staan nadat je hem hebt opgevolgd is een verwijt. */
.rail-wenk{
  display:flex; align-items:center; gap:.7rem; margin:2rem 0 0;
  font-family:var(--font-ui); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--v2-gold);
  transition:opacity .4s ease;
}
.rail-wenk.is-weg{ opacity:0; }
.rail-wenk-lijn{
  display:block; width:3.5rem; height:1px; background:currentColor; opacity:.6;
}

.rail-spoor{
  display:flex; gap:1.5rem;
  overflow-x:auto; overflow-y:hidden;
  /* GEEN scroll-snap. Dat stond hier wel en maakte het spoor stroef: elke
     kleine zijwaartse beweging veerde terug naar het dichtstbijzijnde
     snappunt, waardoor zachtjes terugscrollen niets leek te doen. Vrij
     scrollen laat de bezoeker zelf bepalen waar hij stopt. */
  overscroll-behavior-x:contain;
  padding:1rem 25vw 2.5rem 0;   /* rechts ruimte, zodat het laatste kaartje vrij komt */

  padding-left:2rem;
  /* Alleen aan de rechterkant vervagen. Links doet het navy paneel het werk —
     daar schuift het kaartje ergens áchter, en dat hoort een harde rand te
     zijn. Rechts is er niets om achter te verdwijnen, dus daar lost het op in
     het perkament; wel smal, want je moet blijven zien dat er meer staat. */
  --mask: linear-gradient(90deg, #000 0, #000 calc(100% - 3rem), transparent 100%);
  -webkit-mask-image: var(--mask);
          mask-image: var(--mask);
}

/* ── De voortgangsbalk ───────────────────────────────────── */
/* De balk van het besturingssysteem gaat eraf: op een Mac zweeft die, neemt
   geen ruimte in en verschijnt alleen tijdens het scrollen — en of hij jouw
   kleur krijgt hangt af van een systeeminstelling. Te wankel voor iets wat
   deel van het ontwerp moet zijn. Bedienen kan sowieso met de knoppen, de
   pijltjestoetsen, het wiel en op aanraking. */
.rail-spoor{ scrollbar-width:none; }
.rail-spoor::-webkit-scrollbar{ display:none; }

.rail-voortgang{
  grid-column:2; align-self:start;
  height:3px; margin:0 3rem 0 2rem;
  background:rgba(197,160,89,.22); border-radius:99px; overflow:hidden;
}
.rail-voortgang span{
  display:block; height:100%; width:100%;
  background:var(--v2-gold-dp); border-radius:99px;
  transform-origin:left center;
  transition:transform .12s linear;
}
@media (prefers-reduced-motion: reduce){
  .rail-voortgang span{ transition:none; }
}
@media (max-width:900px){
  .rail-voortgang{ grid-column:1; margin:0 1.25rem; }
}

.rail-spoor:focus-visible{ outline:2px solid var(--v2-gold-dp); outline-offset:4px; }

/* ── Het kaartje in het midden groeit ────────────────────── */
/* --nabij loopt van 0 (aan de rand) naar 1 (in het midden); main.js schrijft
   die waarde bij elke scroll. Geen sprongen dus, maar meegroeien en
   meekrimpen terwijl je schuift. De uitslag is klein met opzet: 4,5% is genoeg
   om het middelste kaartje te laten voelen als het kaartje waar je naar kijkt,
   en klein genoeg om binnen de tussenruimte te blijven. */
.rail-spoor .tour-card{
  flex:0 0 clamp(15rem, 24vw, 19rem);
  --nabij:0;
  transform:scale(calc(1 + var(--nabij) * .045));
  transform-origin:center bottom;
}
@media (prefers-reduced-motion: reduce){
  .rail-spoor .tour-card{ transform:none; }
}

/* ── Bediening van het spoor ─────────────────────────────── */
/* Niet iedereen heeft een muis met zijwiel, en slepen is op een desktop een
   rare beweging. Deze twee knoppen doen hetzelfde als de pijltjestoetsen: één
   kaartje opzij. */
.rail-knoppen{ display:flex; gap:.6rem; margin-top:1.6rem; }
.rail-knop{
  width:2.9rem; height:2.9rem; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:transparent; cursor:pointer;
  border:1px solid rgba(197,160,89,.5); border-radius:50%;
  color:var(--v2-gold);   /* op navy mag het heldere goud, dat haalt daar ruim contrast */
  transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.rail-knop:hover:not(:disabled){
  background:var(--v2-gold); color:var(--v2-navy-deep); border-color:var(--v2-gold);
}
.rail-knop:focus-visible{ outline:2px solid var(--v2-gold); outline-offset:3px; }
.rail-knop:disabled{ opacity:.28; cursor:default; }
.rail-knop svg{ width:1.05rem; height:1.05rem; }

@media (prefers-reduced-motion: reduce){
  .rail-knop{ transition:none; }
}
/* Het te-koop-kaartje is breder: het is het enige dat je nú kunt lopen, en
   gelijke maten zouden dat verzwijgen. */
.rail-spoor .tour-card.is-buyable{ flex-basis:clamp(18rem, 30vw, 24rem); }

@media (max-width:900px){
  .v2-section.tour-rail{
    grid-template-columns:1fr;
    /* Géén inspringing hier: die zette het paneel 20px van de linkerrand
       terwijl het rechts wél doorliep, en dat leest als een fout in plaats
       van als een keuze. Het paneel raakt nu beide randen en zet zijn eigen
       tekstmarge van binnen. */
    padding-inline:0;
  }
  .rail-kop{
    padding:3rem 1.25rem 2.5rem;   /* 4,5rem was op een telefoon een leeg veld */
    box-shadow:0 14px 30px rgba(8,12,30,.16);   /* schaduw omlaag i.p.v. opzij */
  }
  .rail-spoor{ padding:1.5rem 18vw 2.5rem 1.25rem; }
}

/* ── De herkomstregel ────────────────────────────────────── */
/* Klein, in de mono-stijl van een catalogus. Dit is het bewijs onder "echt
   gebeurd, geen verzinsel": maker, jaar, collectie, inventarisnummer — en waar
   we een permalink hebben, klik je door naar de bron zelf. */
.tour-bron{
  font-family:var(--font-ui);
  font-size:.58rem; line-height:1.6; letter-spacing:.04em;
  color:var(--v2-ink); opacity:.55;
  margin:0 0 1rem; padding-left:.65rem;
  border-left:1px solid rgba(197,160,89,.5);
}
.tour-bron a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid rgba(197,160,89,.45);
}
.tour-bron a:hover,
.tour-bron a:focus-visible{ opacity:1; color:var(--v2-gold-dp); border-color:currentColor; }

/* ── Tourgrid (visueel) ──────────────────────────────────── */
.tour-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:1.7rem; }
.tour-card{
  /* Het tourgrid ligt op een wit vel, dus de kaartjes zijn perkament: warme
     voorwerpen op wit papier. Andersom — wit op wit — zouden ze in hun eigen
     ondergrond verdwijnen. */
  background:var(--v2-parch); border:1px solid var(--v2-parch-dk);
  border-radius:16px; overflow:hidden;
  box-shadow:
    0 1px 2px rgba(60,45,20,.05),
    0 12px 30px rgba(60,45,20,.06);
  display:flex; flex-direction:column;
  /* Anker voor het klikvlak van .tour-card-link hieronder. */
  position:relative;
  transition:box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
/* De hele tegel is klikbaar, niet alleen het linkje onderin. Bewust met een
   uitgerekt klikvlak in plaats van een klik-handler op de kaart: zo blijft het
   één echte link, dus rechtermuisknop, middenklik, tab-volgorde en het
   statusbalkje van de browser doen gewoon wat je verwacht. */
.tour-card-link::after{
  content:''; position:absolute; inset:0; z-index:1;
}
.tour-card:hover{
  border-color:rgba(197,160,89,.75);
  box-shadow:0 18px 40px rgba(8,12,30,.10);
  transform:translateY(-2px);
}
/* Toetsenbord: de focusring hoort om de hele tegel, want dat is het doel. */
.tour-card:focus-within{
  outline:2px solid var(--v2-gold-dp); outline-offset:3px;
}
.tour-card-link:focus-visible{ outline:none; }
@media (prefers-reduced-motion: reduce){
  .tour-card{ transition:none; }
  .tour-card:hover{ transform:none; }
}
.tour-card-img{ position:relative; aspect-ratio:4/3; }

/* ── Tijdreis op het kaartje ──────────────────────────────── */
/* Een kaartje kan meer dan één beeld dragen: de plek zoals hij er nu bij ligt,
   en hoe hij er vroeger uitzag. Zweef je erover, dan reist het beeld door de
   tijd — hetzelfde idee als de hero, maar in het klein. Dat is precies wat we
   verkopen, dus laat het zien in plaats van het uit te leggen.

   ZO ZET JE ER TIJDLAGEN IN:
   Zet meerdere <img> in .tour-card-img, in chronologische volgorde van nu naar
   vroeger, elk met een data-jaar:

     <div class="tour-card-img">
       <img src="public/assets/tours/sloten-nu.webp"   data-jaar="nu"   alt="Sloten vandaag" loading="lazy">
       <img src="public/assets/tours/sloten-1900.webp" data-jaar="1900" alt="…" loading="lazy">
       <img src="public/assets/tours/sloten.webp"      data-jaar="1730" alt="…" loading="lazy">
       <span class="tour-card-badge">Te koop</span>
     </div>

   Twee lagen of meer werkt; main.js pikt het vanzelf op. Eén <img> laat alles
   precies zoals het nu is, dus je kunt de tours een voor een omzetten. */
.tour-card-img.heeft-tijdlagen img{
  opacity:0;
  transition:opacity .55s ease;
}
.tour-card-img.heeft-tijdlagen img.is-actief{ opacity:1; }

/* Het jaartal hoort rechtsonder — de badge zit linksboven, dus ze botsen niet. */
.tour-jaar{
  position:absolute; right:.9rem; bottom:.9rem; z-index:2;
  font-family:var(--font-ui); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:#f4ecd9;
  background:rgba(6,14,30,.62); backdrop-filter:blur(6px);
  border:1px solid rgba(197,160,89,.4);
  border-radius:999px; padding:.3rem .7rem;
  opacity:0; transform:translateY(4px);
  transition:opacity .3s ease, transform .3s ease;
  pointer-events:none;
}
.tour-card-img.is-reizend .tour-jaar{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .tour-card-img.heeft-tijdlagen img,
  .tour-jaar{ transition:none; }
}
.tour-card-img--sloten{ background:linear-gradient(160deg,#e8d5a3,#8a6f3d 55%,#2a2415); }
.tour-card-img--tram{   background:linear-gradient(160deg,#c8d2e4,#5f7096 55%,#1c2439); }
.tour-card-img--rocroi{ background:linear-gradient(160deg,#e0c9a8,#96693f 55%,#2e1f13); }
.tour-card-img--zolen{  background:linear-gradient(160deg,#d4dcc8,#6c7f5c 55%,#232b1d); }
.tour-card-img--kees{   background:linear-gradient(160deg,#eddcc0,#a8814b 55%,#33261566); }
.tour-card-badge{
  position:absolute; top:.9rem; left:.9rem;
  font-family:var(--font-ui); font-size:.56rem; letter-spacing:.16em;
  text-transform:uppercase; color:#1a1206; background:var(--v2-gold);
  border-radius:999px; padding:.35rem .75rem;
}
.tour-card-badge.is-soon{ background:rgba(249,247,242,.9); color:var(--v2-ink-soft); }
.tour-card-badge.is-live{ background:#2f6b46; color:#eef6f0; }
.tour-card-body{ padding:1.5rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.tour-card-body h3{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.28rem; color:var(--v2-ink); margin:0 0 .5rem;
}
.tour-card-body p{
  font-family:var(--font-body); font-size:1.03rem; line-height:1.5;
  color:var(--v2-ink); opacity:.72; margin:0 0 1.2rem; flex:1;
}
.tour-card-link{
  font-family:var(--font-ui); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; text-decoration:none; color:var(--v2-gold-dp);
  align-self:flex-start; border-bottom:1px solid rgba(197,160,89,.5);
  padding-bottom:2px; transition:color .2s ease;
}
.tour-card-link:hover{ color:var(--v2-ink); border-color:var(--v2-ink); }
.tour-card-link.is-muted{ color:var(--v2-ink); opacity:.4; border-bottom:none; }

/* ── Twee knoppen onder de USP-tekst ─────────────────────── */
.landing-actions{ display:flex; flex-wrap:wrap; gap:.9rem; align-items:center; }
.landing-cta--solid{
  background:var(--v2-gold); color:#1a1206 !important;
  border:1.5px solid var(--v2-gold) !important;
}
.landing-cta--solid:hover{ background:#d4af37; border-color:#d4af37 !important; }
@media (max-width:767px){
  .landing-actions{ gap:.5rem; }
  #zr-landing-copy .landing-actions .landing-cta{ margin-top:0; }
}

/* ── Portretten bij de quotes ────────────────────────────── */
.quote-person{ display:flex; align-items:center; gap:.8rem; margin-top:1.1rem; }
.quote-face{
  flex:none; width:44px; height:44px; border-radius:50%;
  background:var(--v2-parch-dk); border:1px solid rgba(197,160,89,.45);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-style:italic; font-size:1.15rem;
  color:var(--v2-gold-dp);
  background-size:cover; background-position:center;
}
.quote-face img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.quote-person cite{ font-style:normal; display:flex; flex-direction:column; gap:.15rem; }
.quote-name{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1rem; color:var(--v2-ink);
}
.quote-role{
  font-family:var(--font-ui); font-size:.56rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--v2-ink); opacity:.5;
}

/* ── Echt beeld in de tourkaarten ────────────────────────── */
.tour-card-img img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
/* Archiefprenten zijn licht en vlak; dit verloop geeft de badge houvast
   en trekt de kaarten qua toon naar elkaar. */
.tour-card-img::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to bottom, rgba(10,14,30,.30) 0%, rgba(10,14,30,0) 45%);
}
.tour-card.is-buyable{ border-color:rgba(197,160,89,.55); }
button.tour-card-link{
  background:none; cursor:pointer; font:inherit;
  font-family:var(--font-ui); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--v2-gold-dp);
  border:0; border-bottom:1px solid rgba(197,160,89,.5);
  padding:0 0 2px; text-align:left;
}

/* ── Tour-popup ──────────────────────────────────────────── */
.tour-modal[hidden]{ display:none; }
.tour-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:2rem 1.2rem;
}
.tour-modal-backdrop{
  position:absolute; inset:0; background:rgba(6,10,22,.78);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
}
/* Het paneel scrollt zélf niet meer; dat doet .tour-modal-grid erbinnen.
   Reden: Chromium tekent een schuifbalk als rechte strook langs de rand en
   knipt hem niet bij op de border-radius, dus de ronding rechtsboven en
   rechtsonder werd afgesneden. Laat je de inhoud scrollen, dan valt die balk
   binnen het paneel en snijdt overflow:hidden hem netjes mee af.
   Bijvangst: de sluitknop scrolt niet meer weg, want die hangt aan het paneel. */
.tour-modal-panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  width:min(1020px,100%); max-height:calc(100vh - 4rem); overflow:hidden;
  background:var(--v2-cream); border-radius:18px;
  border:1px solid var(--v2-parch-dk);
  box-shadow:0 30px 90px rgba(4,8,20,.55);
  animation:modalIn .28s ease-out;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .tour-modal-panel{ animation:none; } }

.tour-modal-close{
  position:absolute; top:.7rem; right:.9rem; z-index:2;
  width:40px; height:40px; border-radius:50%; cursor:pointer;
  border:1px solid var(--v2-parch-dk); background:var(--v2-cream);
  /* Expliciet een systeemfont: Cormorant Garamond tekent × als een schuin
     dakje, en dan lijkt het geen sluitknop meer. */
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1.5rem; font-weight:300; line-height:1; color:var(--v2-ink);
  display:flex; align-items:center; justify-content:center; padding:0;
}
.tour-modal-close:hover{ border-color:var(--v2-gold); color:var(--v2-gold-dp); }

.tour-modal-grid{
  display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:2.4rem; padding:2.6rem;
  /* Dit is nu het scrollende deel. min-height:0 is nodig omdat een flex-kind
     anders niet kleiner wordt dan zijn inhoud en er dus niets te scrollen valt. */
  overflow-y:auto; min-height:0; flex:1;
}
.tour-modal-body .v2-headline{ margin-bottom:.9rem; }
/* De popup wordt uit tours.js getekend en heeft dus geen v2-eyebrow-marge
   uit de sectie-context; hier zelf zetten. */
.tour-modal-body .v2-eyebrow{ margin-bottom:.5rem; }

/* ── Bladeren tussen tours ───────────────────────────────── */
/* Staan buiten het paneel, tegen de schermranden — je bladert door de
   kaarten heen in plaats van door een lijst. */
.tour-modal-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:1px solid rgba(240,232,213,.3); background:rgba(13,21,48,.55);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:#f0e8d5; font-size:2rem; line-height:1; padding:0 0 4px;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.tour-modal-nav:hover{
  background:rgba(13,21,48,.8); border-color:var(--v2-gold); color:var(--v2-gold);
}
.tour-modal-nav:focus-visible{ outline:2px solid var(--v2-gold); outline-offset:3px; }
.tour-modal-nav[hidden]{ display:none; }
.tour-modal-nav--prev{ left:max(1rem, calc(50vw - 620px)); }
.tour-modal-nav--next{ right:max(1rem, calc(50vw - 620px)); }
.tour-modal-nav--prev:hover{ transform:translateY(-50%) translateX(-3px); }
.tour-modal-nav--next:hover{ transform:translateY(-50%) translateX(3px); }

@media (max-width:1180px){
  /* Geen ruimte meer naast het paneel: pijlen naar de onderrand, waar ze
     met een duim te bedienen zijn. Ze zweven dan over de lopende tekst, dus
     hier geen doorschijnende knop maar een dicht vlak met slagschaduw —
     anders lees je de zin eronder dwars door de knop heen. */
  .tour-modal-nav{
    top:auto; bottom:1.1rem; transform:none;
    width:48px; height:48px; font-size:1.7rem;
    background:var(--v2-navy-deep);
    border-color:rgba(197,160,89,.55);
    box-shadow:0 6px 20px rgba(4,8,20,.45);
  }
  .tour-modal-nav:hover{ background:#1a2445; }
  .tour-modal-nav--prev{ left:1rem; }
  .tour-modal-nav--next{ right:1rem; }
  .tour-modal-nav--prev:hover,
  .tour-modal-nav--next:hover{ transform:none; }
  /* Ruimte onder de laatste alinea zodat de knoppen nooit het slot van de
     tekst afdekken. */
  .tour-modal-grid{ padding-bottom:5.5rem; }
}

/* Telefoon met de route */
.modal-phone{
  position:relative; width:100%; max-width:250px; margin:0 auto;
  aspect-ratio:9/19; border-radius:34px; overflow:hidden;
  border:8px solid #1a2030; background:#0d1530;
  box-shadow:0 22px 50px rgba(6,10,22,.35);
}
.modal-phone img{ width:100%; height:100%; object-fit:cover; display:block; }
.modal-phone-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:74px; height:20px; background:#080c14; border-radius:0 0 12px 12px;
}
.modal-phone-bar{
  position:absolute; bottom:8px; left:50%; transform:translateX(-50%);
  width:30px; height:3px; border-radius:2px; background:rgba(255,255,255,.35);
}
.modal-phone-caption{
  font-family:var(--font-body); font-style:italic; font-size:.98rem;
  line-height:1.5; color:var(--v2-ink); opacity:.7;
  text-align:center; margin:1.2rem auto 0; max-width:24rem;
}

.modal-facts{
  list-style:none; margin:0 0 1.6rem; padding:0;
  display:flex; flex-wrap:wrap; gap:.5rem 1.6rem;
}
.modal-facts li{
  display:flex; align-items:center; gap:.45rem;
  font-family:var(--font-ui); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--v2-ink); opacity:.7;
}
.modal-facts i{ width:15px; height:15px; color:var(--v2-gold-dp); stroke-width:1.6; }
/* OpenStreetMap-vermelding onder de afstand en de looptijd: die komen uit
   een looproute op OSM-data (ODbL). Zie routeBronMarkup() in shop.js. */
.modal-facts-bron{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.06em; line-height:1.5;
  color:var(--v2-ink); opacity:.55; margin:-1.1rem 0 1.6rem;
}
.modal-facts-bron a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }

.modal-story{
  font-family:var(--font-body); font-size:1.08rem; line-height:1.6;
  color:var(--v2-ink); opacity:.82; margin:0 0 1rem;
}

/* Proefstop-speler */
.taster{
  margin:1.9rem 0 1.6rem; padding:1.4rem 1.3rem;
  background:rgba(197,160,89,.10);
  border:1px solid rgba(197,160,89,.4); border-radius:12px;
}
.taster-label{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--v2-gold-dp); margin:0 0 .95rem;
}
.taster-player{ display:flex; align-items:center; gap:1rem; }
.taster-play{
  flex:none; width:52px; height:52px; border-radius:50%; cursor:pointer;
  border:1.5px solid var(--v2-gold); background:var(--v2-gold);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s ease;
}
.taster-play:hover{ transform:scale(1.06); }
.taster-play:focus-visible{ outline:2px solid var(--v2-ink); outline-offset:3px; }
.taster-glyph{
  width:0; height:0; margin-left:4px;
  border-top:9px solid transparent; border-bottom:9px solid transparent;
  border-left:15px solid #1a1206;
}
.taster.is-playing .taster-glyph{
  margin-left:0; width:14px; height:16px; border:0; box-sizing:border-box;
  border-left:5px solid #1a1206; border-right:5px solid #1a1206;
}
.taster-meta{ flex:1; min-width:0; display:grid; grid-template-columns:1fr auto; gap:.35rem .8rem; align-items:center; }
.taster-title{
  grid-column:1/-1;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.05rem; color:var(--v2-ink);
}
.taster-bar{ height:3px; border-radius:2px; background:rgba(19,22,38,.18); overflow:hidden; }
.taster-bar i{ display:block; height:100%; width:0; background:var(--v2-gold-dp); }
.taster-time{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.1em;
  color:var(--v2-ink); opacity:.6; font-variant-numeric:tabular-nums;
}
.taster-hint{
  font-family:var(--font-body); font-style:italic; font-size:.95rem;
  color:var(--v2-ink); opacity:.68; margin:.95rem 0 0;
}

.taster-compare{
  width:100%; border-collapse:collapse; margin-bottom:1.8rem;
  font-family:var(--font-body); font-size:1rem;
}
.taster-compare th{
  text-align:left; padding:.55rem .7rem;
  font-family:var(--font-ui); font-size:.58rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--v2-gold-dp); font-weight:600;
  border-bottom:1px solid var(--v2-parch-dk);
}
.taster-compare td{
  padding:.55rem .7rem; color:var(--v2-ink); opacity:.8;
  border-bottom:1px solid var(--v2-parch-dk); vertical-align:top;
}
.taster-compare td:last-child{ opacity:1; }

.modal-buy-note{
  font-family:var(--font-body); font-style:italic; font-size:.95rem;
  color:var(--v2-ink); opacity:.65; margin:.9rem 0 0;
}

@media (max-width:840px){
  .tour-modal{ padding:0; }
  .tour-modal-panel{ max-height:100vh; border-radius:0; width:100%; }
  .tour-modal-grid{ grid-template-columns:1fr; gap:1.5rem; padding:3.2rem 1.4rem 2.4rem; }
  /* Stond op 190px breed = 400px hoog: dan is de kaart het hele eerste
     scherm en moet je scrollen voor je weet waar je naar kijkt. Nu bepaalt
     de hoogte de maat, zodat er altijd tekst meekomt. */
  .modal-phone{ max-width:none; width:auto; height:min(38vh, 320px); aspect-ratio:9/19; }
  .modal-phone-caption{ font-size:.92rem; margin-top:.9rem; }
}

/* ── Partners ────────────────────────────────────────────── */
.partner-row{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:1rem 2.8rem;
}
.partner-row li{
  font-family:var(--font-body); font-style:italic; font-size:1.05rem;
  color:var(--v2-ink); opacity:.68;
  display:flex; align-items:center;
}

/* Logo's in plaats van namen. Zet het bestand in public/assets/partners/ en
   vervang de naam in de <li> door:
     <img src="public/assets/partners/naam.svg" alt="Naam van de partner">
   De naam gaat naar de alt-tekst, zodat hij niet verdwijnt voor wie geen
   beeld ziet. SVG of PNG met transparante achtergrond werkt het beste.
   Hoogte is leidend, breedte volgt — zo staan brede en vierkante logo's
   naast elkaar toch op één optische lijn. */
.partner-row img{
  display:block; height:34px; width:auto; max-width:180px;
  object-fit:contain;
  /* De rij is een ondersteunende regel, geen logomuur: grijs en ingehouden,
     zodat vijf verschillende huisstijlen de sectie niet uit elkaar trekken. */
  filter:grayscale(1); opacity:.72;
  transition:filter .25s ease, opacity .25s ease;
}
.partner-row li:hover img{ filter:grayscale(0); opacity:1; }
@media (max-width:640px){
  .partner-row img{ height:26px; max-width:130px; }
}
@media (prefers-reduced-motion: reduce){
  .partner-row img{ transition:none; }
}

/* ── CTA-band ────────────────────────────────────────────── */
/* Geen band over de volle breedte meer, maar een paneel dat op de ondergrond
   ligt. Zo blijft het donkere vlak een accent in plaats van de zoveelste
   strook: je ziet dat het ergens over gaat, niet dat er weer een sectie
   begint. */
.v2-cta-band{
  background:transparent;   /* de ondergrond komt van <body> */
  padding:2rem 0;
}
.v2-cta-band > *{
  background:linear-gradient(160deg,#1a2445 0%,var(--v2-navy-deep) 55%,#060e1e 100%);
  max-width:1180px; margin:0 auto; padding:5rem 2rem;
  border-radius:20px;
  box-shadow:0 26px 60px rgba(8,12,30,.16);
}
@media (max-width:767px){
  .v2-cta-band{ padding:1rem 0; }
  .v2-cta-band > *{ padding:3.5rem 1.5rem; border-radius:14px; margin:0 1rem; }
}
.v2-cta-headline{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2.2rem,4vw,3.4rem); color:#f0e8d5; margin:0 0 .8rem;
}
.v2-cta-sub{
  font-family:var(--font-body); font-style:italic; font-size:1.18rem;
  color:#e5dcc5; opacity:.75; margin:0 0 2.4rem;
}
.v2-cta-buttons{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list{ border-top:1px solid var(--v2-parch-dk); }
.faq-item{ border-bottom:1px solid var(--v2-parch-dk); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:1.35rem .3rem;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.16rem; color:var(--v2-ink);
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-family:var(--font-body); font-size:1.5rem;
  color:var(--v2-gold-dp); font-style:normal; line-height:1; flex:none;
}
.faq-item[open] summary::after{ content:"–"; }
.faq-item p{
  font-family:var(--font-body); font-size:1.08rem; line-height:1.6;
  color:var(--v2-ink); opacity:.75; margin:0 0 1.4rem; padding:0 .3rem;
  max-width:42rem;
}

/* ── Over ons ────────────────────────────────────────────── */
/* Stond op licht perkament (#e5dcc5) toen deze sectie nog een donker vlak had.
   Nu ligt hij op de gewone ondergrond, dus terug naar inkt — anders lees je
   hem niet. */
.about-body p{
  font-family:var(--font-body); font-size:1.15rem; line-height:1.7;
  color:var(--v2-ink); opacity:.82; margin:0 0 1.3rem;
}
/* Ook de link mee: --v2-gold haalt op deze ondergrond geen 4,5:1, de donkere
   variant wel (zie de toelichting bij --v2-gold-dp bovenaan dit bestand). */
.about-body a{ color:var(--v2-gold-dp); text-decoration:underline; text-underline-offset:3px; }

/* ══════════════════════════════════════════════════════════
   VERDIEPINGSPAGINA — wat-is-een-time-travel-tour.html
   ══════════════════════════════════════════════════════════ */

/* Deze pagina heeft geen donkere hero waar de nav overheen kan liggen,
   dus krijgt de balk een eigen vlak. Anders staat cremekleurige tekst op
   een cremekleurige achtergrond. */
.page-nav{
  background:var(--v2-navy-deep);
  border-bottom:1px solid rgba(197,160,89,.22);
}
.page-body{ background:var(--v2-cream); }

/* De navigatiebalk is ALTIJD donker — transparant over de donkere hero, of
   met een eigen navy vlak. De logotekst en de koopknop hingen aan --text en
   --navy-deep, en die keren om in het lichte thema: dan werd de merknaam
   navy-op-navy (onzichtbaar) en de knoptekst bijna wit op goud. Hier
   losgekoppeld van het thema. */
.nav-logo, .nav-logo-text{ color:#f0e8d5; }
.nav-cta{ color:#1a1206; }


.page-hero{
  background:linear-gradient(165deg,#1a2445 0%,var(--v2-navy-deep) 60%,#060e1e 100%);
  padding:9rem 0 5rem;   /* bovenruimte houdt de vaste nav vrij */
  text-align:center;
}
.page-hero-title{
  font-family:var(--font-display); font-style:italic; font-weight:500;
  font-size:clamp(2.2rem,4.6vw,3.6rem); line-height:1.1;
  color:#f0e8d5; margin:0 0 1.2rem;
}
.page-hero-lead{
  font-family:var(--font-body); font-style:italic;
  font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.6;
  color:#e5dcc5; opacity:.82; margin:0 auto; max-width:38rem;
}

.prose p{
  font-family:var(--font-body); font-size:1.12rem; line-height:1.7;
  color:var(--v2-ink); opacity:.85; margin:0 0 1.2rem;
}
.prose a{ color:var(--v2-gold-dp); text-underline-offset:3px; }

.promise-list{
  list-style:none; margin:2.6rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:1.6rem;
}
.promise-list li{
  padding:1.4rem 1.3rem; border-radius:12px;
  background:var(--v2-parch); border:1px solid var(--v2-parch-dk);
}
.promise-list strong{
  display:block; margin-bottom:.4rem;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.1rem; color:var(--v2-ink);
}
.promise-list span{
  font-family:var(--font-body); font-size:1.02rem; line-height:1.5;
  color:var(--v2-ink); opacity:.75;
}

.step-list--wide{ grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); }
.step-aside{
  font-family:var(--font-body); font-style:italic; font-size:.98rem !important;
  line-height:1.5; color:var(--v2-ink); opacity:.6 !important;
  margin-top:.8rem !important;
  padding-left:.9rem; border-left:2px solid rgba(197,160,89,.4);
}

/* App-uitleg met schermafbeeldingen */
.app-steps{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); gap:2.4rem;
}
.app-step{ margin:0; }
.app-shot{
  width:100%; max-width:210px; margin:0 auto 1.4rem;
  aspect-ratio:9/19; border-radius:28px; overflow:hidden;
  border:7px solid #1a2030; background:#0d1530;
  box-shadow:0 20px 44px rgba(4,8,20,.45);
}
.app-shot img{ width:100%; height:100%; object-fit:cover; display:block; }
.app-step h3{
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.22rem; color:#f0e8d5; margin:0 0 .55rem; text-align:center;
}
.app-step p{
  font-family:var(--font-body); font-size:1.04rem; line-height:1.6;
  color:#e5dcc5; opacity:.78; margin:0; text-align:center;
}
/* Van wie de kaart in de schermafbeelding is: Mapbox-tegels op
   OpenStreetMap-data. Beide licenties vragen een zichtbare vermelding bij
   de kaart zelf, dus deze regel staat direct onder het scherm. */
.app-step .app-shot-bron{
  font-family:var(--font-ui); font-size:.62rem; letter-spacing:.06em;
  line-height:1.5; opacity:.6; margin:-.8rem 0 1.2rem;
}
.app-shot-bron a{
  color:inherit; text-decoration:underline; text-underline-offset:2px;
}
.app-note{
  font-family:var(--font-body); font-style:italic; font-size:1.05rem;
  line-height:1.6; color:#e5dcc5; opacity:.7;
  margin:3rem auto 0; max-width:44rem; text-align:center;
}

/* ── Footer-uitbreiding ──────────────────────────────────── */
.footer-links-extra{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:.9rem; }
.footer-links-extra a{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.14em;
  text-transform:uppercase; color:rgba(240,232,213,.5);
  text-decoration:none; transition:color .2s ease;
}
.footer-links-extra a:hover{ color:var(--v2-gold); }

@media (max-width:640px){
  .v2-section{ padding:4.5rem 0; }
  .v2-wrap{ padding:0 1.3rem; }
}

/* ── Terug naar de tour, boven de kassa ──────────────────── */
/* Zonder deze knop is de kassa een doodlopende weg: je kunt alleen nog
   betalen of de browser-terugknop zoeken. */
.checkout-back{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-bottom:1.6rem; text-decoration:none;
  font-family:var(--font-ui); font-size:.64rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--v2-gold-dp);
  transition:color .2s ease, gap .2s ease;
}
.checkout-back span:first-child{ font-size:1.15rem; line-height:1; }
.checkout-back:hover{ color:var(--v2-ink); gap:.7rem; }
.checkout-back:focus-visible{ outline:2px solid var(--v2-gold); outline-offset:3px; }

/* ══════════════════════════════════════════════════════════
   MOBIEL — de brief zegt mobiel-eerst: "dit wordt op straat en
   op de bank gekocht". Deze regels staan hier en niet in
   style.css, omdat de oude live index.html diezelfde stylesheet
   deelt en daar niets aan mag veranderen zolang hij live staat.
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px){
  /* De scroll-hint stond op 24px met 0,32em spatiëring en nowrap: samen
     759px op een scherm van 375. Dat trok in z'n eentje de hele pagina
     horizontaal open. Nu mag hij afbreken. */
  .hero-scroll-hint{
    font-size:.66rem; letter-spacing:.2em;
    white-space:normal; text-align:center; line-height:1.6;
    max-width:min(80vw, 300px);
  }

  /* Raakvlakken. Apple en Google houden 44px aan; de knoppen in de balk
     zaten op 26–30px hoog. Op een muis merk je dat niet, met een duim in
     de tram wel. */
  #lang-toggle{ min-width:40px; min-height:40px; }
  /* Op één regel houden: "KOOP NU — €14,95" brak in tweeën en maakte de
     balk twee keer zo hoog. */
  .nav-cta{ padding:.7rem .85rem; font-size:.55rem; white-space:nowrap; }
  #nav{ gap:.5rem; }

  /* De koop-/bekijkknop op een tourkaart is de belangrijkste actie van de
     hele kaart en was een tekstregel van 19px hoog. */
  .tour-card-link, button.tour-card-link{
    padding:.55rem 0; display:inline-block;
  }

  /* Footerlinks staan dicht op elkaar; wat lucht ertussen scheelt mistikken. */
  .footer-links-extra{ gap:.3rem 1.4rem; }
  .footer-links-extra a, .footer-link{ padding:.35rem 0; display:inline-block; }
}

/* ── Cadeaupagina ────────────────────────────────────────── */
.cad-beeld{
  margin:0 0 2.6rem; border-radius:14px; overflow:hidden;
  aspect-ratio:21/9; box-shadow:0 18px 40px rgba(8,12,30,.12);
}
.cad-beeld img{ width:100%; height:100%; object-fit:cover; display:block; }

.cad-redenen{
  list-style:none; margin:3rem 0 0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:1.5rem;
}
.cad-redenen li{
  padding-top:1.1rem; border-top:2px solid var(--v2-gold);
}
.cad-redenen strong{
  display:block; margin-bottom:.4rem;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.1rem; color:var(--v2-ink);
}
.cad-redenen span{
  font-family:var(--font-body); font-size:1.02rem; line-height:1.55;
  color:var(--v2-ink); opacity:.78;
}

.cad-gelegenheden{ margin:3rem 0 0; }
.cad-gelegenheden-kop{
  font-family:var(--font-ui); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--v2-gold-dp); margin:0 0 1rem;
}
.cad-gelegenheden ul{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.cad-gelegenheden li{
  font-family:var(--font-body); font-style:italic; font-size:1.02rem;
  color:var(--v2-ink); opacity:.85;
  background:var(--v2-parch); border:1px solid var(--v2-parch-dk);
  border-radius:999px; padding:.55rem 1.1rem;
}

#cadeau-knoppen{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; }
.cad-luister{ text-align:center; margin:1.3rem 0 0; }
.cad-luister a{
  font-family:var(--font-body); font-style:italic; font-size:1.02rem;
  color:var(--v2-gold-dp); text-underline-offset:3px;
}
.cad-luister a:hover{ color:var(--v2-ink); }

@media (max-width:640px){
  .cad-beeld{ aspect-ratio:16/10; margin-bottom:1.8rem; }
  .cad-redenen{ gap:1.2rem; margin-top:2.2rem; }
  .cad-gelegenheden li{ font-size:.96rem; padding:.5rem .9rem; }
}

/* Drie stappen horen op één rij; met auto-fit vielen ze in 2+1 uiteen
   binnen de smalle tekstkolom van deze pagina. */
@media (min-width:760px){
  .cad-stappen{ grid-template-columns:repeat(3,1fr); gap:1.8rem; }
}

/* Hele korte schermen (iPhone SE 1e generatie, 568px). De telefoon zit daar
   al op zijn ondergrens van 165px, dus de rest moet van de tekst komen. */
@media (max-width:767px) and (max-height:640px){
  #zr-landing-copy .landing-headline--usp{ font-size:1.2rem !important; }
  #zr-landing-copy .usp-list{ gap:.35rem; margin-top:10px; }
  #zr-landing-copy .usp-icon{ width:28px; height:28px; }
  #zr-landing-copy .usp-item strong{ font-size:.85rem; }
  #zr-landing-copy .landing-actions{ margin-top:10px; }
  #zr-landing-copy{ padding-bottom:1.25rem; }
}

/* ── Tijdreis op één klik ───────────────────────────────── */
.hero-journey {
  position: absolute;
  left: 50%;
  bottom: 32%;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: max-content;
  max-width: calc(100% - 2.5rem);
}

.hero-journey[hidden] { display: none; }

.hero-journey-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  min-height: 44px;
  padding: 0.65rem 1.15rem;
  border: 1px solid #e8d5a3;
  border-radius: 999px;
  background: #c5a059;
  color: #0d1530;
  font: 600 0.7rem/1.4 var(--font-ui);
  letter-spacing: 0.1em;
  cursor: pointer;
  box-shadow: 0 4px 28px rgba(0,0,0,0.2);
  transition: background 0.2s;
}

.hero-journey-button:hover { background: #e8d5a3; }
.hero-journey-button:focus-visible,
.hero-journey-skip:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

.hero-journey-skip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.8rem;
  color: #f9f7f2;
  font: 400 1.1rem/1.4 var(--font-body);
  text-underline-offset: 4px;
  text-shadow: 0 1px 8px #060e1e;
}

.hero-journey:not([data-state="ready"]) {
  left: auto;
  right: 1.5rem;
  top: 6rem;
  bottom: auto;
  transform: none;
  align-items: flex-end;
}

.hero-journey:not([data-state="ready"]) .hero-journey-button {
  min-height: 44px;
  padding: 0.6rem 1rem;
  background: #0d1530;
  color: #e8d5a3;
  font-size: 0.65rem;
}

.hero-journey:not([data-state="ready"]) .hero-journey-skip { display: none; }

@media (max-width: 767px) {
  .quotes-compact .quote-grid, #hoe-het-werkt .step-list { grid-template-columns: minmax(0,1fr); }
  .hero-journey { bottom: 35%; }
  .hero-journey-button { font-size: 0.65rem; padding: 0.65rem 1rem; }
  .hero-journey:not([data-state="ready"]) { top: 5.5rem; right: 1.25rem; }
  .hero-journey[data-phase="reveal"] {
    top: auto;
    bottom: 1rem;
    right: 1rem;
  }
}

/* Once landed, only replay can restore the intro's scroll distance. */
#hero-spacer.is-landed { height: 100vh; overflow-anchor: none; }

/* Focus op de eerste tour, met de andere projecten apart. */
.quotes-compact { padding-block: 3.5rem; }
.quotes-compact .v2-headline { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.catalog-notice { margin: 1.5rem 0 2rem; padding: 1rem 1.2rem; border-left: 2px solid var(--v2-gold); background: rgba(197,160,89,.1); font: 1.1rem/1.6 var(--font-body); color: var(--v2-ink); }
.catalog-notice p + p { margin-top: .7rem; }
.catalog-featured { display: grid; gap: 1.75rem; }
.catalog-featured .tour-card { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
.catalog-featured .tour-card-body { padding: 2rem 2.2rem; }
.catalog-featured .tour-card-img { aspect-ratio: 5/4; }
.tour-catalog .tour-card-img img { width: 100%; height: 100%; object-fit: cover; }
.tour-catalog .tour-card-link::after { display: none; }
.tour-catalog .tour-card-link:focus-visible { outline: 2px solid var(--v2-gold-dp); outline-offset: 5px; }
.tour-catalog .tour-card-body .card-location { font: .65rem/1.5 var(--font-ui); letter-spacing: .1em; color: var(--v2-gold-dp); margin: 0 0 .6rem; }
.tour-catalog .tour-card-body h3 { font-size: 2.2rem; }
.tour-catalog .tour-card-body .card-lead { font-size: 1.2rem; line-height: 1.55; margin: .8rem 0 1.2rem; }
.card-facts { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 .8rem; padding: 0; }
.card-facts li { padding: .3rem .55rem; border: 1px solid rgba(128,99,52,.25); border-radius: 4px; font: .83rem/1.4 var(--font-body); }
.tour-catalog .tour-card-body .card-start { font-size: .95rem; margin: .2rem 0 1rem; }
.tour-catalog .tour-card-body .card-price { margin: auto 0 1.4rem; opacity: 1; }
.card-price strong { font-size: 1.6rem; font-weight: 600; }
.card-price span { display: block; font-size: .95rem; margin-top: .2rem; }
.card-source { padding: .85rem 1.1rem; color: var(--v2-gold-dp); font: .85rem/1.5 var(--font-body); }
.card-source summary { cursor: pointer; }
.card-source p { margin-top: .5rem; }
.card-source a { color: inherit; text-underline-offset: 3px; }
.catalog-more { margin-top: 2rem; border-block: 1px solid var(--v2-parch-dk); padding: 1.2rem 0; }
.catalog-more > summary { cursor: pointer; font: 1.25rem/1.5 var(--font-display); color: var(--v2-ink); }
.catalog-more[open] > summary { margin-bottom: 1.3rem; }
.catalog-projects { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.catalog-projects .tour-card-body h3 { font-size: 1.65rem; }
.tour-catalog .tour-card-body .card-status { font-size: .95rem; line-height: 1.5; margin-top: auto; margin-bottom: 1.2rem; }
.card-contact { align-self: flex-start; margin-top: .8rem; color: var(--v2-gold-dp); text-underline-offset: 3px; }
.partner-logos { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 2rem 1.5rem; list-style: none; padding: 0; margin: 2rem 0 0; }
.partner-logos li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.partner-brand { display: flex; justify-content: center; width: 100%; min-width: 0; text-decoration: none; }
.partner-brand:focus-visible { outline: 2px solid var(--v2-gold-dp); outline-offset: 5px; }
.partner-wordmark { align-items: center; min-height: 104px; font: italic 1.35rem var(--font-display); color: var(--v2-ink-soft); }
.partner-logo-box { display: flex; align-items: center; justify-content: center; width: 210px; max-width: 100%; height: 104px; padding: 4px; overflow: hidden; }
.partner-logo-box img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.partner-logo-box.kees img { flex-shrink: 0; width: 170px; height: 170px; max-height: none; }
.partner-logo-box.amsterdam { gap: 9px; }
.partner-logo-box.amsterdam img { width: auto; height: 51px; }
.partner-amsterdam-name { display: flex; flex-direction: column; text-align: left; font: 700 17px/17px Arial,sans-serif; color: #ec0000; }
.partner-amsterdam-name span:last-child { color: #000; }
.partner-role { font: .88rem/1.4 var(--font-body); color: var(--v2-ink-soft); margin-top: .6rem; }
@media (max-width: 767px) {
  #zr-landing-copy .landing-tagline { display: block; font-size: 1rem; line-height: 1.35; margin: .65rem auto 0; max-width: 28rem; }
  #zr-landing-copy .usp-item strong { font-size: .87rem; }
  #zr-landing-copy .landing-actions { flex-wrap: nowrap; gap: .5rem; }
  #zr-landing-copy .landing-cta { font-size: .55rem; letter-spacing: .08em; padding: .7rem .8rem; }
  .catalog-featured .tour-card { grid-template-columns: 1fr; }
  .catalog-featured .tour-card-img { aspect-ratio: 16/10; }
  .catalog-featured .tour-card-body { padding: 1.3rem; }
  .catalog-projects { grid-template-columns: 1fr; }
  .partner-logos { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.5rem 1rem; }
  .partner-logo-box { height: 85px; }
  .partner-logo-box.amsterdam { gap: 6px; }
  .partner-logo-box.amsterdam img { height: 39px; }
  .partner-amsterdam-name { font-size: 13px; line-height: 13px; }
}
/* Op korte telefoons mag de landingsuitleg langer zijn dan één scherm.
   Normaal scrollen houdt alle tekst en knoppen leesbaar, ook bij inzoomen. */
@media (max-width: 767px) and (max-height: 640px) {
  #hero-spacer.is-landed { height: auto; }
  #hero-spacer.is-landed .hero-pin-wrap { position: relative; height: auto; min-height: 100vh; }
  #hero-spacer.is-landed #zr-landing-copy { position: relative; inset: auto; display: block; padding: 345px 1.3rem 5rem; }
  #hero-spacer.is-landed .zr-stage,
  #hero-spacer.is-landed .zr-phone-ring,
  #hero-spacer.is-landed .zr-phone-ui {
    position: absolute; top: 92px; left: 50%;
    width: 110px !important; height: 220px !important;
    border-radius: 18px !important; transform: translateX(-50%) !important;
  }
  #hero-spacer.is-landed .zr-stage { clip-path: none !important; background-size: cover; overflow: hidden; }
  #hero-spacer.is-landed #zr-mob-title { display: none; }
}
#hero[data-journey-direction="forward"] #stage-modern { opacity: 0; }
#hero[data-journey-direction="forward"] #stage-medieval { opacity: 1; }
#hero[data-journey-direction="forward"] .zr-stage {
  background-image: linear-gradient(to bottom, rgba(6,14,30,.25), rgba(6,14,30,.15) 40%, rgba(6,14,30,.55)), url('public/assets/hero/hero-modern.webp');
  background-position: center;
}
#hero[data-journey-direction="forward"] .zr-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(8,5,0,.3), rgba(8,5,0,.1) 35%, rgba(8,5,0,.65)), url('public/assets/hero/hero-1275.webp') center 15% / cover;
  opacity: var(--journey-tour-opacity, 0);
}

/* Keep the menu reachable beside the longer English CTA on narrow phones. */
@media (max-width: 480px) {
  #nav { padding-inline: .75rem; }
  .nav-logo-img { width: 40px; height: 40px; }
  .nav-actions { gap: .5rem; }
  .nav-cta { font-size: .5rem; letter-spacing: .08em; padding-inline: .55rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-tagline.gold-shimmer, .hero-grain { animation: none; }
}

/* Onder de citaten, alleen in het Engels: de klanten spraken Nederlands
   (engels.md §5.4, Mirte 21 okt). Vóór JavaScript staat data-lang op nl. */
.quote-note{
  font-family:var(--font-ui); font-size:.7rem; letter-spacing:.04em;
  color:var(--v2-ink); opacity:.55; margin:1.4rem 0 0;
}
html:not([data-lang="en"]) .quote-note{ display:none; }