/* School-Agent · de publieke voorkant
   Startpagina, pilot en inloggen: wat iemand ziet zonder account. Alleen die drie
   sjablonen laden dit bestand; de ingelogde omgeving gebruikt het niet, dus niets
   hier verandert iets na het inloggen. Kleuren en letters komen uit astryx.css
   (--ax-*): dezelfde identiteit, alleen een rijkere compositie. */

/* --- Van pagina naar pagina: de blob loopt mee ----------------------------------
   Startpagina, pilot en inloggen doen mee aan een view transition tussen pagina's.
   De blob heeft op elke pagina dezelfde naam, dus hij beweegt van zijn plek op de
   ene pagina naar die op de volgende. Browsers zonder ondersteuning, en iedereen
   met reduced motion, krijgen een gewone paginawissel. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html { scroll-behavior: smooth; }
}
::view-transition-group(blobbitar) { animation-duration: .6s; animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }

/* --- De schil -------------------------------------------------------------------- */
.vk-pagina {
  --vk-breed: 1320px;
  --vk-goot: clamp(1.25rem, 4.5vw, 4rem);
  --vk-kop: 76px;
  --vk-rood: #ff637b;
  --vk-rood-zacht: #ff8194;
  --vk-rood-licht: #ff9cab;
  --vk-paneel: #131418;
  --vk-paneelrand: #54313e;
  --vk-zacht: #c8c1c7;
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--ax-bg);
  overflow-x: clip;
}
html:has(.vk-start) { scroll-padding-top: 5.5rem; }

/* Het stippenveld van de startpagina: vast in beeld, zodat het licht blijft hoe lang
   de pagina ook is. Zonder JavaScript (en bij touch of reduced motion) is het het
   vaste CSS-raster; static/voorkant.js tekent er met een fijne muis een canvas over
   dat op de cursor reageert, net als static/stippen.js op de andere pagina's. */
