/* ============================================================
   LICENTIEPORTAAL — de Trionn-wereld (spoor 13) als huisstijl
   Overgezet uit de designkopie (05 - Website & Webdesign/03 - Output/08 - Licentieportaal,
   portal-v3.css) op 2026-09-11. Ontwerpen gebeurt dáár; hier alleen paden en productiezaken.
   Enige stijlbron naast typografie.css (kopie van 13 - Trionn-studie,
   bron van waarheid voor alle tekstmaten en animatietempo).
   Geen inline CSS in de echte pagina's: de CSP van het portaal
   staat dat niet toe. Lettertypes worden zelf gehost (fonts/).
   ============================================================ */

@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("/fonts/familjen-grotesk.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 700;font-display:swap;src:url("/fonts/hanken-grotesk.woff2") format("woff2")}
@font-face{font-family:"Sanchez";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/sanchez.woff2") format("woff2")}
@font-face{font-family:"Martian Mono";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/martian-mono.woff2") format("woff2")}

:root{
  color-scheme:dark;
  /* palet: identiek aan index-lab-reuzen.html (13 - Trionn-studie) */
  --donker:#0C0C0C;
  --zwart:#272727;
  --creme:#F4EEE7;
  --licht:#D8D8D8;
  --grijs:#9C9C9C;
  --grijs-d:#8A8A8A;   /* mono-xs op donker: net boven 4,5:1 */
  --lijn-d:#434343;
  --lijn-z:rgba(216,216,216,.18);
  --rood:#E6084F;
  --disp:"Familjen Grotesk",sans-serif;
  --body:"Hanken Grotesk",sans-serif;
  --mono:"Martian Mono",monospace;
  --ease-soft:cubic-bezier(.16,1,.3,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scrollbar-width:thin;scrollbar-color:var(--lijn-d) var(--donker)}
body{
  min-height:100vh;
  background:var(--donker);
  color:var(--licht);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  display:flex;flex-direction:column;
}
::selection{background:var(--rood);color:#fff}
/* slepen over de achtergrond mag geen tekst selecteren (Leon, 10 sep): alleen de tekstblokken zelf zijn selecteerbaar */
body{user-select:none}
/* alleen lopende tekst en gegevens zijn selecteerbaar; koppen, labels en knoppen niet (ronde 4: slepen vanaf "code aanvragen" selecteerde nog) */
p.lead,#pagina .intro p,.melding,input,textarea,.tool-kop p,.register td,.release-meta,.notes-body,.houder,.merk-woorden .houder,.inlog-voet,#voet,.merk-voet,.gegevens dd{user-select:text}
h1,h2,label,legend,button,a,.ws-knop,.klets,.register th,.notes summary,.demo-standen,.register .ws-knop{user-select:none}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
img,svg{display:block}
[hidden]{display:none!important}
:focus-visible{outline:1px solid var(--licht);outline-offset:4px}

.container{width:100%;max-width:90rem;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,3.5rem)}

/* ---------- achtergrondlaag ----------
   Het canvas (stof) en de kaart liggen onder alles; de inhoud staat op z 1. */
#achtergrond{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#kaartlaag{position:fixed;inset:-8%;z-index:0;pointer-events:none;overflow:hidden;opacity:0;transition:opacity 2.4s var(--ease-soft)}
#kaartlaag.zichtbaar{opacity:1}
#kaartlaag svg{width:100%;height:100%;filter:invert(1) grayscale(1);opacity:.16;will-change:transform}
/* vignet: houdt de leeskolom links rustig en laat het beeld naar rechts leven */
#kaartlaag::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,var(--donker) 0%,rgba(12,12,12,.82) 30%,rgba(12,12,12,.2) 62%,rgba(12,12,12,.45) 100%),
    radial-gradient(ellipse at 68% 42%,transparent 38%,var(--donker) 100%)}
body[data-achtergrond="leeg"] #achtergrond{display:none}
@media (prefers-reduced-motion:reduce){#kaartlaag svg{animation:none!important}}
@keyframes kaartdrift{from{transform:translate3d(0,0,0) scale(1.04)}to{transform:translate3d(-2.5%,-1.5%,0) scale(1.1)}}
#kaartlaag.zichtbaar svg{animation:kaartdrift 90s linear infinite alternate}

/* ---------- kop ---------- */
#kop{position:fixed;top:0;left:0;width:100%;z-index:20;padding-block:clamp(1.2rem,2.6vw,2.4rem);
  background:linear-gradient(180deg,var(--donker) 0%,var(--donker) 62%,rgba(12,12,12,0) 100%)}
#kop .binnen{display:flex;align-items:center;justify-content:space-between;gap:1rem}
#kop .merk{display:inline-flex;align-items:center;gap:.5rem;font-family:"Sanchez",var(--disp);font-weight:400;font-size:var(--fs-h4);letter-spacing:0;color:var(--licht)}
#kop .merk .merk-icoon{height:1.25em;width:auto;color:var(--licht)}
#kop .merk .punt{color:var(--rood)}
#kop .rechts{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2.5rem)}
#kop .wie{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw}
#kop .wie b{font-weight:400;color:var(--licht)}

/* ---------- menu-overlay: dezelfde menukaart als de hoofdpagina (menu-v3.js) ----------
   Lamellen in het donker die het scherm sluiten, daarna de vijf regels in Familjen Grotesk.
   De kop staat boven het menu (z 1000, als op de site) zodat "sluit" bereikbaar blijft. */
#kop{z-index:1000}
body.menu-open #kop{background:none}
#menuKnop{color:var(--licht);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-knop-mono);text-transform:lowercase;height:2.1rem;display:inline-flex;align-items:center;position:relative}
#menuBelts{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;pointer-events:none;visibility:hidden}
#menuBelts.actief{visibility:visible}
#menuBelts .pl-belt{flex:1;width:100%;background:var(--donker);background-clip:padding-box;margin-bottom:-1px;padding-bottom:1px;transform:scaleY(0);transform-origin:50%;will-change:transform}
#menuBelts .pl-belt:last-child{margin-bottom:0}
#menuVlak{position:fixed;inset:0;z-index:910;display:none;flex-direction:column;justify-content:center;pointer-events:none;
  transition:opacity .35s var(--ease-soft)}
#menuVlak.actief{display:flex;pointer-events:all}
#menuVlak.weg{opacity:0}
#menuVlak .links{display:flex;flex-direction:column;gap:.4rem}
#menuVlak .links a{font-family:var(--disp);font-size:var(--fs-h2);letter-spacing:var(--ls-display);line-height:var(--lh-h2);color:var(--licht);width:max-content;
  opacity:0;transform:translateY(30px);filter:blur(10px);
  transition:opacity 1.4s cubic-bezier(.215,.61,.355,1),transform 1.4s cubic-bezier(.215,.61,.355,1),filter 1.4s cubic-bezier(.215,.61,.355,1);
  transition-delay:calc(var(--i,0) * .15s)}
#menuVlak.toon .links a{opacity:1;transform:none;filter:blur(0)}
#menuVlak .links a[aria-current="page"]{color:var(--grijs)}
@media (prefers-reduced-motion:reduce){
  #menuVlak,#menuVlak .links a{transition:none!important}
}

/* ---------- knop (.ws-knop + veeglijntje), identiek aan het lab ---------- */
/* portaal-lokaal: de knop is hier een primaire actie, dus één maat groter (--fs-mono i.p.v.
   --fs-knop-mono) en op maat van het label met 2,5 rem schuifruimte, zodat de letters bij hover
   een stukje verschuiven in plaats van over een vaste 12 rem uit te waaieren. Het lab-model zelf
   (typografie.css, .cs) blijft onaangeraakt. */
.ws-knop{position:relative;display:flex;align-items:center;height:2.3rem;padding:0 2.5rem 0 0;border:0;border-radius:0;background:none;
  flex:0 0 auto;width:auto;min-width:8rem;color:var(--licht);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-knop-mono);text-transform:lowercase}
