/* Aanmeldformulier WWDS — zelfde kleuren en letter als wwds.nl (rood uit het logo). */
:root {
  --rood: #be1522; --rood-donker: #9a101b; --rood-zacht: #fbeced;
  --tekst: #1f2328; --tekst-zacht: #4b5259; --lijn: #d9dce0; --vlak: #f5f6f7; --wit: #ffffff;
  --rond: 10px; --letter: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--vlak); color: var(--tekst); }
body { font: 17px/1.55 var(--letter); }
a { color: var(--rood); text-underline-offset: 2px; }
a:hover { color: var(--rood-donker); }
:focus-visible { outline: 3px solid var(--rood); outline-offset: 2px; }
[hidden] { display: none !important; }

.kop { background: var(--wit); border-bottom: 1px solid var(--lijn); }
.kop-binnen { max-width: 860px; margin: 0 auto; padding: .7rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.merk img { display: block; height: 36px; width: auto; }
.terug { font-size: .95rem; font-weight: 600; text-decoration: none; }

main { max-width: 860px; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 .5rem; letter-spacing: -.01em; }
.intro p { margin: 0 0 1rem; color: var(--tekst-zacht); }
.stappen { margin: 0 0 1.5rem; padding-left: 1.3rem; }
.stappen li { margin: .25rem 0; }

form { display: grid; gap: 1.1rem; }
fieldset { margin: 0; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 1rem 1.25rem 1.2rem; min-width: 0; }
legend { font-weight: 700; font-size: 1.1rem; padding: 0 .3rem; }
.hulp { margin: 0 0 .6rem; color: var(--tekst-zacht); font-size: .92rem; }
.rij { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; }
.rij > label { flex: 1 1 200px; }
.rij > label.breed { flex: 3 1 260px; }
.rij > label.smal { flex: 1 1 110px; }
label { display: flex; flex-direction: column; gap: .25rem; font-size: .92rem; font-weight: 600; min-width: 0; }
label.breed { width: 100%; }
input, select, textarea { font: inherit; font-weight: 400; font-size: 1rem; color: var(--tekst); background: var(--wit);
  border: 1px solid var(--lijn); border-radius: 8px; padding: .55rem .65rem; width: 100%; }
textarea { resize: vertical; }
.keuze-groep { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center; margin-bottom: .7rem; }
.keuze-groep .label { width: 100%; font-weight: 600; font-size: .92rem; }
label.keuze { flex-direction: row; align-items: center; gap: .45rem; font-weight: 400; font-size: .98rem; }
label.keuze input { width: auto; }
.akkoord { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: .9rem 1rem; align-items: flex-start; }
.akkoord input { margin-top: .25rem; }
.collegas summary { cursor: pointer; color: var(--rood); font-weight: 600; font-size: .95rem; margin: .3rem 0 .6rem; }
.knop, .knop-licht { font: inherit; font-weight: 700; border-radius: 8px; cursor: pointer; }
.knop { background: var(--rood); color: var(--wit); border: 0; padding: .8rem 1.4rem; font-size: 1.05rem; justify-self: start; }
.knop:hover { background: var(--rood-donker); }
.knop:disabled { opacity: .6; cursor: wait; }
.knop-licht { background: var(--wit); color: var(--rood); border: 1px solid var(--lijn); padding: .45rem .9rem; font-size: .92rem; }
.melding { background: var(--rood-zacht); border-left: 4px solid var(--rood); border-radius: 8px; padding: .8rem 1rem; }
.fout input, .fout select, .fout textarea { border-color: var(--rood); }
.veldfout { color: var(--rood-donker); font-weight: 400; font-size: .85rem; }
.lok { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.bedankt { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--rond); padding: 1.5rem; }
.voet { text-align: center; color: var(--tekst-zacht); font-size: .85rem; padding: 0 1rem 2rem; }
@media (max-width: 560px) { body { font-size: 16px; } fieldset { padding: .8rem .9rem 1rem; } }