/* =============================================================
   Basis. Reset, gedeelde hulpmiddelen en de versiewissel.
   De wissel staat bewust buiten beide composities en gebruikt
   een eigen, neutrale opmaak.
   ============================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: #F4EFE6;
  font-family: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; }

figure, blockquote, dl, dd, ol, ul, h1, h2, h3, p { margin: 0; }
ol, ul { padding: 0; list-style: none; }

:where(a) { color: inherit; }

/* De actieve versie vult de pagina, de inactieve is volledig weg. */
.vroot { position: relative; }
.vroot[hidden] { display: none !important; }

/* -------------------------------------------------------------
   Versiewissel
   ------------------------------------------------------------- */
.vt {
  position: fixed;
  right: clamp(12px, 2vw, 24px);
  bottom: clamp(12px, 2vw, 24px);
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 6px 5px 12px;
  border-radius: 999px;
  background: rgba(16, 18, 24, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vt__label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding-right: 4px;
}

.vt__btn {
  appearance: none;
  border: 0;
  cursor: pointer;
  min-width: 42px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.vt__btn:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.vt__btn[aria-pressed='true'] { background: #fff; color: #14161C; }
.vt__btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .vt { bottom: 76px; padding: 4px 5px 4px 10px; }
  .vt__label { display: none; }
  .vt__btn { min-width: 40px; min-height: 32px; }
}

/* Voorkomt dat de heldere delen van de hero eerst zichtbaar zijn en daarna
   pas inschuiven. De klasse wordt in de head gezet en door app.js weer
   verwijderd, met een noodrem van 2,5 seconde in de head zelf, zodat er
   nooit iets onzichtbaar blijft als er iets misgaat. */
.pre #v1-root .v1-line > span { transform: translateY(106%); }
.pre #v1-root .v1-rev { opacity: 0; }

/* Alleen voor schermlezers. */
.v1-sr, .v2-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.v1-skip, .v2-skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #14161C;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  transition: top 0.18s ease;
}
.v1-skip:focus, .v2-skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}