/* Beheer — VIBE-huisstijl (Visual Brand Guide v1.3): bosgroen is het anker, mint geeft lucht, oranje alleen voor
   de knop. Montserrat zelf gehost (OFL, zie fonts/montserrat-OFL.txt). Geldt voor elke site, los van de sitetokens. */
@font-face { font-family: "Montserrat"; font-weight: 500; font-display: swap; src: url("/beheer-stijl/fonts/montserrat-500.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-display: swap; src: url("/beheer-stijl/fonts/montserrat-700.woff2") format("woff2"); }

.vb {
  --bos: #0B4A3B;
  --bos-donker: #083A2E;
  --oranje: #FE9108;
  --oranje-hover: #F08400;
  --mint-licht: #DDEFE8;
  --mint: #A8D8C6;
  --basis: #F7FAF7;
  --ink: #1D2B27;
  --tekst: #34443F;
  --stil: #61746D;
  --lijn: #CFE3DB;
  --fout: #B3261E;
  --fout-bg: #FDF0EF;
  margin: 0;
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-content: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  background: var(--basis);
  color: var(--tekst);
  font: 500 1rem/1.55 "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.vb *, .vb *::before, .vb *::after { box-sizing: border-box; }
.vb-kaart {
  width: min(26rem, calc(100vw - 2rem));
  padding: 2rem 1.75rem;
  background: #fff;
  border: 1px solid var(--lijn);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(11, 74, 59, .04), 0 12px 32px -12px rgba(11, 74, 59, .14);
}
.vb-logo { margin: 0 0 1.5rem; }
.vb-logo svg { display: block; height: 1.75rem; width: auto; }
.vb h1 { margin: 0 0 .25rem; color: var(--ink); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.vb-uitleg { margin: 0 0 1.25rem; color: var(--stil); font-size: .9375rem; }
.vb-melding {
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: 12px;
  background: var(--fout-bg); color: var(--fout); font-size: .9375rem;
}
.vb-formulier { display: grid; gap: .375rem; }
.vb label { margin-top: .5rem; color: var(--ink); font-size: .875rem; font-weight: 700; }
.vb input {
  width: 100%; min-height: 2.75rem; padding: .5rem .875rem;
  border: 1px solid var(--lijn); border-radius: 12px; background: var(--basis);
  color: var(--ink); font: inherit;
}
.vb input:focus-visible, .vb button:focus-visible { outline: 3px solid var(--mint); outline-offset: 2px; border-color: var(--bos); }
.vb button {
  margin-top: 1.25rem; min-height: 2.75rem; padding: .5rem 1.25rem;
  border: 0; border-radius: 999px; background: var(--oranje); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
.vb button:hover { background: var(--oranje-hover); }
.vb button.vb-tweede { background: var(--mint-licht); color: var(--bos); }
.vb button.vb-tweede:hover { background: var(--mint); }
.vb-voet { margin: 0; text-align: center; color: var(--stil); font-size: .8125rem; }

/* Aanvullingen voor Flynn's: meldingen, links, tweede stap, honeypot (zelfde huisstijl) */
.vb-melding--goed { background: var(--mint-licht); color: var(--bos); }
.vb-melding--let-op { background: #FFF4E0; color: #7A4B00; }
.vb a { color: var(--bos); font-weight: 700; }
.vb-links { margin: 1.25rem 0 0; font-size: .9375rem; }
.vb-rij { display: flex; flex-wrap: wrap; gap: .5rem; }
.vb-rij form { margin: 0; }
.vb-rij button { margin-top: .75rem; }
.vb input.vb-code { font-size: 1.5rem; letter-spacing: .3em; text-align: center; }
.vb-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.vb form[data-formulier-status="uit"] { opacity: .55; }
.vb button:disabled, .vb input:disabled { cursor: not-allowed; }
.vb-hulp { margin: 0; color: var(--stil); font-size: .8125rem; }