/* login.css — de publieke inlogpagina.

   Aanvulling op admin.css (die levert de tokens, de kaart, de formulier- en
   knopstijl). Hier alleen wat de landingsindeling nodig heeft: twee kolommen,
   uitleg links, inloggen rechts. Kleuren en maten volgen docs/DESIGN.md; geen
   nieuwe tokens, geen eigen knopstijl. */

.login-pagina .wrap{max-width:1040px}

/* --- kop --- */
.login-pagina .top{padding:18px 0}
.merk{display:flex;align-items:center;gap:14px;text-decoration:none}
.merk-logo{height:34px;width:auto;display:block;flex:none;mix-blend-mode:multiply}
.merk-streep{width:1px;height:24px;background:var(--line);flex:none}
.merk-naam{font-weight:600;font-size:17px;letter-spacing:-.01em;color:var(--navy-ink)}

/* --- indeling --- */
.login-grid{display:grid;grid-template-columns:minmax(0,1fr) 372px;
  gap:64px;align-items:start;padding-top:46px;padding-bottom:56px}
.login-uitleg h1{margin-top:0;font-size:30px;line-height:1.2;max-width:20ch}
.login-uitleg .lead{max-width:52ch;font-size:15px;margin-bottom:30px}

/* Drie punten als beschrijvingslijst: de kop is het punt, de tekst de uitleg.
   Geen opsommingstekens en geen iconen — dit is een adviesdeliverable, geen
   feature-lijstje. */
.login-punten{margin:0 0 28px;max-width:56ch}
.login-punten dt{font-size:11px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--navy-ink);margin-bottom:4px}
.login-punten dd{margin:0 0 18px;color:var(--muted)}
.login-punten dd:last-child{margin-bottom:0}

.login-bron,.login-demo,.login-eerste-keer{font-size:13px;color:var(--muted);
  max-width:52ch}
.login-bron{padding-top:18px;border-top:1px solid var(--line);margin:0 0 14px}
.login-demo{margin:0}
.login-demo a{color:var(--navy);font-weight:600;text-decoration:none}
.login-demo a:hover{color:var(--navy-ink);text-decoration:underline}
/* Pijltje "opent elders": klein, in de tekstkleur, zodat het de regel niet
   opbreekt. De uitleg staat óók in woorden — een icoon alleen is te weinig. */
.link-extern{width:12px;height:12px;margin-left:3px;vertical-align:-1px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  stroke-linejoin:round}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* --- inlogkolom --- */
.login-card{margin-bottom:14px}
.login-card h2{margin-bottom:16px}
.login-card form button{width:100%}
.login-hulp{font-size:13px;color:var(--muted);margin:16px 0 0;
  padding-top:14px;border-top:1px solid var(--line)}
.login-eerste-keer{margin:0;padding:0 2px}

.login-voet{border-top:1px solid var(--line);background:var(--panel);
  padding:18px 0;font-size:13px;color:var(--muted)}
.login-voet a{color:var(--muted)}

/* --- activatiepagina (uitnodigingslink) --- */
/* Eén smalle, gecentreerde kolom: er is hier geen uitlegverhaal naast. */
.activeer-kolom{max-width:420px;margin:46px auto 56px}

/* Onder 900px: één kolom, met het inlogblok bovenaan — wie hier komt om in te
   loggen moet niet eerst langs de uitleg hoeven scrollen. */
@media (max-width:900px){
  .login-grid{grid-template-columns:1fr;gap:36px;padding-top:32px}
  .login-kolom{order:-1}
  .login-uitleg h1{font-size:25px}
}