/* MVDK — tijdelijke pagina voor mvdk.me
   De stijl staat beschreven in brandpunt.md: Ink, Bone, en Ember alleen in het hart. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/fonts/plus-jakarta-sans-latin.woff2") format("woff2");
}

/* Arial met de maten van Plus Jakarta Sans, zodat er niets verspringt als het lettertype binnenkomt */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 103.11%;
  ascent-override: 100.67%;
  descent-override: 21.53%;
  line-gap-override: 0%;
}

:root {
  --bone: #f1e9d7;
  --ink: #0e0e0e;
  --ink-soft: #1a1a1a;
  --ember: #ff4a1f;
  /* Secundaire tekst op donker: Bone op 65% (7,2:1) */
  --bone-muted: rgba(241, 233, 215, 0.65);
  --lijn: rgba(241, 233, 215, 0.12);

  --font: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, sans-serif;

  /* Ritme: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 192 */
  --marge: clamp(1.25rem, -0.3333rem + 7.037vw, 6rem);
  --boven: clamp(1.5rem, 0.833rem + 2.963vw, 3.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --micro: 0.18s;
  --component: 0.36s;

  /* De hartslag: rustig, iets onder de 45 slagen per minuut */
  --slag: 1.4s;
  --eerste-slag: 0.65s;
}

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

html {
  /* Ook op html, anders schuift de browser de clip van body door naar het venster (als hidden) en kun je op een telefoon opzij schuiven */
  overflow-x: clip;
  background: var(--ink);
  color: var(--bone);
  color-scheme: dark;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--marge);
  overflow-x: clip;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Een heel zacht Ember-verloop dat van onder het scherm opkomt */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(90% 55% at 50% 115%, rgba(255, 74, 31, 0.09), transparent 70%);
}

::selection {
  background: var(--bone);
  color: var(--ink);
}

/* Focus nooit in Ember: Bone op donker */
:focus-visible {
  outline: 2px solid var(--bone);
  outline-offset: 3px;
}

a {
  color: inherit;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Type-schaal */
.display {
  font-size: clamp(2.75rem, 1.6667rem + 4.8148vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
}
.h1 {
  font-size: clamp(2.25rem, 1.6667rem + 2.5926vw, 4rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.intro {
  font-size: clamp(1.125rem, 1.0625rem + 0.2778vw, 1.3125rem);
  line-height: 1.5;
}
.klein {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.45;
}
.label {
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bone-muted);
}
.muted {
  color: var(--bone-muted);
}

/* Kop */
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 2rem;
  margin-top: var(--boven);
}
.woordmerk {
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}

/* Opening: het hart in het midden */
.opening {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(4rem, 2.667rem + 5.926vw, 8rem) 0;
}
/* Telefoon: de opening vult precies het scherm, de voet begint eronder.
   svh = de hoogte mét de adresbalk, zodat niets verspringt als die wegschuift. */
@media (max-width: 767px) {
  .opening {
    min-height: 100vh;
    min-height: 100svh;
    padding: 2rem 0;
  }
}
.opening h1 {
  text-wrap: balance;
}
.opening .kop {
  margin-top: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem);
}
.opening .intro {
  max-width: 34ch;
  margin-top: 1.5rem;
  text-wrap: balance;
}
.acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: clamp(2rem, 1.667rem + 1.481vw, 3rem);
}
.opening .belofte {
  margin-top: 1rem;
}

/* Het merk, van glas. De M loopt vol met vloeibaar glas, het oppervlak klotst en komt tot rust,
   er glijdt één schittering overheen en dan valt de punt erin. Daarna licht elke slag het glas van binnen op.
   Alles beweegt via transform en opacity op eigen lagen: het glas wordt één keer getekend en daarna alleen geschoven. */
