/* ═══════════════════════════════════════════════════════════════
   Encryptie · de reis van één foto
   Een eigen verhaal naast de homepage: geen dag met een lucht, maar
   vijf plekken waar een foto doorheen gaat. Thuis bij mama, binnen in
   het datacenter, de kring van het gezin, bij oma, en een nieuwe
   telefoon. Het podium vult het hele scherm; de stappen schuiven er in
   glazen kaarten overheen.

   Van voor-wie.css komen alleen de huisstijl-bouwstenen: navigatie,
   telefoon, kaarten op de tijdlijn, markering, markeerstift, vragen en
   het slot. De standen komen uit encryptie.js:
     --p   aanwezigheid van een scène of wereld (0 weg, 1 in beeld)
     --o   waar die staat (-1 komt eraan, 0 nu, 1 voorbij)
     --q   voortgang bínnen de scène
     --k   geheimschrift (0 leesbaar, 1 helemaal op slot)
     --pak het samenpakken van de tegeltjes tot een blokje
   ═══════════════════════════════════════════════════════════════ */

.ek-reis {
  position: relative;
  background: #F4E7D8;
}

.ek-podium {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
  z-index: 0;
  container-type: size;
}

/* Het middelpunt van wat er te zien is: op een breed scherm rechts van
   de kaarten, op een smal scherm in het bovenste deel */
.ek-anker {
  position: absolute;
  left: calc(50% + 34 * var(--u));
  top: 50%;
  width: 0;
  height: 0;
  --u: min(1cqh, 0.62cqw);
}

/* ── De werelden ───────────────────────────────────────────────────
   Elke wereld vult het hele podium. De volgende vervaagt schermvullend
   in over de vorige (encryptie.js houdt de vorige er stevig onder). */

.ek-wereld {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: var(--p, 0);
}

/* Thuis: de kamer van de foto, wazig en warm, met een zachte korrel */
.ek-thuis {
  background:
    radial-gradient(120% 90% at 70% 55%, rgba(255, 244, 228, 0) 0%, rgba(250, 238, 222, 0.55) 70%, rgba(246, 231, 212, 0.9) 100%),
    linear-gradient(180deg, rgba(251, 243, 232, 0.72) 0%, rgba(251, 243, 232, 0.35) 45%, rgba(246, 230, 210, 0.6) 100%),
    url('/assets/img/ek_thuis_vaag.webp') center 40% / cover no-repeat,
    #EAD8C2;
}

.ek-korrel {
  position: absolute;
  inset: -50%;
  opacity: 0.16;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.27 0 0 0 0 0.2 0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23k)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* Lichtvlekjes in de kamer, alsof de lens ze ziet */
.ek-bokeh i {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bs);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 225, 0.75) 0%, rgba(255, 238, 205, 0.25) 55%, transparent 70%);
  animation: ek-bokeh 14s ease-in-out infinite;
  animation-delay: var(--bv, 0s);
}

@keyframes ek-bokeh {
  0%, 100% { transform: translate(0, 0); opacity: 0.8; }
  50% { transform: translate(1.5vw, -1.2vh); opacity: 0.45; }
}

/* Bij oma: de keukentafel met pannenkoeken, wazig en zacht roze */
.ek-oma {
  background:
    radial-gradient(120% 90% at 70% 55%, rgba(255, 240, 230, 0) 0%, rgba(251, 232, 222, 0.5) 70%, rgba(248, 226, 212, 0.9) 100%),
    linear-gradient(180deg, rgba(252, 240, 232, 0.7) 0%, rgba(252, 240, 232, 0.3) 45%, rgba(246, 224, 208, 0.6) 100%),
    url('/assets/img/ek_oma_vaag.webp') center / cover no-repeat,
    #EFD6C6;
}

/* De kring van het gezin: diep groen, met het licht van de sleutel */
.ek-kring {
  background:
    radial-gradient(42% 52% at calc(50% + 34 * min(1vh, 0.62vw)) 50%, rgba(242, 200, 98, 0.32) 0%, rgba(242, 200, 98, 0.08) 45%, transparent 75%),
    radial-gradient(120% 100% at 60% 50%, #213A2C 0%, #15241C 55%, #0E1813 100%);
}

/* Gouden stofjes in het licht */
.ek-stof i {
  position: absolute;
  left: var(--bx);
  top: var(--by);
  width: var(--bs);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #F2D98B;
  box-shadow: 0 0 10px rgba(242, 217, 139, 0.9);
  opacity: 0.5;
  animation: ek-stof 9s ease-in-out infinite;
  animation-delay: var(--bv, 0s);
}

@keyframes ek-stof {
  0%, 100% { transform: translateY(0); opacity: 0.15; }
  50% { transform: translateY(-3vh); opacity: 0.75; }
}

/* ── Het datacenter ────────────────────────────────────────────────
   Een gang tussen rijen servers, echt in 3D: twee wanden, een vloer en
   een plafond. Je loopt er langzaam in terwijl je scrolt (--q). */

.ek-dc {
  background: #070C0E;
  --g: min(1cqh, 0.62cqw);
}

.ek-dc-3d {
  position: absolute;
  inset: 0;
  perspective: calc(60 * var(--g));
  perspective-origin: calc(50% + 34 * var(--g)) 47%;
}

.ek-gang {
  position: absolute;
  left: calc(50% + 34 * var(--g));
  top: 47%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--q, 0) * 14 * var(--g) * var(--beweeg)));
}

.ek-gang > div {
  position: absolute;
  backface-visibility: hidden;
}

/* De gang tekent encryptie.js met WebGL op dit canvas: rijen
   serverkasten met knipperende lampjes, in hetzelfde perspectief als
   hieronder. Lukt dat, dan krijgt .ek-dc de klasse ek-gl en verdwijnen
   de eenvoudige wanden, vloer en plafond. */
.ek-dc-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

.ek-dc.ek-gl .ek-dc-gl { display: block; }

