:root { --groen:#3f7d2a; --groen-donker:#2b5a1b; --oranje:#f08a1c; --papier:#f6f5f2; --tekst:#2b2b2b; --gedempt:#6a6a6a; --lijn:#d9d6cc; --fout:#b42318; color-scheme: light; }
* { box-sizing: border-box; }
body { margin:0; font:17px/1.6 system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:var(--tekst); background:var(--papier); }
a { color:var(--groen-donker); } a:hover { color:var(--oranje); }
.kop { background:var(--groen); color:#fff; }
.kop .wrap { display:flex; align-items:center; justify-content:space-between; min-height:60px; }
.kop img { height:38px; width:auto; display:block; }
.kop a { color:#fff; text-decoration:none; font-weight:600; }
.wrap { max-width:820px; margin:0 auto; padding:0 18px; }
.breed { max-width:1200px; }
main { padding:28px 0 56px; min-height:70vh; }
h1 { font-size:clamp(1.7rem,4vw,2.2rem); line-height:1.2; margin:0 0 .5em; color:var(--groen-donker); }
h2 { font-size:1.3rem; margin:1.6em 0 .4em; color:var(--groen-donker); }
h3 { font-size:1.1rem; margin:1.2em 0 .3em; }
.kaart { background:#fff; border-radius:10px; padding:22px 24px; box-shadow:0 2px 10px rgb(0 0 0/.08); margin:0 0 20px; }
.stappen { display:flex; flex-wrap:wrap; gap:6px; list-style:none; padding:0; margin:0 0 22px; font-size:.9rem; }
.stappen li { padding:5px 12px; border-radius:20px; background:#e8e6de; color:var(--gedempt); }
.stappen li.klaar { background:#d7e9cf; color:var(--groen-donker); }
.stappen li.nu { background:var(--groen); color:#fff; font-weight:700; }
label { display:block; font-weight:600; margin:14px 0 4px; }
.hint { color:var(--gedempt); font-size:.9rem; font-weight:400; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=password], input[type=number], select, textarea {
  width:100%; padding:10px 12px; font:inherit; border:1px solid var(--lijn); border-radius:6px; background:#fff; }
input:focus, select:focus, textarea:focus { outline:3px solid #b9d9ae; border-color:var(--groen); }
textarea { min-height:90px; }
.rij { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
.rij.drie { grid-template-columns:2fr 1fr 1fr; } .rij.adres { grid-template-columns:3fr 1fr 1fr; }
@media (max-width:560px){ .rij.drie,.rij.adres { grid-template-columns:1fr 1fr; } }
.optie { display:flex; gap:10px; align-items:flex-start; font-weight:400; margin:8px 0; }
.optie input { margin-top:6px; width:auto; }
.fout { color:var(--fout); font-size:.92rem; margin:4px 0 0; font-weight:600; }
input.heeft-fout, select.heeft-fout, textarea.heeft-fout { border-color:var(--fout); }
.foutblok { background:#fdecea; border-left:5px solid var(--fout); padding:12px 16px; border-radius:6px; margin-bottom:18px; }
.info { background:#eaf4e4; border-left:5px solid var(--groen); padding:12px 16px; border-radius:6px; margin:14px 0; }
.let-op { background:#fff4e0; border-left:5px solid var(--oranje); padding:12px 16px; border-radius:6px; margin:14px 0; }
.knoppen { display:flex; gap:12px; justify-content:space-between; align-items:center; margin-top:26px; flex-wrap:wrap; }
.knop { display:inline-block; background:var(--oranje); color:#fff; border:0; border-radius:8px; padding:12px 26px; font:inherit; font-weight:700; cursor:pointer; text-decoration:none; }
.knop:hover { background:#d97706; color:#fff; }
.knop.grijs { background:#8a8a8a; } .knop.groen { background:var(--groen); } .knop.groen:hover { background:var(--groen-donker); }
.knop.klein { padding:6px 14px; font-size:.9rem; }
.knop.gevaar { background:var(--fout); }
.dagdelen { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:2px 18px; }
table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--lijn); vertical-align:top; }
th { background:var(--papier); font-size:.9rem; }
.tabel-scroll { overflow-x:auto; }
.badge { display:inline-block; padding:2px 10px; border-radius:12px; font-size:.82rem; font-weight:700; background:#e8e6de; }
.badge.betaald { background:#d7e9cf; color:#1d4710; } .badge.wachtlijst { background:#ffe7c2; color:#8a4b00; } .badge.te_betalen,.badge.toegelaten { background:#dbeafe; color:#1e3a8a; } .badge.geannuleerd { background:#fdecea; color:#8a1c12; }
.voet { color:var(--gedempt); font-size:.88rem; text-align:center; padding:20px; }
.verberg { display:none; }
.beheernav { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:22px; }
.beheernav a { padding:7px 14px; background:#fff; border-radius:6px; text-decoration:none; font-weight:600; border:1px solid var(--lijn); }
.beheernav a.actief { background:var(--groen); color:#fff; border-color:var(--groen); }
.cijfers { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:14px 0; }
.cijfer { background:#fff; border-radius:10px; padding:14px 16px; box-shadow:0 2px 8px rgb(0 0 0/.07); }
.cijfer b { display:block; font-size:2rem; color:var(--groen-donker); line-height:1.1; }
.beheernav a[aria-current='page'] { background:var(--groen); color:#fff; border-color:var(--groen); }
.beheernav form { margin-left:auto; }
form.inline { display:inline; }
.knop.rood { background:#b3261e; } .knop.rood:hover { background:#8c1d18; }
.tegels { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:20px; }
.tegels .kaart { margin:0; text-align:center; }
.groot { font-size:2.2rem; line-height:1.1; color:var(--groen-donker); }
.hint { color:var(--gedempt); font-size:.9rem; font-weight:400; }
[hidden] { display:none !important; }