.hart {
  position: relative;
  width: clamp(7rem, 5.333rem + 7.407vw, 12rem);
  aspect-ratio: 1;
}
.merk {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}
.glas {
  position: absolute;
  inset: 0;
  -webkit-mask: var(--m-vorm) center / 100% 100% no-repeat;
  mask: var(--m-vorm) center / 100% 100% no-repeat;
  --m-vorm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='14 14 72 72'%3E%3Cpath d='M14%2074%20V14%20A36%2036%200%200%201%2050%2050%20H38%20V74%20A12%2012%200%200%201%2026%2086%20A12%2012%200%200%201%2014%2074%20Z%20M86%2074%20V14%20A36%2036%200%200%200%2050%2050%20H62%20V74%20A12%2012%200%200%200%2074%2086%20A12%2012%200%200%200%2086%2074%20Z'/%3E%3C/svg%3E");
}

/* Met WebGL (glas.js) rekent een shader het glas per pixel uit; dan maakt het CSS-glas plaats.
   Het canvas is 3% ruimer dan het merk, zodat de rand nergens tegen de kant van het canvas valt. */
.glas-gl {
  position: absolute;
  inset: -3%;
  width: 106%;
  height: 106%;
}
.hart.gl .glas {
  display: none;
}
/* De shader tekent de punt als glazen kraal. De HTML-punt blijft voor de hartslag en de klok, maar onzichtbaar. */
.hart.gl .punt {
  visibility: hidden;
}

/* Vullen: .vul is het vloeistofoppervlak (stijgt en kantelt), .vul-binnen doet precies het omgekeerde,
   zodat het glas zelf stil staat en alleen de rand van de vloeistof beweegt.
   .vul is 1,6× zo groot als het merk, zodat de schuine rand nooit de zijkant laat zien. */
