/* Erft lettertype van het thema; accentkleur via variabele met terugval. */
.mnl-form, .mnl-container { --mnl-accent: #1a2b4a; font-family: inherit; color: inherit; }

.mnl-form { max-width: 520px; margin: 1.5em 0; }
.mnl-form-titel { margin: 0 0 .6em; font-size: 1.25em; }
.mnl-form-rij { display: flex; flex-wrap: wrap; gap: 8px; }
.mnl-input {
  flex: 1 1 200px; min-width: 0; padding: 12px 14px; font: inherit;
  border: 1px solid rgba(0,0,0,.18); border-radius: 8px; background: #fff; color: inherit;
}
.mnl-input:focus { outline: 2px solid var(--mnl-accent); outline-offset: 1px; }
.mnl-knop {
  flex: 0 0 auto; padding: 12px 22px; font: inherit; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--mnl-accent); border: none; border-radius: 8px;
}
.mnl-knop:hover { filter: brightness(1.08); }
.mnl-knop:disabled { opacity: .6; cursor: default; }
.mnl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mnl-form-melding { margin: .6em 0 0; font-size: .95em; min-height: 1.2em; }
.mnl-form-melding.is-ok { color: #227a34; }
.mnl-form-melding.is-fout { color: #b32d2e; }

.mnl-container {
  max-width: 640px; margin: 1.5em auto; padding: 28px 24px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: #fff;
}
.mnl-container-logo { text-align: center; margin-bottom: 1.4em; }
.mnl-container-logo img { max-height: 64px; height: auto; }
.mnl-container-inhoud { line-height: 1.6; }
.mnl-container-inhoud img { max-width: 100%; height: auto; }
.mnl-container-leeg { color: #888; text-align: center; }

@media (max-width: 480px) {
  .mnl-knop { flex: 1 1 100%; }
}