.ws-knop.stil{color:var(--grijs)}
.ws-knop.uit{color:var(--grijs-d);cursor:default;padding-right:0;min-width:0;white-space:nowrap;justify-content:flex-end}
.ws-knop[disabled]{color:var(--grijs-d);cursor:progress}
.ws-knop[disabled] .c{transform:none!important}
.klets{position:relative;display:inline-flex;align-items:center;height:2.1rem;color:var(--licht);font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-knop-mono);text-transform:lowercase}
.klets.cs,.ws-knop.inline{width:auto;display:inline-flex}
.knoppen{display:flex;flex-wrap:wrap;gap:0 2.5rem;margin-top:var(--sp-tekst-knop)}

/* ---------- inloggen ---------- */
#inlog{position:relative;z-index:1;flex:1;display:grid;align-items:center;
  padding-top:clamp(6rem,14vh,9rem);padding-bottom:clamp(5rem,12vh,8rem)}
#inlog .kolom{max-width:var(--maat-tekstkolom-breed)}
#inlog h1,#contact h1{font-size:var(--fs-h2-klein);line-height:var(--lh-h2);letter-spacing:var(--ls-display);color:var(--licht)}
#inlog h1 .punt,#contact h1 .punt,.h-punt{color:var(--rood)}
#inlog p.lead,#contact p.lead{font-size:var(--fs-lead);line-height:1.42;color:var(--grijs);margin-top:var(--sp-kop-tekst);max-width:var(--maat-tekstkolom)}
#inlog p.lead b,#contact p.lead b{font-weight:500;color:var(--licht)}
.veld{margin-top:clamp(2rem,4vw,3rem);max-width:var(--maat-tekstkolom)}
.veld label{display:block;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs);margin-bottom:.9rem}
.veld input,.veld textarea{
  width:100%;background:none;border:0;border-bottom:1px solid var(--lijn-d);border-radius:0;
  padding:.55rem 0 .7rem;color:var(--licht);caret-color:var(--rood);
  font-family:var(--disp);font-size:var(--fs-h4);letter-spacing:var(--ls-h4);line-height:1.2;
  transition:border-color var(--dur-tik) var(--ease-soft);
}
.veld input::placeholder,.veld textarea::placeholder{color:#7A7A7A}
.veld input:focus,.veld textarea:focus{outline:none;border-bottom-color:var(--licht)}
.veld input:user-invalid,.veld textarea:user-invalid{border-bottom-color:var(--rood)}
/* het tekstvak groeit mee (contact-v3.js); geen greep, geen schuifbalk, zelfde letter als de invoer */
.veld textarea{display:block;resize:none;overflow:hidden;min-height:2.6em;line-height:1.3}
.veld input.code{font-family:var(--mono);font-size:var(--fs-h3);letter-spacing:.32em;padding-bottom:.5rem}
.veld input.code::placeholder{letter-spacing:.32em}
.veld input:-webkit-autofill{-webkit-text-fill-color:var(--licht);box-shadow:0 0 0 1000px var(--donker) inset;transition:background-color 9999s}
.stap{transition:opacity var(--dur-kort) var(--ease-soft)}
.stap.weg{opacity:0}
.inlog-voet{position:relative;z-index:1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem 2rem;padding-bottom:clamp(1.4rem,3vw,2.4rem);
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.inlog-voet a{color:var(--grijs);border-bottom:1px solid var(--lijn-d);padding-bottom:.15em;transition:color var(--dur-tik),border-color var(--dur-tik)}
.inlog-voet a:hover{color:var(--licht);border-color:var(--licht)}

/* melding: één mono-woord in rood plus de zin; geen gekleurde balk */
.melding{display:flex;gap:1rem;align-items:baseline;margin-top:1.6rem;max-width:var(--maat-tekstkolom-breed);
  font-size:var(--fs-klein);line-height:var(--lh-klein);color:var(--grijs)}
.melding::before{content:"bericht";flex:0 0 auto;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.melding.error{color:var(--licht)}
.melding.error::before{content:"fout";color:var(--rood)}
.melding.let::before{content:"let op";color:var(--rood)}

/* ---------- contact ----------
   Zelfde leeskolom als het inloggen; rechts, op paragraafbreedte, de directe gegevens als
   mono-label + adres. Op smal scherm komen de gegevens onder het formulier. */
#contact{position:relative;z-index:1;flex:1;display:grid;align-items:center;
  grid-template-columns:minmax(0,var(--maat-tekstkolom-breed)) minmax(0,var(--maat-tekstkolom));
  gap:3rem clamp(3rem,9vw,10rem);
  padding-top:clamp(7rem,15vh,10rem);padding-bottom:clamp(5rem,12vh,8rem)}
#contact .kolom{max-width:var(--maat-tekstkolom-breed)}
/* "optioneel" achter een veldlabel: zelfde mono, kleine letters, gedimd */
.veld label .optioneel{text-transform:lowercase;color:var(--grijs-d);margin-left:.6rem}
/* de gegevens rechts (niet meer op de contactpagina sinds 11 sep, blijft beschikbaar) */
.gegevens{align-self:center}
.gegevens dl{display:grid;gap:clamp(1.6rem,2.6vw,2.2rem)}
.gegevens dt{font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.gegevens dd{margin-top:.55rem;font-family:var(--disp);font-size:var(--fs-h4);letter-spacing:var(--ls-h4);line-height:1.2;color:var(--licht);overflow-wrap:anywhere}
.gegevens dd a{border-bottom:1px solid var(--lijn-d);padding-bottom:.1em;transition:border-color var(--dur-tik)}
.gegevens dd a:hover{border-color:var(--licht)}
.gegevens dd.stil{font-family:var(--body);font-size:var(--fs-klein);line-height:var(--lh-klein);letter-spacing:0;color:var(--grijs);margin-top:.7rem}
.gegevens dd.stil a{color:var(--licht)}
@media (max-width:900px){
  #contact{grid-template-columns:minmax(0,var(--maat-tekstkolom-breed));align-items:start;gap:clamp(3rem,7vw,4.5rem)}
  .gegevens{padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--lijn-z)}
}

/* ---------- downloads: het register ---------- */
#pagina{position:relative;z-index:1;flex:1;padding-top:clamp(7rem,16vh,11rem);padding-bottom:var(--sp-sectie-bot-ruim)}
#pagina h1{font-size:var(--fs-h2-klein);line-height:var(--lh-h2);letter-spacing:var(--ls-display)}
#pagina .intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,var(--maat-tekstkolom-breed));gap:2rem 4rem;align-items:end}
#pagina .intro p{color:var(--grijs);font-size:var(--fs-lead);line-height:1.42}
#pagina .intro p b{font-weight:500;color:var(--licht)}
.houder{margin-top:var(--sp-kop-tekst);display:flex;flex-wrap:wrap;gap:.4rem 2.4rem;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.houder b{font-weight:400;color:var(--licht)}
.houder .mailadres{text-transform:none}

#tools{margin-top:var(--sp-blok)}
.tool{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:1.6rem clamp(2rem,6vw,7rem);
  padding-block:clamp(2rem,3.6vw,3.2rem);border-top:1px solid var(--lijn-d)}
.tool:last-child{border-bottom:1px solid var(--lijn-d)}
.tool.uit{color:var(--grijs)}
.tool.uit h2,.tool.uit .status{color:var(--grijs-d)}
.tool h2{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);color:var(--licht)}
.tool .module{margin-top:.6rem;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.tool .omschrijving{margin-top:1.1rem;color:var(--grijs);max-width:var(--maat-tekstkolom)}
.tool .status{margin-top:1.4rem;font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--licht)}
.tool .status.let{color:var(--rood)}
.tool .status.uit{color:var(--grijs-d)}
.tool .uit-tekst,.tool .leeg{color:var(--grijs);max-width:var(--maat-tekstkolom-breed);align-self:center}
.tool .uit-tekst a,.voet-mail{color:var(--licht);border-bottom:1px solid var(--lijn-d);transition:border-color var(--dur-tik)}
.tool .uit-tekst a:hover{border-color:var(--licht)}

/* releasetabel: hairlines, mono-cijfers, de nieuwste rij in het licht */
.register{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.register th{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;font-weight:400;color:var(--grijs-d);
  text-align:left;padding:0 1rem .8rem 0;border-bottom:1px solid var(--lijn-z)}
.register td{padding:.95rem 1rem .95rem 0;border-bottom:1px solid var(--lijn-z);vertical-align:middle;color:var(--grijs);font-size:var(--fs-klein);line-height:var(--lh-klein)}
.register th:last-child,.register td:last-child{padding-right:0;text-align:right;width:8.5rem}
.register .versie{font-family:var(--disp);font-size:var(--fs-h4);letter-spacing:var(--ls-h4);color:var(--licht);white-space:nowrap}
.register .datum{white-space:nowrap}
.register tr.nieuwste td{color:var(--licht)}
.register tr.nieuwste .versie{color:var(--licht)}
.register .nieuw{display:inline-block;margin-left:.9rem;vertical-align:.2em;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--rood)}
.register .bestand{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);color:inherit;word-break:break-all}
.register .grootte{white-space:nowrap;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono)}
.register .ws-knop{margin-left:auto;min-width:0;padding-right:1.5rem}
.register .bestand-klein{display:none}
.register tr:not(.nieuwste) .ws-knop{color:var(--grijs)}