.vul {
  position: absolute;
  top: 0;
  left: -30%;
  right: -30%;
  bottom: -60%;
  overflow: hidden;
  transform-origin: 50% 0%;
  animation: vul 1.15s cubic-bezier(0.37, 0, 0.63, 1) 0.65s both;
}
.vul-binnen {
  position: absolute;
  top: 0;
  left: 18.75%;
  width: 62.5%;
  height: 62.5%;
  transform-origin: 50% 0%;
  animation: vul-binnen 1.15s cubic-bezier(0.37, 0, 0.63, 1) 0.65s both;
}
@keyframes vul {
  0% { transform: translateY(62.5%) rotate(-7deg); }
  30% { transform: translateY(36%) rotate(5deg); }
  55% { transform: translateY(15%) rotate(-2.5deg); }
  78% { transform: translateY(4%) rotate(1deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
@keyframes vul-binnen {
  0% { transform: rotate(7deg) translateY(-100%); }
  30% { transform: rotate(-5deg) translateY(-57.6%); }
  55% { transform: rotate(2.5deg) translateY(-24%); }
  78% { transform: rotate(-1deg) translateY(-6.4%); }
  100% { transform: rotate(0deg) translateY(0); }
}
/* Het oppervlak: een lichtende rand die meegolft en verdwijnt als het glas vol is */
.golf {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 4%;
  background: radial-gradient(ellipse 50% 100% at 50% 0%, rgba(255, 255, 255, 0.75), transparent 70%) 0 0 / 12.5% 100% repeat-x;
  animation:
    golf 1.15s linear 0.65s both,
    weg 0.35s var(--ease) 1.6s both;
}
@keyframes golf {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}
@keyframes weg {
  to { opacity: 0; }
}

.glas-vorm,
.binnenlicht,
.veeg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Het licht van de slag, vanuit de punt: de binnenkant van de poten en de onderkant van de bogen kleuren mee */
.binnenlicht {
  background: radial-gradient(circle at 50% 75%, rgba(255, 74, 31, 0.8), rgba(255, 74, 31, 0.28) 21%, transparent 44%);
  opacity: 0.4;
  will-change: opacity;
  animation: klop-licht var(--slag) linear var(--eerste-slag) infinite;
}
/* De glans: het licht op het glas. Volgt de cursor (main.js), alsof jij de lichtbron bent. */
.glans {
  position: absolute;
  inset: -30%;
  background:
    radial-gradient(ellipse 15% 9% at 37.5% 30%, rgba(255, 255, 255, 0.5), transparent 70%),
    radial-gradient(ellipse 11% 7% at 64% 30%, rgba(255, 255, 255, 0.28), transparent 70%);
  will-change: translate;
  animation: verschijn 0.8s var(--ease) 1.6s both;
}
/* Eén schittering als het glas vol is */
.veeg {
  background: linear-gradient(110deg, transparent 36%, rgba(255, 255, 255, 0.4) 50%, transparent 64%);
  transform: translateX(-110%);
  animation: veeg 1.1s cubic-bezier(0.45, 0, 0.2, 1) 1.75s both;
}
@keyframes veeg {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

/* De punt: cirkel r=7 op (50, 68) in het merk van 72 breed → 19,44% breed, midden op 50% / 75% */
.hart .punt {
  position: absolute;
  left: 40.28%;
  top: 65.28%;
  width: 19.44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ember);
  will-change: transform;
  animation:
    groei 0.5s cubic-bezier(0.34, 1.25, 0.64, 1) 0.1s both,
    verschijn 0.15s linear 0.1s both,
    klop var(--slag) linear var(--eerste-slag) infinite;
}
/* De laag om de punt: kijkt mee met de cursor en geeft een extra slag bij een tik (main.js).
   Via de losse translate- en scale-eigenschappen, zodat het niet botst met de hartslag op .punt. */
.kijk {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-origin: 50% 75%;
  will-change: translate, scale;
}
/* Een tik op het hart: een Ember-ring die vanuit de punt uitdijt en vervaagt */
.ring {
  position: absolute;
  left: 40.28%;
  top: 65.28%;
  width: 19.44%;
  aspect-ratio: 1;
  border: 1.5px solid var(--ember);
  border-radius: 50%;
  pointer-events: none;
  animation: ring 0.9s var(--ease) forwards;
}
@keyframes ring {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(4.5); opacity: 0; }
}
.hart {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.gloed {
  will-change: translate;
}

/* Het hele merk geeft heel licht mee met elke slag */
.merk {
  will-change: transform;
  animation: klop-merk var(--slag) linear var(--eerste-slag) infinite;
}

/* De gloed rond het hart, gecentreerd op de punt (50% breed, 75% hoog in het merk) */
.gloed {
  position: absolute;
  left: -125%;
  top: -100%;
  width: 350%;
  aspect-ratio: 1;
  pointer-events: none;
  animation: verschijn 1.2s var(--ease) 0.15s both;
}
.gloed > span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 74, 31, 0.24), rgba(255, 74, 31, 0.08) 45%, transparent);
  opacity: 0.55;
  will-change: transform, opacity;
  animation: klop-gloed var(--slag) linear var(--eerste-slag) infinite;
}

@keyframes groei {
  from { transform: scale(0); }
}
@keyframes groei-omlaag {
  from { transform: scaleY(0); }
}
@keyframes verschijn {
  from { opacity: 0; }
}
/* Lub-dub: een sterke slag, een zachtere erachteraan, dan een lange uitademing.
   De hartslag heeft een eigen, vloeiende curve per stuk: zacht aanzetten, zacht landen.
   Tussen de slagen komt hij niet helemaal tot stilstand, zodat de beweging doorloopt. */
