/* Eén inlog voor de hele website. LET OP: /stijl.css bezet al .groot,
   .raster, .kop, .knop, .held, .bord, .melding, .laden, .voet en .leeg. */

.inlogdoos { background: var(--wit); border-radius: 24px;
             padding: clamp(22px, 5vw, 40px); max-width: 440px; margin: 48px auto; }
.inlogdoos h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 6px; }
.bijzin { color: var(--inkt-zacht); margin: 0; }
.fout { color: #C4553D; margin-top: 14px; }

.inlogdoos label { display: block; font-size: 14px; color: var(--inkt-zacht);
                   margin: 18px 0 4px; }
.inlogdoos input { width: 100%; padding: 12px 14px; border-radius: 14px;
                   border: 1.5px solid var(--steen); font: inherit; background: var(--zand); }
.inlogdoos .knop { width: 100%; margin-top: 22px; }

/* Ingelogd: waar wil je heen. */
.verder { display: grid; gap: 10px; margin-top: 22px; }
.verder .knop { width: 100%; }
.vergeten { margin: 16px 0 0; font-size: 14px; }
.vergeten a { color: var(--terracotta); }

.wie { background: var(--zand); border-radius: 14px; padding: 12px 14px;
       font-size: 14px; color: var(--inkt-zacht); margin-top: 16px; }
.wie b { color: var(--inkt); font-weight: 600; }

.knop:not([disabled]) { cursor: pointer; transition: transform .16s cubic-bezier(.23,1,.32,1); }
.knop:not([disabled]):active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) {
  .knop { transition: none; }
  .knop:not([disabled]):active { transform: none; }
}