/* verhaal.css — Ons verhaal als scrollverhaal (views/paginas/ons-verhaal.ejs).

   Twee standen:
   - Zonder JavaScript of met beweging uit: alles staat onder elkaar in de
     eindstand, niets plakt aan het scherm.
   - Met public/js/verhaal.js: die zet .verhaal-beweegt op [data-verhaal]. Dan
     plakken de delen een paar schermhoogtes lang vast en loopt het verhaal mee
     met het scrollen. JS zet per deel --p (0 tot 1) en waar nodig data-stap.
   De rest van de pagina (aanbod, dozen, beloftes) staat in paginas.css. */

/* 1 De naam ----------------------------------------------------------------- */
.vnaam { position: relative; background: var(--nacht); color: #fff; }
.vnaam__plak {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(var(--meld-h) + var(--kop-h) + 2rem) var(--rand) 6rem;
  overflow: hidden;
  isolation: isolate;
}
.vnaam__beeld { position: absolute; inset: 0; z-index: -1; }
.vnaam__beeld picture, .vnaam__beeld img { display: block; width: 100%; height: 100%; }
.vnaam__beeld img { object-fit: cover; object-position: 50% 100%; opacity: 0.62; }
.vnaam__beeld::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 20, 40, 0.72) 0%, rgba(10, 20, 40, 0.34) 45%, rgba(10, 20, 40, 0.9) 100%);
}
.vnaam__inhoud { text-align: center; max-width: 100%; }
.vnaam__oog { color: var(--op-donker-zacht); margin-bottom: 1.4rem; }
.naamspel {
  margin: 0;
  font-family: var(--font-schreef);
  font-weight: 400;
  font-size: clamp(3.3rem, 12.5vw, 10.5rem);
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-shadow: 0 2px 40px rgba(3, 7, 15, 0.45);
}
.naamspel__gat { display: inline-block; width: 0.26em; }
.naamspel__nieuw { display: none; }
.vnaam__onder { margin-top: 1.6rem; display: grid; gap: 0.35rem; }
.vnaam__zin { margin: 0; font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: var(--op-donker); }
.vnaam__zin--2 { font-family: var(--font-schreef); font-size: clamp(1.35rem, 2.6vw, 2rem); color: #fff; }
.vnaam__verder {
  position: absolute;
  left: 50%;
  bottom: 28px;
  width: 1.5px;
  height: 52px;
  margin-left: -0.75px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
  border-radius: 2px;
}
.vnaam__verder span {
  position: absolute;
  inset: 0;
  background: #fff;
  animation: vnaam-verder 2.2s var(--ease-rustig) infinite;
}
@keyframes vnaam-verder { from { transform: translateY(-100%); } to { transform: translateY(100%); } }

.verhaal-beweegt .vnaam { height: 240vh; }
.verhaal-beweegt .vnaam__plak { position: sticky; top: 0; height: 100vh; height: 100svh; }
.verhaal-beweegt .vnaam__beeld { transform: scale(calc(1.1 - 0.1 * var(--p, 0))); transform-origin: 50% 100%; }
/* De woorden in elkaar: breedtes gemeten door verhaal.js (--b-*, in px). */
.verhaal-beweegt .naamspel__vodo {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: calc(var(--b-vodo, 2.1em) * (1 - var(--vodo, 0)));
  opacity: calc(1 - 1.6 * var(--vodo, 0));
  filter: blur(calc(10px * var(--vodo, 0)));
  white-space: nowrap;
}
.verhaal-beweegt .naamspel__gat--1 { width: calc(var(--b-gat, 0.26em) * (1 - var(--vodo, 0))); }
.verhaal-beweegt .naamspel__gat--2 { width: calc(var(--b-gat, 0.26em) * (1 - var(--samen, 0))); }
.verhaal-beweegt .naamspel__wissel {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  height: 1em;
  width: calc(var(--b-oud) + (var(--b-nieuw) - var(--b-oud)) * var(--samen, 0));
}
/* Beide letters liggen gecentreerd op de plek die meekrimpt of -groeit. Eerst
   gaat de oude letter weg, daarna komt de nieuwe: tegelijk gaf een rommelig
   dubbel beeld. */
.verhaal-beweegt .naamspel__wissel > span { display: block; position: absolute; top: 0; left: 50%; line-height: 1; }
.verhaal-beweegt .naamspel__oud {
  opacity: clamp(0, calc(1 - 2.2 * var(--samen, 0)), 1);
  transform: translate3d(-50%, calc(-0.1em * var(--samen, 0)), 0);
  filter: blur(calc(6px * var(--samen, 0)));
}
.verhaal-beweegt .naamspel__nieuw {
  opacity: clamp(0, calc(2.2 * var(--samen, 0) - 1.2), 1);
  transform: translate3d(-50%, calc(0.1em * (1 - var(--samen, 0))), 0);
  filter: blur(calc(6px * (1 - var(--samen, 0))));
}
.verhaal-beweegt .vnaam__onder { display: grid; gap: 0; }
.verhaal-beweegt .vnaam__zin { grid-area: 1 / 1; }
.verhaal-beweegt .vnaam__zin--1 { opacity: calc(1 - var(--zin1, 0)); transform: translateY(calc(-10px * var(--zin1, 0))); }
.verhaal-beweegt .vnaam__zin--2 { opacity: var(--zin2, 0); transform: translateY(calc(12px * (1 - var(--zin2, 0)))); }
.verhaal-beweegt .vnaam__verder { opacity: calc(1 - 4 * var(--p, 0)); }

/* 2 De kaart ------------------------------------------------------------------ */
.vkaart-deel { background: var(--ijs); }
.vkaart-deel__plak {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  width: min(100% - 2 * var(--rand), var(--breedte));
  margin: 0 auto;
  padding: clamp(4rem, 9vw, 7rem) 0;
  align-items: center;
}
@media (min-width: 900px) {
  .vkaart-deel__plak { grid-template-columns: 0.9fr 1.1fr; }
  .vkaart-deel__kaart { order: 2; }
}
.vkaart-deel__kaart {
  position: relative;
  aspect-ratio: 600 / 640;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--ijs);
  box-shadow: var(--schaduw-2);
}
.vkaart { display: block; width: 100%; height: 100%; }
.vkaart-deel__stappen { display: grid; gap: 2rem; }
.vstap h2 { font-size: clamp(1.7rem, 3.2vw, 2.6rem); max-width: 16ch; margin-bottom: 0.8rem; }
.vstap p:not(.vstap__nr) { margin: 0; color: var(--tekst-zacht); font-size: clamp(1.05rem, 1.4vw, 1.2rem); max-width: 30rem; }
.vstap__nr {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: 0 0 1rem;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}