.vk-veld { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.vk-veld::before { content: ''; position: absolute; inset: -22px 0; background-image: radial-gradient(#6b343e 1px, transparent 1px); background-size: 22px 22px; transform: translate3d(0, var(--vk-parallax, 0px), 0); }
.vk-veld::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 55% 60% at 72% 42%, rgba(227, 41, 69, .08), transparent 70%), linear-gradient(90deg, #0c0d10b0, #0c0d1000 55%); }
.vk-veld.is-actief::before { display: none; }
.vk-veld canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Inloggen en pilot houden het bestaande veld (.inlogpagina + static/stippen.js);
   hier alleen de indeling: kop, inhoud, voet onder elkaar in plaats van het raster. */
.vk-pagina.inlogpagina { display: flex; flex-direction: column; align-items: stretch; overflow: clip; }

/* --- De kop ------------------------------------------------------------------------ */
.vk-kop {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  height: var(--vk-kop);
  padding: 0 max(var(--vk-goot), calc((100% - var(--vk-breed)) / 2));
  background: rgba(12, 13, 16, .84);
  border-bottom: 1px solid rgba(48, 49, 56, .75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  transition: background-color .3s, border-color .3s;
  view-transition-name: vk-kop;
}
.vk-kop.is-boven { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vk-formscherm .vk-kop { position: relative; background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vk-merk { display: inline-flex; align-items: center; gap: .7rem; min-height: 44px; color: var(--ax-text); text-decoration: none; font-size: 1.15rem; font-weight: 700; letter-spacing: -.025em; }
.vk-merk .sa-blob { height: 2.3rem; }
.vk-merk .punt { color: #ff526c; }
.vk-kopnav { display: flex; align-items: center; gap: clamp(.5rem, 2vw, 1.25rem); }
.vk-koplink { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .35rem; color: var(--ax-text-muted); font-size: .88rem; font-weight: 500; text-decoration: none; transition: color .18s; }
.vk-koplink:hover { color: var(--ax-text); }
.vk-kopknop { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .95rem 0 1.05rem; border-radius: 6px; background: #c72640; color: #fff; font-size: .85rem; font-weight: 700; text-decoration: none; transition: background-color .18s, opacity .3s, transform .3s, visibility .3s; }
.vk-kopknop:hover { background: #df2a48; }
.vk-kopknop .icoon { width: 16px; height: 16px; }
/* Op de startpagina stil (alleen een rand) zolang de grote knop bovenaan in beeld is,
   zodat er niet twee rode knoppen om aandacht vragen; daarna vol. Altijd bereikbaar. */
.vk-kopknop { border: 1px solid #c72640; }
.vk-kopknop.is-stil { background: transparent; border-color: #7a3444; color: var(--vk-rood-licht); }
.vk-kopknop.is-stil:hover { background: #2a1219; color: #fff; }

/* --- Gedeelde onderdelen ----------------------------------------------------------- */
.vk-label { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.35rem; font-family: var(--ax-mono); font-size: .72rem; line-height: 1.4; letter-spacing: .12em; text-transform: uppercase; color: var(--vk-rood-licht); }
.vk-label::before { content: ''; flex: none; width: 1.5rem; height: 1px; background: var(--vk-rood); }
.vk-heldlabel { grid-area: label; align-self: end; }
.vk-nr { color: var(--ax-text-subtle); }
.vk-knop { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.25rem; min-height: 54px; padding: 0 1.1rem 0 1.35rem; border: 1px solid #c72640; border-radius: 6px; background: #c72640; color: #fff; font-size: .95rem; font-weight: 700; text-decoration: none; box-shadow: 0 12px 32px -14px rgba(227, 41, 69, .65); transition: background-color .18s, border-color .18s, box-shadow .18s, transform .18s; }
.vk-knop:hover { background: #df2a48; border-color: #df2a48; box-shadow: 0 16px 38px -14px rgba(227, 41, 69, .8); }
.vk-knop:active { transform: translateY(1px); }
.vk-knop .icoon { transition: transform .18s; }
.vk-knop:hover .icoon { transform: translateX(3px); }
.vk-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.vk-account { margin: 0; color: var(--ax-text-muted); font-size: .9rem; }
.vk-account a, .vk-introlink a, .vk-terug a { color: var(--vk-rood-zacht); font-weight: 600; }
.vk-account a:hover, .vk-introlink a:hover, .vk-terug a:hover { color: var(--vk-rood-licht); }
.vk-lead { margin: 1.5rem 0 2.25rem; max-width: 34em; color: var(--vk-zacht); font-size: clamp(1rem, 1.2vw, 1.12rem); line-height: 1.75; }
.vk-intro { margin: 1.25rem 0 0; max-width: 36em; color: var(--vk-zacht); font-size: 1.02rem; line-height: 1.75; }
.vk-klein { margin: .85rem 0 0; color: var(--ax-text-subtle); font-size: .8rem; line-height: 1.65; }

/* De blob zelf. Drie lagen: de plek (positie, en de naam voor de paginawissel), de
   figuur (leunen naar een veld) en de hop (kleine sprongetjes). Het lijf, de ogen
   en de standen komen ongewijzigd uit static/schoolblob.js. */
.vk-blobbitar { position: relative; width: 100%; height: 100%; view-transition-name: blobbitar; }
.vk-figuur, .vk-hop { position: relative; width: 100%; height: 100%; }
.vk-figuur { transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.vk-gloed { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 41, 69, .19), rgba(227, 41, 69, .05) 60%, transparent); pointer-events: none; }
.vk-figuur .sa-blob { position: relative; display: block; width: 100%; height: 100%; }
.vk-figuur .sa-blob svg { filter: drop-shadow(0 0 1.5px rgba(255, 99, 123, .65)); }
/* Tot rust komen naast de pilot: dezelfde ademhaling, maar trager. Geen intro bij
   het laden: de blob is er gewoon, zodat er niets eerst hoeft af te spelen en de
   paginawissel hem ongestoord kan meenemen. */
.vk-blobbitar.is-rust { --mo-rate: 1.45; }

/* --- De startpagina: vier scènes -------------------------------------------------- */
.vk-scene { position: relative; padding: clamp(5rem, 13vh, 9rem) 0; }
.vk-raster {
  width: min(var(--vk-breed), calc(100% - 2 * var(--vk-goot)));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  grid-template-areas: "kop anker" "inhoud anker";
  column-gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.vk-scenekop { grid-area: kop; min-width: 0; max-width: 42rem; }
.vk-sceneinhoud { grid-area: inhoud; min-width: 0; }
/* Een anker is een lege, gereserveerde plek: daar staat de blob als die scène aan de
   beurt is. Nooit over tekst, want de plek hoort bij het raster. */
.vk-anker { grid-area: anker; align-self: center; justify-self: center; width: clamp(180px, 17vw, 250px); aspect-ratio: 1; }
.vk-scene h2 { margin: 0; font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.04em; text-wrap: balance; }

/* Scène 1 */
.vk-held { min-height: calc(100vh - var(--vk-kop)); min-height: calc(100svh - var(--vk-kop)); display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vh, 3.5rem) 0 clamp(5rem, 11vh, 7rem); }
.vk-held .vk-raster { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "label anker" "kop anker" "inhoud anker"; }
.vk-held .vk-scenekop { align-self: end; }
.vk-held h1 { margin: 0; font-size: clamp(2.75rem, 5.3vw, 5.25rem); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; text-wrap: balance; }
.vk-held h1 span, .vk-formintro h1 span { color: var(--vk-rood); }
.vk-anker-held { width: min(100%, 460px); }
.vk-noot { margin: 1.4rem 0 0; color: var(--ax-text-subtle); font-family: var(--ax-mono); font-size: .74rem; letter-spacing: .02em; }
.vk-verder { position: absolute; left: 50%; bottom: clamp(1rem, 3vh, 2rem); transform: translateX(-50%); display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; color: var(--ax-text-subtle); font-family: var(--ax-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; transition: color .18s; }
.vk-verder:hover { color: var(--ax-text); }
.vk-verder-pijl .icoon { width: 14px; height: 14px; transform: rotate(90deg); }

/* Scène 2: onderwerpen, elk met één beeldje */
.vk-punten { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; gap: .85rem; }
.vk-punt { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: 1.5rem; padding: 1.1rem 1.35rem 1.1rem 1.1rem; background: rgba(19, 20, 24, .82); border: 1px solid var(--ax-border); border-radius: 10px; transition: border-color .45s, background-color .45s, opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.vk-punt.is-actief { border-color: #6a3643; background: rgba(28, 21, 26, .92); }
.vk-punttekst h3 { margin: 0 0 .35rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; }
.vk-punttekst p { margin: 0; color: var(--ax-text-muted); font-size: .9rem; line-height: 1.65; }
.vk-punttekst .vk-etiket { display: inline-block; margin-top: .65rem; padding: .2rem .5rem; border: 1px solid #63482c; border-radius: 4px; background: #30251c; color: #f4ce9e; font-family: var(--ax-mono); font-size: .66rem; letter-spacing: .03em; }

/* De beeldjes zijn in em getekend: op mobiel wordt het hele beeldje kleiner door
   alleen de lettergrootte te verkleinen. Decoratief (aria-hidden); de tekst ernaast
   zegt wat het is. */
.vk-beeld { position: relative; height: 5.6em; font-size: 16px; border: 1px solid #2a2b31; border-radius: .5em; background: #0f1014; overflow: hidden; }
.vk-beeld i, .vk-beeld em, .vk-beeld b, .vk-beeld s { transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1), background-color .45s, border-color .45s, box-shadow .45s; }

.vk-beeld-rooster { display: grid; grid-template-rows: auto 1fr; gap: .35em; padding: .45em .5em .5em; }
.vk-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25em; color: var(--ax-text-subtle); font-family: var(--ax-mono); font-size: .5em; line-height: 1.2; text-align: center; }
.vk-blokken { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, 1fr); gap: .25em; }
.vk-blokken i { border: 1px solid #34353d; border-radius: .2em; background: #24252c; }
.vk-blokken i:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
.vk-blokken i:nth-child(2) { grid-column: 2; grid-row: 2 / span 2; }
.vk-blokken i:nth-child(3) { grid-column: 3; grid-row: 1 / span 2; }
.vk-blokken i:nth-child(4) { grid-column: 4; grid-row: 1; }
.vk-blokken i:nth-child(5) { grid-column: 5; grid-row: 2 / span 2; }
.vk-blokken i:nth-child(6) { grid-column: 4; grid-row: 3; }
.vk-blokken i.is-nu { border-color: #a63b50; background: #3a1822; box-shadow: inset .15em 0 0 var(--vk-rood); }

.vk-beeld-taken { display: grid; align-content: center; gap: .5em; padding: .6em .75em; }
.vk-beeld-taken i { display: grid; grid-template-columns: .65em 1fr 2em; align-items: center; gap: .5em; }
.vk-beeld-taken b { height: .65em; border: 1px solid #51525b; border-radius: .15em; }
.vk-beeld-taken s { height: .32em; border-radius: .15em; background: #2f3037; }
.vk-beeld-taken i:nth-child(2) s { width: 80%; }
.vk-beeld-taken i:nth-child(3) s { width: 65%; }
.vk-beeld-taken em { height: .75em; border: 1px solid #52313c; border-radius: .2em; background: #221a20; }
.vk-beeld-taken i:first-child em { border-color: #63482c; background: #30251c; }
.vk-beeld-taken i:last-child b { border-color: #315b49; background: #142b23; }

.vk-beeld-materiaal i { position: absolute; top: .8em; width: 3em; height: 3.9em; border: 1px solid #3a3b43; border-radius: .25em; background: #1b1c22; }
.vk-beeld-materiaal i::before, .vk-beeld-materiaal i::after { content: ''; position: absolute; left: .45em; right: .45em; height: .22em; border-radius: .1em; background: #34353d; }
.vk-beeld-materiaal i::before { top: .7em; }
.vk-beeld-materiaal i::after { top: 1.2em; right: 1em; }
.vk-beeld-materiaal i:nth-child(1) { left: 1.1em; transform: rotate(-8deg); }
.vk-beeld-materiaal i:nth-child(2) { left: 3.1em; top: .6em; transform: rotate(2deg); }
.vk-beeld-materiaal i:nth-child(3) { left: 5.2em; transform: rotate(9deg); border-color: #6a3643; }
.vk-beeld-materiaal em { position: absolute; right: .45em; top: .4em; padding: .05em .35em; border: 1px solid #52313c; border-radius: .2em; background: #221a20; color: var(--vk-rood-licht); font-family: var(--ax-mono); font-size: .55em; font-style: normal; }

.vk-beeld-gesprek i { position: absolute; border: 1px solid #34353d; background: #1b1c22; }
.vk-beeld-gesprek .vk-vraag { right: .6em; top: .6em; width: 55%; height: 1.2em; border-color: #5a2c3a; border-radius: .6em .6em .15em .6em; background: #2a1920; }
.vk-beeld-gesprek .vk-antwoord { left: .6em; top: 2.15em; width: 74%; height: 1.85em; border-radius: .6em .6em .6em .15em; }
.vk-beeld-gesprek .vk-antwoord::before, .vk-beeld-gesprek .vk-antwoord::after { content: ''; position: absolute; left: .5em; height: .2em; border-radius: .1em; background: #34353d; }
.vk-beeld-gesprek .vk-antwoord::before { top: .5em; right: .6em; }
.vk-beeld-gesprek .vk-antwoord::after { top: 1em; right: 2em; }
.vk-beeld-gesprek em { position: absolute; left: .6em; bottom: .35em; padding: 0 .35em; border: 1px solid #52313c; border-radius: .2em; background: #221a20; color: var(--vk-rood-licht); font-family: var(--ax-mono); font-size: .52em; font-style: normal; }

/* Met JavaScript bouwt elk beeldje zich op zodra het onderwerp in beeld komt. */
.vk-js .vk-punt:not(.is-gezien) .vk-blokken i,
.vk-js .vk-punt:not(.is-gezien) .vk-beeld-taken i,
.vk-js .vk-punt:not(.is-gezien) .vk-beeld-gesprek i,
.vk-js .vk-punt:not(.is-gezien) .vk-beeld em { opacity: 0; transform: translateY(.4em); }
.vk-js .vk-punt:not(.is-gezien) .vk-beeld-materiaal i { opacity: 0; transform: translateY(.6em) rotate(0deg); }
.vk-punt .vk-blokken i:nth-child(2), .vk-punt .vk-beeld-taken i:nth-child(2), .vk-punt .vk-beeld-materiaal i:nth-child(2), .vk-punt .vk-antwoord { transition-delay: .12s; }
.vk-punt .vk-blokken i:nth-child(3), .vk-punt .vk-beeld-taken i:nth-child(3), .vk-punt .vk-beeld-materiaal i:nth-child(3) { transition-delay: .24s; }
.vk-punt .vk-blokken i:nth-child(4), .vk-punt .vk-beeld em { transition-delay: .36s; }
.vk-punt .vk-blokken i:nth-child(5) { transition-delay: .44s; }
.vk-punt .vk-blokken i:nth-child(6) { transition-delay: .5s; }
.vk-punt.is-actief .vk-blokken i.is-nu { box-shadow: inset .15em 0 0 var(--vk-rood), 0 0 .9em rgba(227, 41, 69, .35); }
.vk-punt.is-actief .vk-beeld-materiaal i:nth-child(3) { transform: rotate(9deg) translateY(-.2em); }

/* Scène 3: de stappen, met een lijn die meegroeit met scrollen */
.vk-stappen { position: relative; --vk-voortgang: 1; list-style: none; margin: 2.75rem 0 0; padding: 0 0 0 3.4rem; display: grid; gap: 2.4rem; }
.vk-stappen::before, .vk-stappen::after { content: ''; position: absolute; left: 1.07rem; top: 1rem; bottom: 1.25rem; width: 1px; }
.vk-stappen::before { background: var(--ax-border); }
.vk-stappen::after { background: linear-gradient(var(--vk-rood), #c72640); transform-origin: top; transform: scaleY(var(--vk-voortgang)); }
.vk-stap { position: relative; transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.vk-stapnr { position: absolute; z-index: 1; left: -3.4rem; top: -.15rem; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid #ff637b; border-radius: 50%; background: #3a1822; color: #fff; font-family: var(--ax-mono); font-size: .68rem; transition: border-color .4s, color .4s, background-color .4s, box-shadow .4s; }
.is-reizend .vk-stap:not(.is-bereikt) .vk-stapnr { border-color: #51525b; background: var(--ax-bg); color: var(--ax-text-muted); }
.vk-stap.is-actief .vk-stapnr { box-shadow: 0 0 0 6px rgba(227, 41, 69, .14); }
.vk-staptekst h3 { margin: 0 0 .45rem; font-size: 1.18rem; font-weight: 700; letter-spacing: -.02em; }
.vk-staptekst p { margin: 0; max-width: 34em; color: var(--ax-text-muted); font-size: .93rem; line-height: 1.7; }

/* Het kleine voorbeeld van "Account instellen": dezelfde vier stappen en woorden
   als in de onboarding, geen nagebouwd dashboard. */
.vk-werkplek { max-width: 22rem; margin-top: 1.15rem; padding: .9rem 1rem .95rem; border: 1px solid #2d2e35; border-radius: 8px; background: #0f1014; font-family: var(--ax-mono); }
.vk-werkplek .vk-werkplekkop { max-width: none; margin: 0 0 .6rem; color: var(--ax-text-subtle); font-size: .62rem; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.vk-werkplek ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.vk-werkplek li { display: grid; grid-template-columns: 1.7rem 1fr auto; align-items: center; color: var(--ax-text); font-size: .74rem; transition: opacity .45s, transform .45s; }
.vk-werkplek li span { color: var(--ax-text-subtle); font-size: .64rem; }
.vk-werkplek em { padding: .06rem .42rem; border: 1px solid #315b49; border-radius: 3px; background: #142b23; color: #a7dfc3; font-size: .62rem; font-style: normal; transition: opacity .45s, transform .45s; }
.vk-werkplek .vk-laden em { border-color: #52313c; background: #221a20; color: var(--vk-rood-licht); }
.is-reizend .vk-werkplek:not(.is-bezig) li { opacity: .38; }
.is-reizend .vk-werkplek:not(.is-bezig) em { opacity: 0; transform: translateX(-.35rem); }
.vk-werkplek li:nth-child(2), .vk-werkplek li:nth-child(2) em { transition-delay: .25s; }
.vk-werkplek li:nth-child(3), .vk-werkplek li:nth-child(3) em { transition-delay: .5s; }
.vk-werkplek li:nth-child(4), .vk-werkplek li:nth-child(4) em { transition-delay: .75s; }
/* Het knipperende "nu" alleen zolang het voorbeeld in beeld is (static/voorkant.js). */
@media (prefers-reduced-motion: no-preference) {
  .vk-werkplek.is-bezig.is-zichtbaar .vk-laden em { animation: vk-knipper 1.6s ease-in-out 1.2s infinite; }
}
@keyframes vk-knipper { 50% { opacity: .45; } }

.vk-grens { display: flex; align-items: flex-start; gap: .75rem; max-width: 38rem; margin: 2.5rem 0 0; padding: 1rem 1.15rem; border: 1px solid var(--ax-border); border-radius: 8px; background: rgba(19, 20, 24, .82); color: var(--ax-text-muted); font-size: .88rem; line-height: 1.65; transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.vk-grens > span:first-child { display: flex; padding-top: .1rem; color: var(--vk-rood-zacht); }
.vk-grens .icoon { width: 18px; height: 18px; }

/* Scène 4: de pilot */
.vk-pilotkaart { position: relative; margin-top: 2.5rem; padding: clamp(1.5rem, 3vw, 2.25rem); border: 1px solid var(--vk-paneelrand); border-radius: 12px; background: var(--vk-paneel); box-shadow: 0 24px 80px #0005; transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); }
.vk-pilotkaart::before { content: ''; position: absolute; top: -1px; left: 2.25rem; width: 3rem; height: 2px; background: var(--vk-rood); }
.vk-pilotkolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2.25rem; }
.vk-pilotkaart h3 { margin: 0 0 .9rem; color: var(--ax-text-subtle); font-family: var(--ax-mono); font-size: .68rem; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.vk-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.vk-lijst li { position: relative; padding-left: 1.1rem; color: var(--ax-text-muted); font-size: .88rem; line-height: 1.6; }
.vk-lijst li::before { content: ''; position: absolute; left: 0; top: .72em; width: .5rem; height: 1px; background: var(--vk-rood); }
.vk-lijst strong { color: var(--ax-text); font-weight: 600; }
.vk-gegevens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.vk-gegevens li { padding: .38rem .7rem; border: 1px solid #45404a; border-radius: 6px; background: #0d0e12; color: var(--ax-text); font-size: .8rem; }
.vk-pilotkaart .pilotprijs { margin: 1.75rem 0 1.6rem; }
.vk-pilotkaart .vk-knop.is-actief { box-shadow: 0 0 0 4px rgba(227, 41, 69, .18), 0 16px 38px -14px rgba(227, 41, 69, .8); }
.vk-daarna { margin: 1.4rem 0 0; padding-top: 1.15rem; border-top: 1px solid var(--ax-border); color: var(--ax-text-muted); font-size: .86rem; line-height: 1.7; }
.vk-daarna strong { color: var(--ax-text); }

.vk-voet { display: flex; align-items: baseline; gap: 1.5rem; width: min(var(--vk-breed), calc(100% - 2 * var(--vk-goot))); margin: 0 auto; padding: 1.5rem 0 2rem; border-top: 1px solid #393038; color: var(--ax-text-subtle); font-size: .68rem; line-height: 1.8; }
.vk-voetlink { flex: none; margin-left: auto; color: #bbaab4; white-space: nowrap; }
.vk-voet strong { flex: none; color: #bbaab4; font-family: var(--ax-mono); font-size: .6rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }

/* Onthullen: alleen wat bij het laden nog onder de vouw staat, en alleen met
   JavaScript (static/voorkant.js zet .vk-wacht). Zonder script is alles zichtbaar. */
.vk-wacht { opacity: 0; transform: translate3d(0, 18px, 0); }

/* --- De blob op reis (startpagina) ---------------------------------------------------
   Met JavaScript en zonder reduced motion staat de blob vast in beeld en zet
   static/voorkant.js zijn plek, grootte en draaiing per frame, gekoppeld aan de
   scrollpositie. Op brede schermen blijft hij in de rechterbaan, naast de inhoud;
   klikken kan alleen als hij stilstaat. */
.vk-start.is-reizend .vk-blobbitar { position: fixed; z-index: 3; left: 0; top: 0; width: var(--vk-basis, 300px); height: var(--vk-basis, 300px); transform-origin: 50% 50%; will-change: transform; pointer-events: none; }
.vk-start.is-reizend .vk-blobbitar.is-rustend .sa-blob { pointer-events: auto; }

/* --- Pilot en inloggen -------------------------------------------------------------- */
.vk-formpagina {
  flex: 1;
  width: min(1260px, calc(100% - 2 * var(--vk-goot)));
  margin: 0 auto;
  padding: clamp(1.5rem, 5vh, 4rem) 0 clamp(3rem, 8vh, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(150px, 13vw, 200px) minmax(360px, 440px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "intro figuur kaart" "extra figuur kaart";
  column-gap: clamp(1.25rem, 2.5vw, 2.5rem);
  align-items: start;
}
.vk-formintro { grid-area: intro; min-width: 0; padding-top: clamp(0rem, 2vh, 1.5rem); }
.vk-formextra { grid-area: extra; min-width: 0; }
.vk-formintro h1 { margin: 0; font-size: clamp(2.4rem, 4.1vw, 4rem); font-weight: 700; line-height: 1.05; letter-spacing: -.04em; text-wrap: balance; }
.vk-formintro .vk-lead { margin-bottom: 0; max-width: 32em; }
.vk-introlink { margin: 1.75rem 0 0; font-size: .9rem; }
/* Op brede schermen staat de blob in een eigen baan tussen uitleg en kaart, en blijft
   hij naast het formulier als je scrolt. */
.vk-figuurplek { grid-area: figuur; position: sticky; top: 24vh; z-index: 1; align-self: start; width: 100%; aspect-ratio: 1; margin-top: 11rem; }
.vk-formkaart { grid-area: kaart; scroll-margin-top: 6rem; }
.vk-formscherm .inlogkaart.vk-formkaart { padding: clamp(1.5rem, 2.6vw, 2.25rem); }

/* De route: waar je bent in het hele traject */
.vk-route { list-style: none; margin: 2.25rem 0 0; padding: 0; max-width: 30rem; }
.vk-route li { position: relative; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .9rem; padding-bottom: 1.1rem; }
.vk-route li::before { content: ''; position: absolute; left: 1.1rem; top: 2.3rem; bottom: .15rem; width: 1px; background: var(--ax-border); }
.vk-route li:last-child { padding-bottom: 0; }
.vk-route li:last-child::before { display: none; }
.vk-routenr { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1px solid #45404a; border-radius: 50%; background: var(--ax-bg); color: var(--ax-text-subtle); font-family: var(--ax-mono); font-size: .64rem; }
.vk-route li.is-nu .vk-routenr { border-color: var(--vk-rood); background: #3a1822; color: #fff; box-shadow: 0 0 0 5px rgba(227, 41, 69, .12); }
.vk-route li.is-klaar .vk-routenr { border-color: #315b49; background: #142b23; color: #a7dfc3; }
.vk-route li.is-klaar::before { background: #315b49; }
.vk-route strong { display: flex; align-items: center; gap: .5rem; padding-top: .3rem; color: var(--ax-text); font-size: .92rem; }
.vk-route small { display: block; margin-top: .15rem; color: var(--ax-text-muted); font-size: .8rem; line-height: 1.55; }
.vk-routenu { padding: .05rem .38rem; border: 1px solid #52313c; border-radius: 3px; background: #221a20; color: var(--vk-rood-licht); font-family: var(--ax-mono); font-size: .58rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.vk-routeklaar { border-color: #315b49; background: #142b23; color: #a7dfc3; }

.vk-voordelen { list-style: none; margin: 2.25rem 0 0; padding: 1.35rem 0 0; display: flex; gap: 1.25rem; border-top: 1px solid #49313b; }
.vk-voordelen li { flex: 1; min-width: 0; }
.vk-voordelen li > span { display: inline-block; margin-bottom: .6rem; color: var(--vk-rood-zacht); }
.vk-voordelen p { margin: 0; }
.vk-voordelen strong { display: block; color: #e4dde2; font-size: .78rem; line-height: 1.55; }
.vk-voordelen small { display: block; margin-top: .3rem; color: #b6a9b2; font-size: .72rem; line-height: 1.55; }

/* Het formulier in drie groepen, met een voortgangsbalk bovenaan de kaart */
.vk-stapteller { margin: 0 0 .5rem; }
.vk-voortgang { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; margin: -.4rem 0 1.5rem; }
.vk-voortgang span { position: relative; height: 3px; border-radius: 2px; background: #2b2c33; overflow: hidden; }
.vk-voortgang span::after { content: ''; position: absolute; inset: 0; background: var(--vk-rood); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.vk-voortgang span.is-vol::after { transform: scaleX(1); }
.vk-formkaart #pilotfout { margin: 0 0 1.25rem; }
.vk-formkaart #pilotfout:focus { outline: 2px solid var(--vk-rood-zacht); outline-offset: 3px; }
.vk-groep { min-width: 0; margin: 0; padding: 0; border: 0; display: grid; gap: .65rem; }
.vk-groep + .vk-groep { margin-top: 1.6rem; }
.vk-groep legend, .vk-groeptitel { display: flex; align-items: center; gap: .6rem; width: 100%; margin: 0 0 .2rem; padding: 0; color: var(--ax-text-subtle); font-family: var(--ax-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
.vk-groep legend::after, .vk-groeptitel::after { content: ''; flex: 1; height: 1px; background: var(--ax-border); }
.vk-groepnr { color: var(--vk-rood-licht); transition: color .3s; }
.vk-groep.is-klaar .vk-groepnr { color: #a7dfc3; }
.vk-groep > label { margin-top: .35rem; color: #c7c3cb; font-size: .8rem; }
.vk-afspraken .pilotprijs { margin: .35rem 0 0; }
.vk-afspraken .pilotvoorwaarden { margin: .2rem 0 0; }
.inlogveld > .vk-veldvinkje { display: none; flex: none; color: #a7dfc3; }
.inlogveld.is-geldig > .vk-veldvinkje { display: flex; }
.inlogveld.is-ongeldig { border-color: #a63b50; box-shadow: inset 3px 0 0 var(--vk-rood); }
.inlogveld { scroll-margin: 6rem 0 8rem; }
.vk-pilotformulier .inlogknop { margin-top: 1.5rem; }
.inlogknop.is-bezig { cursor: progress; background: #9e1f35; border-color: #9e1f35; }
.vk-draaier { display: block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: vk-draai .8s linear infinite; }
@keyframes vk-draai { to { transform: rotate(360deg); } }
.vk-status { min-height: 1.2em; margin: .6rem 0 0; color: var(--ax-text-muted); font-size: .8rem; text-align: center; }
.vk-status:empty { margin: 0; min-height: 0; }

.vk-formkaart-klaar .inlogkaartkop { margin-bottom: 1.25rem; }
.vk-vinkrond { display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1.1rem; border: 1px solid #315b49; border-radius: 50%; background: #142b23; color: #a7dfc3; }
@media (prefers-reduced-motion: no-preference) {
  .vk-vinkrond path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: vk-teken .6s .25s cubic-bezier(.3, .7, .3, 1) forwards; }
}
@keyframes vk-teken { to { stroke-dashoffset: 0; } }
.vk-terug { margin: 1.5rem 0 0; font-size: .85rem; }
.vk-formscherm .pilotfooter { width: min(1260px, calc(100% - 2 * var(--vk-goot))); }

/* --- Smaller dan een laptop: de blob kijkt over de rand van de kaart --------------- */
@media (max-width: 1099px) {
  .vk-formpagina { grid-template-columns: minmax(0, 1fr) minmax(330px, 420px); grid-template-areas: "intro kaart" "extra kaart"; column-gap: clamp(1.5rem, 4vw, 3rem); }
  /* De blob kijkt van achter de bovenrand van de kaart: de kaart ligt ervoor, dus hij
     komt nooit over een veld, label of melding. */
  .vk-formscherm .inlogkaart.vk-formkaart { margin-top: 4.5rem; }
  .vk-figuurplek { grid-area: kaart; position: relative; top: auto; z-index: auto; justify-self: end; width: 104px; margin: 0 1.75rem 0 0; }
  .vk-voordelen { gap: 1rem; }
}

/* --- Tablet en mobiel ----------------------------------------------------------------- */
@media (max-width: 899px) {
  .vk-pagina { --vk-kop: 64px; }
  .vk-merk { font-size: 1.05rem; gap: .6rem; }
  .vk-merk .sa-blob { height: 2.1rem; }
  .vk-lang { display: none; }

  .vk-raster { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "kop anker" "inhoud inhoud"; column-gap: 1rem; }
  .vk-anker { align-self: start; justify-self: end; width: 60px; margin-top: .1rem; }
  .vk-scene { padding: clamp(3.75rem, 10vh, 5.5rem) 0; }
  .vk-scene h2 { font-size: clamp(1.9rem, 7.4vw, 2.6rem); }

  .vk-held { min-height: 0; padding: clamp(1.75rem, 5vh, 3rem) 0 4.5rem; }
  .vk-held .vk-raster { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "kop anker" "inhoud inhoud"; }
  .vk-held .vk-scenekop { align-self: start; }
  .vk-start.is-reizend .vk-blobbitar { z-index: -1; }
  .vk-held h1 { font-size: clamp(2.35rem, 10.2vw, 3.6rem); }
  .vk-anker-held { width: clamp(88px, 26vw, 136px); align-self: center; margin-top: 0; }
  .vk-held .vk-lead { margin: 1.25rem 0 1.75rem; }
  .vk-held .vk-acties, .vk-pilotkaart .vk-acties { flex-direction: column; align-items: stretch; gap: .9rem; }
  .vk-knop { width: 100%; }
  .vk-account { text-align: center; }
  .vk-verder { display: none; }

  .vk-punten { margin-top: 2rem; }
  .vk-punt { grid-template-columns: 6.25rem minmax(0, 1fr); gap: 1rem; padding: .9rem 1rem .9rem .9rem; }
  .vk-beeld { font-size: 10px; }
  .vk-punttekst p { font-size: .88rem; }

  .vk-stappen { margin-top: 2rem; padding-left: 2.9rem; gap: 2rem; }
  .vk-stappen::before, .vk-stappen::after { left: .95rem; }
  .vk-stapnr { left: -2.9rem; width: 1.95rem; height: 1.95rem; font-size: .62rem; }

  .vk-pilotkolommen { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .vk-voet { flex-direction: column; gap: .4rem; }

  .vk-formpagina { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "intro" "kaart" "extra"; padding-top: .5rem; }
  .vk-formintro .vk-lead { font-size: .98rem; }
  .vk-formscherm .inlogkaart.vk-formkaart { margin-top: 3.4rem; }
  .vk-figuurplek { width: 84px; margin-right: 1.25rem; }
  .vk-formextra { margin-top: 2.25rem; }
  .vk-route { margin-top: 0; }
  .vk-voordelen { display: none; }
  .vk-formscherm .pilotfooter { flex-direction: column; gap: .4rem; }
}

@media (max-width: 599px) {
  .vk-kopknop { padding: 0 .8rem; }
  .vk-kopknop-pijl { display: none; }
  .vk-punt { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .vk-beeld { max-width: 15em; font-size: 11px; }
  .vk-formscherm .inlogkaart.vk-formkaart { padding: 1.4rem 1.25rem; }
  .vk-formintro h1 { font-size: clamp(2.1rem, 9.5vw, 2.6rem); }
}
@media (max-width: 379px) {
  .vk-merknaam { display: none; }
}

/* --- Minder beweging ------------------------------------------------------------------
   astryx.css zet onder reduced motion alle animaties en overgangen al uit. Hier
   alleen wat een script anders verborgen of half getekend had kunnen laten. */
@media (prefers-reduced-motion: reduce) {
  .vk-wacht { opacity: 1; transform: none; }
  .vk-stappen { --vk-voortgang: 1 !important; }
  .vk-veld::before { transform: none; }
}