/* =============================================================
   BASIS
   Reset, versiekiezer, gedeelde hulpmiddelen.
   Alles wat versiespecifiek is staat in v1.css en v2.css.
   ============================================================= */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:#f5f1e9;color:#1c1b2a;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0}
address{font-style:normal}
::selection{background:#282858;color:#fff}

/* zichtbare focus, overal, ook op muisklik weggehaald waar hinderlijk */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid currentColor;outline-offset:3px;border-radius:2px}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:#282858;color:#fff;padding:.85rem 1.25rem;
  font:500 .9rem/1 Karla,system-ui,sans-serif;text-decoration:none}
.skip:focus{left:1rem;top:1rem}

.vroot[hidden]{display:none !important}
section[id]{scroll-margin-top:5.25rem}

/* ---------- versiekiezer ---------- */
.vswitch{
  position:fixed;left:1rem;bottom:1rem;z-index:120;
  display:flex;align-items:center;gap:.35rem;
  padding:.3rem .35rem .3rem .7rem;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(28,27,42,.18);
  border-radius:999px;
  box-shadow:0 6px 24px rgba(28,27,42,.13);
  backdrop-filter:saturate(140%) blur(6px);
  font:500 .72rem/1 Karla,system-ui,sans-serif;
  color:#4a4757;
}
.vswitch__label{letter-spacing:.09em;text-transform:uppercase;font-size:.62rem;
  padding-right:.15rem;color:#6d6a7a}
.vswitch__btn{
  min-width:2.4rem;height:1.85rem;padding:0 .55rem;border-radius:999px;
  font:600 .74rem/1 Karla,system-ui,sans-serif;letter-spacing:.05em;
  color:#4a4757;cursor:pointer;
  transition:background .18s ease,color .18s ease;
}
.vswitch__btn:hover{background:rgba(40,40,88,.09)}
.vswitch__btn[aria-pressed="true"]{background:#282858;color:#fff}
.vswitch__btn:focus-visible{outline:2px solid #282858;outline-offset:2px}

/* Op smalle schermen als staand tabje tegen de rechterrand: linksonder botste
   het op de belknoppen in de hero en op de vaste belbalk. */
@media (max-width:760px){
  .vswitch{
    left:auto;right:0;bottom:auto;top:50%;transform:translateY(-50%);
    flex-direction:column;gap:.2rem;padding:.28rem;
    border-radius:10px 0 0 10px;border-right:0;
  }
  .vswitch__label{display:none}
  .vswitch__btn{min-width:0;width:2.15rem;height:1.75rem;padding:0;font-size:.7rem}
}

/* ---------- onthulling bij scroll ----------
   Alleen actief als JS draait: zonder JS blijft alles gewoon zichtbaar. */
.js .reveal{opacity:0;transform:translateY(18px)}
.js .reveal-l{opacity:0;transform:translateX(-16px)}
.js .clip{clip-path:inset(0 0 100% 0)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal,.js .reveal-l{opacity:1 !important;transform:none !important}
  .js .clip{clip-path:none !important}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}