/* --- sticky bar --- */
.vl-bar{
  position:sticky;top:0;z-index:80;background:rgba(247,244,241,.86);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
/* Sinds 2026-09-15 zonder logo (klant): alleen bellen en Menu, rechts. */
.vl-bar__in{display:flex;align-items:center;justify-content:flex-end;gap:12px;height:74px}
/* Bovenaan de voorpagina is de balk geen strook maar een deel van de pagina:
   geen lijn, geen blur, gewoon het papier waar de hero ook op staat. motion.js
   zet html.vl-at-top zolang de hero gepind is en nog niet is uitgezoomd; de
   lijn komt terug zodra de pagina begint. */
.vl-bar{transition:background var(--dur-mid) ease,border-color var(--dur-mid) ease}
html.vl-at-top .vl-bar{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
/* .vl-bar__status bestaat niet meer in de opmaak: de beschikbaarheidsregel is
   op 2026-09-14 uit de balk gehaald. De optie blijft in de admin staan (hij is
   ook de bron voor een latere contactsectie), maar de balk draagt hem niet. */
/* Zelfde materiaal als .btn: rechte hoeken, 2px inkt, en bij hover een dunne
   emberstreep die van links aangroeit. Geen stempelschaduw - dat is Crotona. */
.vl-bar__btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:12px;padding:.75em 1.15em;border-radius:2px;
  border:2px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.005em;
}
/* De primaire actie in de balk: bellen. Inktvlak met papieren tekst (klant,
   2026-09-15: meer contrast, geen oranje), vierkant, en hij verdwijnt onder
   640px - daaronder duwt een derde element de balk uit elkaar. Het nummer
   komt uit de opties. */
.vl-bar__call{
  display:inline-flex;align-items:center;
  padding:.75em 1.15em;border-radius:2px;border:2px solid var(--ink);
  background:var(--ink);color:var(--paper);
  font-family:var(--font-body);font-size:15px;font-weight:600;letter-spacing:.005em;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.vl-bar__call:hover,.vl-bar__call:focus-visible{background:var(--paper);color:var(--ink)}
@media (max-width:640px){
  .vl-bar__call{display:none}
}
.vl-bar__btn::after{
  content:"";position:absolute;left:0;bottom:0;height:.14em;width:100%;
  background:var(--coral);transform:scaleX(0);transform-origin:0 50%;
  transition:transform var(--dur-fast) var(--ease-out);
}
.vl-bar__btn:hover::after,.vl-bar__btn:focus-visible::after{transform:scaleX(1)}
.vl-bar__lines{position:relative;width:18px;height:12px}
.vl-bar__lines span{position:absolute;left:0;width:18px;height:1.8px;background:currentColor;transition:transform .25s ease,top .25s ease}
.vl-bar__lines span:nth-child(1){top:2px}
.vl-bar__lines span:nth-child(2){top:8px}
[aria-expanded="true"] .vl-bar__lines span:nth-child(1){top:5px;transform:rotate(45deg)}
[aria-expanded="true"] .vl-bar__lines span:nth-child(2){top:5px;transform:rotate(-45deg)}

/* --- laminate panel ---
   Taak 8C. De padding bovenaan is het koord: het lanyard-element ligt sinds
   de fysica als vaste laag over het hele scherm en neemt dus geen hoogte meer
   in. De min() erin houdt de pas op korte schermen alsnog heel - liever een
   kort koord dan een pas die onder de vouw verdwijnt.
   overflow:clip is het vangnet onder eis B9: een pas die je hard opzij trekt
   zwaait het beeld uit, en mag de pagina daarmee nooit breder maken. clip in
   plaats van hidden, want hidden maakt er een scrollcontainer van. */
.vl-lam{
  position:fixed;inset:0;z-index:120;display:grid;place-items:start center;align-content:start;
  padding-top:clamp(92px,min(22vh,100vh - 660px),210px);overflow:clip;
}
.vl-lam[hidden]{display:none}
.vl-lam__backdrop{position:absolute;inset:0;background:rgba(15,10,17,.72);backdrop-filter:blur(6px);opacity:0;transition:opacity var(--dur-mid) ease}
.vl-lam-open .vl-lam__backdrop{opacity:1}
.vl-lam-open{overflow:hidden}

/* Het koord: een vaste laag over het volle scherm waar de simulatie in tekent.
   Vangt niets af - je pakt de pas, niet het touw. */
.vl-lam__lanyard{position:fixed;inset:0;width:100%;height:100%;margin:0;z-index:1;pointer-events:none}
.vl-lam__band{display:block;width:100%;height:100%;font-size:12px}
/* Geen viewBox: de gebruikers-eenheden van deze SVG zijn schermpixels, zodat
   de simulatie haar punten er rechtstreeks in kan schrijven.
   Het koord is een geweven band van 2.6em (31 px) - op verzoek van de klant
   dikker en van stof, geen glimmend lint meer: keperpatroon als basis, een
   vezelkorrel eroverheen, een donkere zelfkant aan weerszijden en twee
   stiksels net binnen de rand. De afstanden van stiksel en zelfkant rekent
   laminate-physics.js uit deze font-size (BAND_W = 2.6). */
.vl-lam__band-core{fill:none;stroke:url(#vl-band-weave);stroke-width:2.6em;stroke-linecap:butt;stroke-linejoin:round}
.vl-lam__band-grain{fill:none;stroke:url(#vl-band-grain);stroke-width:2.6em;stroke-linecap:butt;stroke-linejoin:round;opacity:.5}
.vl-lam__band-rim{fill:none;stroke:rgba(0,0,0,.45);stroke-width:.14em;stroke-linejoin:round}
.vl-lam__band-edge{fill:none;stroke:rgba(255,255,255,.34);stroke-width:.09em;stroke-dasharray:.24em .17em;stroke-linecap:round}
.vl-lam__band-txt{
  font-family:var(--font-tech);font-size:.92em;font-weight:700;letter-spacing:.2em;
  fill:rgba(255,255,255,.84);
}
/* De klem: laag boven de pas, vangt niets af. Chroom zit sinds 2026-09-15
   hier en niet meer op het koord. */
.vl-lam__clip{position:fixed;inset:0;z-index:3;pointer-events:none}
.vl-lam__clip svg{display:block;width:100%;height:100%}
.vl-lam__clip-crimp{fill:url(#vl-clip-steel);stroke:rgba(0,0,0,.6);stroke-width:1}
.vl-lam__clip-seam{fill:none;stroke:rgba(0,0,0,.42);stroke-width:1.2}

.vl-lam__card{
  position:relative;z-index:2;width:min(380px,88vw);transform-style:preserve-3d;
  touch-action:none;cursor:grab;will-change:transform;
}
/* De fysica schrijft transform per frame; een CSS-overgang erbij vecht daarmee
   om dezelfde eigenschap. Die overgang leeft daarom uitsluitend nog in
   .vl-lam--static hieronder - gezet zodra de simulatie niet draait: bij
   verminderde beweging, of als handmatige noodrem. Dan komt de pas binnen
   zoals in taak 8 en staat het koord als rechte band stil. */
.vl-lam__card.is-dragging{cursor:grabbing}
.vl-lam--static .vl-lam__card{transform:translateY(-14px);transition:transform var(--dur-slow) var(--ease-out)}
.vl-lam-open .vl-lam--static .vl-lam__card{transform:translateY(0)}
.vl-lam__card.is-flipped .vl-lam__face--front{transform:rotateY(180deg)}
.vl-lam__card.is-flipped .vl-lam__face--back{transform:rotateY(0)}

.vl-lam__face{
  background:var(--ink);color:#fff;border-radius:14px;padding:26px 26px 18px;
  box-shadow:0 40px 80px rgba(0,0,0,.5);backface-visibility:hidden;
  transition:transform var(--dur-slow) var(--ease-out);
}
.vl-lam__face--front{position:relative;transform:rotateY(0)}
/* De folie uit primitives.css heeft haar brandpunt midden op het vlak. Op een
   pas van 380 bij 645 zie je dat als een molentje in plaats van als folie, dus
   hier ligt het punt buiten de pas: er loopt alleen nog een schuine baan glans
   overheen. Dekking laag gehouden - het blijft een laminaat in inkt, geen
   discobal, en de menutekst moet leesbaar blijven. De hoek zelf komt per frame
   uit de simulatie (laminate-physics.js zet --vl-holo-angle). */
/* Glitterstaal (klant, huisstijl-ronde 2: "glossy glitter, zoals vroeger op
   die kaarten"). Drie lagen boven elkaar op de voorkant van de pas:
     1. de folie (::before hieronder) - iridescerend verloop in de kleuren
        van de site plus een koude tint, met het brandpunt buiten de pas;
     2. de glitter (.vl-lam__glitter) - vier rasters van kleine lichtpuntjes
        in wit, warm, koud en roze, die via --vl-holo-shift verschuiven en
        via een masker alleen zichtbaar zijn in een schuine baan die met de
        hoek van de pas meedraait: de sterretjes fonkelen waar het licht valt;
     3. de glans (::after) - de bestaande lichtstreep.
   De hoek en de verschuiving komen per frame uit laminate-physics.js. */
@property --vl-holo-shift{syntax:'<length>';inherits:true;initial-value:0px}
.vl-lam__glitter{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background-image:
    radial-gradient(circle,rgba(255,255,255,.95) 0 .7px,transparent 1.7px),
    radial-gradient(circle,rgba(255,232,180,.9) 0 .6px,transparent 1.5px),
    radial-gradient(circle,rgba(180,240,255,.9) 0 .8px,transparent 1.9px),
    radial-gradient(circle,rgba(255,180,225,.9) 0 .5px,transparent 1.4px);
  background-size:19px 23px,29px 31px,41px 37px,53px 47px;
  background-position:
    calc(var(--vl-holo-shift) * 1.3) 0,
    calc(var(--vl-holo-shift) * -.8) 7px,
    calc(var(--vl-holo-shift) * .5) 3px,
    calc(var(--vl-holo-shift) * -1.7) 11px;
  mix-blend-mode:screen;opacity:.8;
  -webkit-mask-image:linear-gradient(calc(var(--vl-holo-angle) - 60deg),transparent 24%,#000 44%,#000 56%,transparent 76%);
  mask-image:linear-gradient(calc(var(--vl-holo-angle) - 60deg),transparent 24%,#000 44%,#000 56%,transparent 76%);
}
.vl-lam__face--front.vl-holo::before{
  opacity:.44;
  background:conic-gradient(from var(--vl-holo-angle) at 128% -22%,
    rgba(255,255,255,0) 0deg,
    rgba(0,224,240,.55) 26deg,
    rgba(255,255,255,.7) 52deg,
    rgba(255,92,62,.5) 84deg,
    rgba(255,177,60,.5) 118deg,
    rgba(255,255,255,.16) 152deg,
    rgba(225,44,123,.5) 196deg,
    rgba(139,43,176,.5) 236deg,
    rgba(0,224,240,.36) 268deg,
    rgba(255,255,255,.6) 306deg,
    rgba(255,255,255,0) 360deg);
}
.vl-lam__face--front.vl-holo::after{opacity:.7}
/* De achterkant is een kolom, geen raster dat bovenaan blijft plakken: de
   crewgegevens staan boven, de streepjescode drukt zichzelf naar de onderrand.
   Zonder die verdeling leest de pas als half afgemaakt - alles in de bovenste
   derde en daaronder een leeg vlak inkt. */
.vl-lam__face--back{position:absolute;inset:0;transform:rotateY(-180deg);display:flex;flex-direction:column;gap:14px}
.vl-lam__code{margin-top:auto;color:rgba(255,255,255,.55)}
.vl-lam__code svg{width:100%;height:auto;display:block}

/* De sleuf is een gat, geen streep: donker met een binnenschaduw, en de
   beugel van de klem (laag erboven) loopt erdoorheen. */
.vl-lam__hole{
  width:78px;height:10px;border-radius:6px;margin:0 auto 18px;
  background:rgba(0,0,0,.55);box-shadow:inset 0 1px 3px rgba(0,0,0,.7),0 1px 0 rgba(255,255,255,.1);
}
.vl-lam__access{
  margin:0 0 14px;font-family:var(--font-tech);font-size:10px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;
  color:var(--amber);text-align:center;
}
.vl-lam__brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:22px}
.vl-lam__brand span{font-family:var(--font-display);font-weight:900;font-stretch:112%;font-size:27px;text-transform:uppercase;letter-spacing:-.01em}

.vl-lam__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:2px}
.vl-lam__list a{
  display:grid;grid-template-columns:34px 1fr 16px;align-items:center;gap:12px;
  padding:13px 10px;border-radius:9px;border-bottom:1px solid rgba(255,255,255,.08);
  transition:background var(--dur-fast) ease,padding-left var(--dur-fast) ease;
}
.vl-lam__list a:hover,.vl-lam__list a:focus-visible{background:rgba(255,255,255,.08);padding-left:16px}
.vl-lam__num{font-family:var(--font-tech);font-weight:700;font-size:13px;color:var(--amber);letter-spacing:.08em}
.vl-lam__label{font-family:var(--font-tech);font-size:15px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.vl-lam__list .arw{opacity:.5}

.vl-lam__flip{
  display:block;width:100%;background:none;border:0;padding:6px 0 0;cursor:pointer;color:rgba(255,255,255,.7);
}
.vl-lam__flip svg{width:100%;height:auto}
.vl-lam__flip:hover{color:#fff}

.vl-lam__crew{margin:0;display:grid;grid-template-columns:110px 1fr;gap:8px 14px;font-size:13px}
.vl-lam__crew dt{font-family:var(--font-tech);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.vl-lam__crew dd{margin:0}
/* De BPM-uitlezing klopt mee zolang de pas openstaat; easter.js zet .is-beat.
   Wie beweging heeft uitgezet krijgt de klop nooit: dat script start hem dan
   niet eens, dus hier hoeft niets extra's uitgezet te worden. (Het woord voor
   die voorkeursinstelling staat hier bewust niet voluit: de self-test zoekt de
   ECHTE regel in dit bestand op de eerste keer dat hij die term tegenkomt.) */
#vl-bpm{display:inline-block;font-weight:inherit;color:var(--amber);transition:transform .09s ease,color .09s ease}
#vl-bpm.is-beat{transform:scale(1.3);color:var(--coral)}
.vl-uptempo #vl-bpm{color:var(--magenta)}
.vl-lam__note{margin:10px 0 0;font-family:var(--font-tech);font-weight:700;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.vl-lam__unflip{
  justify-self:start;display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 16px;
  /* Ook hier geen pil: de laatste ronde vorm op de site zat op de achterkant
     van de pas en viel uit de toon bij de rest. */
  border-radius:2px;border:1.5px solid rgba(255,255,255,.3);background:none;color:rgba(255,255,255,.75);
  cursor:pointer;font-family:var(--font-tech);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  transition:background var(--dur-fast) ease,color var(--dur-fast) ease;
}
.vl-lam__unflip .arw{transform:rotate(225deg)}
.vl-lam__unflip:hover,.vl-lam__unflip:focus-visible{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.5)}

.vl-lam__preview{
  position:absolute;right:6vw;top:22vh;width:min(300px,30vw);aspect-ratio:16/10;
  border-radius:6px;overflow:hidden;opacity:0;transform:translateY(14px) rotate(-2deg);
  transition:opacity var(--dur-mid) ease,transform var(--dur-mid) var(--ease-out);pointer-events:none;
}
.vl-lam__preview.is-on{opacity:1;transform:translateY(0) rotate(-2deg)}
.vl-lam__preview img{width:100%;height:100%;object-fit:cover}

@media (max-width:900px){.vl-lam__preview{display:none}}
@media (max-width:400px){
  .vl-bar__btn{padding:12px 17px}
}

/* Zonder JS: paneel altijd zichtbaar als gewone navigatie onder de bar. */
html:not(.js) .vl-lam{position:static;inset:auto;padding:24px 0 0;overflow:visible}
html:not(.js) .vl-lam[hidden]{display:block}
html:not(.js) .vl-lam__backdrop,
html:not(.js) .vl-lam__lanyard,
html:not(.js) .vl-lam__clip,
html:not(.js) .vl-lam__face--back,
html:not(.js) .vl-lam__preview{display:none}
html:not(.js) .vl-bar__btn{display:none}
html:not(.js) .vl-lam__card{width:min(680px,92vw);margin:0 auto 30px;transform:none;touch-action:auto;cursor:auto}

@media (prefers-reduced-motion:reduce){
  .vl-lam__card,.vl-lam__face,.vl-lam__backdrop,.vl-lam__preview{transition:none}
  /* Fysica draait hier sowieso niet (laminate-physics.js zet .vl-lam--static);
     ook de vervangende CSS-overgang staat dan stil, de pas verschijnt gewoon
     op zijn rustpositie. */
  .vl-lam--static .vl-lam__card{transition:none;transform:translateY(0)}
  /* De glitter staat stil: geen baan die meedraait, alleen een zachte glans. */
  .vl-lam__glitter{-webkit-mask-image:none;mask-image:none;opacity:.35}
}

/* --- footer ---
   Schoon en conventioneel, op verzoek van de klant (2026-09-14). Geen
   display-face, geen hoofdletters, geen letterafstand, geen pictogrammen en
   geen BPM-meter: de footer is de rustigste plek van de site. Maten in em,
   zodat de hele blok mee-ademt met zijn eigen tekengrootte. */
.vl-foot{
  background:var(--ink-2);color:rgba(255,255,255,.72);
  font-family:var(--font-body);font-size:15px;line-height:1.75;
  padding:3.4em 0 2.6em;
}
.vl-foot__cols{display:grid;gap:2.2em;grid-template-columns:1fr}
.vl-foot__col--menus{display:grid;gap:2.2em;grid-template-columns:1fr}
.vl-foot__title{margin:0 0 .5em;font-weight:700;color:#fff}
.vl-foot__list{margin:0;padding:0;list-style:none}
.vl-foot__list a{color:rgba(255,255,255,.72);transition:color var(--dur-fast) ease}
.vl-foot__list a:hover{color:#fff}
.vl-foot__rule{border:0;border-top:1px solid rgba(255,255,255,.14);margin:2.4em 0 1.6em}
.vl-foot__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6em 1.6em;color:rgba(255,255,255,.5)}

@media (min-width:760px){
  .vl-foot__cols{grid-template-columns:1fr 1.5fr 1fr;gap:2.6em}
  .vl-foot__col--menus{grid-template-columns:1fr 1fr}
}