/* auth-login.css — het inlogscherm en het verificatiescherm.
 *
 * Eén op één overgenomen uit het ontwerp "Webfix Inloggen"
 * (claude-design/webfix-ai-buttons-ontwerp/project/Webfix Inloggen.dc.html), met drie bewuste
 * afwijkingen omdat de werkelijkheid anders is dan de ontwerpomgeving:
 *
 *   1. Iconen komen uit Bootstrap Icons (.bi-*) in plaats van Font Awesome Pro (.fal fa-*). Wij laden
 *      FA Pro niet — zie de stijlgids. Vorm en plaatsing blijven gelijk.
 *   2. De maten staan MOBILE-FIRST (de kleinste eerst, dan min-width-media queries omhoog). Het
 *      ontwerp deed het andersom; het resultaat op elk formaat is hetzelfde, maar dit is de regel uit
 *      de responsive-skill en het scheelt overschrijvingen.
 *   3. Het oogje bij het wachtwoord is visueel even groot maar heeft een aanraakvlak van 44px, de
 *      ondergrens voor iOS/Android. In het ontwerp was dat 34px.
 *
 * De tokens (--wf-pink, --font-body, --text-heading, …) komen uit webfix.css / wf-2026-system.css;
 * de typografie-tokens komen uit het ontwerpsysteem en bestaan hier niet allemaal, dus ze staan
 * overal MET een terugval — zelfde patroon als in wf-2026-system.css.
 */

/* ── basis ──────────────────────────────────────────────────────────────────
 * Dit zijn STANDALONE pagina's (Layout = null), dus zonder de Spike-basis eromheen. Die haalden we
 * eerder binnen via styles.css -- bijna een megabyte, waarvan een inlogscherm vrijwel niets gebruikt.
 * Wat er wél nodig is staat hier: de merkfonts (via assets/fonts/google/webfix-fonts.css in de view),
 * geen marge op de body, en border-box. Zonder dat laatste stond de pagina in Times New Roman met een
 * marge van 8px eromheen.
 *
 * De typografie-tokens komen uit het ontwerpsysteem en bestaan in onze CSS niet; hier krijgen ze de
 * huisletter, zodat de rest van het bestand ze gewoon kan gebruiken.
 */
:root {
  --font-heading: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b1030; font-family: var(--font-body); -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

@keyframes wfdrift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes wfspin { to { transform: rotate(360deg); } }

/* ── het scherm ─────────────────────────────────────────────────────────── */
.wflg { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  overflow: hidden; background: #0b1030; }

.wflg-bg { position: absolute; inset: 0;
  background-image: url('../img/wachtwoord-veilig.webp'); background-size: cover;
  background-position: center 34%; }
.wflg-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,16,48,.72) 0%, rgba(11,16,48,.58) 42%, rgba(11,16,48,.86) 100%); }

/* zachte merkgloed, zoals de Flows-headers */
.wflg-glow { position: absolute; top: -18%; left: 50%; width: min(1100px, 150%); aspect-ratio: 1/1;
  transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(circle at 28% 30%, rgba(176,209,54,.34), transparent 52%),
    radial-gradient(circle at 72% 26%, rgba(218,23,108,.36), transparent 54%),
    radial-gradient(circle at 50% 74%, rgba(50,188,238,.32), transparent 56%);
  filter: blur(10px); }

/* Op een telefoon begint de kaart BOVENAAN. Centreren gaf daar een gat van ruim honderd pixels onder
   de balk met de terug-link, terwijl de kaart zelf bijna het hele scherm vult (Tom, 07-09-2026).
   Vanaf tablet is er wel ruimte over en hoort hij weer in het midden, zoals in het ontwerp. */
.wflg-stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; gap: 20px; padding: 40px 16px 22px; }

@media (min-width: 768px) {
  .wflg-stage { justify-content: center; gap: 26px; padding: 40px 20px 26px; }
}

/* De bovenbalk (terug-link + taalkeuze) hangt boven de kaart. z-index hoger dan de kaart, anders
   valt het uitklappende taalmenu erachter. */
/* Op een telefoon staat de taalkiezer in het MIDDEN en is er geen terug-knop. Die knop kost daar
   ruimte naast een kaart die het scherm toch al vult, en de weg terug is op een telefoon de knop van
   het toestel zelf (Tom, 07-09-2026). Vanaf tablet staat hij weer links en de kiezer rechts. */
/* Op een telefoon is deze balk leeg: geen terug-knop, en de taalkeuze staat in de kaartkop. Hij klapt
   dan in; de ruimte boven de kaart komt uit de etalage eronder. */
.wflg-top { position: relative; z-index: 30; display: flex; align-items: center; justify-content: center;
  gap: 12px; padding: 0 16px; }
