/* =============================================================================
   WSSHOTS
   Eén donkere wereld, bewust geen lichte variant. Alle kleuren staan hier als
   tokens en nergens anders; niets wordt geleend van de browser.

   Letters: Archivo Expanded 900 voor koppen (het logo), Archivo normaal voor
   tekst, IBM Plex Mono voor alles wat op een camerascherm zou staan.

   Prestaties: alles wat beweegt doet dat met transform en opacity. Geen filter
   op video, geen wazige achtergrond achter de navigatie, en animaties die uit
   beeld zijn staan stil.
   ========================================================================== */

:root {
  --zwart:      #0a0a0d;
  --zwart-2:    #111015;
  --zwart-3:    #18161e;
  --wit:        #f7f5fa;
  --wit-2:      #c9c4d4;
  --wit-3:      #8c859c;
  --wit-4:      #5d576b;
  --paars:      #b026ff;
  --paars-diep: #7c2ae8;
  --paars-glow: #e043ff;
  --paars-nacht:#4a1078;
  --rec:        #ff3b30;
  --lijn:       rgba(247, 245, 250, .09);
  --lijn-2:     rgba(247, 245, 250, .16);

  /* kleurovergangen, een set, overal dezelfde */
  --verloop:        linear-gradient(135deg, #cf5bff 0%, #b026ff 42%, #7c2ae8 100%);
  --verloop-diep:   linear-gradient(135deg, #b026ff 0%, #7c2ae8 55%, #4a1078 100%);
  --verloop-lijn:   linear-gradient(90deg, #7c2ae8, #e043ff);
  --scheiding:      linear-gradient(90deg, transparent, rgba(247,245,250,.14) 18%, rgba(247,245,250,.14) 82%, transparent);

  --kop:  'Archivo', 'Arial Black', system-ui, sans-serif;
  --body: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --breed: 1320px;
  --rand: clamp(20px, 4.4vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);

  /* licht van boven, geijkt op de kapband van Archivo Expanded:
     kaptop op 14,33% en basislijn op 83,33% van de regel */
  --licht: linear-gradient(to bottom,
    #e043ff 0%, #e043ff 14.3%, #bb54ff 25%, #f7f5fa 52%, #f7f5fa 100%);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.vast { overflow: hidden; }

body {
  margin: 0;
  background: var(--zwart);
  color: var(--wit);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--paars); color: var(--wit); }
:focus-visible { outline: 2px solid var(--paars-glow); outline-offset: 4px; }

.verborgen { position: absolute; width: 0; height: 0; overflow: hidden; }
.verborgen-tekst {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.overslaan {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  background: var(--verloop); color: var(--wit);
  padding: 12px 18px; font-weight: 600; text-decoration: none;
  transition: top .2s;
}
.overslaan:focus { top: 12px; }

/* ------------------------------------------------------------------ korrel
   Klein overschot rond het scherm in plaats van een laag van vier keer het
   scherm: dat scheelt de videokaart veel werk. */
body::after {
  content: "";
  position: fixed; inset: -8%;
  background-image: url("../media/korrel.png");
  background-size: 180px 180px;
  opacity: .05;
  pointer-events: none;
  z-index: 90;
  animation: korrel .9s steps(1) infinite;
}
@keyframes korrel {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-2%, 1.5%); }
  50%  { transform: translate(1.5%, -2%); }
  75%  { transform: translate(-1.5%, -1.5%); }
  100% { transform: translate(2%, 1%); }
}

/* ============================================================== typografie */

h1, h2, h3 { margin: 0; font-weight: 900; }

h2 {
  font-family: var(--kop);
  font-variation-settings: 'wdth' 125;
  font-size: clamp(38px, 6vw, 88px);
  line-height: .96;
  letter-spacing: -.02em;
  text-wrap: balance;
}

h3 {
  font-family: var(--kop);
  font-variation-settings: 'wdth' 125;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.005em;
  line-height: 1.15;
}

p { margin: 0; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.dof { color: var(--wit-3); }

/* Mono alleen voor wat op een camerascherm staat: de zoeker, de tijdcode,
   de teller in het werk, jaartallen en het bordje bij de showreel. Labels,
   formulieren en de footer gewoon in de tekstletter. */

/* ==================================================================== knop */

.knop {
  --pijl: 0px;
  position: relative;
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--kop); font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
  padding: 16px 22px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-position .6s var(--ease), border-color .3s, background-color .3s;
}
.knop svg { width: 15px; height: 15px; flex: none; transform: translateX(var(--pijl)); transition: transform .3s var(--ease); }
.knop:hover { --pijl: 4px; }
.knop:active { transform: translateY(1px); }

.knop-vol {
  color: var(--wit);
  background: linear-gradient(120deg, #d86bff 0%, #b026ff 35%, #7c2ae8 70%, #b026ff 100%);
  background-size: 220% 100%;
  background-position: 0% 50%;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.knop-vol:hover { background-position: 100% 50%; }


.knop-groot { padding: 20px 28px; font-size: 13px; }

.tekstlink {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--kop); font-weight: 800;
  font-variation-settings: 'wdth' 125;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 8px;
}
.tekstlink::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--verloop-lijn);
}
.tekstlink svg { width: 15px; height: 15px; transition: transform .3s var(--ease); }
.tekstlink:hover svg { transform: translateX(4px); }

/* =============================================================== navigatie
   Geen wazige achtergrond: die moet elk frame opnieuw over de spelende video
   heen worden berekend en dat was een van de haperaars. */

.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 94;
  display: flex; align-items: center; gap: 28px;
  height: 68px;
  padding: 0 var(--rand);
  background: linear-gradient(180deg, rgba(10,10,13,.94), rgba(10,10,13,.84));
  transform: translateY(-101%);
  transition: transform .5s var(--ease);
}
.nav::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--scheiding);
}
.nav[data-zichtbaar="ja"] { transform: none; }