.ek-dc.ek-gl .ek-wand,
.ek-dc.ek-gl .ek-vloer,
.ek-dc.ek-gl .ek-plafond { display: none; }

/* Zonder WebGL: wanden met banen van kasten en dunne lijntjes. Naar
   achteren wordt het donker. */
.ek-wand {
  --lang: calc(420 * var(--g));
  width: var(--lang);
  height: calc(66 * var(--g));
  left: calc(var(--lang) / -2);
  top: calc(-38 * var(--g));
  background:
    linear-gradient(var(--diep), rgba(4, 8, 10, 0.96) 0%, rgba(4, 8, 10, 0) 36%),
    linear-gradient(180deg, rgba(150, 205, 228, 0.14) 0%, rgba(150, 205, 228, 0) 26%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.3) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0 1px, transparent 1px calc(2.4 * var(--g))),
    repeating-linear-gradient(90deg, #22323C 0 calc(15 * var(--g)), #0B1114 calc(15 * var(--g)) calc(17 * var(--g))),
    #16222A;
}

.ek-wand-links {
  --diep: 270deg;
  transform: translateX(calc(-36 * var(--g))) translateZ(calc(var(--lang) / -2 + 40 * var(--g))) rotateY(90deg);
}

/* De rechterwand loopt andersom; het donker ligt aan zijn andere kant */
.ek-wand-rechts {
  --diep: 90deg;
  transform: translateX(calc(36 * var(--g))) translateZ(calc(var(--lang) / -2 + 40 * var(--g))) rotateY(-90deg);
}

@keyframes ek-knipper {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

/* Schermpjes in de kasten, met lopende tekens */
/* Elk schermpje hangt in kast nummer --kast, geteld vanaf het begin van
   de gang (links) of vanaf het eind (rechts), net als de kasten op het
   canvas */
.ek-wandscherm {
  position: absolute;
  top: calc(-18 * var(--g));
  left: calc(-5 * var(--g));
  width: calc(10 * var(--g));
  height: calc(7 * var(--g));
  overflow: hidden;
  border-radius: calc(0.5 * var(--g));
  background: #06231E;
  box-shadow: 0 0 0 calc(0.4 * var(--g)) #0A1013, 0 0 0 calc(0.48 * var(--g)) #2A3840, 0 0 calc(2.4 * var(--g)) rgba(143, 227, 166, 0.35);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: calc(0.95 * var(--g));
  line-height: 1.45;
  color: #8FE3A6;
  padding: calc(0.4 * var(--g)) calc(0.6 * var(--g));
}

.ek-scherm-links {
  transform: translateX(calc(-35.8 * var(--g))) translateZ(calc((31.5 - var(--kast) * 17) * var(--g))) rotateY(90deg);
}

.ek-scherm-rechts {
  transform: translateX(calc(35.8 * var(--g))) translateZ(calc((var(--kast) * 17 - 371.5) * var(--g))) rotateY(-90deg);
}

.ek-wandscherm span {
  display: block;
  white-space: nowrap;
  animation: ek-rol 7s linear infinite;
}

@keyframes ek-rol {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.ek-vloer {
  width: calc(72 * var(--g));
  height: calc(420 * var(--g));
  left: calc(-36 * var(--g));
  top: calc(-210 * var(--g));
  transform: translateY(calc(28 * var(--g))) translateZ(calc(-210 * var(--g) + 40 * var(--g))) rotateX(90deg);
  background:
    linear-gradient(0deg, transparent 0%, rgba(7, 12, 14, 0.95) 70%),
    linear-gradient(90deg, rgba(92, 200, 255, 0.13) 0%, rgba(110, 240, 154, 0.04) 10%, transparent 20%, transparent 80%, rgba(110, 240, 154, 0.04) 90%, rgba(92, 200, 255, 0.13) 100%),
    linear-gradient(90deg, rgba(124, 198, 232, 0) 25%, rgba(150, 215, 238, 0.16) 50%, rgba(124, 198, 232, 0) 75%),
    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / calc(12 * var(--g)) calc(12 * var(--g)),
    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / calc(12 * var(--g)) calc(12 * var(--g)),
    #111B20;
}

.ek-plafond {
  width: calc(72 * var(--g));
  height: calc(420 * var(--g));
  left: calc(-36 * var(--g));
  top: calc(-210 * var(--g));
  transform: translateY(calc(-38 * var(--g))) translateZ(calc(-210 * var(--g) + 40 * var(--g))) rotateX(-90deg);
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 12, 14, 0.95) 70%),
    repeating-linear-gradient(180deg, transparent 0 calc(10 * var(--g)), rgba(214, 240, 248, 0.85) calc(10 * var(--g)) calc(11.5 * var(--g)), transparent calc(11.5 * var(--g)) calc(26 * var(--g))) 50% 0 / 22% 100% no-repeat,
    #0C1418;
}

/* Het eind van de gang: koel licht in de verte, en donker langs de randen */
.ek-dc-mist {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(12% 16% at calc(50% + 34 * var(--g)) 47%, rgba(186, 226, 240, 0.5) 0%, rgba(124, 198, 232, 0.14) 50%, transparent 100%),
    radial-gradient(130% 100% at calc(50% + 34 * var(--g)) 47%, transparent 55%, rgba(4, 8, 10, 0.7) 100%);
}

/* Het blokje vliegt de gang in en schuift een kast in */
/* Waar het blokje in verdwijnt, gloeit een kast op */
.ek-dc-gloed {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(-2 * var(--u));
  width: calc(10 * var(--u));
  height: calc(16 * var(--u));
  translate: -50% -50%;
  border-radius: calc(1 * var(--u));
  background: radial-gradient(circle, rgba(242, 217, 139, 0.75) 0%, rgba(242, 217, 139, 0.18) 45%, transparent 70%);
  opacity: calc(var(--p, 0) * clamp(0, calc((var(--q, 0) - 0.55) * 5), 1));
  mix-blend-mode: screen;
}

