/* ═══════════════════════════════════════════════════════════════════
NOMAD VSL — nomad-vsl-1.css
Stijllaag voor /vsl/index.html (gate) en /vsl/training.html (salespagina).
Bron van waarheid voor het beeld: het goedgekeurde proefdesign
"NOMAD Gate & VSL". De tokens hieronder zijn de NOMAD-tokens uit dat
artefact: Archivo / DM Sans, #0052FF als
enige kleur, monochroom op wit, gloed uitsluitend ín donkere panelen.
BEWUST GEEN data-nv OP DEZE PAGINA'S
nomad-verhoogd.css is een dónkere laag op html[data-nv] met specificiteit
(0,1,1). gate.html moet zijn lichte palet daarom ná de link nog een keer
declareren om te winnen -- zie het commentaar daar. Deze twee pagina's
zetten het attribuut simpelweg niet, dan speelt die strijd niet.
CACHE: VERHOOG ?v= BIJ ELKE WIJZIGING
netlify.toml cachet /*.css een dag. Beide pagina's laden dit bestand als
nomad-vsl-1.css?v=N. Wijzig je hier iets, verhoog dan N in béide kan daar het scherm vullen, en die zit binnen het
iframe van Vimeo waar wij niet bij kunnen. Op Android en op de computer
werkt de API wel. nomad-vsl-1.js probeert hem daarom eerst en valt terug
op deze klasse, die precies hetzelfde oplevert: het kader wordt een vast
vlak over de hele pagina. Vimeo houdt zelf de verhouding en zet zwarte
balken, dus het beeld wordt nooit uitgerekt.
Bij het draaien naar liggend vult de video vanzelf bijna het hele scherm;
daar is verder niets voor nodig. */
/* NIET op .alleen-mobiel: die verdwijnt boven 760 pixels, en een telefoon
in liggende stand is 844 breed. Juist dan wil iemand groot kijken. De
knop hoort dus bij een aanraakscherm, niet bij een schermbreedte. */
@media (pointer:fine) and (min-width:761px){.vid-groot{display:none}}
.vid-sluit{
position:absolute;top:.7rem;right:.7rem;z-index:5;
width:2.4rem;height:2.4rem;border-radius:50%;border:0;
background:rgba(10,12,18,.62);color:#fff;display:grid;place-items:center;cursor:pointer;
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.vid-sluit svg{width:1.05rem;height:1.05rem}
.vid-sluit[hidden]{display:none}
html.vidvol,html.vidvol body{overflow:hidden}
html.vidvol .vid{
position:fixed;inset:0;z-index:120;
width:auto;height:auto;aspect-ratio:auto;
border-radius:0;border:0;background:#000;
}
/* De bediening naar de duim, en weg van de systeembalk onderin. */
html.vidvol .vid-bediening{
left:1rem;bottom:calc(1rem + env(safe-area-inset-bottom,0px));
}
html.vidvol .vid-sluit{
top:calc(.9rem + env(safe-area-inset-top,0px));right:.9rem;
}
/* De resttijd verhuist mee het grote beeld in (zie nomad-vsl-1.js): daar is
hij juist het meest waard, want je ziet de pagina eronder niet meer. */
/* Ook in liggende stand tonen: .v6-mob is .alleen-mobiel en valt boven 760
pixels weg, maar in het grote beeld is de resttijd het enige dat nog
vertelt hoe lang dit duurt. */
html.vidvol .v6-mob{
display:flex !important;
position:absolute;left:0;right:0;z-index:5;
bottom:calc(4.4rem + env(safe-area-inset-bottom,0px));
margin:0;padding:0 1rem;border:0;background:none;color:#fff;
text-shadow:0 1px 8px rgba(0,0,0,.6);
}
html.vidvol .v6-mob b{color:#fff}
/* Alles wat niet de speler is, is in het grote beeld alleen maar in de weg. */
html.vidvol .lp-nav,html.vidvol .sv-balk,html.vidvol .v6-track,
html.vidvol .v6-cap,html.vidvol .v6-foot{display:none !important}
@media (prefers-reduced-motion:reduce){
html.vidvol .vid{transition:none}
}
/* ═══ SCHERM 01 · gate ════════════════════════════════════════════
Mobiel-first regel: op een telefoon hoeft er niet gescrold te worden.
De pagina is een flexkolom over 100dvh; op mobiel vallen de kopkolom,
de hint en de voet weg en blijft alleen de kaart over, met een klein
videovenstertje (.g-mini) als enige verwijzing naar de video.
════════════════════════════════════════════════════════════════ */
.gate-page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.g-nav{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem clamp(1.1rem,4vw,3rem);border-bottom:1px solid var(--line);flex:none}
.g-word{font-family:var(--display);font-weight:900;font-size:1.25rem;letter-spacing:-.02em}
.g-pill{display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stil);border:1px solid var(--line);border-radius:999px;padding:.5em 1em;white-space:nowrap}
.g-pill i{width:6px;height:6px;border-radius:50%;background:var(--blue)}
.g-body{flex:1;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1.5rem,4vw,4rem);align-content:center;padding:clamp(1.5rem,4vw,3.5rem) clamp(1.1rem,4vw,3rem) clamp(2rem,4vw,3.5rem);background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 7%,var(--bg)) 0%,var(--bg) 55%)}
.g-copy h1{font-size:clamp(1.9rem,1.4rem + 2.2vw,3.4rem);font-weight:900;line-height:1.02}
.g-copy .sub{margin-top:1rem;color:var(--muted);max-width:46ch;font-size:clamp(.95rem,.9rem + .3vw,1.1rem)}
.g-copy .sub b{color:var(--ink)}
.g-list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.6rem}
.g-list li{display:flex;gap:.65em;align-items:baseline;font-size:.92rem;color:var(--muted)}
.g-list li::before{content:"✓";color:var(--blue);font-weight:700;flex:none}
.g-proof{display:flex;align-items:center;gap:.7rem;margin-top:1.6rem;font-size:.8rem;color:var(--stil)}
.g-avs{display:flex}
.g-avs i{width:26px;height:26px;border-radius:50%;background:var(--bg);border:1.5px solid var(--line-2);display:grid;place-items:center;font:700 .62rem var(--body);color:var(--blue);margin-left:-7px;font-style:normal}
.g-avs i:first-child{margin-left:0}
.g-teaser{margin-top:1.6rem;max-width:34rem}
.g-list li b{color:var(--ink);font-weight:600}
.g-quote{margin:1.4rem 0 0;border-left:2px solid var(--blue);padding:.2rem 0 .2rem .9rem;max-width:46ch}
.g-quote p{font-size:.95rem;line-height:1.45;color:var(--ink);font-weight:500}
.g-quote span{display:block;font-size:.76rem;color:var(--stil);margin-top:.3rem}
.g-card .ibar{margin-bottom:.9rem}
.g-card{background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:clamp(1.25rem,3vw,1.9rem);box-shadow:0 24px 60px rgba(6,7,13,.08);align-self:center}
.g-card-top{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}
.g-stap{font:600 .8rem var(--body);color:var(--stil)}
.g-voortgang{display:flex;gap:4px}
.g-voortgang i{width:1.6rem;height:4px;border-radius:2px;background:var(--line)}
.g-voortgang i.aan{background:var(--blue)}
.g-card h2{font-size:1.25rem;line-height:1.2}
.g-card .g-sub{font-size:.86rem;color:var(--muted);margin-top:.4rem}
.g-card .btn{margin-top:1.2rem}
.g-safe{display:flex;gap:1rem;flex-wrap:wrap;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.74rem;color:var(--stil)}
.g-safe span{display:inline-flex;align-items:center;gap:.5em}
.g-safe i{width:5px;height:5px;border-radius:50%;background:var(--blue)}
.g-foot{flex:none;padding:1rem clamp(1.1rem,4vw,3rem);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--stil)}
/* het kleine videovenstertje — alleen op mobiel */
.g-mini{display:none;grid-template-columns:5.6rem 1fr;gap:.85rem;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--line)}
.g-mini .thumb{position:relative;aspect-ratio:16/10;border-radius:9px;overflow:hidden;background:var(--dark)}
.g-mini .thumb svg{position:absolute;inset:0;width:100%;height:100%;opacity:.6}
.g-mini .thumb .play{position:absolute;inset:0;margin:auto;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px rgba(0,82,255,.5)}
.g-mini .thumb .play svg{position:static;width:.6rem;height:.6rem;opacity:1;margin-left:1px}
.g-mini .thumb .len{position:absolute;right:.35rem;bottom:.3rem;font-size:.58rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--dark-ink);background:rgba(6,7,13,.7);border-radius:4px;padding:.15em .4em}
.g-mini b{display:block;font-family:var(--display);font-weight:800;font-size:.95rem;line-height:1.2;letter-spacing:-.01em}
.g-mini span{display:block;font-size:.74rem;color:var(--stil);margin-top:.25rem}
@media (max-width:760px){
/* De kaart staat in het midden van wat er aan hoogte over is: niet
uitgerekt, wel netjes gevuld op elke moderne telefoon. */
.g-body{grid-template-columns:1fr;gap:0;padding:1rem 1rem 1.25rem;align-content:center}
.g-copy{display:none}
.g-nav{padding:.85rem 1rem}
.g-mini{display:grid}
.g-card{padding:1.25rem 1.15rem 1.1rem;border-radius:16px;box-shadow:0 14px 34px rgba(6,7,13,.07)}
.g-card-top{margin-bottom:.7rem}
.g-card h2{font-size:1.15rem}
.g-card .g-sub{display:none}
.field{margin-top:.65rem}
/* 16px, niet .92rem. Onder 16px zoomt iOS Safari bij focus in op het veld;
de bezoeker moet daarna handmatig terugscrollen en juist dát is hier de
conversiekiller die de hele mobiele opzet wil voorkomen. Visueel
nauwelijks verschil met de .95rem van de desktopstand. */
.inp{padding:.8em .95em;font-size:16px}
.tel{grid-template-columns:5rem 1fr}
.tel select{font-size:.82rem}
.hint{display:none}
.g-card .btn{margin-top:.9rem;padding:13px 20px}
.consent{margin-top:.7rem;font-size:.66rem;line-height:1.45}
.g-safe{display:none}
.g-foot{display:none}
}
/* Kleinere telefoons, en elke telefoon met een adresbalk die hoogte wegneemt:
nog een stap strakker, zodat de knop en de toestemmingszin in beeld blijven.
De grens staat op 745px omdat een iPhone 13 in Safari rond de 660 uitkomt
en een iPhone 15 Pro Max rond de 740; op 660 vielen die er net buiten. */
@media (max-width:760px) and (max-height:745px){
/* `safe center` centreert, maar valt terug op uitlijnen aan de bovenkant
zodra de inhoud tóch niet past. Zonder dat `safe` snijdt centreren de
bovenkant af en is de eerste vraag onbereikbaar. Browsers die het niet
kennen houden de regel erboven aan. */
.g-body{align-content:start;align-content:safe center}
.g-mini{margin-bottom:.7rem;padding-bottom:.7rem}
.g-mini span{display:none}
.g-card h2{font-size:1.05rem}
.field{margin-top:.5rem}
.inp{padding:.6em .85em}
.g-card .btn{margin-top:.7rem;padding:12px 18px}
.g-card-top{margin-bottom:.55rem}
}
/* ═══ SCHERM 02 · salespagina ═════════════════════════════════════ */
.s-nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem clamp(1.1rem,4vw,3rem);border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.s-nav .right{display:flex;align-items:center;gap:.6rem}
@media (max-width:560px){.s-nav .g-pill{display:none}}
.s-hero{padding:clamp(1.75rem,4vw,3.25rem) clamp(1.1rem,4vw,3rem) 0;text-align:center;background:linear-gradient(180deg,color-mix(in srgb,var(--blue) 7%,var(--bg)) 0%,var(--bg) 70%)}
/* De begroeting zoals nomad.html hem doet: een zin met een emoji, de naam
vet. Als een chatbericht, niet als een systeemlabel. */
.s-welkom{display:inline-block;font:500 .92rem/1.4 var(--body);color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:.55em 1.1em;box-shadow:0 6px 18px rgba(6,7,13,.05)}
.s-welkom b{color:var(--ink);font-weight:700}
.s-hero h1{margin-top:1.1rem;font-size:clamp(1.9rem,1.35rem + 2.8vw,3.8rem);font-weight:900;line-height:1;text-transform:uppercase;letter-spacing:-.025em}
.s-hero h1 .blok{display:inline-block;width:.13em;height:.13em;background:var(--blue);margin-left:.07em}
.s-hero .sub{margin:1rem auto 0;max-width:46ch;color:var(--muted);font-size:clamp(.95rem,.9rem + .3vw,1.12rem)}
.s-hero .sub b{color:var(--ink)}
.s-player{max-width:64rem;margin:1.6rem auto 0;text-align:left}
.s-player .vid{border-radius:18px;box-shadow:0 34px 90px rgba(6,7,13,.16)}
/* direct onder de video: klein WhatsApp-knopje, daaronder het sterke boekblok */
/* De WhatsApp-regel is stil: vindbaar, maar niet concurrerend met de ene
blauwe knop. De groene balk woog even zwaar als de boekknop. */
.s-onder{max-width:64rem;margin:.9rem auto 0;display:flex;justify-content:center}
.wa-stil{display:inline-flex;align-items:center;gap:.45em;background:none;border:0;padding:.4em .2em;font:500 .86rem var(--body);color:var(--stil);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);cursor:pointer}
.wa-stil:hover{color:var(--blue);text-decoration-color:var(--blue)}
.wa-stil svg{width:1rem;height:1rem;flex:none}
.s-boek{padding:clamp(1.75rem,4vw,3rem) clamp(1.1rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
.s-boek-kaart{max-width:38rem;margin:0 auto;text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:18px;padding:clamp(1.3rem,3vw,2rem) clamp(1.1rem,3vw,2rem);box-shadow:0 6px 16px rgba(6,7,13,.04)}
.s-boek-kaart h2{font-size:clamp(1.45rem,1.2rem + 1.4vw,2.2rem)}
.s-boek-kaart p{margin-top:.7rem;color:var(--muted);font-size:.95rem;line-height:1.6}
.s-boek-kaart .btn{margin-top:1rem}
/* Wie belt, vóór de knop: eerst het gezicht, dan de actie. */
.wie-rij{display:inline-flex;align-items:center;gap:.55rem;margin-top:.9rem;font-size:.86rem;color:var(--stil)}
.wie-rij .av{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font:800 .6rem var(--display);flex:none}
.wie-rij b{color:var(--ink)}
.s-vast{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem 1rem calc(.8rem + env(safe-area-inset-bottom));background:rgba(255,255,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);transform:translateY(110%);transition:transform .3s var(--ease)}
.s-vast.zien{transform:none}
.s-vast span{font-size:.76rem;color:var(--stil);line-height:1.3}
.s-vast span b{display:block;color:var(--ink);font:700 .86rem var(--display)}
.s-vast .btn{flex:none}
@media (max-width:760px){.s-vast{display:flex}}
/* twee wegen naast elkaar */
.s-cta{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.1rem,4vw,3rem);border-top:1px solid var(--line);text-align:center;margin-top:clamp(2rem,4vw,3.5rem)}
.s-cta .head{max-width:46rem;margin:0 auto clamp(1.5rem,3vw,2.5rem)}
.s-cta h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.5rem)}
.s-cta .intro{margin-top:.9rem;color:var(--muted)}
.keuze{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:56rem;margin-inline:auto;text-align:left}
@media (max-width:760px){.keuze{grid-template-columns:1fr}}
.kaart{border:1px solid var(--line);border-radius:18px;background:var(--bg);padding:clamp(1.2rem,2.5vw,1.7rem);display:flex;flex-direction:column;gap:.7rem}
.kaart--acc{border-color:color-mix(in srgb,var(--blue) 45%,var(--line));box-shadow:0 24px 60px rgba(6,7,13,.08)}
.kaart .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--blue)}
.kaart h3{font-size:1.2rem;line-height:1.2}
.kaart p{font-size:.9rem;color:var(--muted);line-height:1.55}
.kaart .rek{flex:1}
.kaart .btn{margin-top:.4rem}
.kaart .wa-preview{background:var(--bg-2);border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:.75rem .9rem;font-size:.8rem;color:var(--muted);line-height:1.5}
.kaart .wa-preview b{display:block;font-family:var(--mono);font-weight:500;font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--stil);margin-bottom:.3rem}
.kaart .sub{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--stil);flex:none}
.plan-wie{display:inline-flex;align-items:center;gap:.9rem;padding:.8rem 1.1rem .8rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);text-align:left}
.plan-wie .av{width:2.4rem;height:2.4rem;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font:800 .72rem var(--display);flex:none}
.plan-wie b{display:block;font-size:.86rem;line-height:1.2}
.plan-wie span{font-size:.74rem;color:var(--stil)}
/* ervaringen — auto-fit, zodat een vierde of vijfde verhaal er zonder
CSS-wijziging bij kan. Zie de HTML-notitie bij deze sectie. */
.s-erv{padding:clamp(2.5rem,5vw,4.5rem) clamp(1.1rem,4vw,3rem);border-top:1px solid var(--line);background:var(--bg)}
.s-erv .head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem;max-width:80rem;margin-inline:auto}
.s-erv h2{font-size:clamp(1.4rem,1.15rem + 1.2vw,2.2rem)}
.stories{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1rem;max-width:80rem;margin-inline:auto}
.story{border:1px solid var(--line);border-radius:10px;padding:1.5rem 1.4rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem;background:var(--bg)}
.story.is-accent{background:var(--tint-04)}
.story blockquote{margin:0;font-size:1.05rem;line-height:1.5;font-weight:500;text-wrap:pretty}
.story blockquote::before{content:"“";display:block;color:var(--blue);font-family:var(--display);font-size:2.2rem;line-height:.5;margin-bottom:.7rem;font-weight:800}
.story footer{font-size:.76rem;color:var(--stil)}
.story footer b{display:block;color:var(--ink);font-weight:700;font-size:.92rem}
.stories-note{margin:1rem auto 0;max-width:80rem;font-size:.76rem;color:var(--stil)}
.s-finale{background:var(--dark);color:var(--dark-ink);padding:clamp(2.5rem,5vw,4.5rem) clamp(1.1rem,4vw,3rem);text-align:center;position:relative;overflow:hidden}
.s-finale::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 62% 55% at 50% 0%,rgba(0,82,255,.26),transparent 68%)}
.s-finale > *{position:relative}
.s-finale .eyebrow{color:#4D7CFF}
.s-finale h2{font-size:clamp(1.6rem,1.2rem + 2vw,3rem);font-weight:900}
.s-finale h2 span{color:#4D7CFF}
.s-finale .btn{margin-top:1.4rem}
.s-finale .cta-note{margin-top:.9rem;font-size:.8rem;color:var(--dark-stil)}
.s-foot{padding:1.1rem clamp(1.1rem,4vw,3rem);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.72rem;color:var(--stil);border-top:1px solid var(--line)}
.s-foot .risk{max-width:60ch}
/* ═══ vensters — pop-up én agenda ═════════════════════════════════ */
.scrim{position:fixed;inset:0;z-index:100;background:rgba(6,7,13,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:1rem;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .25s var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.modal{position:relative;width:100%;max-width:27.5rem;background:var(--bg);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 40px 100px rgba(6,7,13,.35);transform:translateY(10px);transition:transform .3s var(--ease);margin:auto}
.scrim.open .modal{transform:none}
.modal-x{position:absolute;top:.9rem;right:.9rem;width:2rem;height:2rem;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:.9rem;z-index:2}
/* ── de WhatsApp-pop-up: één lijst, één knop, de stap eerlijk benoemd ── */
.modal--pu{max-width:27.5rem;max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain}
.modal--pu .modal-x{width:2.75rem;height:2.75rem;font-size:1rem}
.pu-body{padding:0 1.5rem 1.4rem;display:grid;gap:.8rem}
.lijst{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.lijst .kopje{padding:.6rem 1rem;font-size:.72rem;font-weight:600;color:var(--stil);background:var(--bg-2);border-bottom:1px solid var(--line)}
.pu-rij{display:grid;grid-template-columns:1.5rem 1fr auto;gap:.8rem;align-items:center;padding:.8rem 1rem;background:var(--bg);border:0;width:100%;text-align:left;font-family:inherit;color:var(--ink);cursor:default}
.pu-rij + .pu-rij{border-top:1px solid var(--line)}
.pu-rij.keuze{cursor:pointer}
.pu-rij.keuze:hover{background:var(--bg-2)}
.vink{width:1.25rem;height:1.25rem;border-radius:6px;border:1.5px solid var(--line-2);background:var(--bg);display:grid;place-items:center;transition:background-color .16s,border-color .16s}
.vink svg{width:.8rem;height:.8rem;color:#fff;opacity:0}
.pu-rij.aan .vink,.pu-rij.vast .vink{background:var(--blue);border-color:var(--blue)}
.pu-rij.aan .vink svg,.pu-rij.vast .vink svg{opacity:1}
.pu-rij.vast .vink{background:var(--dark);border-color:var(--dark)}
.pu-rij b{display:block;font-size:.9rem;line-height:1.25}
.pu-rij span{display:block;font-size:.78rem;color:var(--stil);line-height:1.4}
.pu-rij .len{font-size:.74rem;font-weight:600;color:var(--stil);font-variant-numeric:tabular-nums;align-self:start;padding-top:.15rem}
.pu-body .btn-primary svg{width:1rem;height:1rem}
.micro{font-size:.74rem;color:var(--stil);line-height:1.5;text-align:center}
.micro a{color:var(--muted);text-decoration-color:var(--line-2);text-underline-offset:3px}
.ok-ic{width:2.6rem;height:2.6rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin-bottom:.6rem}
.ok-ic svg{width:1.1rem;height:1.1rem}
.stuur{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:14px;padding:.9rem 1rem;background:var(--bg-2)}
.qr{width:7.2rem;height:7.2rem;background:#fff;border-radius:10px;padding:.35rem;display:grid;place-items:center}
.qr:empty{display:none}
.qr canvas,.qr img{width:100%!important;height:100%!important;display:block}
.bericht{font-size:.8rem;color:var(--muted);line-height:1.5;min-width:0}
.bericht b{display:block;font-size:.72rem;font-weight:600;color:var(--stil);margin-bottom:.3rem}
.bericht q{quotes:none;display:block;background:var(--bg);border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:.65rem .8rem}
.knoppen{display:grid;gap:.5rem}
@media (max-width:560px){
/* bottom sheet, zoals het agendavenster; geen QR op een telefoon */
#scrim-pu{place-items:end center;padding:0}
.modal--pu{max-width:none;margin:0;max-height:90vh;max-height:90dvh;border-radius:22px 22px 0 0;border-bottom:0;transform:translateY(40px)}
.scrim.open .modal--pu{transform:none}
.pu-body{padding:0 1.15rem calc(1.2rem + env(safe-area-inset-bottom))}
.stuur{grid-template-columns:1fr}
.qr{display:none}
}
/* ═══ agendavenster ════════════════════════════════════════════════
Zelfde gegevens en zelfde stappen als form.html (23-08), andere vorm:
op web een venster van 40rem met maand | tijden even hoog en een vaste
voet; op de telefoon een bottom sheet met een dagstrook en de tijden
eronder. Eén bevestigknop die actief wordt zodra er een tijd staat.
De agenda staat NIET open op de pagina: elke [data-cal] opent dit
venster en pas dán worden de vrije momenten opgehaald. */
/* Flex, geen grid-1fr: iOS Safari lost een 1fr-rij binnen een max-height niet
op en gaf de body zijn volle hoogte, waardoor de kop uit beeld schoof.
Op de telefoon een vaste hoogte (vh als terugval voor oude iOS zonder dvh). */
.modal--cal{max-width:40rem;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);display:flex;flex-direction:column;min-height:0}
.modal--cal > *{flex:1 1 auto;min-height:0}
.modal--cal .modal-x{width:2.75rem;height:2.75rem;font-size:1rem}
#cal-a{display:flex;flex-direction:column;min-height:0}
#cal-a > .v-top,#cal-a > .cal-voet{flex:none}
#cal-a > .v-body{flex:1 1 auto}
.v-top{padding:1.25rem 1.4rem .9rem;position:relative}
.grip{width:2.4rem;height:.28rem;border-radius:999px;background:var(--line-2);margin:0 auto .8rem;display:none}
.v-top .eyebrow{font-size:.74rem;font-weight:500;color:var(--stil);margin-bottom:.35rem}
.v-top h2{font-size:1.35rem;padding-right:2.6rem}
.v-top p{margin-top:.35rem;font-size:.86rem;color:var(--muted);line-height:1.45}
.v-top p b{font-weight:500;color:var(--ink)}
.v-body{overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0;border-top:1px solid var(--line)}
.cal-grid{display:grid;grid-template-columns:1.15fr 1fr;min-height:100%}
.cal-maand{padding:1rem 1.2rem 1.1rem;border-right:1px solid var(--line)}
.cal-mhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:.6rem}
.cal-mhead b{font:700 .95rem var(--display)}
.cal-pijl{width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:.9rem}
.cal-pijl[disabled]{opacity:.3;cursor:default}
.cal-dagen{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.cal-dagen .wd{font-size:.68rem;font-weight:500;color:var(--stil);padding:.25rem 0}
.cal-dag{aspect-ratio:1;border-radius:10px;border:1px solid transparent;background:none;font:500 .84rem var(--body);color:var(--line-2);display:grid;place-items:center;padding:0;cursor:default;font-variant-numeric:tabular-nums;position:relative}
.cal-dag.vrij{color:var(--ink);background:var(--chip-bg);cursor:pointer}
/* Puntje onder vrije dagen: de kalender leeft, zonder extra tekst. */
.cal-dag.vrij::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--blue);position:absolute;bottom:5px;left:50%;transform:translateX(-50%)}
.cal-dag.vrij:hover{border-color:var(--blue)}
.cal-dag.aan{background:var(--blue);color:#fff}
.cal-dag.aan::after{background:#fff}
.cal-dag.vandaag:not(.aan){box-shadow:inset 0 0 0 1px var(--line-2)}
.cal-tijden{padding:1rem 1.2rem 1.1rem;display:grid;gap:.75rem;align-content:start}
.cal-tkop{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.cal-tkop b{font:700 .92rem var(--display)}
.cal-tkop span{display:inline-flex;align-items:center;gap:.3em;font-size:.7rem;color:var(--stil);white-space:nowrap}
.cal-tkop span svg{width:.8rem;height:.8rem}
.cal-groep{display:grid;gap:.4rem}
.cal-groep .g{font-size:.7rem;font-weight:500;color:var(--stil)}
.cal-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cal-tijd{border:1px solid var(--line-2);border-radius:10px;background:var(--bg);padding:.6em .4em;font:500 .86rem var(--body);color:var(--blue-2);cursor:pointer;text-align:center;font-variant-numeric:tabular-nums;transition:background-color .16s,border-color .16s}
.cal-tijd:hover{background:var(--chip-bg);border-color:var(--blue)}
.cal-tijd.aan{background:var(--blue);border-color:var(--blue);color:#fff}
/* telefoon: dagstrook met alleen de vrije dagen */
/* ── HET WIEL ────────────────────────────────────────────────────────
De tijden draaien door het midden in plaats van als raster naast elkaar
te staan. Eenentwintig omlijnde vakjes van gelijk gewicht waren niet te
overzien; nu lees je er één groot.
--cal-moment is de maat van één regel. Vijf tegelijk in beeld: minder en
het is geen wiel, meer en het wordt op een telefoon weer een lijst.
Het raster hierboven (.cal-tijd) blijft bestaan achter "Toon alle
momenten" -- zie nomadAfspraakRaster(). */
.cal-tijden{
/* Vijf tegelijk op web. Méér oogt ruim tot je bedenkt dat het wiel opent
op het EERSTE moment van de dag: alles boven het midden is dan leeg, en
bij zeven is dat een gat van drie regels. Vijf houdt dat binnen de perken
en de kolom staat gecentreerd naast de kalender, zodat er geen hol onder
valt.
Op een telefoon drie: daar zit het wiel in een blad dat ook de dagstrook
en de voet moet dragen, en liep het er bij vijf onderuit. */
--cal-moment:3.6rem;--cal-zicht:5;
/* De kleur waar de vervaging naartoe loopt. Dat is het vlak van het
venster, niet de paginagrond -- in de donkere jas zijn dat twee
verschillende kleuren en dan zie je een donkere veeg. */
--cal-vel:var(--bg);
}
@media (max-width:560px){.cal-tijden{--cal-moment:3.4rem;--cal-zicht:3}}
/* .cal-grid bestaat alleen in de brede weergave: daar de tijdkolom verticaal
midden houden, anders staat het wiel bovenin en valt de rest leeg. */
.cal-grid .cal-tijden{align-content:center}
.cal-klokhouder{position:relative;height:calc(var(--cal-moment) * var(--cal-zicht))}
/* de band ligt stil terwijl de cijfers eronderdoor draaien */
.cal-band{
position:absolute;left:.6rem;right:.6rem;top:50%;transform:translateY(-50%);
height:var(--cal-moment);border-radius:14px;
background:var(--chip-bg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 14%,transparent);
transition:background-color .2s,box-shadow .2s;pointer-events:none;z-index:0;
}
.cal-band.vol{
background:linear-gradient(148deg,color-mix(in srgb,var(--blue) 86%,#fff),var(--blue) 62%,var(--blue-2));
box-shadow:0 10px 24px -8px color-mix(in srgb,var(--blue) 62%,transparent);
}
.cal-klok{
position:relative;height:100%;overflow-y:auto;z-index:1;
scroll-snap-type:y mandatory;scrollbar-width:none;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;touch-action:pan-y;
perspective:760px;perspective-origin:50% 50%;
}
.cal-klok::-webkit-scrollbar{display:none}
.cal-klok:focus{outline:none}
.cal-klokhouder.focus .cal-band{box-shadow:0 0 0 2px var(--blue),inset 0 0 0 1px color-mix(in srgb,var(--blue) 14%,transparent)}
.cal-klokhouder.focus .cal-band.vol{box-shadow:0 0 0 2px var(--blue-2),0 10px 24px -8px color-mix(in srgb,var(--blue) 62%,transparent)}
/* de lege ruimte boven en onder, zodat ook de eerste en de laatste tijd
in het midden kunnen staan */
.cal-klok::before,.cal-klok::after{
content:"";display:block;
height:calc((var(--cal-moment) * var(--cal-zicht) - var(--cal-moment)) / 2);
}
.cal-moment{height:var(--cal-moment);scroll-snap-align:center;cursor:pointer}
/* LET OP: de kanteling hoort hierop en niet op .cal-moment. Een transform op
een scroll-snap-element verschuift zijn snappositie mee en dan landt het
wiel scheef. */
.cal-rij{
height:100%;display:flex;align-items:center;gap:.8rem;padding:0 1.15rem;
transform-origin:center center;backface-visibility:hidden;will-change:transform,opacity;
}
.cal-moment .tik{flex:none;height:2px;width:8px;border-radius:2px;background:var(--line-2)}
.cal-moment.heel .tik{width:16px;background:color-mix(in srgb,var(--line-2) 72%,var(--ink))}
.cal-moment .t{
font:500 1.18rem var(--body);font-variant-numeric:tabular-nums;color:var(--ink);
letter-spacing:-.01em;transition:font-size .18s,color .18s;
}
.cal-moment .w{
margin-left:auto;font-size:.78rem;font-weight:500;color:var(--stil);
opacity:0;transition:opacity .2s;white-space:nowrap;
}
/* voorstel = het midden licht op, maar er is nog niets gekozen. De
tweetrapsklik blijft zo staan: draaien is stap één, Bevestigen stap twee. */
.cal-moment.voorstel .t{font-weight:700}
.cal-moment.voorstel .w{opacity:1}
.cal-moment.aan .tik{background:rgba(255,255,255,.55)}
.cal-moment.aan.heel .tik{background:rgba(255,255,255,.82)}
.cal-moment.aan .t{font-weight:700;font-size:1.4rem;color:#fff}
.cal-moment.aan .w{opacity:1;color:rgba(255,255,255,.82)}
.cal-moment.gat{cursor:default;height:calc(var(--cal-moment) * .6);scroll-snap-align:none}
.cal-moment.gat .t{
font:500 .72rem var(--body);color:var(--stil);width:100%;
display:flex;align-items:center;gap:.6rem;
}
.cal-moment.gat .t::before,.cal-moment.gat .t::after{content:"";height:1px;background:var(--line);flex:1}
/* Meeschalen met de regelhoogte. Als vaste maat dekte hij op het wiel van
drie regels (telefoon) bijna de hele buurman af. */
.cal-vaag{position:absolute;left:0;right:0;height:calc(var(--cal-moment) * .95);pointer-events:none;z-index:2}
.cal-vaag.boven{top:0;background:linear-gradient(var(--cal-vel) 4%,color-mix(in srgb,var(--cal-vel) 52%,transparent) 52%,transparent)}
.cal-vaag.onder{bottom:0;background:linear-gradient(transparent,color-mix(in srgb,var(--cal-vel) 52%,transparent) 48%,var(--cal-vel) 96%)}
.cal-klokvoet{
display:flex;align-items:center;justify-content:space-between;
flex-wrap:wrap;gap:.3rem .7rem;padding:.75rem 1.15rem 0;
}
/* NIET `.tel` noemen: die klasse bestaat al en is het telefoonveld met zijn
eigen kolomraster (regel 103). Het cijfer belandde daardoor in een kolom
van 5,6rem met het woord ernaast. */
.cal-klokvoet .cal-teller{font-size:.72rem;color:var(--stil)}
.cal-klokvoet .cal-teller b{color:var(--ink);font-weight:700}
.cal-alle{
background:none;border:0;padding:0;font:600 .76rem var(--body);color:var(--blue);
text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.cal-alle:hover{color:var(--blue-2)}
@media (prefers-reduced-motion:reduce){
.cal-rij{transition:none}
}
.cal-strook{display:grid;gap:.4rem;padding:.4rem 0 .6rem;border-bottom:1px solid var(--line)}
.cal-maandnaam{padding:.5rem 1.15rem 0;font:700 .82rem var(--display)}
.cal-chips{display:flex;gap:.45rem;overflow-x:auto;padding:.2rem 1.15rem .3rem;scroll-snap-type:x mandatory;scrollbar-width:none}
.cal-chips::-webkit-scrollbar{display:none}
.cal-chip{flex:none;scroll-snap-align:start;width:3.3rem;padding:.5rem 0 .45rem;border-radius:12px;border:1px solid var(--line);background:var(--bg);display:grid;justify-items:center;gap:1px;cursor:pointer;color:var(--ink)}
.cal-chip small{font-size:.62rem;font-weight:500;color:var(--stil)}
.cal-chip b{font:700 1.05rem var(--display);font-variant-numeric:tabular-nums}
.cal-chip i{width:4px;height:4px;border-radius:50%;background:var(--blue)}
.cal-chip.aan{background:var(--blue);border-color:var(--blue);color:#fff}
.cal-chip.aan small{color:rgba(255,255,255,.75)}
.cal-chip.aan i{background:#fff}
/* vaste voet: de keuze en één knop */
.cal-voet{border-top:1px solid var(--line);padding:.8rem 1.4rem .9rem;display:grid;gap:.55rem;background:var(--bg)}
.cal-voet:empty{display:none}
.cal-voet .rij{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cal-voet .sam{font-size:.84rem;color:var(--stil);min-width:0}
.cal-voet .sam b{display:block;color:var(--ink);font:700 .95rem var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-bevestig{flex:none;border:0;border-radius:11px;background:var(--blue);color:#fff;padding:.8em 1.4em;font:600 .92rem var(--body);cursor:pointer;transition:background-color .16s,opacity .16s}
.cal-bevestig:hover{background:var(--blue-2)}
.cal-bevestig[disabled]{opacity:.4;cursor:default}
.cal-ghost{background:none;border:0;padding:0;font:500 .78rem var(--body);color:var(--stil);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line-2);cursor:pointer;justify-self:start}
.cal-ghost:hover{color:var(--blue)}
.cal-voet .fout{margin-top:0}
.cal-invul{display:grid;gap:.5rem;padding:1rem 1.2rem 0}
.cal-invul .kop{font-size:.8rem;font-weight:600;color:var(--ink)}
.cal-wacht{display:flex;align-items:center;gap:.7rem;justify-content:center;padding:3rem 1rem;font-size:.88rem;color:var(--stil)}
.cal-spin{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid var(--line);border-top-color:var(--blue);animation:cal-draai .7s linear infinite}
@keyframes cal-draai{to{transform:rotate(360deg)}}
.cal-leeg{padding:2rem 1.2rem;text-align:center;font-size:.9rem;color:var(--muted);line-height:1.6}
@media (max-width:560px){
/* bottom sheet: schuift van onderen omhoog, kop vast, alleen de tijden scrollen */
#scrim-cal{place-items:end center;padding:0}
.modal--cal{max-width:none;margin:0;height:88vh;height:88dvh;max-height:none;border-radius:22px 22px 0 0;border-bottom:0;transform:translateY(40px)}
.scrim.open .modal--cal{transform:none}
.grip{display:block}
.v-top{padding:.9rem 1.15rem .6rem}
.v-top h2{font-size:1.2rem}
.v-top p{font-size:.82rem}
.modal--cal .modal-x{top:1.05rem;right:.8rem;width:2.5rem;height:2.5rem}
.cal-tijden{padding:.6rem 1.15rem 1rem}
.cal-invul{padding:.9rem 1.15rem 0}
.cal-voet{padding:.7rem 1.15rem calc(.8rem + env(safe-area-inset-bottom))}
}
.cal-klaar{text-align:center;padding:1.8rem 1.6rem 1.6rem;display:grid;gap:.6rem;justify-items:center}
.cal-klaar .ic{width:3.2rem;height:3.2rem;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;margin-bottom:.3rem}
.cal-klaar .ic svg{width:1.3rem;height:1.3rem}
.cal-klaar h2{font-size:1.4rem}
.cal-klaar p{font-size:.9rem;color:var(--muted);max-width:36ch}
.cal-klaar .wanneer{font-family:var(--display);font-weight:800;font-size:1.15rem;margin-top:.3rem}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{transition-duration:0s!important;animation:none!important}
}
/* ═══════════════════════════════════════════════════════════════════
BEWEGING — hoe iets opengaat, dichtgaat en op een tik reageert.
Eén principe: alles wat verschijnt komt ergens vandaan. Een venster op
de computer zwelt op uit het midden, een blad op de telefoon schuift van
onder het scherm omhoog. Niets ploft in beeld. De curve is overal
dezelfde (--ease): snel op gang, zacht uit. Dat leest als "afgemaakt"
zonder dat iemand de animatie bewust ziet.
Duur: 160ms voor een reactie op een tik (dat mag je niet voelen),
280ms voor verschijnen en verdwijnen, 440ms voor een blad dat een
halve schermhoogte aflegt. Langer voelt traag, korter voelt hard.
Wie in het systeem "beweging beperken" aan heeft staan krijgt onderaan
dit bestand alles uitgezet, behalve het verschijnen zelf.
═══════════════════════════════════════════════════════════════════ */
:root{
--t-tik:.16s; /* reactie op een tik of hover */
--t-toon:.28s; /* verschijnen en verdwijnen */
--t-blad:.44s; /* een blad dat omhoog schuift */
}
/* ── de overlay ─────────────────────────────────────────────────────
visibility hoort erbij: zonder dat blijft een dicht venster bereikbaar
met de tab-toets. De vertraging van 0s bij openen en --t-toon bij
sluiten zorgt dat hij pas ná het uitfaden echt verdwijnt. */
.scrim{
visibility:hidden;
backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);
transition:opacity var(--t-toon) var(--ease),
backdrop-filter var(--t-toon) var(--ease),
-webkit-backdrop-filter var(--t-toon) var(--ease),
visibility 0s var(--t-toon);
}
.scrim.open{
visibility:visible;
backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
transition:opacity var(--t-toon) var(--ease),
backdrop-filter var(--t-toon) var(--ease),
-webkit-backdrop-filter var(--t-toon) var(--ease),
visibility 0s;
}
.modal{
opacity:0;transform:translateY(16px) scale(.975);transform-origin:50% 55%;
transition:transform .38s var(--ease),opacity .22s var(--ease);
}
.scrim.open .modal{opacity:1;transform:none}
/* ── van stap naar stap binnen een venster ──────────────────────────
Een animatie (geen transition) omdat de panelen met [hidden] wisselen:
display:none → block start een animatie opnieuw, een transition niet. */
@keyframes nv-paneel-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#cal-int:not([hidden]),#cal-a:not([hidden]),#cal-b:not([hidden]),
#pu-a:not([hidden]),#pu-b:not([hidden]){animation:nv-paneel-in .32s var(--ease) both}
/* ── reactie op een tik ─────────────────────────────────────────────
Alles wat je kunt aanraken zakt kort in. Op de telefoon vervangt dit de
grijze vlek die de browser er standaard overheen legt. */
body{-webkit-tap-highlight-color:transparent}
.btn,.cal-tijd,.cal-chip,.cal-dag.vrij,.cal-bevestig,.pu-rij,.modal-x,.cal-ghost,.iopt button{
transition:background-color var(--t-tik) var(--ease),border-color var(--t-tik) var(--ease),
color var(--t-tik) var(--ease),transform var(--t-tik) var(--ease),
box-shadow var(--t-tik) var(--ease);
}
.cal-tijd:active,.cal-chip:active,.cal-dag.vrij:active,.pu-rij:active,.iopt button:active{transform:scale(.96)}
.cal-bevestig:active:not([disabled]){transform:scale(.97)}
.modal-x:active{transform:scale(.9)}
/* ── hover, alleen waar een muis is ─────────────────────────────────
Op een telefoon blijft :hover na een tik hangen; achter deze vraag
gebeurt dat niet. */
@media (hover:hover) and (pointer:fine){
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,82,255,.28)}
.btn-secondary:hover{transform:translateY(-1px)}
.modal-x:hover{background:var(--bg-2);color:var(--ink);transform:rotate(90deg)}
.cal-chip:not(.aan):hover{border-color:var(--blue);transform:translateY(-2px)}
.cal-tijd:not(.aan):hover{transform:translateY(-1px)}
.cal-dag.vrij:hover{transform:scale(1.06)}
.nav-links a{transition:color var(--t-tik) var(--ease),background-color var(--t-tik) var(--ease)}
}
/* ── schuifbalken ───────────────────────────────────────────────────
De standaardbalk van de browser is grijs en breed en breekt de rand van
een venster. Deze is dun, meebewegend en verdwijnt in de achtergrond. */
.v-body,.bw-body,.cal-tijden,.desk-vak{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.v-body::-webkit-scrollbar,.bw-body::-webkit-scrollbar,.cal-tijden::-webkit-scrollbar{width:9px}
.v-body::-webkit-scrollbar-track,.bw-body::-webkit-scrollbar-track,.cal-tijden::-webkit-scrollbar-track{background:transparent}
.v-body::-webkit-scrollbar-thumb,.bw-body::-webkit-scrollbar-thumb,.cal-tijden::-webkit-scrollbar-thumb{
background:var(--line-2);border-radius:999px;border:3px solid transparent;background-clip:content-box;
}
.v-body::-webkit-scrollbar-thumb:hover,.bw-body::-webkit-scrollbar-thumb:hover{background:var(--stil);background-clip:content-box}
/* ── ankers ─────────────────────────────────────────────────────────
scroll-padding houdt de vaste nav weg van de kop waar je heen springt. */
html{scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
/* ── de telefoon: vensters worden bladen ────────────────────────────
Van onder het scherm omhoog, niet uitzoomend vanuit het midden. Geen
fade erbij: een blad dat óók doorzichtig begint voelt zweverig. */
@media (max-width:560px){
/* De overlay zelf mag niet scrollen. Een blad dat nog een schermhoogte
lager staat maakt hem namelijk scrollbaar, en dan verspringt het beeld
tijdens het omhoog komen. Het blad scrolt vanbinnen, dat is genoeg. */
.scrim{overflow:hidden}
#scrim-pu{place-items:end center;padding:0}
.modal--cal,.modal--pu{opacity:1;transform:translateY(100%);
transition:transform var(--t-blad) var(--ease)}
.scrim.open .modal--cal,.scrim.open .modal--pu{transform:none}
.grip{transition:background-color var(--t-tik) var(--ease)}
}
/* ── beweging beperken ──────────────────────────────────────────────
Systeeminstelling gerespecteerd: alles verschijnt nog, maar zonder reis.
Niet alles op 0s zetten zonder meer -- dan blijft een blad met
visibility:hidden hangen. Daarom expliciet per geval. */
@media (prefers-reduced-motion:reduce){
.scrim,.scrim.open{transition:opacity .01s linear,visibility 0s}
.modal,.scrim.open .modal{transition:opacity .01s linear;transform:none}
#cal-int:not([hidden]),#cal-a:not([hidden]),#cal-b:not([hidden]),
#pu-a:not([hidden]),#pu-b:not([hidden]){animation:none}
.btn,.cal-tijd,.cal-chip,.cal-dag.vrij,.cal-bevestig,.pu-rij,.modal-x,.iopt button{transition:none}
.btn:active,.cal-tijd:active,.cal-chip:active,.cal-dag.vrij:active,.pu-rij:active,.iopt button:active,
.modal-x:active,.cal-bevestig:active:not([disabled]){transform:none}
}
/* ── de WhatsApp-kaart: de kop ───────────────────────────────────────
Dit is het enige moment waarop we iets vrágen terwijl de bezoeker nog
midden in de video zit. Daarom donker en groot, in de taal van het
slotpaneel: het leest als een aanbod, niet als een melding.
De voortgangsregel is echte urgentie -- zijn eigen tijdcode, hij is er
nog niet doorheen -- en geen verzonnen afteller. nomad-vsl-1.js vult
hem bij het openen en verbergt hem als er geen tijd bekend is. */
.pu-kop{position:relative;background:var(--dark);color:#EEF1F8;padding:1.5rem 1.5rem 1.35rem;overflow:hidden}
.pu-kop::after{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 75% 65% at 12% -10%,rgba(0,82,255,.5),transparent 68%)}
.pu-kop > *{position:relative;z-index:2}
.pu-kop .grip{background:rgba(255,255,255,.35);margin-bottom:1rem}
.pu-merk{font-family:var(--display);font-weight:900;font-size:.9rem;letter-spacing:-.03em;color:#fff;margin:0 0 .7rem}
.pu-merk span{color:var(--blue)}
.pu-kop h2{font-size:clamp(1.55rem,1.25rem + 1.5vw,2.05rem);font-weight:900;line-height:1.02;letter-spacing:-.03em;padding-right:2.6rem}
.pu-kop h2 .dot{color:var(--blue)}
.pu-sub{margin-top:.6rem;font-size:.92rem;line-height:1.5;color:#A8B0C4;max-width:34ch}
.pu-voort{display:grid;grid-template-columns:1fr auto;gap:.7rem;align-items:center;margin-top:1.1rem}
.pu-voort .baan{height:3px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.pu-voort .baan i{display:block;height:100%;width:0;background:var(--blue);border-radius:2px;transition:width .5s var(--ease)}
.pu-voort span{font-size:.74rem;font-weight:600;color:#8089A0;font-variant-numeric:tabular-nums;white-space:nowrap}
.pu-merkje{display:inline-block;font-style:normal;font-size:.6rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:#fff;background:var(--blue);border-radius:999px;padding:.15em .55em;margin-left:.45em;vertical-align:.1em}
.modal--pu{max-width:30rem}
.pu-body{padding-top:1rem}
@media (max-width:560px){
.pu-kop{padding:1.1rem 1.25rem 1.2rem}
.pu-kop h2{font-size:1.55rem}
.pu-sub{font-size:.86rem}
.pu-body{padding:.9rem 1.25rem 1.3rem}
}
/* het greepje reageert zolang je sleept, zodat je ziet dat je hem vasthebt */
.modal .grip{transition:background-color var(--t-tik) var(--ease),width var(--t-tik) var(--ease)}
.modal.sleept .grip{background:var(--blue);width:3rem}
.modal.sleept{will-change:transform}
/* ═══════════════════════════════════════════════════════════════════
DE GATE OP EEN TELEFOON — donker eromheen
Op de telefoon valt de kopkolom weg en blijft de kaart alleen over op
een bleke ondergrond. Dat is veel leegte en het leest als een
formulier, niet als de deur naar iets dat je wilt hebben.
De ondergrond is nu donker met een blauwe gloed en een fijn raster,
dezelfde taal als het slotpaneel en de kop van de WhatsApp-kaart. De
witte kaart komt daardoor naar voren in plaats van weg te vallen. Het
kost geen enkele pixel hoogte, en dat is hier het hele punt: deze
pagina mag niet hoeven scrollen.
Onder de kaart staat op stap 1 wie je voorgingen. Op stap 2 valt die
regel weg, samen met het videovenstertje, want dan komen er drie
velden en een knop bij.
═══════════════════════════════════════════════════════════════════ */
.g-samen{display:none}
.g-navtxt{font-size:.82rem;color:var(--stil)}
@media (max-width:760px){
.gate-page{background:var(--dark)}
.g-nav{background:transparent;border-bottom:1px solid rgba(255,255,255,.09)}
.g-word{color:#fff}
.g-navtxt{color:#8089A0}
.g-body{
background:
radial-gradient(ellipse 90% 45% at 50% 0%,rgba(0,82,255,.30),transparent 62%),
radial-gradient(ellipse 70% 40% at 50% 100%,rgba(0,82,255,.14),transparent 66%),
var(--dark);
position:relative;overflow:hidden}
/* het raster: fijn, en aan de randen weggemaskerd zodat het geen behang wordt */
.g-body::before{content:"";position:absolute;inset:0;pointer-events:none;
background:
repeating-linear-gradient(0deg,transparent,transparent 47px,rgba(255,255,255,.055) 47px,rgba(255,255,255,.055) 48px),
repeating-linear-gradient(90deg,transparent,transparent 47px,rgba(255,255,255,.055) 47px,rgba(255,255,255,.055) 48px);
-webkit-mask-image:radial-gradient(ellipse 85% 60% at 50% 42%,#000 20%,transparent 75%);
mask-image:radial-gradient(ellipse 85% 60% at 50% 42%,#000 20%,transparent 75%)}
.g-body > *{position:relative;z-index:1}
.g-card{box-shadow:0 30px 70px rgba(0,0,0,.55),0 2px 10px rgba(0,0,0,.3)}
.g-samen{display:flex;align-items:center;justify-content:center;gap:.6rem;
margin:1.05rem auto 0;max-width:22rem;text-align:left;
font-size:.76rem;line-height:1.35;color:#8089A0}
.g-samen .g-avs i{background:#141824;border-color:rgba(255,255,255,.22);color:#C9D0E0}
}
/* de krappe stand: dan is er ook voor deze regel geen ruimte */
@media (max-width:760px) and (max-height:600px){
.g-samen{display:none}
}
/* Eén stap, dus één zin onder de kop die zegt wat er gebeurt als je op de knop
drukt. Op een kort scherm valt hij weg, samen met de bewijsregel: de knop in
beeld houden gaat voor. */
.g-sub2{margin:.35rem 0 .2rem;font-size:.86rem;line-height:1.45;color:var(--muted);max-width:38ch}
@media (max-width:760px) and (max-height:640px){.g-sub2{display:none}}
/* Onder de 580px hoogte (een oude telefoon met een grote adresbalk) past het
videovenstertje er niet meer bij zonder dat de knop onder de vouw valt.
Dan gaat het beeld eraf: de knop bereikbaar houden weegt zwaarder. */
@media (max-width:760px) and (max-height:580px){
.g-mini{display:none}
.gnote{display:none}
}
/* Laatste stap voor de kleinste schermen die er nog rondgaan (een SE van de
eerste generatie houdt ruim 460px over). Alles wat weg kon is al weg; hier
knijpen we alleen nog de ruimte tussen de velden. */
@media (max-width:760px) and (max-height:520px){
.g-card{padding:.9rem 1rem .85rem}
.field{margin-top:.35rem}
.inp{padding:.5em .8em}
.g-card h2{font-size:1rem}
.consent{margin-top:.5rem}
}