/* linksboven het echte woordmerk: zelfde letter, afstand en belichting als
   het logo op de hero, alleen kleiner (maten in em, dus hetzelfde beeld) */
.nav-merk { display: flex; align-items: center; text-decoration: none; }
.nav-woord {
  display: flex; align-items: baseline;
  font-family: var(--kop); font-weight: 900;
  font-variation-settings: 'wdth' 125;
  letter-spacing: .24em;
  line-height: 1; white-space: nowrap;
  font-size: 17px;
}
.nav-t {
  display: block;
  background-image: var(--licht);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.nav-woord .nav-t:last-child { margin-right: -.24em; }
.nav-o {
  width: .86em; height: .86em;
  margin: 0 .14em;
  position: relative; top: .085em;
  flex: none; overflow: visible;
}

.nav-links { margin-left: auto; display: flex; gap: 30px; }
.nav-links a {
  position: relative;
  font-size: 14px; font-weight: 500;
  text-decoration: none; color: var(--wit-3);
  padding: 6px 0;
  transition: color .2s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--verloop-lijn);
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="true"] { color: var(--wit); }
.nav-links a:hover::after, .nav-links a[aria-current="true"]::after { transform: none; }

.nav-knop { padding: 12px 16px; font-size: 11px; }

.nav-menu {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  background: rgba(247,245,250,.03); border: 1px solid var(--lijn-2);
  cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.nav-menu-streep { display: block; width: 18px; height: 1.5px; background: var(--wit); transition: transform .3s var(--ease); }
.nav-menu[aria-expanded="true"] .nav-menu-streep:first-of-type { transform: translateY(3.75px) rotate(45deg); }
.nav-menu[aria-expanded="true"] .nav-menu-streep:last-of-type  { transform: translateY(-3.75px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 93;
  background:
    radial-gradient(80% 50% at 100% 100%, rgba(124,42,232,.22), transparent 70%),
    var(--zwart);
  padding: 110px var(--rand) 40px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a {
  display: flex; align-items: baseline; gap: 16px;
  font-family: var(--kop); font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(34px, 11vw, 56px);
  line-height: 1.1; letter-spacing: -.02em;
  text-decoration: none;
  padding: 8px 0;
  border-bottom: 1px solid var(--lijn);
}
.menu-voet { font-size: 14px; color: var(--wit-3); }
.menu-voet a { text-decoration: none; }

/* ============================================================ hero en lens
   Eén scherm hoog. De stap van logo naar video is een animatie die start
   bij de eerste keer scrollen, geen lange scrollbaan meer. */

.opening { position: relative; height: 100vh; height: 100svh; }

.stage {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--zwart);
}

.sfeer { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Het woordmerk, zetting 01 met licht van boven.
   Gecentreerd met flex in plaats van translate(-50%, -50%): die laatste zet
   het logo vaak op een halve pixel en dan wordt het wazig. Het logo staat
   ook boven de filmkorrel (z-index 95 tegen 90): het is een grafisch teken,
   geen beeld, en ruis op fel paars ziet eruit als pixels. Geen will-change:
   daarmee wordt de lens een plaatje in plaats van een vector. */
.merk {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  font-family: var(--kop); font-weight: 900;
  font-variation-settings: 'wdth' 125;
  letter-spacing: .24em;
  line-height: 1; white-space: nowrap;
  font-size: min(88px, 8.6vw);
  z-index: 95;
  pointer-events: none;
}
.merk-rij { display: flex; align-items: baseline; }
.merk-t {
  display: block;
  background-image: var(--licht);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.merk-rij .merk-t:last-child { margin-right: -.24em; }

.merk-lens {
  width: .86em; height: .86em;
  margin: 0 .14em;
  position: relative; top: .085em;
  flex: none; overflow: visible;
  transform-origin: 50% 50%;
  shape-rendering: geometricPrecision;
}

/* de zoeker op de hero */
.zoeker {
  position: absolute; inset: clamp(18px, 3vw, 36px);
  z-index: 4; pointer-events: none;
  color: var(--wit-2);
}
.hoek { position: absolute; width: 22px; height: 22px; border-color: rgba(247,245,250,.5); border-style: solid; border-width: 0; }
.hoek-lb { left: 0;  top: 0;    border-left-width: 1.5px; border-top-width: 1.5px; }
.hoek-rb { right: 0; top: 0;    border-right-width: 1.5px; border-top-width: 1.5px; }
.hoek-lo { left: 0;  bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.hoek-ro { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }

.zoeker-rec, .zoeker-tc, .zoeker-lo, .zoeker-ro { position: absolute; }
.zoeker-rec { left: 36px; top: 2px; display: flex; align-items: center; gap: 8px; color: var(--wit); }
.zoeker-rec i { width: 8px; height: 8px; border-radius: 50%; background: var(--rec); box-shadow: 0 0 10px rgba(255,59,48,.7); animation: rec 1.2s steps(1) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.zoeker-tc { right: 36px; top: 2px; font-variant-numeric: tabular-nums; color: var(--wit); }
.zoeker-lo { left: 36px; bottom: 2px; }
.zoeker-ro { right: 36px; bottom: 2px; display: flex; gap: 8px; }
.zoeker-ro b { font-weight: 500; display: inline-block; animation: zak 2s var(--ease) infinite; }
@keyframes zak { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* video die uit de lens komt */
/* Boven de filmkorrel (z-index 90): de korrel is middengrijs en tilde het
   zwart van de showreel op naar grijs, zodat de video flets en "lichter"
   oogde. Het beeld van Wesley blijft zoals hij het monteerde. Daarom
   liggen tekstvlak (92), menu (93) en balk (94) hier weer boven. */
.video-laag {
  position: absolute; inset: 0;
  opacity: 0;
  z-index: 91;
  overflow: hidden;
}
.showreel { width: 100%; height: 100%; object-fit: cover; will-change: transform; }


.showreel-info {
  position: absolute; left: var(--rand); bottom: 30px;
  display: flex; gap: 14px; align-items: center;
  opacity: 0; transition: opacity .5s;
}
.showreel-info::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--rec);
  box-shadow: 0 0 10px rgba(255,59,48,.7);
  animation: rec 1.2s steps(1) infinite;
}
.video-laag[data-klaar="ja"] .showreel-info { opacity: 1; }

.showreel-balk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(247,245,250,.1);
}
.showreel-balk span {
  display: block; height: 100%; width: 100%;
  background: var(--verloop-lijn);
  transform-origin: left; transform: scaleX(0);
  transition: transform .25s linear;
}

/* het tekstvlak rechts */
.paneel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 42%;
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px;
  padding: 0 var(--rand) 0 clamp(20px, 3vw, 48px);
  opacity: 0;
  pointer-events: none;
  z-index: 92;
}
.paneel[data-aan="ja"] { pointer-events: auto; }
.paneel-kop { font-size: clamp(32px, 3.8vw, 62px); }
.paneel-tekst { color: var(--wit-2); max-width: 40ch; font-size: 17px; }
.paneel-acties { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }


/* ================================================================= secties */

.sectie { position: relative; padding: clamp(96px, 14vh, 180px) 0; }

/* scheidingslijn die aan de randen uitloopt */
.werk::before, .band::before, .band::after, .reacties::before, .contact::before, .voet::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--scheiding);
}
.werk::before, .band::before, .reacties::before, .contact::before, .voet::before { top: 0; }
.band::after { bottom: 0; }

/* tekst die van onderen tevoorschijn komt */
[data-onthul] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
[data-onthul].in { opacity: 1; transform: none; }

/* ==================================================================== werk */

.werk { position: relative; }

.rail-buiten { position: relative; }
.rail-plak {
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(80px, 12vh, 120px) 0 clamp(40px, 8vh, 80px);
  overflow: hidden;
}

.werk-kop {
  width: 100%; max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
}

.werk-teller { display: flex; align-items: center; gap: 10px; }
.werk-teller .mono:first-child { font-size: 14px; color: var(--wit); font-variant-numeric: tabular-nums; }
.werk-voortgang { width: 120px; height: 2px; background: var(--lijn-2); margin-left: 8px; }
.werk-voortgang i { display: block; height: 100%; background: var(--verloop-lijn); transform-origin: left; transform: scaleX(0); }

.rail {
  list-style: none; margin: 0;
  padding: 0 var(--rand);
  display: flex; gap: clamp(14px, 1.6vw, 24px);
  will-change: transform;
}

/* de kaart vult de hoogte die overblijft naast kop en onderschrift (400px),
   zodat alles binnen het vastgeplakte scherm past */
.kaart { flex: 0 0 auto; width: min(max((100vh - 400px) * 16 / 9, 380px), 78vw); }

.kaart-beeld {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--zwart-3);
}
.kaart-beeld img,
.kaart-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* Scherpstellen op de stilstaande poster; de video zelf krijgt nooit een
   filter, want een filter op een spelende video wordt elk beeld opnieuw
   berekend. De video speelt pas als je erop staat. */