/* Het paneel: wat wij zien */
.ek-paneel {
  position: absolute;
  left: calc(-6 * var(--u));
  top: calc(-36 * var(--u));
  z-index: 4;
  width: calc(42 * var(--u));
  padding: calc(1.8 * var(--u)) calc(2.2 * var(--u)) calc(2 * var(--u));
  border-radius: calc(1.6 * var(--u));
  background: rgba(10, 22, 26, 0.74);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px rgba(143, 227, 166, 0.25), 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(0, 0, 0, 0.5);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: calc(1.45 * var(--u));
  line-height: 1.6;
  color: #A9C9C0;
  opacity: calc(var(--p, 0) * clamp(0, calc((var(--q, 0) - 0.3) * 4), 1));
  transform: translateY(calc((1 - clamp(0, calc((var(--q, 0) - 0.3) * 4), 1)) * 2 * var(--u)));
}

.ek-paneel-kop {
  display: flex;
  align-items: center;
  gap: calc(1 * var(--u));
  margin-bottom: calc(1 * var(--u));
  font-family: var(--font-body);
  font-size: calc(1.6 * var(--u));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E8F1EF;
}

.ek-paneel-kop i {
  width: calc(0.9 * var(--u));
  height: calc(0.9 * var(--u));
  border-radius: 50%;
  background: #8FE3A6;
  box-shadow: 0 0 calc(0.8 * var(--u)) #8FE3A6;
  animation: ek-knipper 1.6s ease-in-out infinite;
}

.ek-paneel-rij {
  display: grid;
  grid-template-columns: calc(7 * var(--u)) 1fr;
  gap: calc(1 * var(--u));
  white-space: nowrap;
}

