/* — uitklap-rondleiding: een echte ankerlink, geen JS nodig. Klikken springt de
   pagina meteen naar de rondleiding toe, in plaats van 'm alleen maar te tonen — */
html{scroll-behavior:smooth}
.tour-panel{display:none;scroll-margin-top:24px}
.tour-panel:target{display:block}
.tour-more{justify-content:center;text-decoration:none}
.tour-more::after{content:"Rondleiding door het systeem  \2193"}
.tour-hide{display:inline-flex;margin-top:16px}
.tour-hide::after{content:"Rondleiding verbergen  \2191"}
.tourpanel{display:none}
.more-btn{justify-content:center;margin-top:16px;cursor:pointer}
.more-btn::after{content:"Meer over dit project  \2193"}
input.tourtoggle:checked ~ .tourpanel{display:block}
input.tourtoggle:checked ~ .more-btn::after{content:"Minder tonen  \2191"}

/* — automatisch doorlopende schermen-carrousel (puur CSS, geen video/JS nodig) — */
.screencarousel{
  position:relative;
  border:2px solid var(--color-divider);
  background:var(--color-neutral-100);
  overflow:hidden;
}
.screencarousel-viewport{
  position:relative;
  height:440px;
}
.screencarousel-slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  opacity:0;
  animation:screencarousel-fade 25s infinite;
}
.screencarousel-slide:nth-child(1){ animation-delay:0s; }
.screencarousel-slide:nth-child(2){ animation-delay:5s; }
.screencarousel-slide:nth-child(3){ animation-delay:10s; }
.screencarousel-slide:nth-child(4){ animation-delay:15s; }
.screencarousel-slide:nth-child(5){ animation-delay:20s; }
.screencarousel-slide img{
  flex:1; min-height:0;
  width:100%; height:100%;
  object-fit:contain; object-position:center top;
  background:var(--color-bg);
}
.screencarousel-caption{
  flex:none;
  border-top:2px solid var(--color-divider); background:var(--color-bg);
  padding:14px 16px;
}
.screencarousel-dots{
  display:flex; gap:6px; justify-content:center;
  padding:12px; border-top:2px solid var(--color-divider); background:var(--color-bg);
}
.screencarousel-dots span{
  width:6px; height:6px; border-radius:50%;
  background:var(--color-divider);
  animation:screencarousel-dot 25s infinite;
}
.screencarousel-dots span:nth-child(1){ animation-delay:0s; }
.screencarousel-dots span:nth-child(2){ animation-delay:5s; }
.screencarousel-dots span:nth-child(3){ animation-delay:10s; }
.screencarousel-dots span:nth-child(4){ animation-delay:15s; }
.screencarousel-dots span:nth-child(5){ animation-delay:20s; }
@keyframes screencarousel-fade{
  0%, 2%   { opacity:0; }
  4%, 16%  { opacity:1; }
  18%, 100%{ opacity:0; }
}
@keyframes screencarousel-dot{
  0%, 2%   { background:var(--color-divider); }
  4%, 16%  { background:var(--color-accent); }
  18%, 100%{ background:var(--color-divider); }
}
@media (prefers-reduced-motion: reduce){
  .screencarousel-slide, .screencarousel-dots span{ animation:none; }
  .screencarousel-slide{ opacity:0; }
  .screencarousel-slide:first-child{ opacity:1; }
  .screencarousel-dots span:first-child{ background:var(--color-accent); }
}