@media (min-width: 768px) { .wflg-top { padding: 14px 16px; } }
.wflg-terugnaar { display: none; }
@media (min-width: 768px) {
  .wflg-top { justify-content: space-between; }
  .wflg-terugnaar { display: inline-flex; }
  /* De kiezer blijft rechts, ook als de terug-knop er niet is. Zonder deze regel schuift hij bij een
     rechtstreeks bezoek aan /login naar de linkerkant, want dan is hij het enige kind. */
  .wflg-tk { margin-left: auto; }
}
/* De knop kan óók verborgen zijn omdat er niets is om naar terug te gaan -- zie auth-login.js. Deze
   regel moet ná de media-query staan, anders wint die van het hidden-attribuut. */
.wflg-terugnaar[hidden] { display: none; }
/* De terug-knop: dezelfde glazen pil als in de CMS-headerbalk (.wfch-back in wf-combihead.css), zodat
   het overal dezelfde knop is. Bewust hier overgeschreven en niet die klasse hergebruikt: deze
   pagina's laden de headerbalk-stijlen niet, en één klasse uit een ander bestand overnemen zou
   betekenen dat een wijziging daar dit scherm stilzwijgend meeverandert (Tom, 07-09-2026). */
.wflg-terugnaar { flex: none; align-items: center; gap: 9px; height: 44px;
  padding: 0 20px 0 5px; border-radius: 9999px; text-decoration: none;
  font-family: var(--font-body, inherit); font-weight: 700; font-size: 14px; color: #fff;
  background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.55);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(1,16,61,.12); white-space: nowrap; cursor: pointer;
  transition: transform .3s, filter .3s; }