@keyframes klop {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  11% { transform: scale(1.26); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  23% { transform: scale(1.04); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  33% { transform: scale(1.16); animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
  64%, 100% { transform: scale(1); }
}
@keyframes klop-merk {
  0% { transform: scale(1); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  11% { transform: scale(1.012); animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  23% { transform: scale(1.002); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  33% { transform: scale(1.007); animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
  64%, 100% { transform: scale(1); }
}
@keyframes klop-licht {
  0% { opacity: 0.4; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  11% { opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  23% { opacity: 0.6; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  33% { opacity: 0.85; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
  72%, 100% { opacity: 0.4; }
}
@keyframes klop-gloed {
  0% { transform: scale(1); opacity: 0.55; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  11% { transform: scale(1.08); opacity: 1; animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1); }
  23% { transform: scale(1.02); opacity: 0.7; animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  33% { transform: scale(1.05); opacity: 0.88; animation-timing-function: cubic-bezier(0.35, 0, 0.25, 1); }
  72%, 100% { transform: scale(1); opacity: 0.55; }
}

/* De kop: elk woord schuift omhoog vanonder een eigen rand. Per woord, nooit per letter.
   De extra ruimte rond de rand houdt onderstokken en overhang vrij; de negatieve marge zet de layout terug. */
.kop .woord {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0.1em 0.06em 0.18em;
  margin: -0.1em -0.06em -0.18em;
}
.kop .woord > span {
  display: inline-block;
  animation: woord 1.1s var(--ease) both;
  animation-delay: calc(550ms + var(--i) * 90ms);
}
@keyframes woord {
  from { transform: translateY(115%); }
}

/* Binnenkomen zonder op JavaScript te wachten */
.reveal {
  animation: reveal 0.9s var(--ease) both;
  animation-delay: var(--d, 0ms);
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

/* Knoppen (brandpunt.md, hoofdstuk 7) */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  height: 3rem;
  padding: 0 1.5rem;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* Loslaten: zachte veer terug */
  transition: transform 0.35s var(--ease);
}
.knop:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}
/* Secundair op donker: Bone-vlak met Ink-tekst */
.knop-secundair {
  background: var(--bone);
  color: var(--ink);
}

/* Hover: het label rolt omhoog en dezelfde tekst komt van onder binnen */
.rol {
  display: block;
  height: 1.25em;
  overflow: hidden;
}
.rol > span {
  display: block;
  transition: transform var(--component) var(--ease);
}
.pijl {
  display: inline-block;
  transition: transform var(--micro) var(--ease);
}
@media (hover: hover) {
  .knop:hover .rol > span {
    transform: translateY(-100%);
  }
  .knop:hover .pijl {
    transform: translateX(2px);
  }
}

/* Magnetisch: alleen de aanvraagknop, alleen met een muis. De zone is iets groter dan de knop. */
.magneet {
  display: inline-flex;
  margin: -0.75rem;
  padding: 0.75rem;
}
.magneet > span {
  display: inline-flex;
  transition: transform 0.3s var(--ease);
}

/* Kopiëren */
.kopie {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.knop-kopie {
  gap: 0.75rem;
  padding: 0 1.25rem 0 1rem;
  background: var(--ink-soft);
  color: var(--bone);
  font-size: 1.0625rem;
  font-weight: 500;
}
.icoon {
  position: relative;
  display: grid;
  width: 1.25rem;
  height: 1.25rem;
}
.icoon svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--micro) var(--ease), transform var(--micro) var(--ease);
}
.icoon .vinkje {
  opacity: 0;
  transform: scale(0.6);
}
.vinkje path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s var(--ease);
}
.gekopieerd {
  position: absolute;
  left: 100%;
  margin-left: 0.75rem;
  white-space: nowrap;
  color: var(--bone-muted);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.13s var(--ease), transform 0.13s var(--ease);
  pointer-events: none;
}
.kopie.is-klaar .icoon .kopieer {
  opacity: 0;
  transform: scale(0.6);
}
.kopie.is-klaar .icoon .vinkje {
  opacity: 1;
  transform: none;
}
.kopie.is-klaar .vinkje path {
  stroke-dashoffset: 0;
}
.kopie.is-klaar .gekopieerd {
  opacity: 1;
  transform: none;
  transition-duration: var(--component);
}

/* Voetlinks: de punt van het hart landt voor de link waar je naartoe gaat.
   De regel schuift opzij om plaats te maken, de pijl vertrekt naar rechtsboven en een nieuwe komt van linksonder.
   De andere links vallen terug, zodat alleen jouw keuze oplicht. Uit is ~30% sneller dan in. */
.voet li {
  position: relative;
  transition: opacity var(--component) var(--ease);
}
.voet li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ember);
  transform: scale(0);
  transition: transform 0.25s var(--ease);
}
.voet li > * {
  transition: transform 0.25s var(--ease);
}
.link {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.25rem;
  text-decoration: none;
}
/* Het raakvlak loopt door tot over de punt: als de regel opzij schuift, blijft de cursor op de link */
.link::before {
  content: "";
  position: absolute;
  inset: -0.25rem 0 -0.25rem -1rem;
}
.pijl-wissel {
  position: relative;
  display: inline-block;
  overflow: hidden;
  width: 1em;
  height: 1.2em;
  line-height: 1.2;
  vertical-align: bottom;
  text-align: center;
}
.pijl-wissel > span {
  display: block;
  transition: transform 0.25s var(--ease);
}
.pijl-wissel > span + span {
  position: absolute;
  inset: 0;
  transform: translate(-100%, 100%);
}
/* Bij het werk rolt de omschrijving door naar het adres waar je heen gaat */
.bestemming {
  height: 1.45em;
  overflow: hidden;
}
.bestemming > span {
  display: block;
  transition: transform 0.25s var(--ease);
}

.voet li:has(.link:focus-visible)::before {
  transform: scale(1);
}
.voet li:has(.link:focus-visible) > * {
  transform: translateX(1rem);
}
@media (hover: hover) {
  .voet li:has(.link:hover)::before {
    transform: scale(1);
    transition: transform var(--component) var(--ease) 60ms;
  }
  .voet li:has(.link:hover) > * {
    transform: translateX(1rem);
    transition-duration: var(--component);
  }
  .link:hover .pijl-wissel > span {
    transform: translate(100%, -100%);
    transition-duration: var(--component);
  }
  .link:hover .pijl-wissel > span + span {
    transform: none;
  }
  .voet li:has(.link:hover) .bestemming > span {
    transform: translateY(-100%);
    transition-duration: var(--component);
  }
  .voet-grid:has(.link:hover) li:not(:has(.link:hover)) {
    opacity: 0.35;
  }
}

/* Voet */
.voet {
  border-top: 1px solid var(--lijn);
  padding-top: 2rem;
}
.voet-grid {
  display: grid;
  gap: 2rem;
}
@media (min-width: 768px) {
  .voet-grid {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    max-width: 40rem;
  }
}
.voet .label {
  margin-bottom: 1rem;
}
.voet ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.voet li .klein {
  display: block;
}
.voet-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 4rem;
  padding: 1.5rem 0 2rem;
  border-top: 1px solid var(--lijn);
}
.voet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}

/* Lockup: merk ≈ 1,07 × de lettergrootte, afstand = één poot (een derde van het merk) */
.lockup {
  display: inline-flex;
  align-items: center;
  gap: calc(1.07em / 3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.lockup svg {
  width: 1.07em;
  height: 1.07em;
  flex-shrink: 0;
}

/* Minder beweging: alleen korte fades, en het hart staat stil */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-name: verschijn !important;
    animation-duration: 0.15s !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity !important;
    transition-duration: 0.15s !important;
  }
  .knop:active {
    transform: none;
  }
  .voet li::before {
    transform: none !important;
    opacity: 0;
  }
  .voet li:has(.link:hover, .link:focus-visible)::before {
    opacity: 1;
  }
  .voet li > *,
  .pijl-wissel > span,
  .bestemming > span {
    transform: none !important;
  }
}