/* Projectenpagina */
.stuk{margin:0 auto 130px;max-width:1000px;padding:0 32px}
.wrap-stuk{max-width:1000px;margin:0 auto}
.stuk:last-of-type{margin-bottom:80px}
.onder{display:flex;justify-content:space-between;align-items:baseline;padding-top:26px;border-bottom:1px solid var(--lijn);padding-bottom:26px;margin-bottom:26px}
.naam{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:300;font-size:1.5rem;color:#1c1b18;letter-spacing:.02em}
.plaats{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--goud)}
/* De tekst loopt over de volle breedte van de foto mee en schaalt dus
   vanzelf mee met het venster of het telefoonscherm. Op een breed scherm
   wordt hij in twee kolommen verdeeld; de browser verdeelt de regels dan
   zo dat beide kolommen even hoog uitkomen (column-fill:balance). */
.beschrijving{color:var(--zacht);max-width:none}
.tekstkolommen{column-fill:balance;orphans:2;widows:2}
@media(min-width:861px){
  .tekstkolommen{columns:2;column-gap:48px}
}
/* Twee alinea's onder elkaar hebben een witregel nodig, anders lezen ze als één blok */
.beschrijving+.beschrijving{margin-top:1.1em}
.carrousel-wrap{position:relative}.carrousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;aspect-ratio:16/10;border-radius:2px;box-shadow:0 30px 70px -30px rgba(43,42,38,.35);scrollbar-width:none;margin-top:0}.carrousel::-webkit-scrollbar{display:none}.carrousel>.dia{position:relative;flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center}.carrousel picture{display:block;width:100%;height:100%}.carrousel img{width:100%;height:100%;object-fit:cover;display:block}
/* Puntjes staan in elke foto zelf, zodat ze zonder JavaScript meelopen met de swipe */
.car-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:0;align-items:center;justify-content:center;z-index:2;pointer-events:none}.car-dots.klikbaar{pointer-events:auto}.car-dot{width:22px;height:22px;display:flex;align-items:center;justify-content:center}.car-dots.klikbaar .car-dot{cursor:pointer}.car-dot::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 0 1px rgba(0,0,0,.16),0 1px 5px rgba(0,0,0,.5);transition:background .3s,transform .3s}.car-dot.actief::before{background:#fff;transform:scale(1.4)}.car-pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:rgba(0,0,0,.3);color:#fff;font-size:1.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s}.car-pijl:hover{background:rgba(0,0,0,.5)}.car-prev{left:14px}.car-next{right:14px}


@media(max-width:860px){
  .car-pijl{width:38px;height:38px;font-size:1.4rem}
}

/* Diep linken vanaf de startpagina: de vaste bovenbalk mag de titel niet afdekken */
.stuk[id]{scroll-margin-top:110px}

/* Lichtbak — foto op volledig scherm */
.js .carrousel .dia.klikbaar picture,.js .carrousel .dia.klikbaar>img{cursor:zoom-in}
.js .carrousel .dia.klikbaar picture:focus-visible,.js .carrousel .dia.klikbaar>img:focus-visible{outline:2px solid #fff;outline-offset:-6px}
body.lichtbak-open{position:fixed;left:0;right:0;width:100%;overflow:hidden}
.lichtbak{position:fixed;inset:0;z-index:200;background:rgba(20,19,17,.97);opacity:0;transition:opacity .28s ease}
.lichtbak.zichtbaar{opacity:1}
.lichtbak-strip{position:absolute;inset:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lichtbak-strip::-webkit-scrollbar{display:none}
.lichtbak-dia{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:center;display:flex;align-items:center;justify-content:center;padding:64px 20px 108px}
.lichtbak-dia picture{display:block;max-width:100%;max-height:100%}
.lichtbak-dia img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.lichtbak-sluit{position:absolute;top:16px;right:16px;z-index:3;width:46px;height:46px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.9rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s}
.lichtbak-sluit:hover{background:rgba(255,255,255,.24)}
.lichtbak-pijl{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:50px;height:50px;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:2rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .3s,opacity .3s}
.lichtbak-pijl:hover{background:rgba(255,255,255,.26)}
.lichtbak-pijl[disabled]{opacity:0;pointer-events:none}
.lichtbak-prev{left:18px}.lichtbak-next{right:18px}
.lichtbak-voet{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:0 20px 22px;text-align:center;pointer-events:none}
.lichtbak-bijschrift{margin:0 auto 10px;max-width:60ch;color:rgba(255,255,255,.82);font-size:.85rem;line-height:1.5}
.lichtbak-dots{display:flex;gap:0;align-items:center;justify-content:center;pointer-events:auto}
.lichtbak-dot{width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lichtbak-dot::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.45);transition:background .3s,transform .3s}
.lichtbak-dot.actief::before{background:#fff;transform:scale(1.4)}
.lichtbak-teller{display:block;margin-top:8px;color:rgba(255,255,255,.5);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.lichtbak-sluit:focus-visible,.lichtbak-pijl:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:860px){
  .lichtbak-dia{padding:56px 10px 104px}
  .lichtbak-pijl{width:40px;height:40px;font-size:1.5rem}
  .lichtbak-prev{left:8px}.lichtbak-next{right:8px}
  .lichtbak-bijschrift{font-size:.78rem}
}
@media(prefers-reduced-motion:reduce){
  .lichtbak{transition:none}
}