.ek-paneel-rij b { font-weight: 500; color: #6E8A84; }
.ek-paneel-rij span { overflow: hidden; text-overflow: ellipsis; color: #F2D98B; }
.ek-paneel-rij:nth-child(3) span { color: #8FE3A6; }
.ek-paneel-rij:nth-child(4) span { color: #CFE4F0; }

/* ── Het blokje (3D) ──────────────────────────────────────────────── */

.ek-kubus {
  --ks: calc(11 * var(--u));
  width: var(--ks);
  height: var(--ks);
  translate: -50% -50%;
  perspective: calc(60 * var(--u));
}

.ek-kubus-draai {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: ek-draai 10s linear infinite;
}

@keyframes ek-draai {
  from { transform: rotateX(-22deg) rotateY(0deg); }
  to { transform: rotateX(-22deg) rotateY(360deg); }
}

.ek-kubus-draai > span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: calc(1 * var(--u));
  background: linear-gradient(145deg, #1F3B47 0%, #10232B 100%);
  box-shadow: inset 0 0 0 calc(0.25 * var(--u)) rgba(242, 217, 139, 0.75), 0 0 calc(3 * var(--u)) rgba(242, 217, 139, 0.35);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: calc(1.5 * var(--u));
  line-height: 1.25;
  text-align: center;
  color: #F2D98B;
  word-break: break-all;
  padding: calc(1.2 * var(--u));
}

.ek-kubus-draai > span:nth-child(1) { transform: translateZ(calc(var(--ks) / 2)); }
.ek-kubus-draai > span:nth-child(2) { transform: rotateY(90deg) translateZ(calc(var(--ks) / 2)); color: #8FE3A6; }
.ek-kubus-draai > span:nth-child(3) { transform: rotateY(180deg) translateZ(calc(var(--ks) / 2)); }
.ek-kubus-draai > span:nth-child(4) { transform: rotateY(-90deg) translateZ(calc(var(--ks) / 2)); color: #CFE4F0; }
.ek-kubus-draai > span:nth-child(5) { transform: rotateX(90deg) translateZ(calc(var(--ks) / 2)); }
.ek-kubus-draai > span:nth-child(6) { transform: rotateX(-90deg) translateZ(calc(var(--ks) / 2)); }

.ek-kubus-draai svg {
  width: 52%;
  height: 52%;
  fill: none;
  stroke: #F2D98B;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* ── Spelers: wat over scènes heen reist ───────────────────────────
   x en y in toneeleenheden. De telefoons staan altijd rechtop. */

.ek-speler,
.ek-tel.vw-telefoon {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  translate: -50% -50%;
  transform:
    translate(calc(var(--tel-x, 0) * var(--u)), calc(var(--tel-y, 0) * var(--u)))
    rotate(calc(var(--tel-r, 0) * 1deg))
    scale(var(--tel-s, 1));
  opacity: calc(1 - var(--tel-weg, 0));
}

/* De telefoons: de omlijsting van de homepage, met de houding van hier.
   Mama's telefoon staat zonder JavaScript waar hij bij de opening hoort. */
.ek-tel.vw-telefoon { --th: calc(76 * var(--u)); }
.ek-tel-mama { --tel-x: -34; --tel-y: 50; }

.ek-tel .vw-telefoon-zweef { animation: none; }

.ek-tel .vw-app-titel span { opacity: 1; }
.ek-tel .vw-knop-zoek { opacity: 1; display: grid; }

.ek-lijst {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(128 * var(--pt));
  bottom: 0;
  overflow: hidden;
}

.ek-lijst .vw-card-media img { object-position: 50% 62%; }

/* ── De tegeltjes ──────────────────────────────────────────────────
   De foto bestaat uit tegeltjes. Elk tegeltje draait om zodra --k over
   zijn drempel (--d) gaat: voorop het stukje foto, achterop een teken.
   Met --pak schuiven ze naar het midden, waar het blokje ontstaat. */

.ek-tegels {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--kol, 6), 1fr);
  grid-auto-rows: 1fr;
  perspective: 600px;
}

.ek-tegels i {
  --v: clamp(0, calc((var(--k, 0) * 1.4 - var(--d, 0.5)) * 6), 1);
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transform:
    translate(calc(var(--cx) * 100% * var(--pak, 0)), calc(var(--cy) * 100% * var(--pak, 0)))
    rotateY(calc(var(--v) * 180deg))
    scale(calc(1 - 0.35 * var(--pak, 0)));
}

.ek-tegels i > b,
.ek-tegels i > s {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ek-tegels i > b {
  inset: -0.5px;
  background-image: var(--foto);
  background-size: calc(var(--kol) * 100%) calc(var(--rij) * 100%);
  background-position: var(--bp);
}

.ek-tegels i > s {
  display: grid;
  place-items: center;
  margin: 4%;
  border-radius: 12%;
  background: #1C3540;
  box-shadow: inset 0 0 0 1px rgba(242, 217, 139, 0.35);
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: var(--teken, 15px);
  font-weight: 500;
  text-decoration: none;
  color: #F2D98B;
  transform: rotateY(180deg);
}

.ek-tegels i:nth-child(3n) > s { color: #8FE3A6; background: #17303A; }
.ek-tegels i:nth-child(5n) > s { color: #CFE4F0; background: #22404C; }

/* Zonder JavaScript is er geen raster: dan staat de foto er gewoon */
.ek-tegels-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ek-actief .ek-tegels-foto { visibility: hidden; }

/* De losse fotokaart die uit mama's telefoon komt */
.ek-fotokaart {
  width: calc(30 * var(--u));
  padding: calc(1 * var(--u)) calc(1 * var(--u)) calc(1.4 * var(--u));
  border-radius: calc(1.6 * var(--u));
  background: rgba(255, 255, 255, calc(1 - var(--pak, 0)));
  box-shadow: 0 calc(2.4 * var(--u)) calc(6 * var(--u)) rgba(60, 40, 20, calc(0.22 * (1 - var(--pak, 0))));
  /* Meteen stevig zodra hij loskomt, als een echte afdruk */
  opacity: clamp(0, calc((1 - var(--tel-weg, 0)) * 4), 1);
}

.ek-fotokaart-beeld {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: calc(1 * var(--u));
  background: rgba(239, 238, 234, calc(1 - var(--pak, 0)));
  --teken: calc(1.7 * var(--u));
}

.ek-fotokaart p {
  margin: calc(1 * var(--u)) calc(0.4 * var(--u)) 0;
  font-family: 'Lora', Georgia, serif;
  font-size: calc(1.7 * var(--u));
  font-weight: 600;
  color: color-mix(in srgb, #2E2721 calc((1 - var(--k, 0)) * 100%), #8C93A8);
  white-space: nowrap;
  overflow: hidden;
  opacity: calc(1 - var(--pak, 0) * 2);
}

.ek-fotokaart .ek-tegels { opacity: calc(1 - clamp(0, calc((var(--pak, 0) - 0.55) * 4), 1)); }

.ek-blokje { z-index: 6; opacity: calc((1 - var(--tel-weg, 0)) * clamp(0, calc((var(--pak, 0) - 0.35) * 2.2), 1)); }
.ek-blokje .ek-kubus { transform: scale(calc(0.3 + 0.7 * var(--pak, 0))); }

/* Bij oma: de tegeltjes op de kaart in de tijdlijn */
.ek-tel .vw-card-media { position: relative; }
.ek-tel .ek-tegels { --teken: calc(13 * var(--pt)); }

.ek-tel [data-ruis] {
  color: color-mix(in srgb, #2E2721 calc((1 - var(--k, 0)) * 100%), #8C93A8);
}

.ek-tel .vw-card-body[data-ruis] { color: color-mix(in srgb, #6B6055 calc((1 - var(--k, 0)) * 100%), #8C93A8); }

[data-ruis] { overflow-wrap: anywhere; }

/* Het slotje op oma's kaart: dicht, springt open, en weg */
.ek-slotje {
  --open: calc(1 - clamp(0, calc((var(--k, 0) - 0.8) * 7), 1));
  position: absolute;
  right: calc(12 * var(--pt));
  top: calc(12 * var(--pt));
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(44 * var(--pt));
  height: calc(44 * var(--pt));
  border-radius: 50%;
  background: #F2D98B;
  color: #2A2A3A;
  box-shadow: 0 0 0 3px rgba(28, 40, 64, 0.9), 0 6px 18px rgba(28, 40, 64, 0.35);
  opacity: clamp(0, calc((var(--k, 0) - 0.62) * 6), 1);
  transform: scale(calc(0.6 + 0.4 * clamp(0, calc((var(--k, 0) - 0.62) * 6), 1)));
}

.ek-slotje svg {
  width: 52%;
  height: 52%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ek-slotje .ek-beugel {
  transform: translateY(calc(var(--open) * -3.2px)) rotate(calc(var(--open) * -18deg));
  transform-origin: 16px 10px;
  transform-box: view-box;
}

/* De melding bovenin oma's scherm */
.ek-melding {
  --in: clamp(0, calc((var(--q, 0) - 0.02) * 6), 1);
  position: absolute;
  left: calc(10 * var(--pt));
  right: calc(10 * var(--pt));
  top: calc(52 * var(--pt));
  z-index: 8;
  display: flex;
  gap: calc(10 * var(--pt));
  align-items: center;
  padding: calc(12 * var(--pt));
  border-radius: calc(22 * var(--pt));
  background: rgba(244, 241, 234, 0.92);
  -webkit-backdrop-filter: blur(calc(20 * var(--pt)));
  backdrop-filter: blur(calc(20 * var(--pt)));
  box-shadow: 0 calc(8 * var(--pt)) calc(26 * var(--pt)) rgba(30, 25, 20, 0.16);
  opacity: var(--in);
  transform: translateY(calc((1 - var(--in)) * -140%));
}

.ek-melding-icoon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(38 * var(--pt));
  height: calc(38 * var(--pt));
  border-radius: calc(10 * var(--pt));
  background: #566250;
}

.ek-melding-icoon img {
  width: 64%;
  height: 64%;
  filter: brightness(0) invert(0.93) sepia(0.2) hue-rotate(50deg);
}

.ek-melding-tekst { display: block; min-width: 0; flex: 1; }
.ek-melding-tekst > span { display: block; }

/* Naam van de app links, tijd rechts */
.ek-melding-tekst > .ek-melding-kop {
  display: flex;
  justify-content: space-between;
  gap: calc(8 * var(--pt));
  font-size: calc(12 * var(--pt));
  line-height: calc(16 * var(--pt));
  color: #7A7268;
}

.ek-melding-titel {
  font-size: calc(14 * var(--pt));
  font-weight: 600;
  line-height: calc(19 * var(--pt));
  color: #2E2721;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ek-melding-body {
  font-size: calc(14 * var(--pt));
  line-height: calc(19 * var(--pt));
  color: #4A433C;
}

.ek-melding-foto {
  flex-shrink: 0;
  width: calc(40 * var(--pt));
  height: calc(40 * var(--pt));
  border-radius: calc(8 * var(--pt));
  object-fit: cover;
  object-position: 50% 62%;
}

/* Liefde van oma, als het moment open is */
.ek-hart .mi + .mi { display: none; }
.ek-tel-oma.is-open .ek-hart { color: #D98BA0; }
.ek-tel-oma.is-open .ek-hart .mi { display: none; }
.ek-tel-oma.is-open .ek-hart .mi + .mi { display: block; animation: vw-hart-tik 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }

/* ── Decor per scène ───────────────────────────────────────────────── */

.ek-decor {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.ek-prop {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  z-index: var(--z, 2);
  translate: -50% -50%;
  rotate: var(--r, 0deg);
  transform:
    translate(calc(var(--o, 0) * var(--dx, 0) * var(--u) * var(--beweeg)),
              calc(var(--o, 0) * var(--dy, -16) * var(--u) * var(--beweeg)))
    scale(calc(0.86 + 0.14 * var(--p, 0)));
  opacity: var(--p, 0);
}

.ek-prop > svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.ek-zweef { animation: ek-zweef 6s ease-in-out infinite; }

@keyframes ek-zweef {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(calc(-1.2 * var(--u))) rotate(2deg); }
}

.ek-sleutel-gloed { filter: drop-shadow(0 0 calc(2.4 * var(--u)) rgba(242, 200, 98, 0.55)); }
.ek-sleutel-groot { filter: drop-shadow(0 0 calc(5 * var(--u)) rgba(242, 200, 98, 0.75)); }

/* De kring: een gouden ring met het gezin erop, rond de sleutel */
.ek-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(52 * var(--u));
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(242, 217, 139, 0.3), 0 0 calc(6 * var(--u)) rgba(242, 217, 139, 0.06);
  opacity: var(--p, 0);
  transform: scale(calc(0.8 + 0.2 * var(--p, 0)));
}

.ek-lid {
  --hoek: 0deg;
  position: absolute;
  left: calc(cos(var(--hoek)) * 26 * var(--u));
  top: calc(sin(var(--hoek)) * 26 * var(--u));
  width: calc(10.5 * var(--u));
  translate: -50% -38%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(0.8 * var(--u));
  font-size: calc(1.9 * var(--u));
  font-weight: 500;
  white-space: nowrap;
  color: #F1EBD9;
  opacity: var(--p, 0);
  transform: scale(calc(0.7 + 0.3 * var(--p, 0)));
}

.ek-lid-foto {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.ek-lid-foto img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 calc(0.5 * var(--u)) #15241C, 0 0 0 calc(0.85 * var(--u)) rgba(242, 217, 139, 0.45);
}

.ek-lid-sleutel {
  --er: clamp(0, calc((var(--q, 0) - var(--vertraging, 0) - 0.4) * 14), 1);
  position: absolute;
  right: -10%;
  bottom: -6%;
  display: grid;
  place-items: center;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #F2C862;
  color: #3A2E14;
  box-shadow: 0 0 0 calc(0.45 * var(--u)) #15241C, 0 0 calc(2 * var(--u)) rgba(242, 200, 98, 0.7);
  opacity: var(--er);
  transform: scale(calc(0.3 + 0.7 * var(--er)));
}

.ek-lid-sleutel .ic { width: 62%; height: 62%; vertical-align: 0; stroke-width: 2.2; }

/* Mama heeft de sleutel al: haar telefoon maakte hem */
.ek-lid-eigen .ek-lid-sleutel { --er: 1; }

/* Een envelop reist van de sleutel naar een gezinslid, in een boog */
.ek-envelop {
  --t: clamp(0, calc((var(--q, 0) - var(--vertraging, 0)) / 0.42), 1);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  width: calc(8.5 * var(--u));
  translate: -50% -50%;
  transform:
    translate(calc(cos(var(--hoek)) * 21 * var(--u) * var(--t)),
              calc(sin(var(--hoek)) * 21 * var(--u) * var(--t) - var(--t) * (1 - var(--t)) * 14 * var(--u)))
    rotate(calc((1 - var(--t)) * var(--draai, 0deg)))
    scale(calc(0.45 + 0.55 * min(1, var(--t) * 3)));
  opacity: calc(min(1, var(--t) * 6) * (1 - clamp(0, calc((var(--t) - 0.86) * 8), 1)) * var(--p, 0));
}

.ek-envelop svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Hartjes bij oma */
.ek-hartjes .ic {
  position: absolute;
  color: #E89AAF;
  fill: currentColor;
  stroke: none;
  opacity: 0;
  animation: ek-hartje 3.4s ease-out infinite;
}

.ek-hartjes .ic:nth-child(2) { left: 40%; animation-delay: 1.1s; width: 70%; }
.ek-hartjes .ic:nth-child(3) { left: -30%; animation-delay: 2.2s; width: 55%; }

@keyframes ek-hartje {
  0% { opacity: 0; transform: translateY(0) scale(0.6); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translateY(calc(-12 * var(--u))) scale(1); }
}

/* Stoom boven de koffie */
.ek-stoom path {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: ek-stoom 3.4s ease-in-out infinite;
}

.ek-stoom path:nth-child(2) { animation-delay: 1.1s; }
.ek-stoom path:nth-child(3) { animation-delay: 2.2s; }

@keyframes ek-stoom {
  0% { opacity: 0; transform: translateY(6px) scaleY(0.8); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(-10px) scaleY(1.1); }
}

/* Het noodblad */
.ek-noodblad {
  aspect-ratio: 210 / 297;
  padding: 9% 9% 8%;
  border-radius: calc(0.8 * var(--u));
  background: #FFFFFF;
  box-shadow: 0 calc(2 * var(--u)) calc(5 * var(--u)) rgba(39, 35, 30, 0.14), 0 calc(0.3 * var(--u)) calc(0.8 * var(--u)) rgba(39, 35, 30, 0.08);
  color: #2E2721;
  font-size: calc(1.45 * var(--u));
  line-height: 1.35;
}

.ek-noodblad-kop {
  display: flex;
  align-items: center;
  gap: 6%;
  padding-bottom: 6%;
  margin-bottom: 7%;
  border-bottom: 1px solid #ECE6DA;
}

.ek-noodblad-kop img { width: 14%; }

.ek-noodblad-kop b {
  display: block;
  font-family: 'Lora', Georgia, serif;
  font-size: 1.45em;
  font-weight: 600;
  line-height: 1.15;
}

.ek-noodblad-kop small {
  display: block;
  color: #8F867C;
  font-size: 0.85em;
}

.ek-noodblad-code {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.55em 8%;
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 1.12em;
  letter-spacing: 0.08em;
  color: #3A4435;
}

.ek-noodblad-code span {
  padding: 0.25em 0;
  border-radius: 0.3em;
  background: #F4F1EA;
  text-align: center;
}

.ek-noodblad-voet {
  display: flex;
  align-items: flex-end;
  gap: 8%;
  margin-top: 10%;
}

.ek-noodblad-qr { width: 38%; flex-shrink: 0; }
.ek-noodblad-qr svg { display: block; width: 100%; height: auto; }

.ek-noodblad-regels { flex: 1; }

.ek-noodblad-regels i {
  display: block;
  height: 0.42em;
  margin-top: 0.65em;
  border-radius: 1em;
  background: #ECE6DA;
}

.ek-noodblad-regels i:nth-child(2) { width: 82%; }
.ek-noodblad-regels i:nth-child(3) { width: 90%; }
.ek-noodblad-regels i:nth-child(4) { width: 60%; }

/* ── De stappen: glazen kaarten over het podium ────────────────────── */

.ek-stappen {
  position: relative;
  z-index: 2;
  margin-top: -100vh;
  padding-bottom: 12vh;
}

.ek-stap {
  display: flex;
  align-items: center;
  min-height: 92vh;
}

.ek-kaart-tekst {
  width: min(31rem, 40vw);
  margin-left: max(28px, calc((100vw - 1180px) / 2 + 28px));
  padding: 30px 32px 32px;
  border-radius: 28px;
  background: rgba(255, 252, 247, 0.74);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 20px 50px rgba(60, 40, 20, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  color: var(--text-primary);
  opacity: calc(0.15 + 0.85 * var(--tp, 1));
  transform: translateY(calc((1 - var(--tp, 1)) * 30px * var(--beweeg)));
}

.ek-donker .ek-kaart-tekst {
  background: rgba(8, 16, 18, 0.62);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.09);
  color: #EEF2EF;
}

.ek-kaart-tekst h2 {
  margin: 14px 0 14px;
  font-size: clamp(1.85rem, 2.8vw, 2.45rem);
  text-wrap: balance;
}

.ek-kaart-tekst > p:not(.ek-stap-label) {
  font-size: clamp(1.02rem, 1.2vw, 1.1rem);
  line-height: 1.62;
  color: var(--text-secondary);
}

.ek-donker .ek-kaart-tekst h2 { color: #F7F3EA; }
.ek-donker .ek-kaart-tekst > p:not(.ek-stap-label) { color: #BAC8C4; }
.ek-kaart-tekst .vw-stift { color: var(--text-primary); }
.ek-donker .ek-kaart-tekst .vw-stift { color: #F7F3EA; }

.ek-stap-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--a);
}

.ek-stap-nr {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--t);
  color: var(--a);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  font-variant-numeric: lining-nums;
  line-height: 1;
  letter-spacing: 0;
}

/* De markeerstift in de stappen: getekend zodra je bij de tekst bent */
.js .ek-stap .vw-stift {
  background-size: 0% var(--stift-dik);
  transition: background-size 1s cubic-bezier(0.65, 0, 0.35, 1) 0.25s;
}

.js .ek-stap.is-gelezen .vw-stift { background-size: 100% var(--stift-dik); }

/* De opening: tekst gecentreerd bovenin, de telefoon komt eronder op */
.ek-begin {
  align-items: flex-start;
  min-height: 100vh;
  padding-top: clamp(24px, 6vh, 64px);
  text-align: center;
}

.ek-begin-tekst {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 28px;
  opacity: calc(0.1 + 0.9 * var(--tp, 1));
  transform: translateY(calc((1 - var(--tp, 1)) * -30px * var(--beweeg)));
}

.ek-begin .eyebrow { justify-content: center; color: #566250; }

.ek-begin h1 {
  margin: 6px 0 18px;
  font-size: clamp(2.5rem, 4.6vw, 3.9rem);
  text-wrap: balance;
}

.ek-begin .lead {
  max-width: 640px;
  margin: 0 auto;
  color: #5E5146;
  text-wrap: pretty;
}

.ek-begin .vw-scrollhint {
  justify-content: center;
  margin-top: 22px;
  color: #3A3027;
}

/* ═══════════════════════════════════════════════════════════════
   Onder het verhaal
   ═══════════════════════════════════════════════════════════════ */

.ek-betekent {
  --a: #4A5A43;
  --t: #D9E7D0;
  --stift: #C3DDB2;
  background: linear-gradient(180deg, #F5F8F1 0%, var(--surface) 100%);
}

.ek-kaarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 960px;
  margin: 0 auto;
}

.ek-kaart {
  padding: 26px 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

.ek-kaart .vw-kaart-icoon {
  margin-bottom: 18px;
  background: var(--k-tint, #EBF0E8);
  color: var(--k-inkt, #566250);
}

.ek-kaart h3 {
  margin-bottom: 8px;
  font-size: 1.22rem;
  line-height: 1.25;
  text-wrap: balance;
}

.ek-kaart p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.58;
}

/* Eerlijk is eerlijk: de serverruimte, maar dan als sectie */
.ek-serverruimte {
  --a: #8FE3A6;
  --t: rgba(143, 227, 166, 0.16);
  --stift: rgba(143, 227, 166, 0.3);
  --rand: 90px;
  position: relative;
  overflow: hidden;
  padding: calc(var(--rand) + 24px) 0 calc(var(--rand) + 16px);
  background:
    linear-gradient(180deg, var(--surface) 0, #0B1215 var(--rand), #0B1215 calc(100% - var(--rand)), var(--surface) 100%);
  color: #E8F1EF;
}

.ek-serverruimte::before {
  content: '';
  position: absolute;
  inset: var(--rand) 0;
  background:
    radial-gradient(circle, rgba(143, 227, 166, 0.55) 0 1.3px, transparent 2px) 0 0 / 46px 22px,
    radial-gradient(circle, rgba(124, 198, 232, 0.45) 0 1.2px, transparent 2px) 23px 11px / 46px 33px,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 92px);
  -webkit-mask: radial-gradient(70% 80% at 50% 50%, transparent 30%, #000 85%);
  mask: radial-gradient(70% 80% at 50% 50%, transparent 30%, #000 85%);
  opacity: 0.55;
  pointer-events: none;
}

.ek-serverruimte .wrap { position: relative; }
.ek-serverruimte h2,
.ek-serverruimte h3 { color: #F7F3EA; }
.ek-serverruimte p,
.ek-serverruimte .lead { color: #AEC0BB; }
.ek-serverruimte .vw-intro .vw-stift { color: #F7F3EA; }
.ek-serverruimte .vw-intro { margin-bottom: 40px; }

.ek-lijsten {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 22px;
  max-width: 980px;
  margin: 0 auto;
}

.ek-lijst-blok {
  padding: 28px 30px 30px;
  border-radius: var(--radius-lg);
  background: rgba(16, 28, 32, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.ek-lijst-blok h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  font-size: 1.3rem;
}

.ek-lijst-blok h3 .vw-kaart-icoon {
  width: 36px;
  height: 36px;
  background: rgba(242, 217, 139, 0.14);
  color: #F2D98B;
}

.ek-lijst-open h3 .vw-kaart-icoon {
  background: rgba(174, 192, 187, 0.12);
  color: #AEC0BB;
}

.ek-lijst-blok ul {
  list-style: none;
  display: grid;
  gap: 10px;
}

.ek-lijst-dicht ul { grid-template-columns: 1fr 1fr; gap: 10px 18px; }

.ek-lijst-blok li {
  position: relative;
  padding-left: 22px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #DCE5E2;
}

.ek-lijst-blok li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: #F2D98B;
  box-shadow: 0 0 8px rgba(242, 217, 139, 0.6);
}

.ek-lijst-open li { color: #AEC0BB; }

.ek-lijst-open li::before {
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px #7F9690;
}

.ek-nacht-noot {
  max-width: 760px;
  margin: 30px auto 0;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.65;
}

.ek-nacht-noot a {
  color: #F2D98B;
  font-weight: 600;
  border-bottom: 1px solid rgba(242, 217, 139, 0.45);
}

/* Zo raak je je sleutel niet kwijt */
.ek-herstel {
  --a: #2F6A8A;
  --t: #C3DDEB;
  --stift: #9CC9E4;
  background: var(--surface);
}

.ek-tegels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  max-width: 1120px;
  margin: 0 auto;
  counter-reset: tegel;
}

.ek-tegel {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-md);
}

.ek-tegel::before {
  counter-increment: tegel;
  content: counter(tegel);
  position: absolute;
  right: 22px;
  top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.7rem;
  line-height: 1;
  color: #C9DCE6;
}

.ek-tegel .vw-kaart-icoon {
  margin-bottom: 18px;
  background: #E6F0F5;
  color: #2F6A8A;
}

.ek-tegel h3 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  line-height: 1.25;
}

.ek-tegel p {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.58;
}

.ek-tip {
  display: flex;
  align-items: center;
  gap: 26px;
  max-width: 900px;
  margin: 30px auto 0;
  padding: 24px 30px 24px 24px;
  border-radius: var(--radius-lg);
  background: #EEF5F8;
  box-shadow: inset 0 0 0 1px #D5E6EE;
}

.ek-tip-blad {
  flex-shrink: 0;
  width: 74px;
  rotate: -6deg;
  --u: 3.6px;
}

.ek-tip-blad .ek-noodblad { font-size: 4.4px; }

.ek-tip p {
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--text-primary);
}

.ek-tip p + p {
  margin-top: 8px;
  font-size: 0.94rem;
  color: var(--text-secondary);
}

/* Waarom: rustig, met de sleutel van Sanne erbij */
.ek-waarom {
  --a: #8F651F;
  --t: #F7DDA0;
  --stift: #F2C862;
  background: #FBF3EC;
}

.ek-waarom-binnen {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
  max-width: 1020px;
  margin: 0 auto;
}

.ek-waarom-beeld {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6E2 0%, #F8E7C8 55%, rgba(248, 231, 200, 0) 72%);
}

.ek-waarom-beeld svg {
  width: 64%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 18px 30px rgba(143, 101, 31, 0.22));
}

.ek-waarom-tekst h2 {
  margin: 12px 0 18px;
  font-size: clamp(2rem, 3.4vw, 2.7rem);
  text-wrap: balance;
}

.ek-waarom-tekst p {
  font-size: 1.08rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

.ek-waarom-tekst p + p { margin-top: 14px; }

.ek-waarom-tekst .vw-stift { color: var(--text-primary); }

/* Voor wie het precies wil weten */
.ek-techniek-sectie { padding-top: 8px; }

.ek-techniek {
  max-width: 900px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: var(--card-subtle);
  box-shadow: inset 0 0 0 1px var(--border);
}

.ek-techniek summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 26px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ek-techniek summary::-webkit-details-marker { display: none; }

.ek-techniek summary .vw-kaart-icoon {
  width: 36px;
  height: 36px;
  background: #E8E4DB;
  color: var(--text-secondary);
}

.ek-techniek summary::after {
  content: '';
  width: 30px;
  height: 30px;
  margin-left: auto;
  flex-shrink: 0;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.6px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.6px 12px no-repeat,
    var(--card);
  box-shadow: inset 0 0 0 1px var(--border);
  color: var(--text-secondary);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ek-techniek[open] summary::after { transform: rotate(45deg); }

.ek-techniek-lijst {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px 32px;
  padding: 4px 26px 28px;
}

.ek-techniek-lijst h3 {
  margin-bottom: 6px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

.ek-techniek-lijst p {
  font-size: 0.95rem;
  line-height: 1.62;
  color: var(--text-secondary);
}

/* Een markering op de tweede regel van een kop mag de staartjes (j, g)
   van de regel erboven niet afdekken: hij ligt achter de tekst */
main h2 { isolation: isolate; }
main h2 .vw-markering { position: relative; z-index: -1; }

/* ── Smallere schermen ───────────────────────────────────────────── */

@media (max-width: 1080px) {
  .ek-tegels-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Het podium vult het scherm; wat er te zien is staat in het bovenste
     deel, de kaarten schuiven er onderin overheen */
  .ek-podium { height: 100svh; }

  .ek-anker {
    left: 50%;
    top: 34%;
    --u: min(0.6cqh, 1.2cqw);
  }

  .ek-kring {
    background:
      radial-gradient(60% 40% at 50% 34%, rgba(242, 200, 98, 0.32) 0%, rgba(242, 200, 98, 0.08) 45%, transparent 75%),
      radial-gradient(120% 100% at 50% 40%, #213A2C 0%, #15241C 55%, #0E1813 100%);
  }

  .ek-dc { --g: min(0.6cqh, 1.2cqw); }
  .ek-dc-3d { perspective-origin: 50% 34%; }
  .ek-gang { left: 50%; top: 34%; }
  .ek-dc-mist {
    background:
      radial-gradient(20% 14% at 50% 34%, rgba(186, 226, 240, 0.5) 0%, rgba(124, 198, 232, 0.14) 50%, transparent 100%),
      radial-gradient(130% 100% at 50% 34%, transparent 55%, rgba(4, 8, 10, 0.7) 100%);
  }

  .ek-tel-mama { --tel-x: 0; --tel-y: 73; }

  .ek-paneel { left: calc(-29 * var(--u)); top: calc(-46 * var(--u)); width: calc(58 * var(--u)); font-size: calc(2 * var(--u)); }
  .ek-paneel-kop { font-size: calc(2.1 * var(--u)); }
  .ek-paneel-rij { grid-template-columns: calc(9.5 * var(--u)) 1fr; }

  .vw-kop-weg .site-header {
    transform: translateY(-100%);
    box-shadow: none;
  }

  .vw-kop-weg .site-header:focus-within { transform: none; }

  .ek-stappen { margin-top: -100svh; padding-bottom: 6svh; }

  .ek-stap {
    align-items: flex-end;
    min-height: 100svh;
    padding-bottom: 5svh;
  }

  .ek-kaart-tekst {
    width: auto;
    margin: 0 14px;
    padding: 20px 20px 22px;
    border-radius: 22px;
  }

  .ek-kaart-tekst h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); margin: 10px 0 10px; }
  .ek-kaart-tekst > p:not(.ek-stap-label) { font-size: 0.98rem; line-height: 1.55; }

  .ek-begin { padding-top: 70px; align-items: flex-start; }
  .ek-begin-tekst { padding: 0 20px; }
  .ek-begin h1 { font-size: clamp(2rem, 8.6vw, 2.6rem); margin-bottom: 12px; }
  .ek-begin .lead { font-size: 1.02rem; }
  .ek-begin .vw-scrollhint { margin-top: 14px; font-size: 0.9rem; }
  .ek-begin .vw-scrollhint-pijl { width: 32px; height: 32px; }

  .ek-waarom-binnen {
    grid-template-columns: 1fr;
    gap: 22px;
    text-align: center;
  }

  .ek-waarom-beeld { width: min(240px, 60vw); margin: 0 auto; }
  .ek-waarom-tekst .eyebrow { justify-content: center; }

  .ek-lijsten { grid-template-columns: 1fr; }
  .ek-serverruimte { --rand: 64px; }

  .ek-techniek-lijst { grid-template-columns: 1fr; }

  .ek-tip { gap: 18px; padding: 20px; }
  .ek-tip-blad { width: 58px; }
}

@media (max-width: 560px) {
  .ek-kaarten,
  .ek-tegels-grid { grid-template-columns: 1fr; }
  .ek-lijst-dicht ul { grid-template-columns: 1fr; }
  .ek-lijst-blok { padding: 22px 20px 24px; }
  .ek-tip { flex-direction: column; align-items: flex-start; }
  .ek-techniek summary { padding: 18px 20px; font-size: 1.1rem; }
  .ek-techniek-lijst { padding: 4px 20px 24px; }
}

/* ── Minder beweging ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .ek-zweef,
  .ek-wandscherm span,
  .ek-kubus-draai,
  .ek-bokeh i,
  .ek-stof i,
  .ek-paneel-kop i,
  .ek-stoom path { animation: none; }

  .ek-hartjes { display: none; }

  .js .ek-stap .vw-stift { background-size: 100% var(--stift-dik); transition: none; }
}