/* login.css — de inlogpagina als voordeur (Adrian, 20 okt 2026): wie een link kreeg en eerst naar
 * studiotools.nl gaat, leest wat dit is en dat een presentatie gewoon een webpagina is.
 * Links het verhaal, rechts het inlogvak; op een telefoon onder elkaar. Kleuren alleen als tokens
 * (kleuren.css). Met een foto (assets/login-foto.jpg, body.met-foto) komt die paginagroot achter alles,
 * met een lichte sluier waar de tekst staat. */
body.voordeur{min-height:100vh}
body.voordeur.met-foto{background:var(--foto-sluier),var(--login-foto) center/cover no-repeat fixed}
.vd{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;
    gap:48px;padding:56px clamp(20px,6vw,96px);max-width:1400px;margin:0 auto;box-sizing:border-box}
.vd-verhaal{max-width:560px}
.vd-merk{font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:0 0 18px}
.vd-verhaal h1{font-size:clamp(32px,4.4vw,54px);line-height:1.08;margin:0 0 20px;letter-spacing:-.01em;color:var(--ink)}
.vd-verhaal p{margin:0 0 14px;color:var(--dim);font-size:16.5px;line-height:1.55}
.vd-verhaal p b{color:var(--ink);font-weight:600}
.vd-rollen{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.vd-rollen li{font-size:13px;padding:5px 11px;border-radius:999px;background:var(--paneel);border:1px solid var(--lijn);color:var(--ink)}
.vd-gerust{display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding:14px 16px;border-radius:12px;
           background:var(--zacht-goed);border:1px solid var(--lijn)}
.vd-gerust svg{flex:none;margin-top:2px;stroke:var(--goed)}
.vd-verhaal .vd-gerust p{margin:0;font-size:14.5px;color:var(--ink)}
.vd-verhaal .vd-vragen{margin-top:26px;font-size:14px}
.vd-vragen a{color:var(--ink)}
.vd .card{justify-self:end;width:min(360px,100%);box-shadow:var(--schaduw-hoog)}
.vd .card h2{margin:0 0 4px;font-size:17px}
.vd .card .vd-klein{margin:0 0 6px;font-size:13px;color:var(--dim)}
@media (max-width:820px){
  .vd{grid-template-columns:1fr;gap:28px;padding:40px 16px}
  .vd .card{justify-self:stretch;width:100%}
  body.voordeur.met-foto{background:var(--foto-sluier-smal),var(--login-foto) center top/cover no-repeat}
}