.release-meta{display:flex;flex-wrap:wrap;gap:.5rem 2rem;margin-top:1.2rem;
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.release-meta .sha{text-transform:none;letter-spacing:-.02em}
.release-meta button{font:inherit;letter-spacing:inherit;text-transform:uppercase;color:var(--grijs);border-bottom:1px solid var(--lijn-d);margin-left:.6rem;transition:color var(--dur-tik),border-color var(--dur-tik)}
.release-meta button:hover{color:var(--licht);border-color:var(--licht)}

/* release notes: een details met mono-samenvatting, geen kaart */
.notes{margin-top:1.4rem}
.notes summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--mono);font-size:var(--fs-mono);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs);transition:color var(--dur-tik)}
.notes summary::-webkit-details-marker{display:none}
.notes summary::before{content:"";width:.55rem;height:.55rem;border:1px solid currentColor;transform:rotate(45deg);transition:background var(--dur-tik),transform var(--dur-tik)}
.notes[open] summary::before{background:currentColor}
.notes summary:hover{color:var(--licht)}
.notes-body{margin-top:1.2rem;max-width:var(--maat-tekstkolom-breed);padding-left:1.25rem;border-left:1px solid var(--lijn-z)}
.notes-body h4{font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d);margin-top:1.1rem}
.notes-body h4:first-child{margin-top:0}
.notes-body ul{margin-top:.5rem}
.notes-body li{position:relative;padding-left:1rem;color:var(--grijs);font-size:var(--fs-klein);line-height:var(--lh-klein)}
.notes-body li::before{content:"";position:absolute;left:0;top:.62em;width:.35rem;height:1px;background:var(--grijs-d)}
.notes-body p{color:var(--grijs);font-size:var(--fs-klein);margin-top:.4rem}

