/* BEXX Verhuur — de fotogalerij als carrousel.
   Hoort bij js/galerij.js. Deze regels overschrijven de .gal-rij die als
   raster in elke wagenpagina staat; daarom moet dit bestand NA die inline
   <style> geladen worden, en dat doet het: de <link> staat eronder.
   Zonder JavaScript blijft het raster gewoon staan en werkt alles nog. */

.gc{ position:relative; }

.gc-spoor{
  display:flex;                       /* was een raster */
  grid-template-columns:none;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding:0;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;                 /* ruimte voor de schaduw bij hover */
}
.gc-spoor::-webkit-scrollbar{ display:none; }
.gc-spoor:focus-visible{ outline:2px solid var(--or); outline-offset:4px; border-radius:14px; }

.gc-spoor > .gal-k{
  scroll-snap-align:start;
  flex:0 0 min(84%, 340px);           /* de volgende foto piept er altijd naast */
}
/* --gc-t en --gc-d zet js/galerij.js, naar het aantal foto's op deze pagina. */
@media(min-width:760px){  .gc-spoor > .gal-k{ flex-basis:calc(100% / var(--gc-t,1.8) - 11px); } }
@media(min-width:1080px){ .gc-spoor > .gal-k{ flex-basis:calc(100% / var(--gc-d,2.6) - 11px); } }
.gc-bollen[hidden]{ display:none; }

/* ---- de pijlen ---- */
.gc-pijl{
  position:absolute; top:calc(50% - 34px); transform:translateY(-50%);
  width:46px; height:46px; border-radius:50%; border:1px solid var(--paper-2);
  background:rgba(255,255,255,.94); color:var(--ink);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 6px 22px rgba(20,22,26,.14); z-index:2;
  transition:background .16s ease, border-color .16s ease;
}
.gc-pijl:hover{ background:#fff; border-color:var(--or); }
.gc-pijl[hidden]{ display:none; }
.gc-vorig{ left:-10px; }
.gc-volgend{ right:-10px; }
@media(max-width:820px){
  /* Op een telefoon veegt u gewoon. De pijlen zouden er over de foto liggen
     en precies de plek innemen waar uw duim al bezig is. */
  .gc-pijl{ display:none; }
}

/* ---- de bolletjes ---- */
.gc-bollen{ display:flex; justify-content:center; gap:9px; margin-top:16px; }
.gc-bol{
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;   /* 44 px blijft 44 px */
}
.gc-bol::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--paper-2); transition:background .16s ease, width .16s ease;
}
.gc-bol.aan::after{ width:24px; border-radius:99px; background:var(--or); }
.gc-bol:hover::after{ background:var(--or-d, #E86420); }

/* ---------------------------------------------------------------------------
   Het boekingsblok op een wagenpagina, in de taal van de trechter.
   Staat hier omdat deze pagina's toch al dit bestand binnenhalen; css/winkel.css
   draagt de oude .wb-regels en die blijven waar ze zijn.
   --------------------------------------------------------------------------- */
.wb-kal{ margin-bottom:18px; }
/* De kalenderknop vult het blok; hij is hier het hoofdveld. */
.wb-kal .kal-knop{ width:100%; }

.wb-som{
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  flex-wrap:wrap; margin-top:4px;
}
.wb-dag b{ font:800 26px/1.1 'Archivo',system-ui,sans-serif; color:var(--wk-ink,#14161A); }
.wb-dag i{ font-style:normal; font-size:13px; color:var(--wk-zacht,#6B7280); margin-left:6px; }
.wb-per{ font-size:14px; color:var(--wk-zacht,#6B7280); font-variant-numeric:tabular-nums; }
.wb-per .wb-tot{ color:var(--wk-ink,#14161A); font-weight:800; font-size:15.5px; white-space:nowrap; }
.wb-btw, .wb-km, .wb-volgend{ display:block; font-size:12.5px; line-height:1.55; color:var(--wk-zacht,#6B7280); }
.wb-btw{ margin-top:2px; }
.wb-km{ margin-top:8px; color:#137A4A; font-weight:600; }
.wb-volgend{ margin-top:10px; padding-top:10px; border-top:1px solid var(--wk-lijn,#E3E0DB); }

/* ---------------------------------------------------------------------------
   25-08-2026 — de bolletjes lagen onder de menubalk.
   Gemeten op bureau 1440: "button.gc-bol.aan bedekt door a.act" en
   "button.gc-bol bedekt door a". Die a's zijn de menulinks in .nav, en die
   balk staat position:fixed met z-index 95 over de bovenste 84 px van het
   venster. Zodra de galerij daar belandt (een sprong naar #fotos, of een
   controle die het element naar de bovenrand schuift) ligt de hele rij
   bolletjes eronder en kan u niet meer naar de volgende foto.

   Twee dingen zetten dat recht:
   1. De pagina houdt voortaan 96 px vrij aan de bovenkant bij elke sprong,
      dus 84 px balk plus wat lucht. Dat geldt meteen ook voor #fotos en #boek,
      die tot nu toe hun titel onder de balk parkeerden.
   2. Elke laag van de carrousel krijgt een uitgesproken positie en volgorde,
      zodat de bolletjes bovenop hun eigen buren liggen en niet meer afhangen
      van de toevallige volgorde in de broncode. De menubalk blijft bewust
      hoger: die hoort over de pagina te liggen, niet eronder.
   --------------------------------------------------------------------------- */
html{ scroll-padding-top:96px; }

.gc{ z-index:1; }                          /* position:relative staat hierboven */
.gc-spoor{ position:relative; z-index:1; }
.gc-pijl{ z-index:3; }                     /* boven het spoor, binnen .gc */
.gc-bollen{ position:relative; z-index:4; }
.gc-bol{ position:relative; z-index:1; }
/* De bronvermelding staat onder de bolletjes. Op een telefoon krijgt een link
   daarin min-height:44px als inline-flex; zo'n regel groeit omhoog uit haar
   tekstregel en zou anders tot in de bolletjes kunnen reiken. */
.gc-bollen + .gal-bron{ position:relative; z-index:0; margin-top:26px; }