/* De kaart zelf. */
.vkaart__zee { fill: var(--ijs); }
.vkaart__land { fill: #fff; stroke: #B9C8D8; stroke-width: 0.8; stroke-linejoin: round; }
.vkaart__land--nl { fill: #FBE1CF; stroke: #E9B998; }
.vkaart__land--it { fill: #DDEAF6; }
.vkaart__land--at { fill: #EEF3F8; }
.vkaart__boog { fill: none; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 8; }
.vkaart__boog--zomer { stroke: var(--signaal); }
.vkaart__boog--winter { stroke: #A8693E; }
.vkaart__boog--wij { stroke: var(--blauw); stroke-width: 3.5; }
.vkaart__teken { fill: none; stroke: #fff; stroke-width: 14; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.vkaart text { font-family: var(--font); font-size: 14px; fill: var(--tekst-zacht); }
.vkaart__land-naam { font-size: 11.5px !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--tekst-stil) !important; }
.vkaart__boognaam text { font-weight: 600; }
.vkaart__boognaam--zomer text { fill: #B8480E; }
.vkaart__boognaam--winter text { fill: #8A542F; }
.vkaart__boognaam--wij text { fill: var(--blauw); }
.vkaart .vkaart__klein { font-size: 12.5px; font-weight: 400; }
.vkaart__punt circle { fill: var(--inkt); stroke: #fff; stroke-width: 2.5; }
.vkaart__speld path { fill: var(--inkt); }
.vkaart__speld-oog { fill: #fff; }
.vkaart__speld text { font-size: 15px; font-weight: 600; fill: var(--inkt); paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 4px; stroke-linejoin: round; }
.vkaart__speld .vkaart__cortina { font-size: 12.5px; font-weight: 400; fill: var(--tekst-zacht); }
/* De streek Cadore als ring rond Vodo. */
.vkaart__cadore ellipse { fill: rgba(226, 98, 27, 0.1); stroke: var(--signaal); stroke-width: 1.5; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.vkaart__cadore text { font-size: 12px !important; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; fill: #B8480E !important; paint-order: stroke; stroke: rgba(255, 255, 255, 0.9); stroke-width: 3px; }
.verhaal-beweegt .vkaart__cadore text { opacity: 0; transition: opacity 0.5s var(--ease); }
.verhaal-beweegt .vkaart__cadore.is-aan text { opacity: 1; }
/* Stap 3 is van ons: de routes van onze betovergrootvader gaan naar de achtergrond. */
.verhaal-beweegt .vkaart__boog--zomer, .verhaal-beweegt .vkaart__boog--winter { transition: opacity 0.6s var(--ease); }
.verhaal-beweegt [data-stap='3'] .vkaart__boog--zomer, .verhaal-beweegt [data-stap='3'] .vkaart__boog--winter { opacity: 0.25; }
.verhaal-beweegt [data-stap='3'] .vkaart__boognaam--zomer.is-aan, .verhaal-beweegt [data-stap='3'] .vkaart__boognaam--winter.is-aan { opacity: 0; }
.vkaart__golf { fill: none; stroke: var(--signaal); stroke-width: 2; opacity: 0; }

.verhaal-beweegt .vkaart-deel { height: 330vh; }
.verhaal-beweegt .vkaart-deel__plak {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding: calc(var(--kop-h) + 1.25rem) 0 1.5rem;
  align-content: center;
}
.verhaal-beweegt .vkaart-deel__kaart { height: 100%; max-height: min(78svh, 720px); aspect-ratio: auto; }
.verhaal-beweegt .vkaart-deel__stappen { display: grid; gap: 0; }
.verhaal-beweegt .vstap {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
  pointer-events: none;
}
.verhaal-beweegt [data-stap='1'] .vstap[data-stap-nr='1'],
.verhaal-beweegt [data-stap='2'] .vstap[data-stap-nr='2'],
.verhaal-beweegt [data-stap='3'] .vstap[data-stap-nr='3'] { opacity: 1; transform: none; pointer-events: auto; transition-delay: 0.12s; }
/* Stap 1 zoomt mee met het scrollen in op Cadore (verhaal.js zet de schaal),
   aan het begin van stap 2 zoomt de kaart uit tot Nederland. Eerst was dit een
   vaste overgang en deed stap 1 niets als je scrolde. */
.verhaal-beweegt .vkaart { transform-origin: 70% 79%; will-change: transform; }
.verhaal-beweegt .vkaart__speld { opacity: 0; transform: translate3d(0, -40px, 0); transition: opacity 0.5s var(--ease), transform 0.9s var(--veer); }
.verhaal-beweegt [data-binnen] .vkaart__speld { opacity: 1; transform: none; transition-delay: 0.2s; }
.verhaal-beweegt [data-binnen] .vkaart__golf { animation: vkaart-golf 2.4s var(--ease) 1s infinite; }
@keyframes vkaart-golf { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(4); } }
.vkaart__golf { transform-box: fill-box; transform-origin: center; }
.verhaal-beweegt .vkaart__labels, .verhaal-beweegt .vkaart__punt--nl, .verhaal-beweegt .vkaart__cortina { transition: opacity 0.6s var(--ease); }
.verhaal-beweegt .vkaart__labels .vkaart__land-naam, .verhaal-beweegt .vkaart__punt--nl { opacity: 0; transition: opacity 0.6s var(--ease); }
.verhaal-beweegt [data-stap='2'] .vkaart__land-naam, .verhaal-beweegt [data-stap='3'] .vkaart__land-naam,
.verhaal-beweegt [data-stap='2'] .vkaart__punt--nl, .verhaal-beweegt [data-stap='3'] .vkaart__punt--nl { opacity: 1; transition-delay: 0.5s; }
.verhaal-beweegt .vkaart__boognaam { opacity: 0; transition: opacity 0.5s var(--ease); }
.verhaal-beweegt .vkaart__boognaam.is-aan { opacity: 1; }
.verhaal-beweegt .vkaart__cortina { opacity: 0; }
.verhaal-beweegt [data-stap='3'] .vkaart__cortina { opacity: 1; transition-delay: 0.3s; }
@media (max-width: 899px) {
  .verhaal-beweegt .vkaart-deel__plak { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; gap: 1.25rem; }
  .verhaal-beweegt .vkaart-deel__kaart { max-height: none; }
  .verhaal-beweegt .vstap h2 { font-size: 1.5rem; margin-bottom: 0.5rem; }
  .verhaal-beweegt .vstap__nr { margin-bottom: 0.6rem; }
}

/* 3 en 5 De foto's ----------------------------------------------------------- */
.vfoto {
  margin: 0;
  padding: 12px 12px 0;
  background: #fff;
  border-radius: 8px;
  box-shadow: var(--schaduw-3);
}
.vfoto img { display: block; width: 100%; height: auto; border-radius: 3px; }
.vfoto figcaption {
  padding: 0.8rem 0.25rem 1rem;
  font-family: var(--font-schreef);
  font-size: 1.15rem;
  color: var(--tekst-zacht);
}
.vvroeger { padding: clamp(5rem, 11vw, 9rem) 0 clamp(3rem, 8vw, 6rem); overflow: hidden; }
.vvroeger__raster, .vnu__raster { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 900px) {
  .vvroeger__raster { grid-template-columns: 1fr 1fr; }
  .vnu__raster { grid-template-columns: 1.1fr 0.9fr; }
}
.vfoto--vroeger { transform: rotate(-2deg); max-width: 560px; }
.vvroeger__tekst h2, .vnu__tekst h2 { max-width: 14ch; }
.vvroeger__tekst p:not(.groot-lead):not(.oogje), .vnu__tekst p:not(.groot-lead):not(.oogje) { color: var(--tekst-zacht); max-width: 34rem; }
.verhaal-beweegt .vfoto--vroeger {
  transform: translate3d(0, calc(60px * (1 - var(--p, 0))), 0) rotate(calc(-7deg + 6deg * var(--p, 0)));
}

/* 4 De sprong naar 2015 --------------------------------------------------------- */
.vsprong { background: linear-gradient(180deg, var(--nacht) 0%, var(--diep) 100%); color: #fff; }
.vsprong__plak { padding: clamp(5rem, 10vw, 8rem) 0; }
.vsprong__raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .vsprong__raster { grid-template-columns: 1fr 1fr; } }
.vsprong .oogje { color: var(--op-donker-zacht); margin-bottom: 0.25rem; }
.vsprong__jaar {
  margin: 0 0 0.5rem;
  font-family: var(--font-kop);
  font-weight: 700;
  font-size: clamp(5.5rem, 17vw, 13rem);
  line-height: 0.9;
  letter-spacing: -0.06em;
}
/* Met strakke letterafstand valt de laatste letter buiten het vak, en het
   verloop (background-clip: text) wordt alleen binnen het vak getekend: de 5
   werd half afgesneden. Wat ruimte rechts en onder lost dat op. */
.vsprong__jaar span {
  display: inline-block;
  padding: 0 0.1em 0.06em 0;
  margin-right: -0.1em;
  background: linear-gradient(180deg, #fff 30%, var(--gletsjer) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.vsprong__kop { font-size: clamp(1.6rem, 3vw, 2.4rem); max-width: 18ch; margin-bottom: 0.6rem; color: #fff; }
.vsprong__lead { color: var(--op-donker); font-size: clamp(1.05rem, 1.5vw, 1.25rem); margin: 0 0 1.8rem; }
.vsprong__teller {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.45rem;
  margin: 0;
  padding: 0.9rem 1.2rem;
  border-radius: var(--r-m);
  background: rgba(255, 255, 255, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--op-donker);
}
/* "Meer dan" pas als de teller er is: "meer dan 0" klopt niet. */
.verhaal-beweegt .vsprong__teller > span:first-child { opacity: 0; transition: opacity 0.4s var(--ease); }
.verhaal-beweegt .vsprong__teller.is-vol > span:first-child { opacity: 1; }
.vsprong__teller strong { font-family: var(--font-kop); font-size: 1.9rem; letter-spacing: -0.03em; color: #fff; font-variant-numeric: tabular-nums; }
.vsprong__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: vproduct; }
.vproduct a {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s var(--ease);
}
.vproduct a:hover { background: rgba(255, 255, 255, 0.11); }
.vproduct__foto { display: block; width: 76px; height: 76px; border-radius: var(--r-s); overflow: hidden; background: #fff; }
.vproduct__foto img { width: 100%; height: 100%; object-fit: contain; }
.vproduct__tekst { display: grid; gap: 0.2rem; }
.vproduct__tekst strong { font-size: 1.05rem; }
.vproduct__tekst span { color: var(--op-donker-zacht); font-size: 0.9375rem; line-height: 1.45; }

.verhaal-beweegt .vsprong { height: 330vh; }
.verhaal-beweegt .vsprong__plak {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  align-items: center;
  padding: calc(var(--kop-h) + 1rem) 0 1.5rem;
}
.verhaal-beweegt .vsprong__jaar span { transform: scale(calc(0.8 + 0.2 * var(--jaar, 1))); opacity: var(--jaar, 1); transform-origin: 0 80%; }
.verhaal-beweegt .vproduct {
  opacity: 0.2;
  transform: translate3d(24px, 0, 0);
  transition: opacity 0.6s var(--ease), transform 0.8s var(--ease);
}
.verhaal-beweegt [data-stap='1'] .vproduct:nth-child(-n+1),
.verhaal-beweegt [data-stap='2'] .vproduct:nth-child(-n+2),
.verhaal-beweegt [data-stap='3'] .vproduct:nth-child(-n+3),
.verhaal-beweegt [data-stap='4'] .vproduct:nth-child(-n+4) { opacity: 1; transform: none; }
@media (max-width: 899px) {
  /* Op de telefoon past de hele lijst niet in één scherm: één product tegelijk. */
  .verhaal-beweegt .vsprong__raster { gap: 1.5rem; }
  .verhaal-beweegt .vsprong__lijst { gap: 0; }
  .verhaal-beweegt .vproduct { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
  .verhaal-beweegt [data-stap='1'] .vproduct:nth-child(-n+1),
  .verhaal-beweegt [data-stap='2'] .vproduct:nth-child(-n+2),
  .verhaal-beweegt [data-stap='3'] .vproduct:nth-child(-n+3),
  .verhaal-beweegt [data-stap='4'] .vproduct:nth-child(-n+4) { opacity: 0; }
  .verhaal-beweegt [data-stap='1'] .vproduct:nth-child(1),
  .verhaal-beweegt [data-stap='2'] .vproduct:nth-child(2),
  .verhaal-beweegt [data-stap='3'] .vproduct:nth-child(3),
  .verhaal-beweegt [data-stap='4'] .vproduct:nth-child(4) { opacity: 1; transform: none; pointer-events: auto; }
  .verhaal-beweegt .vsprong__lead { margin-bottom: 1rem; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .verhaal-beweegt .vsprong__jaar { font-size: 4.6rem; }
  .verhaal-beweegt .vsprong__kop { font-size: 1.35rem; }
}

/* 5 Nu ----------------------------------------------------------------------- */
.vnu { padding: clamp(5rem, 11vw, 9rem) 0 clamp(2rem, 6vw, 4rem); overflow: hidden; }
.vnu__beelden { position: relative; padding: 2.5rem 0 0 1.5rem; }
.vfoto--nu { transform: rotate(1.5deg); }
.vfoto--klein {
  position: absolute;
  left: 0;
  top: 0;
  width: 34%;
  padding: 7px 7px 22px;
  transform: rotate(-7deg);
}
.verhaal-beweegt .vfoto--nu { transform: translate3d(0, calc(50px * (1 - var(--p, 0))), 0) rotate(calc(4deg - 2.5deg * var(--p, 0))); }
.verhaal-beweegt .vfoto--klein {
  opacity: clamp(0, (var(--p, 0) - 0.25) * 5, 1);
  transform: translate3d(calc(-50px * (1 - var(--p, 0))), calc(40px * (1 - var(--p, 0))), 0) rotate(calc(-14deg + 7deg * var(--p, 0)));
}

/* 6 De dozen om aan te wijzen ------------------------------------------------ */
/* Het donkere vlak heeft een gat op de plek van de actieve doos (clip-path met
   evenodd). dozenkaart.js zet de randen van het gat (--g1 t/m --g4) en
   .is-actief; omdat elk gat evenveel punten heeft, schuift het gat soepel van
   doos naar doos. De kaart met het product hangt boven de doos. */
.dozenkaart { position: relative; max-width: 760px; margin: 0 auto; }
.dozenkaart__beeld { position: relative; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--schaduw-2); }
.dozenkaart__beeld img { display: block; width: 100%; height: auto; transition: transform 1.2s var(--ease); }
.dozenkaart__donker {
  position: absolute;
  inset: 0;
  background: rgba(8, 16, 32, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease), clip-path 0.45s var(--ease);
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    var(--p1, 50% 50%), var(--p2, 50% 50%), var(--p3, 50% 50%), var(--p4, 50% 50%), var(--p5, 50% 50%), var(--p1, 50% 50%));
}
.dozenkaart__foto { position: relative; }
/* De omtrek van elke doos (voorkant en zijkant), in procenten van de foto. */
.dozenkaart__lijnen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(191, 227, 247, 0.85));
}
.dozenkaart__lijnen polygon {
  fill: none;
  stroke: rgba(255, 255, 255, 0);
  stroke-width: 2.5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: stroke 0.3s var(--ease);
}
/* Over de foto maar nog niet op een doos: laten zien dat de dozen iets doen. */
.dozenkaart:hover:not(.is-actief) .dozenkaart__lijnen polygon { stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; }
.dozenkaart__lijnen polygon.is-aan { stroke: #fff; }
.dozenkaart.is-actief .dozenkaart__donker { opacity: 1; }
.dozenkaart__vak {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--b);
  height: var(--h);
  outline: none;
}

.dozenkaart__kaart {
  position: absolute;
  bottom: calc(100% + 14px);
  left: 50%;
  z-index: 3;
  display: grid;
  gap: 0.3rem;
  width: min(270px, 78vw);
  padding: 1rem 1.1rem 1.05rem;
  border-radius: var(--r-m);
  background: #fff;
  color: var(--inkt);
  box-shadow: var(--schaduw-3);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 10px, 0) scale(0.97);
  transform-origin: 50% 100%;
  transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.3s;
  pointer-events: none;
}
.dozenkaart__vak--links .dozenkaart__kaart { left: 0; transform: translate3d(0, 10px, 0) scale(0.97); transform-origin: 0 100%; }
.dozenkaart__vak--rechts .dozenkaart__kaart { left: auto; right: 0; transform: translate3d(0, 10px, 0) scale(0.97); transform-origin: 100% 100%; }
/* Een pijltje naar de doos. */
.dozenkaart__kaart::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border: 8px solid transparent;
  border-top-color: #fff;
}
.dozenkaart__vak--links .dozenkaart__kaart::after { left: 32px; }
.dozenkaart__vak--rechts .dozenkaart__kaart::after { left: auto; right: 24px; margin-left: 0; }
.dozenkaart__vak.is-aan .dozenkaart__kaart,
.dozenkaart__vak:focus-visible .dozenkaart__kaart {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition: opacity 0.3s var(--ease), transform 0.45s var(--veer), visibility 0s;
  pointer-events: auto;
}
.dozenkaart__vak--links.is-aan .dozenkaart__kaart, .dozenkaart__vak--links:focus-visible .dozenkaart__kaart,
.dozenkaart__vak--rechts.is-aan .dozenkaart__kaart, .dozenkaart__vak--rechts:focus-visible .dozenkaart__kaart { transform: none; }
.dozenkaart__naam { font-family: var(--font-kop); font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; }
.dozenkaart__prijs { font-weight: 650; }
.dozenkaart__prijs span { font-weight: 400; color: var(--tekst-stil); }
.dozenkaart__zin { font-size: 0.875rem; line-height: 1.45; color: var(--tekst-zacht); }
.dozenkaart__op { font-size: 0.8125rem; font-weight: 600; color: var(--rood); }
.dozenkaart__knop {
  justify-self: start;
  margin-top: 0.35rem;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
}
.dozenkaart__knop::after { content: ' \203A'; }
.dozenkaart__hint { margin: 0.9rem 0 0; text-align: center; font-size: 0.875rem; color: var(--tekst-stil); }
.dozenkaart__hint--tik { display: none; }
@media (hover: none) {
  .dozenkaart__hint--muis { display: none; }
  .dozenkaart__hint--tik { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
  .dozenkaart__donker, .dozenkaart__kaart { transition: none; }
}