/* ---------- voet ---------- */
#voet{position:relative;z-index:1;margin-top:auto}
#voet .onderbalk{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;padding-block:1.4rem;border-top:1px solid var(--lijn-z);
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
#voet .onderbalk a{transition:color var(--dur-tik)}
#voet .onderbalk a:hover{color:var(--licht)}
#voet .mailadres{text-transform:none}

/* ---------- alleen designkopie: standen en achtergrondkeuze ---------- */
.demo-standen{position:fixed;right:1rem;bottom:1rem;z-index:30;display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;opacity:.35;transition:opacity var(--dur-tik);
  font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);text-transform:uppercase;color:var(--grijs-d)}
.demo-standen:hover{opacity:1}
.demo-standen .rij{display:flex;gap:.25rem;align-items:center}
.demo-standen .rij span{margin-right:.4rem;opacity:.6}
.demo-standen .merk-demo{opacity:.6;margin-bottom:.2rem}
.demo-standen a{padding:.3rem .5rem;border:1px solid var(--lijn-d);color:var(--grijs);background:rgba(12,12,12,.7);transition:color var(--dur-tik),border-color var(--dur-tik)}
.demo-standen a:hover{color:var(--licht)}
.demo-standen a.actief{color:var(--licht);border-color:var(--licht)}

/* ---------- smal ---------- */
@media (max-width:900px){
  #pagina .intro{grid-template-columns:1fr}
  .tool{grid-template-columns:1fr}
  #kop .wie{display:none}
}
@media (max-width:640px){
  /* de kolom Bestand vervalt; de bestandsnaam komt als tweede regel onder het versienummer */
  .register th:nth-child(3),.register td:nth-child(3){display:none}
  .register .bestand-klein{display:block;margin-top:.35rem;font-family:var(--mono);font-size:var(--fs-mono-xs);letter-spacing:var(--ls-mono);color:var(--grijs-d);word-break:break-all}
  .register .nieuw{display:block;margin:.3rem 0 0}
  .register td{padding-block:.8rem}
  .register .ws-knop{padding-right:.5rem}
  .register th:last-child,.register td:last-child{width:auto}
  .inlog-voet{flex-direction:column}
  .demo-standen{display:none}
}

@media (prefers-reduced-motion:reduce){
  .stap,.veld input,.ws-knop .c{transition:none!important}
}

/* ---------- productie: honeypot op de contactpagina (niet in de designkopie) ---------- */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}