/* ── Merlijn Leren · toegangspagina's (/leer zonder sessie, /aanmelden) ────────────────────
   Eén kaart in het midden met de kopband erin. Deze pagina's staan los (ze laden nooit in het
   portaal); hun eigen klassen (kop, merk, toegang …) staan daarom alleen hier, niet in leer.css. */

/* De kopband in de kaart */
.kop {
  --lr-focus: var(--lr-band-goud);
  background: linear-gradient(135deg, var(--lr-band-van) 0%, var(--lr-band-tot) 75%);
  color: var(--lr-band-tekst);
  padding-block: calc(var(--lr-ruimte-3) + env(safe-area-inset-top, 0px)) var(--lr-ruimte-3);
  padding-inline: var(--lr-rand-pagina);
  min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--lr-ruimte-4); flex-wrap: wrap;
}
.merk { display: flex; align-items: center; gap: var(--lr-ruimte-3); min-width: 0; }
.merk img { width: 38px; height: 38px; border-radius: 50%; padding: 6px; background: var(--lr-band-tekst); box-shadow: 0 0 0 1px rgba(226, 196, 141, .35), 0 2px 6px rgba(0, 0, 0, .25); object-fit: contain; box-sizing: border-box; flex: 0 0 auto; }
.merk-boven { display: block; font: var(--lr-font-mini); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--lr-band-goud); }
.merk-naam { display: block; font: 400 20px/24px var(--lr-kop-letter); color: var(--lr-band-tekst); }
.gedempt { color: var(--lr-gedempt); }

.toegang { min-height: 100vh; display: grid; place-items: center; padding: var(--lr-ruimte-5) var(--lr-ruimte-4); }
.toegang-kaart {
  width: 100%; max-width: 520px; overflow: hidden;
  background: var(--lr-papier); border: 1px solid var(--lr-lijn); border-radius: var(--lr-rond-held); box-shadow: var(--lr-schaduw);
}
.toegang-kaart .kop { border-radius: 0; padding-inline: var(--lr-ruimte-5); }
.toegang-tekst { padding: var(--lr-ruimte-5) var(--lr-ruimte-5) var(--lr-ruimte-5); }
.toegang-tekst h1 { font: var(--lr-font-h2); color: var(--lr-navy); margin: 0 0 var(--lr-ruimte-2); }
.toegang-tekst p { margin: 0 0 var(--lr-ruimte-3); }
/* Hoofdknop: vlak navy2, witte tekst (in donker: navy tekst op lichte navy2) */
.knop-goud {
  display: inline-flex; align-items: center; gap: var(--lr-ruimte-2); min-height: var(--lr-tikdoel); padding: 10px 18px;
  background: var(--lr-navy2); color: var(--lr-op-navy2); text-decoration: none; border-radius: var(--lr-rond-pil); font-weight: 600;
}
.knop-goud:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
/* Een melding dat iets misliep: koraal (§3.2) */
.melding { color: var(--lr-koraal-tekst); background: var(--lr-koraal-zacht); border-radius: var(--lr-rond-vak); padding: var(--lr-ruimte-3) var(--lr-ruimte-4); }