.kaart-beeld img {
  filter: saturate(.85) brightness(.8);
  transform: scale(1.03);
  transition: filter .6s var(--ease), transform .8s var(--ease);
}
.kaart-video { opacity: 0; transition: opacity .45s var(--ease); }
.kaart-beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,13,.55));
}
.kaart:hover .kaart-beeld img,
.kaart:focus-within .kaart-beeld img { filter: none; transform: none; }
.kaart[data-speelt="ja"] .kaart-video { opacity: 1; }

.kaart-tekst {
  position: relative;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 16px 0 14px;
}
.kaart-tekst::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(247,245,250,.16), transparent);
}
.kaart-tekst .mono { color: var(--wit-3); }

.kaart-slot { display: flex; }
.slot {
  position: relative;
  flex: 1;
  aspect-ratio: 16 / 9;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(22px, 3vw, 40px);
  overflow: hidden;
  color: var(--wit);
  text-decoration: none;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(224, 67, 255, .55), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(74, 16, 120, .9), transparent 70%),
    var(--verloop-diep);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14);
}
.slot::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 80% at 80% 20%, rgba(255,255,255,.14), transparent 60%);
  opacity: 0; transition: opacity .5s var(--ease);
}
.slot:hover::before { opacity: 1; }
.slot > * { position: relative; }
.slot-kop {
  font-family: var(--kop); font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(32px, 4vw, 64px); line-height: .96; letter-spacing: -.02em;
}
.slot-pijl {
  align-self: flex-end; width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.45);
  display: grid; place-items: center;
  background: rgba(255,255,255,.06);
}
.slot-pijl svg { width: 18px; height: 18px; transition: transform .3s var(--ease); }
.slot:hover .slot-pijl svg { transform: translateX(4px); }