.wflg-terugnaar:hover { color: #fff; transform: translateY(-1px); filter: brightness(1.04); }
.wflg-terugnaar .chip { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9999px; background: #fff;
  box-shadow: 0 2px 6px rgba(1,16,61,.16); color: var(--wf-title, #a12359);
  font-size: 14px; transition: transform .3s; }
.wflg-terugnaar:hover .chip .bi { transform: translateX(-3px); transition: transform .3s; }

/* ── taalkiezer ─────────────────────────────────────────────────────────── */
/* Eén op één het ontwerp "Webfix Taalkiezer": een witte pil met de vlag en de taalnaam, en daaronder
   een menu waarvan de linkerrand de merkgradient is die langzaam op en neer schuift.

   Verschil met het ontwerp: het menu hangt hier aan de RECHTERkant. In het ontwerp staat de kiezer
   links op de pagina; bij ons staat hij rechtsboven, en links uitlijnen zou hem het scherm uit duwen. */
/* Twee plekken voor dezelfde kiezer. Op een telefoon staat hij IN de kaartkop (-inkop) als glazen
   rondje met alleen de vlag; vanaf tablet staat hij weer in de balk erboven en is de kop-versie weg.
   Twee keer dezelfde partial en met CSS wisselen, want het zijn twee verschillende ouders -- met JS
   heen en weer verhuizen bij elke schermwijziging is vragen om problemen (Tom, 07-09-2026). */
.wflg-tk { position: relative; flex: none; }
.wflg-tk:not(.-inkop) { display: none; }
.wflg-tk.-inkop { margin-left: auto; }
@media (min-width: 768px) {
  .wflg-tk:not(.-inkop) { display: block; }
  .wflg-tk.-inkop { display: none; }
}

/* ── de kop-versie: glazen rondje op de gradient ────────────────────────── */
.wflg-tk.-inkop .wflg-tk-trig { width: 38px; height: 38px; padding: 0; gap: 0; justify-content: center;
  border-radius: 9999px; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.6);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 3px 10px rgba(1,16,61,.16); }
.wflg-tk.-inkop .wflg-tk-trig:hover { background: rgba(255,255,255,.3); transform: none;
  box-shadow: 0 4px 14px rgba(1,16,61,.2); }
/* Alleen de vlag: de taalnaam en het pijltje passen hier niet en zijn ook niet nodig. */
.wflg-tk.-inkop .wflg-tk-trig > span:not(.wflg-tk-fl), .wflg-tk.-inkop .wflg-tk-trig .ch { display: none; }
.wflg-tk.-inkop .wflg-tk-fl { width: 21px; height: 21px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }

/* Het menu van de kop-versie hangt LOS aan de body (auth-login.js hangt hem daar tijdelijk in) en
   staat op een vaste plek in het venster. Dat moet wel: de kaart snijdt met overflow:hidden alles weg
   wat buiten haar rand valt, en een uitklapmenu in de kop valt daar per definitie buiten. */
.wflg-tk-menu.-zwevend { position: fixed; z-index: 1001; }
.wflg-tk-menu.-zwevend.is-open { opacity: 1; visibility: visible; transform: translateY(0); }

/* De donkere laag eronder. Aan de body, zodat hij overal overheen ligt behalve het menu zelf. */
.wflg-tk-waas { position: fixed; inset: 0; z-index: 1000; background: rgba(9,10,26,.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .28s; }
.wflg-tk-waas.is-open { opacity: 1; }
.wflg-tk-trig { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 6px 0 14px;
  border-radius: 9999px; border: 1px solid rgba(1,16,61,.08); cursor: pointer; background: #fff;
  box-shadow: 0 6px 18px rgba(1,16,61,.16);
  font-family: var(--font-body, inherit); font-weight: 700; font-size: 14px;
  color: var(--text-heading, #000229); white-space: nowrap;
  transition: box-shadow .25s var(--ease-smooth, cubic-bezier(.16,1,.3,1)),
              transform .25s var(--ease-smooth, cubic-bezier(.16,1,.3,1)); }
.wflg-tk-trig:hover { box-shadow: 0 10px 24px rgba(1,16,61,.2); transform: translateY(-1px); }
.wflg-tk-trig .ch { flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 9999px; background: #f2f4f8; font-size: 10px; color: #666c73;
  transition: transform .3s var(--ease-smooth, cubic-bezier(.16,1,.3,1)), background .25s, color .25s; }
.wflg-tk.is-open .wflg-tk-trig .ch { transform: rotate(180deg);
  background: rgba(218,23,108,.08); color: var(--wf-title, #a12359); }

.wflg-tk-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 232px; padding: 8px;
  /* Alleen de LINKERrand is de gradient. De andere drie zijn een DEKKENDE haarlijn: met een
     doorzichtige kleur schijnt het verloop eronder door en krijgt het menu een regenboograndje
     rondom in plaats van het accentstreepje uit het ontwerp. */
  border: 1px solid #EDF5FA; border-left: 3px solid transparent;
  /* Witte vulling op de padding-box, de bewegende merkgradient op de border-box: zo kleurt alleen de
     rand mee en blijft het menu zelf wit. */
  background: linear-gradient(#fff,#fff) padding-box,
              linear-gradient(180deg,#b0d136,#da176c 50%,#32bcee) border-box;
  background-size: auto, 100% 220%; animation: wfdriftv 16s ease-in-out infinite;
  border-radius: 16px; box-shadow: 0 18px 44px rgba(1,16,61,.22);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .28s var(--ease-smooth, cubic-bezier(.16,1,.3,1)),
              transform .28s var(--ease-smooth, cubic-bezier(.16,1,.3,1)), visibility .28s; z-index: 20; }
.wflg-tk.is-open .wflg-tk-menu { opacity: 1; visibility: visible; transform: translateY(0); }

.wflg-tk-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-radius: 11px; text-decoration: none; cursor: pointer;
  font-family: var(--font-body, inherit); font-weight: 600; font-size: 14px;
  color: var(--text-heading, #000229); white-space: nowrap;
  transition: background .2s, color .2s; }
.wflg-tk-item:not(.is-on):hover { background: rgba(176,209,54,.2); color: #5f7a12; }
.wflg-tk-item.is-on { background: rgba(50,188,238,.10); color: var(--wf-title, #a12359); font-weight: 700; }
.wflg-tk-item .vink { margin-left: auto; font-size: 11px; color: var(--wf-title, #a12359); opacity: 0;
  transition: opacity .2s; }
.wflg-tk-item.is-on .vink { opacity: 1; }

/* De vlaggen komen uit wf-header.css (.flag-nl/.flag-de/.flag-en); hier alleen de vorm. Een taal
   zonder eigen klasse valt terug op de SVG-vlag van _LangFlag -- zie de partial. */
.wflg-tk-fl { flex: none; width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(1,16,61,.12); }
.wflg-tk-item .wflg-tk-fl { width: 19px; height: 19px; }

@keyframes wfdriftv { 0% { background-position: 50% 0%; } 50% { background-position: 50% 100%; }
  100% { background-position: 50% 0%; } }

/* ── de kaart ───────────────────────────────────────────────────────────── */
.wflg-card { width: 100%; max-width: 452px; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 70px rgba(1,16,61,.42); display: flex; flex-direction: column; }

/* De kaart en het venster zijn een kolom, en de romp rekt mee. Zo blijft een blok met .wflg-onder
   ONDERAAN plakken en valt de vrije ruimte ertussen -- dat is waar "Terug naar inloggen" hoort te
   staan, en niet direct onder de laatste regel tekst (Tom, 07-09-2026). */
.wflg-body, .wflg-mb { flex: 1; display: flex; flex-direction: column; }
.wflg-onder { margin-top: auto; padding-top: 18px; text-align: center; }
/* Een pil is inline-flex; in een kolom zou hij anders over de volle breedte uitrekken. */
.wflg-body .wflg-terug, .wflg-mb .wflg-terug { align-self: center; }

.wflg-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 13px; padding: 20px;
  background: linear-gradient(90deg,#b0d136 0%,#da176c 50%,#32bcee 100%);
  background-size: 200% 100%; animation: wfdrift 11s ease-in-out infinite; }
.wflg-head::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%); }
.wflg-head > * { position: relative; z-index: 1; }

/* diamant + woordmerk in wit, zonder chip-achtergrond.
   Op een smal scherm een maatje kleiner: daar staat de taalknop naast het label in de kop, en met het
   volle formaat blijft er van de 303 pixels binnenwerk maar 22 over (gemeten op 375). */
.wflg-logo { flex: none; display: block; height: 34px; width: auto;
  filter: drop-shadow(0 1px 6px rgba(1,16,61,.28)); }
/* Het label rechts in de kop. Op een telefoon blijft er naast het woordmerk zo'n honderd pixels over
   -- genoeg voor "Inloggen CMS" en "Voer uw code in", te weinig voor "Wachtwoord kwijt". Vandaar de
   variant -lang: die valt onder 400px helemaal weg. Liever geen label dan "Wachtwoord kwi…", en het
   woordmerk ernaast zegt al genoeg (Tom, 07-09-2026).

   `flex: 0 1 auto` met min-width:0 is het vangnet eronder: mocht een label ooit tóch te lang zijn,
   dan krijgt het een beletselteken in plaats van over de rand van de kaart te schuiven. */
.wflg-hd { flex: 0 1 auto; min-width: 0; margin-left: auto; display: none; align-items: center; gap: 9px; }
/* Onder 375px past er naast het woordmerk niets meer; daar valt elk label weg. Gemeten grens: op een
   scherm van 360 breed werd "Voer uw code in" al afgekapt. */
@media (min-width: 375px) { .wflg-hd { display: flex; } .wflg-hd.-lang { display: none; } }
@media (min-width: 400px) { .wflg-hd.-lang { display: flex; } }
.wflg-hd .dv { flex: none; width: 1px; height: 20px; min-width: 1px; background: rgba(255,255,255,.5); }
.wflg-hd span:not(.dv) { min-width: 0; font-family: var(--font-body, inherit); font-weight: 700; font-size: 12px;
  color: #fff; text-shadow: 0 1px 6px rgba(1,16,61,.28);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wflg-body { padding: 24px 16px 26px; }

/* De uitleg staat in een eigen kader met een dunne rand en ruime marges: zo is in één oogopslag te
   zien wat toelichting is en wat een veld of een knop (Tom, 07-09-2026). Zelfde vorm en rand als de
   invoervelden, zodat het bij de kaart hoort en niet als een waarschuwing leest -- daar zijn de
   gekleurde .wflg-melding-blokken voor. Geldt voor beide soorten uitleg: de regel bóven een formulier
   (.wflg-intro) en de regel ónder een titel (.wflg-ms). */
.wflg-intro, .wflg-ms { box-sizing: border-box; font-family: var(--font-body, inherit); font-size: 14px;
  line-height: 1.6; color: #666c73; padding: 15px 18px; border: 1px solid rgba(1,16,61,.10);
  border-radius: 14px; background: #fff; }
.wflg-intro { margin: 2px 0 22px; }
/* Een melding IN het uitlegkader: 10px lucht boven en onder, en de laatste plakt niet tegen de rand. */
.wflg-ms > p { margin: 0; }
.wflg-ms > .wflg-melding { margin: 10px 0; }
.wflg-ms > .wflg-melding:last-child { margin-bottom: 0; }
/* Staat er een titel boven de uitleg, dan mag er wat lucht tussen. */
.wflg-mt + .wflg-intro { margin-top: 16px; }
.wflg-ms { margin: 20px 0 4px; }

/* ── velden ─────────────────────────────────────────────────────────────── */
.wflg-l { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; font-family: var(--font-body, inherit);
  font-weight: 700; font-size: 11px; letter-spacing: .11em; text-transform: uppercase; color: #666c73; }
.wflg-l a { margin-left: auto; font-weight: 700; font-size: 11.5px; letter-spacing: 0; text-transform: none;
  color: #1A9BD1; text-decoration: none; }
.wflg-l a:hover { color: var(--wf-pink, #da176c); }

.wflg-fld + .wflg-fld { margin-top: 18px; }

/* ── validatie ──────────────────────────────────────────────────────────── */
/* Dezelfde opzet als de rest van het CMS: het gedeelde bootstrap-validation-init.js zet na een poging
   "was-validated" op het formulier, en pas daarna kleurt een fout veld. Vóór die eerste poging blijft
   het scherm rustig -- niemand wil een rood veld zien voordat hij iets heeft ingetypt.
   De opmaak staat hier en niet in Bootstrap zelf: deze pagina's laden die stijlen bewust niet. */
.invalid-feedback { display: none; margin: 7px 2px 0; font-family: var(--font-body, inherit);
  font-size: 12.5px; line-height: 1.5; color: #8f1418; }
.was-validated .wflg-in:invalid { border-color: rgba(216,31,37,.55); background: rgba(216,31,37,.04); }
.was-validated .wflg-in:invalid:focus { border-color: #d81f25; box-shadow: 0 0 0 3px rgba(216,31,37,.12); }
.was-validated .wflg-iw:has(.wflg-in:invalid) > i { color: #b3181d; }
.was-validated .wflg-fld:has(.wflg-in:invalid) .invalid-feedback { display: block; }
/* Terugval voor browsers zonder :has() -- dan kleurt het veld wel, maar blijft de regel eronder weg. */
@supports not selector(:has(*)) {
  .was-validated .wflg-in:invalid ~ .invalid-feedback { display: block; }
}
.wflg-iw { position: relative; display: block; }
.wflg-iw > i { position: absolute; top: 50%; left: 16px; transform: translateY(-50%); font-size: 13px;
  color: #9aa2b1; transition: color .2s; pointer-events: none; }
.wflg-in { display: block; box-sizing: border-box; width: 100%; height: 50px; padding: 0 16px 0 40px;
  border-radius: 14px; border: 1px solid rgba(1,16,61,.10); background: #fbfbfd;
  /* 16px en niet 15: Safari op de iPhone zoomt de hele pagina in zodra je in een veld tikt dat kleiner
     dan 16 pixels is. Dat is echt browsergedrag, niet iets in onze opmaak, en het is niet uit te
     zetten -- behalve door het veld groot genoeg te maken (Tom, 07-09-2026). */
  font-family: var(--font-body, inherit); font-size: 16px; color: var(--text-heading, #000229);
  transition: border-color .2s, background .2s, box-shadow .2s; }
.wflg-in::placeholder { color: #8a919c; }
.wflg-in:focus { outline: none; border-color: var(--wf-blue, #32bcee); background: #fff;
  box-shadow: 0 0 0 3px rgba(50,188,238,.14); }
.wflg-iw:focus-within > i { color: #12667f; }
.wflg-in.-pw { padding-right: 50px; }

/* Visueel 34px zoals het ontwerp, maar met een aanraakvlak van 44px eromheen. */
.wflg-oog { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: inline-flex;
  align-items: center; justify-content: center; width: 44px; height: 44px; border: none; border-radius: 9999px;
  background: transparent; cursor: pointer; font-size: 13px; color: #8a919c; padding: 0;
  transition: background .2s, color .2s; }
.wflg-oog:hover { background: rgba(50,188,238,.12); color: #12667f; }
.wflg-oog:focus-visible { outline: 2px solid var(--wf-blue, #32bcee); outline-offset: 2px; }

/* ── verificatiekeuze ───────────────────────────────────────────────────── */
.wflg-sub { margin: 20px 0 9px; font-family: var(--font-body, inherit); font-weight: 700; font-size: 11px;
  letter-spacing: .11em; text-transform: uppercase; color: #666c73; }
.wflg-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 5px; border-radius: 14px;
  background: #f2f4f8; }
.wflg-segb { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px;
  border: none; border-radius: 10px; background: transparent; cursor: pointer;
  font-family: var(--font-body, inherit); font-weight: 600; font-size: 13.5px; color: #666c73;
  transition: background .25s var(--ease-smooth, cubic-bezier(.16,1,.3,1)),
              color .25s var(--ease-smooth, cubic-bezier(.16,1,.3,1)),
              box-shadow .25s var(--ease-smooth, cubic-bezier(.16,1,.3,1)); }
.wflg-segb:hover { color: var(--text-heading, #000229); }
.wflg-segb.is-on { background: #fff; color: #12667f; font-weight: 700; box-shadow: 0 1px 3px rgba(18,20,32,.14); }
.wflg-segb i { font-size: 13px; }

/* ── vertrouw dit apparaat ──────────────────────────────────────────────── */
/* Gecentreerd, want het is een losse keuze onder het formulier en geen veldregel (Tom, 07-09-2026).
   justify-content mag hier omdat de rij nooit twee regels wordt: het vinkje blijft flex:none en de
   tekst mag gewoon afbreken. */
.wflg-chk { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 18px;
  min-height: 44px; cursor: pointer; }
/* Blauwe rand in de kleur van de links: dit vakje werd over het hoofd gezien met een grijze rand van
   1,5px. Aangevinkt wordt hij roze -- dat is de bevestigingskleur uit het ontwerp, en dan hoeft hij
   ook niet meer op te vallen. */
.wflg-box { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 7px; border: 2px solid #1A9BD1; background: #fff; font-size: 11px; color: transparent;
  transition: background .2s, border-color .2s, color .2s; }
.wflg-chk:hover .wflg-box { background: rgba(50,188,238,.10); }
.wflg-chk.is-on .wflg-box { background: var(--wf-pink, #da176c); border-color: var(--wf-pink, #da176c); color: #fff; }
.wflg-chk-l { font-family: var(--font-body, inherit); font-size: 14px; line-height: 1.45; color: #1A9BD1; }
.wflg-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.wflg-chk:focus-within .wflg-box { outline: 2px solid var(--wf-blue, #32bcee); outline-offset: 2px; }

/* ── hoofdknop ──────────────────────────────────────────────────────────── */
.wflg-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%; box-sizing: border-box; height: 54px; margin-top: 22px; border: none; border-radius: 9999px;
  cursor: pointer; color: #fff;
  background: linear-gradient(90deg,#b0d136 0%,#da176c 50%,#32bcee 100%);
  background-size: 200% 100%; animation: wfdrift 11s ease-in-out infinite;
  font-family: var(--font-body, inherit); font-weight: 700; font-size: 15.5px;
  transition: transform .3s var(--ease-smooth, cubic-bezier(.16,1,.3,1)),
              box-shadow .3s var(--ease-smooth, cubic-bezier(.16,1,.3,1)); }
.wflg-btn::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,0) 58%); }
.wflg-btn > * { position: relative; z-index: 1; }
.wflg-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(218,23,108,.3); }
.wflg-btn i { font-size: 13px; transition: transform .3s var(--ease-smooth, cubic-bezier(.16,1,.3,1)); }
.wflg-btn:hover i { transform: translateX(4px); }
.wflg-btn:disabled { background: #c9ccd6; animation: none; cursor: default; transform: none; box-shadow: none; }
.wflg-btn:disabled::before { display: none; }
.wflg-btn:disabled:hover i { transform: none; }

/* "Bezig…": de knop houdt zijn kleur maar wordt onklikbaar, met een draaiend rondje in plaats van de
   pijl. Zonder deze stand ziet de bezoeker na zijn zesde cijfer een seconde lang niets gebeuren en
   drukt hij nog een keer. */
.wflg-btn.is-bezig { cursor: progress; transform: none; box-shadow: none; pointer-events: none; }
.wflg-btn.is-bezig i { display: none; }
.wflg-spin { flex: none; display: none; width: 17px; height: 17px; border-radius: 9999px;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; animation: wfspin .7s linear infinite; }
.wflg-btn.is-bezig .wflg-spin { display: block; }

/* De lichte pil ("Terug naar inloggen", "Nieuwe link aanvragen" als omtrekknop) krijgt dezelfde
   bezig-stand als de hoofdknop: draaiend rondje, andere tekst, en niet meer aan te klikken. Het
   rondje moet hier alleen donker zijn -- op wit is een wit rondje niets. */
.wflg-terug.is-bezig { cursor: progress; pointer-events: none; }
.wflg-terug.is-bezig i { display: none; }
.wflg-terug .wflg-spin { width: 15px; height: 15px;
  border-color: rgba(1,16,61,.18); border-top-color: #666c73; }
.wflg-terug.is-bezig .wflg-spin { display: block; }

.wflg-alt { margin: 18px 0 0; text-align: center; font-family: var(--font-body, inherit); font-size: 14px; color: #666c73; }
.wflg-alt a { font-weight: 700; color: #1A9BD1; text-decoration: none; }
.wflg-alt a:hover { color: var(--wf-pink, #da176c); }

/* ── voetregel ──────────────────────────────────────────────────────────── */
/* De drie beloftes onder de kaart horen op EEN regel te staan, ook op de smalste telefoon: over twee
   regels afgebroken zien ze eruit als een lijstje dat ergens tegenaan botst (Tom, 07-09-2026). Vandaar
   nowrap plus een korte en een lange schrijfwijze per belofte -- op een klein scherm staat er "SSL",
   vanaf een grote telefoon "SSL beveiligd". Het icoon blijft in beide gevallen hetzelfde. */
.wflg-foot { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: nowrap;
  padding: 0 12px 4px; }
.wflg-foot > span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  font-family: var(--font-body, inherit);
  font-weight: 600; font-size: 12px; color: rgba(255,255,255,.82); }
.wflg-foot i { font-size: 12px; color: rgba(255,255,255,.6); }
/* Mobile-first: kort is de standaard, lang komt er vanaf 400px bij. */
.wflg-fl { display: none; }

/* ── verificatiescherm ──────────────────────────────────────────────────── */
/* In het ontwerp is dit een venster over het inlogscherm heen. Bij ons is het een eigen PAGINA: de
   code wordt pas ná de wachtwoordcontrole verstuurd, dus de bezoeker komt er via de server. Dezelfde
   kaart, dezelfde kop, dezelfde maten -- alleen zonder de donkere laag eromheen. */
.wflg-mb { padding: 26px 16px 24px; text-align: center; }
/* Boven de titel stond een gekleurde bol met de flow-gradient erin. Die trok alle aandacht naar een
   plaatje in plaats van naar de tekst, en verwees naar een ander deel van het systeem (Tom, 07-09-2026).
   Er staat nu een klein slotje VOOR de titel, in dezelfde blauwe accentkleur als de links. */
.wflg-mt { margin: 0; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-heading, inherit); font-weight: 800; font-size: 19px;
  letter-spacing: -.02em; color: var(--text-heading, #000229); }
.wflg-mt i { flex: none; font-size: .84em; color: #1A9BD1; }
/* De titel van het "code verlopen"-venster: daar hoort geen geruststellend blauw maar de waarschuwkleur. */
.wflg-mt.-fout i { color: var(--wf-pink, #da176c); }
.wflg-ms b { font-weight: 700; color: var(--text-heading, #000229); }

/* codevelden */
.wflg-code { display: flex; justify-content: center; gap: 7px; margin: 22px 0 0; }
.wflg-cin { box-sizing: border-box; width: 42px; height: 52px; border-radius: 14px;
  border: 1.5px solid rgba(1,16,61,.12); background: #fbfbfd; text-align: center;
  font-family: var(--font-heading, inherit); font-weight: 800; font-size: 19px; color: var(--text-heading, #000229);
  transition: border-color .2s, background .2s, box-shadow .2s; }
.wflg-cin:focus { outline: none; border-color: var(--wf-pink, #da176c); background: #fff;
  box-shadow: 0 0 0 3px rgba(218,23,108,.14); }
.wflg-cin.-vol { border-color: rgba(176,209,54,.6); background: rgba(176,209,54,.08); }
/* Tijdens het controleren staan de velden op slot: opnieuw typen zou een tweede verzending geven. */
.wflg-code.is-bezig .wflg-cin { opacity: .6; pointer-events: none; }

.wflg-mfoot { margin: 18px 0 0; font-family: var(--font-body, inherit); font-size: 13.5px; color: #666c73; }
.wflg-mfoot a { font-weight: 700; color: #1A9BD1; text-decoration: none; }
.wflg-mfoot a:hover { color: var(--wf-pink, #da176c); }
.wflg-timer { margin: 8px 0 0; font-family: var(--font-body, inherit); font-size: 13px; color: #666c73; }
.wflg-timer b { font-weight: 700; color: var(--text-heading, #000229); }
.wflg-terug { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; min-height: 44px; padding: 0 16px;
  border: 1px solid rgba(1,16,61,.13); border-radius: 9999px; background: #fff; cursor: pointer;
  font-family: var(--font-body, inherit); font-weight: 700; font-size: 13px; color: #666c73; text-decoration: none;
  transition: border-color .2s, color .2s; }
.wflg-terug:hover { border-color: var(--wf-blue, #32bcee); color: #12667f; }

/* Meldingen (fout, gelukt, onderhoud) in dezelfde vormtaal als de kaart. */
/* 20px onder een melding en niet 16: bij "wacht heel even voordat u een nieuwe code aanvraagt" plakte
   hij te dicht op wat eronder staat (Tom, 07-09-2026). */
.wflg-melding { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 11px 14px;
  border-radius: 12px; border: 1px solid transparent; text-align: left;
  font-family: var(--font-body, inherit); font-size: 13.5px; line-height: 1.5; }
/* Verticaal in het midden naast de tekst; met flex-start hing het icoon net te hoog. */
.wflg-melding i { flex: none; font-size: 14px; }
.wflg-melding.-fout   { background: rgba(216,31,37,.07); border-color: rgba(216,31,37,.22); color: #8f1418; }
.wflg-melding.-goed   { background: rgba(176,209,54,.12); border-color: rgba(176,209,54,.4); color: #4a5c14; }
.wflg-melding.-info   { background: rgba(50,188,238,.09); border-color: rgba(50,188,238,.3); color: #12667f; }
.wflg-melding.-letop  { background: rgba(220,158,47,.1); border-color: rgba(220,158,47,.32); color: #7a5410; }
.wflg-melding b { font-weight: 700; }

/* Venster "code verlopen": zelfde kaartvorm, over het scherm heen. */
.wflg-ovl { position: fixed; inset: 0; z-index: 60; padding: 20px; display: none;
  background: rgba(9,10,26,.62); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
  align-items: center; justify-content: center; overflow-y: auto; }
.wflg-ovl.is-open { display: flex; }
.wflg-mod { width: 100%; max-width: 452px; margin: auto; border-radius: 26px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 90px rgba(1,16,61,.46); display: flex; flex-direction: column; }

/* ── groter dan de kleinste telefoon ────────────────────────────────────── */
@media (min-width: 400px) {
  /* Gemeten: met de volledige tekst is de balk 348px breed, dus vanaf 400px past hij er met marge in.
     Daaronder staat er "SSL" in plaats van "SSL beveiligd" -- dat scheelt precies genoeg. */
  .wflg-foot { gap: 10px 18px; padding-left: 16px; padding-right: 16px; }
  .wflg-foot > span { font-size: 12.5px; gap: 9px; }
  .wflg-fl { display: inline; }
  .wflg-fk { display: none; }
  .wflg-in { padding-left: 44px; }
  .wflg-cin { width: 46px; height: 56px; font-size: 21px; }
  .wflg-segb { font-size: 14px; }
  .wflg-body { padding-left: 22px; padding-right: 22px; }
  .wflg-mb { padding-left: 22px; padding-right: 22px; }
}

@media (min-width: 440px) {
  .wflg-logo { height: 44px; }
  .wflg-hd { gap: 13px; }
  .wflg-hd span:not(.dv) { font-size: 14px; }
}

@media (min-width: 520px) {
  .wflg-foot { gap: 10px 22px; }
  .wflg-in { height: 52px; }
  .wflg-code { gap: 9px; }
  .wflg-cin { width: 52px; height: 62px; font-size: 24px; }
  .wflg-hd span:not(.dv) { font-size: 15px; }
}

/* Liggend op een telefoon: alles compacter, zodat de kaart niet gaat scrollen. Dit blijft een
   max-height-vraag -- daar bestaat geen mobile-first variant van. */
@media (max-height: 620px) and (min-width: 560px) {
  .wflg-stage { padding: 24px 20px 18px; gap: 18px; }
  .wflg-in { height: 46px; }
  .wflg-btn { height: 48px; margin-top: 18px; }
  .wflg-mb { padding-top: 18px; padding-bottom: 18px; }
  .wflg-mt { font-size: 17px; }
  .wflg-code { margin-top: 16px; }
  .wflg-cin { height: 52px; font-size: 20px; }
  .wflg-terug { margin-top: 12px; }
}

/* ── alle kaarten even hoog ─────────────────────────────────────────────── */
/*
   Van inloggen naar de code, naar "wachtwoord kwijt" en weer terug: die kaarten waren 570, 467, 384,
   347 en 328 pixels hoog, dus het scherm sprong bij elke stap op en neer. Vanaf tablet krijgen ze
   allemaal de maat van de grootste (het inlogscherm, gemeten 576px), inclusief het venster "code
   verlopen" (Tom, 07-09-2026).

   De ruimte die overblijft valt ONDERIN: de kaart is een gewoon blok, dus de inhoud begint bovenaan
   en de rest is witruimte onder de laatste regel. Kaarten met weinig inhoud krijgen bovenin wat meer
   lucht, zodat het niet leest als een kaart die halverwege ophoudt.

   NIET op een telefoon. Daar vult de kaart het scherm toch al bijna, en 576 pixels afdwingen zou bij
   "kijk in uw mailbox" (368px) een leeg vlak van tweehonderd pixels opleveren én de balk met de drie
   beloftes van het scherm duwen. De minimumhoogte van het scherm houdt hem ook weg op een lage
   laptop: gemeten schuift de pagina onder de 760px viewporthoogte, en dat is erger dan een springende hoogte.
*/
/* Op een telefoon ook allemaal even hoog, op de maat van de grootste (inloggen en de code, gemeten
   578px op 375 breed). Wel met een ondergrens aan de SCHERMHOOGTE: op een korte telefoon (667px, de
   oudere iPhones) scrollen die twee schermen nu al, en de kortere schermen daar ook laten scrollen is
   erger dan een verschil in hoogte. Op verzoek van Tom, 07-09-2026 -- ik raadde het eerst af om die
   reden, en met deze grens erbij is het bezwaar weg. */
@media (max-width: 767px) and (min-height: 700px) {
  .wflg-card, .wflg-mod { min-height: 578px; }
}

@media (min-width: 768px) and (min-height: 760px) {
  .wflg-card, .wflg-mod { min-height: 576px; }
  .wflg-body { padding-top: 30px; }
  .wflg-mb { padding-top: 32px; }
}

/* Wie beweging heeft uitgezet in zijn systeem krijgt de drift en de zoom niet. De spinner blijft:
   die zegt "er gebeurt iets" en is geen versiering. */
@media (prefers-reduced-motion: reduce) {
  .wflg-head, .wflg-btn { animation: none; }
  .wflg-btn:hover { transform: none; }
  .wflg-btn i, .wflg-btn:hover i { transition: none; transform: none; }
}