/* ============================================================== lettertape
   Rustiger: kleiner, dunnere omlijning, en de lens ertussen is een klein
   leesteken in plaats van een blikvanger. */

.band {
  position: relative;
  overflow: hidden;
  padding: clamp(14px, 2vw, 24px) 0;
}
.band-spoor {
  display: flex; align-items: center; gap: .55em;
  width: max-content;
  font-family: var(--kop); font-weight: 900;
  font-variation-settings: 'wdth' 125;
  font-size: clamp(30px, 4.6vw, 72px);
  line-height: 1.05; letter-spacing: -.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247, 245, 250, .2);
  white-space: nowrap;
  will-change: transform;
}
.band-spoor .vol {
  -webkit-text-stroke: 0;
  background: linear-gradient(180deg, #f7f5fa 30%, #bda4e8 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  opacity: .9;
}
.band-spoor svg { width: .34em; height: .34em; color: var(--wit-3); flex: none; }

/* ==================================================================== over */

.over-grid {
  max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand);
  display: grid; gap: clamp(36px, 6vw, 110px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

.over-foto { margin: 0; position: sticky; top: 100px; }
.over-foto-kader { position: relative; padding: 14px; }
.over-foto-kader img { width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.over-foto-kader .hoek { width: 28px; height: 28px; border-color: var(--paars); }
.over-foto figcaption { margin-top: 10px; padding-left: 14px; color: var(--wit-3); font-size: 13px; }

.over-tekst { display: flex; flex-direction: column; gap: 24px; padding-top: 14px; }
.over-tekst h2 { font-size: clamp(34px, 4.2vw, 64px); }
.over-tekst > p { color: var(--wit-2); max-width: 54ch; }
.over-tekst .over-intro { color: var(--wit); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.45; max-width: 36ch; }

/* werkwijze: drie blokken, het paarse lijntje schuift uit bij aanwijzen */
.stappen {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.stappen li {
  position: relative;
  padding: 22px 20px 24px;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(160deg, rgba(247,245,250,.045), rgba(247,245,250,.01) 60%);
  border: 1px solid var(--lijn);
}
.stappen li::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 2px;
  background: var(--verloop-lijn);
  transform-origin: left; transform: scaleX(.18);
  transition: transform .6s var(--ease);
}
.stappen li:hover::before { transform: none; }
.stappen .mono { color: var(--paars-glow); }
.stappen p { color: var(--wit-3); font-size: 15px; line-height: 1.5; }

/* ================================================================ reacties */

.reacties {
  overflow: hidden;
  background: radial-gradient(45% 55% at 72% 50%, rgba(124, 42, 232, .16), transparent 72%);
}

.reacties-grid {
  max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand);
  display: grid; gap: clamp(20px, 4vw, 60px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
}
.reacties-tekst { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.reacties-tekst h2 { font-size: clamp(36px, 4.4vw, 68px); }
.reacties-tekst > p { color: var(--wit-2); max-width: 42ch; }

.baan {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 86vh;
  margin: 0 auto;
  --tel-b: 34%;
  /* cqw: schaduwmaten groeien mee met de baan, dus ook met de telefoon */
  container-type: inline-size;
}
/* Vloerschaduw onder de telefoon. Op zwart valt de schaduw van de telefoon
   zelf weg, dus hier een aparte, donkere vlek onder de onderkant, iets naar
   rechts omdat het licht van linksboven komt. Zelfde maat als de telefoon,
   zonder de 3D-stand, zodat hij plat op de "vloer" ligt. */
.baan::before {
  content: ""; position: absolute; left: 50%; top: 50%; z-index: 4;
  width: var(--tel-b);
  aspect-ratio: 9 / 19.5;
  transform: translate(-44%, -50%);
  border-radius: 20% / 9%;
  pointer-events: none;
  box-shadow:
    0 4.2cqw 3.2cqw -2cqw rgba(0, 0, 0, .95),
    1.5cqw 8cqw 7cqw -3.5cqw rgba(0, 0, 0, .8);
}

.telefoon {
  position: absolute; left: 50%; top: 50%;
  width: var(--tel-b, 34%);
  aspect-ratio: 9 / 19.5;
  /* schuin in de ruimte, niet alleen plat gedraaid: de linkerkant komt
     naar je toe, zoals een telefoon die op een tafel tegen iets aan staat */
  transform: translate(-50%, -50%) perspective(1400px) rotateY(-16deg) rotateX(7deg) rotate(-6deg);
  /* de platen achter de voorkant (::before, ::after) echt in de diepte */
  transform-style: preserve-3d;
  border-radius: 16% / 7.4%;
  /* voorkant: zwart glas, met een smalle band donker metaal (grafiet)
     eromheen. Glans alleen op de hoeken waar het licht valt. */
  border: .55cqw solid transparent;
  background:
    linear-gradient(#050507, #050507) padding-box,
    linear-gradient(135deg,
      #6e6c74 0%, #2c2b31 14%, #19181c 34%, #34333a 52%,
      #1a191d 70%, #121114 86%, #4a4850 100%) border-box;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9);
  z-index: 5;
}
/* De zijkant van het toestel: twee platen achter de voorkant, halverwege
   en helemaal achteraan (een echte iPhone is zo dik als 11% van zijn
   breedte). Door de schuine stand steken ze rechts en onder uit: dat is
   de metalen rand die je van opzij ziet. */
.telefoon::before,
.telefoon::after {
  content: ""; position: absolute; inset: -.55cqw;
  border-radius: 16% / 7.4%;
  background: linear-gradient(160deg, #4b4952 0%, #2a292f 30%, #1c1b20 60%, #34323a 100%);
  pointer-events: none;
}
.telefoon::before { transform: translateZ(-1.9cqw); }
.telefoon::after {
  transform: translateZ(-3.8cqw);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    2px 3px 4px rgba(0, 0, 0, .6),
    1.6cqw 2.6cqw 3.4cqw -.6cqw rgba(0, 0, 0, .9),
    4cqw 6.5cqw 9cqw -2cqw rgba(0, 0, 0, .8);
}
/* zijknoppen in hetzelfde metaal, op de band */
.telefoon-knop {
  position: absolute; width: .5cqw;
  border-radius: 2px;
  background: linear-gradient(90deg, #121114, #4e4c55 50%, #16151a);
}
.telefoon-knop.links { left: -1cqw; }
.telefoon-knop.rechts { right: -1cqw; }
.telefoon-knop.actie   { top: 17%; height: 4.2%; }
.telefoon-knop.op      { top: 24%; height: 7.6%; }
.telefoon-knop.neer    { top: 33%; height: 7.6%; }
.telefoon-knop.aan     { top: 27%; height: 11.5%; }

/* dunne zwarte schermrand, zoals een echte telefoon: boven en onder in
   procenten van de hoogte, links en rechts van de breedte, dus even dik */
.telefoon-scherm {
  position: absolute; inset: 1.4% 3%;
  border-radius: 13% / 6%;
  overflow: hidden; background: var(--zwart-3);
}
/* glas: een schuine reflectie met een scherpe kant, zoals licht op een ruit */
.telefoon-scherm::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.05) 32%, rgba(255,255,255,0) 32.4%),
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.07), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 0 16px rgba(0,0,0,.5);
}
/* Het scherm toont een strook van een kwart van het liggende beeld. Mish
   staat in dit fragment rond 48% van de breedte; 47% zet die strook om haar
   heen (midden van de strook = 12,5% + 75% van deze waarde). */
.telefoon-scherm video { width: 100%; height: 100%; object-fit: cover; object-position: 47% 50%; }
.telefoon-eiland {
  position: absolute; left: 50%; top: 2.6%;
  width: 32%; height: 3.6%;
  transform: translateX(-50%);
  border-radius: 99px; background: #000;
}
.telefoon-onder {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30% 8% 9%;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  display: flex; flex-direction: column; gap: 4px;
}
.telefoon-naam {
  display: flex; align-items: center; gap: 6px;
  font-size: clamp(9px, .9vw, 12px); font-weight: 600;
}
.telefoon-naam svg { width: 1.5em; height: 1.5em; color: var(--wit); }
.telefoon-tekst { font-size: clamp(8px, .8vw, 11px); color: var(--wit-2); }

.bellen { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }

.bel {
  position: absolute; left: 50%; top: 50%;
  display: flex; align-items: flex-start; gap: 10px;
  width: max-content; max-width: min(250px, 64vw);
  padding: 10px 16px 11px 10px;
  background: linear-gradient(180deg, #ffffff, #f1eef6);
  color: #0e0d12;
  border-radius: 20px;
  box-shadow: 0 14px 34px rgba(0,0,0,.42), 0 2px 6px rgba(0,0,0,.2);
  will-change: transform, opacity;
}
.bel-avatar {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--kop); font-weight: 900; font-size: 12px;
  color: #fff;
  background: var(--verloop);
}
.bel-kop { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; line-height: 1.2; }
.bel-vink { width: 12px; height: 12px; flex: none; color: var(--paars); }
.bel-soort { font-weight: 500; color: #8e8a96; font-size: 11.5px; }
.bel-tekst { font-size: 14px; line-height: 1.35; margin-top: 2px; }
.bel-tekst.emoji { font-size: 20px; line-height: 1.2; }

/* ================================================================= contact */

.contact-grid {
  max-width: var(--breed); margin: 0 auto;
  padding: 0 var(--rand);
  display: grid; gap: clamp(40px, 7vw, 120px);
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
.contact-links { display: flex; flex-direction: column; gap: 26px; }
.contact-links > p { color: var(--wit-2); max-width: 42ch; text-wrap: pretty; }

.direct { list-style: none; margin: 18px 0 0; padding: 0; }
.direct li { position: relative; }
.direct li::before, .direct li:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, rgba(247,245,250,.18), rgba(247,245,250,.04));
}
.direct li::before { top: 0; }
.direct li:last-child::after { bottom: 0; }
.direct a {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 16px;
  padding: 20px 0;
  text-decoration: none;
  transition: padding .3s var(--ease), color .3s;
}
.direct a:hover { padding-left: 8px; color: var(--paars-glow); }
.direct-soort { font-size: 14px; color: var(--wit-3); }
.direct-waarde { font-size: clamp(16px, 1.5vw, 20px); font-weight: 500; }
.direct svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.direct a:hover svg { transform: translateX(4px); }

.formulier { position: relative; display: flex; flex-direction: column; gap: 34px; }

.veld-groep { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.veld-label {
  display: block;
  font-size: 14px; font-weight: 500;
  color: var(--wit-3);
  padding: 0;
}

.pillen { display: flex; flex-wrap: wrap; gap: 10px; }
.pil {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 18px 11px 13px;
  background: rgba(247,245,250,.03);
  border: 1px solid var(--lijn-2);
  border-radius: 999px;
  font-family: var(--body); font-size: 15px; font-weight: 500;
  color: var(--wit-2);
  cursor: pointer;
  transition: border-color .2s, background-color .2s, color .2s, transform .2s;
}
.pil:hover { border-color: var(--wit-3); color: var(--wit); transform: translateY(-1px); }
.pil .ring {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--wit-4);
  display: grid; place-items: center; flex: none;
  transition: border-color .2s;
}
.pil[aria-checked="true"] {
  border-color: rgba(176, 38, 255, .8);
  background: linear-gradient(135deg, rgba(176,38,255,.3), rgba(124,42,232,.12));
  color: var(--wit);
}
.pil[aria-checked="true"] .ring { border-color: var(--paars-glow); }
.pil[aria-checked="true"] .ring::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--verloop); }

.velden { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px; }
.veld { position: relative; display: flex; flex-direction: column; gap: 4px; }
.veld-breed { grid-column: 1 / -1; }
.veld input, .veld textarea, .datum-knop {
  width: 100%;
  font-family: var(--body); font-size: 18px; color: var(--wit);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--lijn-2);
  border-radius: 0;
  padding: 10px 0 12px;
  transition: border-color .25s;
}
/* geen sleephoekje: het vak groeit vanzelf mee met de tekst (js/main.js) */
.veld textarea { resize: none; overflow: hidden; }
.veld input:focus, .veld textarea:focus { outline: none; border-bottom-color: var(--paars); }
/* Automatisch invullen: Chrome en Safari geven het veld dan een lichtblauw
   vlak met zwarte tekst dat niet met een gewone achtergrond te overschrijven
   is. Een binnenschaduw in de paginakleur dekt het af. */
.veld input:-webkit-autofill,
.veld input:-webkit-autofill:hover,
.veld input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--wit, #f7f5fa);
  caret-color: var(--wit, #f7f5fa);
  -webkit-box-shadow: 0 0 0 1000px var(--zwart, #0a0a0d) inset;
  box-shadow: 0 0 0 1000px var(--zwart, #0a0a0d) inset;
  transition: background-color 9999s ease-out 0s, border-color .25s;
}
.veld input:autofill { background: transparent; color: var(--wit, #f7f5fa); }
.veld:focus-within .veld-label { color: var(--paars-glow); }

/* ---------------------------------------------------------- eigen kalender */

.datum-knop {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer;
}
.datum-knop:focus-visible { outline: none; border-bottom-color: var(--paars); }
.datum-knop svg { width: 19px; height: 19px; color: var(--wit-3); transition: color .2s; }
.datum-knop:hover svg, .datum-knop[aria-expanded="true"] svg { color: var(--paars-glow); }
#datumTekst[data-leeg="ja"] { color: var(--wit-3); }

.kalender {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 30;
  width: 316px;
  padding: 16px;
  background:
    radial-gradient(90% 60% at 100% 0%, rgba(124,42,232,.22), transparent 70%),
    #141219;
  border: 1px solid var(--lijn-2);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(0,0,0,.4);
}
.kalender[hidden] { display: none; }

.kal-kop { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kal-maand {
  font-family: var(--kop); font-weight: 800; font-variation-settings: 'wdth' 125;
  font-size: 14px; letter-spacing: .02em; text-transform: capitalize;
}
.kal-pijl {
  width: 34px; height: 34px; display: grid; place-items: center;
  background: rgba(247,245,250,.04); border: 1px solid var(--lijn); cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.kal-pijl:hover { background: rgba(247,245,250,.09); border-color: var(--lijn-2); }
.kal-pijl:disabled { opacity: .3; cursor: default; }
.kal-pijl svg { width: 14px; height: 14px; }

.kal-weekdagen, .kal-raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-weekdagen span {
  font-size: 12px; color: var(--wit-3); text-align: center; padding: 4px 0 8px;
}
.kal-dag {
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  font-size: 14px; font-variant-numeric: tabular-nums;
  background: transparent; border: 1px solid transparent; border-radius: 50%;
  color: var(--wit-2); cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.kal-dag:hover:not(:disabled) { background: rgba(247,245,250,.07); color: var(--wit); }
.kal-dag:focus-visible { outline: none; border-color: var(--paars-glow); }
.kal-dag[data-vandaag="ja"] { border-color: rgba(247,245,250,.28); color: var(--wit); }
.kal-dag[aria-selected="true"] {
  background: var(--verloop); color: var(--wit); border-color: transparent;
  box-shadow: 0 6px 16px -6px rgba(176,38,255,.8);
}
.kal-dag:disabled { color: var(--wit-4); opacity: .45; cursor: default; }
.kal-leeg { aspect-ratio: 1 / 1; }

.kal-voet { display: flex; justify-content: space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.kal-tekstknop {
  background: none; border: 0; cursor: pointer; padding: 4px 0;
  font-size: 13px; color: var(--wit-3);
}
.kal-tekstknop:hover { color: var(--wit); }

.formulier-onder { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.formulier-noot { font-size: 13px; color: var(--wit-3); max-width: 34ch; }
.formulier-noot a { color: var(--wit-2); }
.formulier-melding { font-size: 14px; color: var(--paars-glow); min-height: 1.4em; margin-top: -14px; }

/* ================================================================== footer */

.voet {
  position: relative;
  padding: clamp(60px, 9vw, 110px) var(--rand) 28px;
}
.voet-kop { font-size: 14px; color: var(--wit-3); }

.voet-kolommen {
  max-width: var(--breed); margin: 0 auto clamp(48px, 7vw, 96px);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px;
}
.voet-kolommen ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.voet-kolommen a { text-decoration: none; color: var(--wit-2); transition: color .2s; }
.voet-kolommen a:hover { color: var(--wit); }
.voet-omhoog { display: flex; justify-content: flex-end; align-items: flex-start; }
.omhoog { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--wit-3); }
.omhoog svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.omhoog:hover svg { transform: translateY(-4px); }

.voet-onder {
  position: relative;
  max-width: var(--breed); margin: 0 auto;
  display: flex; gap: 28px; flex-wrap: wrap;
  padding-top: 22px;
  font-size: 13px;
  color: var(--wit-4);
}
.voet-onder::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px;
  background: var(--scheiding);
}
.voet-onder a { text-decoration: none; margin-left: auto; }
.voet-onder a:hover { color: var(--wit); }

/* ============================================================ videospeler */

html { scrollbar-gutter: stable; }
html.speler-open { overflow: hidden; }

/* de kaart is een knop: resetten, en een "Bekijk"-label bij aanwijzen */
button.kaart-beeld {
  display: block; width: 100%;
  padding: 0; border: 0; margin: 0;
  font: inherit; color: inherit; text-align: left;
  cursor: pointer;
}
button.kaart-beeld:focus-visible { outline: 2px solid var(--paars-glow); outline-offset: 3px; }

.kaart-speel {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px 9px 11px;
  font-size: 13px; font-weight: 600;
  color: var(--wit);
  background: rgba(10, 10, 13, .62);
  border: 1px solid rgba(247, 245, 250, .16);
  border-radius: 999px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.kaart-speel svg { width: 13px; height: 13px; }
.kaart:hover .kaart-speel,
.kaart-beeld:focus-visible .kaart-speel { opacity: 1; transform: none; }
@media (hover: none) { .kaart-speel { opacity: 1; transform: none; } }

.speler {
  position: fixed; inset: 0; z-index: 150;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  padding: 18px var(--rand) 22px;
  color: var(--wit);
  /* 16:9 zo groot als past tussen kop (70px) en bediening (70px) */
  --speler-b: min(1400px, 100%, calc((100vh - 180px) * 16 / 9));
}
@supports (height: 100dvh) {
  .speler { --speler-b: min(1400px, 100%, calc((100dvh - 180px) * 16 / 9)); }
}
.speler[hidden] { display: none; }

.speler-achter {
  position: absolute; inset: 0; z-index: -1;
  background: var(--zwart);
  opacity: 0;
  transition: opacity .45s var(--ease);
}
.speler[data-open="ja"] .speler-achter { opacity: 1; }

.speler-kop, .speler-balk {
  width: var(--speler-b, 100%);
  opacity: 0;
  transition: opacity .35s var(--ease) .15s;
}
.speler[data-open="ja"] .speler-kop,
.speler[data-open="ja"] .speler-balk { opacity: 1; }

.speler-kop {
  display: flex; align-items: center; gap: 18px;
  min-height: 52px;
}
.speler-titel {
  display: flex; align-items: baseline; gap: 12px;
  font-family: var(--kop); font-weight: 800; font-variation-settings: 'wdth' 125;
  font-size: 18px;
}
.speler-teller { margin-left: auto; color: var(--wit-3); font-variant-numeric: tabular-nums; }
.speler-sluit {
  width: 44px; height: 44px; display: grid; place-items: center;
  background: rgba(247,245,250,.05); border: 1px solid var(--lijn-2); border-radius: 50%;
  cursor: pointer; transition: background-color .2s, transform .2s;
}
.speler-sluit:hover { background: rgba(247,245,250,.12); transform: rotate(90deg); }
.speler-sluit svg { width: 18px; height: 18px; }

/* het beeldvlak: 16:9, zo groot als past tussen kop en bediening */
.speler-vlak {
  position: relative;
  align-self: center;
  width: var(--speler-b, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  transform-origin: 0 0;
  overflow: hidden;
}
.speler-vlak video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

.speler-groot {
  position: absolute; left: 50%; top: 50%;
  width: 84px; height: 84px; margin: -42px 0 0 -42px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  color: var(--wit);
  background: var(--verloop);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .3s var(--ease), opacity .3s;
}
.speler-groot svg { width: 30px; height: 30px; margin-left: 4px; }
.speler-groot:hover { transform: scale(1.06); }
.speler[data-speelt="ja"] .speler-groot { opacity: 0; pointer-events: none; transform: scale(.8); }

.speler-laden {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  opacity: 0; transition: opacity .3s;
  pointer-events: none;
}
.speler-laden span {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(247,245,250,.18); border-top-color: var(--paars-glow);
  animation: draai .8s linear infinite;
}
@keyframes draai { to { transform: rotate(360deg); } }
.speler[data-laadt="ja"] .speler-laden { opacity: 1; }

.speler-pijl {
  position: absolute; top: 50%; z-index: 2;
  width: 48px; height: 48px; margin-top: -24px;
  display: grid; place-items: center;
  border: 1px solid rgba(247,245,250,.2); border-radius: 50%;
  background: rgba(10,10,13,.55); color: var(--wit);
  cursor: pointer; opacity: 0;
  transition: opacity .3s, background-color .2s;
}
.speler-pijl svg { width: 18px; height: 18px; }
.speler-vorige { left: 16px; }
.speler-volgende { right: 16px; }
.speler-vlak:hover .speler-pijl, .speler-pijl:focus-visible { opacity: 1; }
.speler-pijl:hover { background: rgba(10,10,13,.8); }

/* bediening */
.speler-balk {
  display: flex; align-items: center; gap: 14px;
  padding-top: 14px;
}
.speler-knop {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer; color: var(--wit);
  border-radius: 50%;
  transition: background-color .2s;
}
.speler-knop:hover { background: rgba(247,245,250,.08); }
.speler-knop svg { width: 20px; height: 20px; }
.ico-speel, .ico-uit { display: none; }
.speler[data-speelt="nee"] .ico-pauze { display: none; }
.speler[data-speelt="nee"] .ico-speel { display: block; }
.speler[data-stil="ja"] .ico-aan { display: none; }
.speler[data-stil="ja"] .ico-uit { display: block; }

.speler-tijd { font-size: 12px; min-width: 38px; font-variant-numeric: tabular-nums; }

.speler-tijdlijn {
  position: relative; flex: 1;
  height: 24px; cursor: pointer;
  display: flex; align-items: center;
  touch-action: none;
}
.speler-tijdlijn:focus-visible { outline: none; }
.speler-tijdlijn:focus-visible .tl-knop { box-shadow: 0 0 0 3px rgba(224,67,255,.5); }
.tl-spoor {
  position: relative; width: 100%; height: 3px;
  background: rgba(247,245,250,.14); border-radius: 2px; overflow: hidden;
  transition: height .2s;
}
.speler-tijdlijn:hover .tl-spoor { height: 5px; }
.tl-buffer, .tl-gespeeld {
  position: absolute; left: 0; top: 0; bottom: 0; width: 100%;
  transform-origin: left; transform: scaleX(0);
}
.tl-buffer { background: rgba(247,245,250,.2); }
.tl-gespeeld { background: var(--verloop-lijn); }
.tl-knop {
  position: absolute; top: 50%; left: 0;
  width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px;
  border-radius: 50%; background: var(--wit);
  transform: scale(0); transition: transform .2s;
}
.speler-tijdlijn:hover .tl-knop, .speler-tijdlijn:focus-visible .tl-knop, .speler[data-sleept="ja"] .tl-knop { transform: scale(1); }

/* bij stilzitten tijdens afspelen verdwijnt de bediening, net als de muis */
.speler[data-rust="ja"][data-speelt="ja"] .speler-kop,
.speler[data-rust="ja"][data-speelt="ja"] .speler-balk { opacity: .0; }
.speler[data-rust="ja"][data-speelt="ja"] { cursor: none; }

/* =================================================================== klein */

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .reacties-grid { grid-template-columns: 1fr; }
  .baan { max-width: 620px; }
  .reacties { background: radial-gradient(70% 40% at 50% 70%, rgba(124, 42, 232, .16), transparent 72%); }
}

@media (max-width: 900px) {
  .nav { height: 60px; gap: 12px; }
  .nav-knop { display: none; }
  .nav-menu { display: flex; }

  .paneel {
    top: auto; left: 0; right: 0; bottom: 0;
    width: 100%;
    padding: 60px var(--rand) calc(34px + env(safe-area-inset-bottom));
    gap: 16px;
    background: linear-gradient(0deg, var(--zwart) 50%, transparent);
  }
  .paneel-kop { font-size: clamp(30px, 8.6vw, 44px); }
  .showreel-info { display: none; }

  .zoeker-lo { display: none; }
  /* zo groot als het past: 8,42 em woordbreedte binnen de marges */
  .merk { font-size: min(88px, calc((100vw - 2 * var(--rand)) / 8.6)); }

  .rail-plak { padding-top: 90px; }
  .werk-teller { display: none; }
  .rail {
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .kaart { width: 84vw; scroll-snap-align: center; }
  .kaart-beeld img { filter: none; transform: none; }

  .over-grid, .contact-grid { grid-template-columns: 1fr; }
  .over-foto { position: relative; top: 0; max-width: 460px; }

  .velden { grid-template-columns: 1fr; }
  .direct a { grid-template-columns: 80px 1fr auto; }
  .kalender { width: min(316px, calc(100vw - 2 * var(--rand) - 48px)); }

  .voet-kolommen { grid-template-columns: 1fr 1fr; }
  .voet-omhoog { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 620px) {
  /* de baan mag op een telefoon de volle schermbreedte gebruiken */
  .baan { width: 100vw; margin-left: calc(-1 * var(--rand)); max-height: none; }
  .baan { --tel-b: 38%; }
  .bel { max-width: 156px; padding: 7px 11px 8px 7px; gap: 7px; border-radius: 16px; }
  .bel-kop { font-size: 11px; }
  .bel-soort { display: none; }
  .bel-tekst { font-size: 11.5px; }
  .bel-tekst.emoji { font-size: 16px; }
  .bel-avatar { width: 22px; height: 22px; font-size: 9px; }
}

@media (max-width: 620px) {
  .stappen { grid-template-columns: 1fr; }
  /* op een staande telefoon titel en bediening direct tegen het beeld aan */
  .speler { padding: 10px 0 16px; grid-template-rows: auto auto auto; align-content: center; }
  .speler-kop, .speler-balk { padding-left: 16px; padding-right: 16px; }
  .speler-titel { font-size: 15px; }
  .speler-pijl { opacity: 1; width: 40px; height: 40px; margin-top: -20px; }
  .speler-vorige { left: 8px; }
  .speler-volgende { right: 8px; }
  .speler-groot { width: 68px; height: 68px; margin: -34px 0 0 -34px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after, .zoeker-rec i, .zoeker-ro b, .showreel-info::before { animation: none; }
  [data-onthul] { opacity: 1; transform: none; transition: none; }
}