:root { --groen:#2f6b3f; --rand:#dfe3e0; --tekst:#1d231f; --grijs:#6b746e; --bg:#f5f7f5; }
* { box-sizing:border-box; }
body { margin:0; font:16px/1.5 -apple-system,Segoe UI,Roboto,sans-serif; color:var(--tekst); background:var(--bg); }
body.center { display:grid; place-items:center; min-height:100vh; padding:1rem; }
a { color:var(--groen); }
.topbar { display:flex; align-items:center; gap:1.25rem; padding:.85rem 1.25rem; background:#fff; border-bottom:1px solid var(--rand); }
.topbar .spacer { flex:1; }
.topbar a { text-decoration:none; }
main { max-width:760px; margin:0 auto; padding:1.5rem 1.25rem; }
h1 { font-size:1.5rem; margin:.2rem 0 1rem; }
.card { background:#fff; border:1px solid var(--rand); border-radius:12px; padding:1.5rem; display:flex; flex-direction:column; gap:1rem; min-width:320px; }
.card.breed { max-width:560px; }
label { display:flex; flex-direction:column; gap:.35rem; font-weight:600; font-size:.92rem; }
label.checkbox { flex-direction:row; align-items:center; gap:.5rem; font-weight:500; }
input, textarea { font:inherit; padding:.6rem .7rem; border:1px solid var(--rand); border-radius:8px; background:#fff; }
input:focus, textarea:focus { outline:2px solid var(--groen); border-color:var(--groen); }
button { font:inherit; font-weight:700; color:#fff; background:var(--groen); border:0; border-radius:8px; padding:.7rem 1.1rem; cursor:pointer; }
button:hover { filter:brightness(1.05); }
.fout { color:#b3261e; margin:0; font-weight:600; }
.melding { background:#e8f3ec; border:1px solid #bcdcc6; color:#1f5130; padding:.7rem .9rem; border-radius:8px; }
.hint { color:var(--grijs); font-size:.9rem; }
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1rem; margin-top:1rem; }
.tegel { display:block; background:#fff; border:1px solid var(--rand); border-radius:12px; padding:1.25rem; text-decoration:none; color:inherit; }
.tegel:hover { border-color:var(--groen); }
.tegel h2 { margin:.1rem 0 .4rem; font-size:1.1rem; }
.tegel p { margin:0; color:var(--grijs); font-size:.92rem; }
code { background:#eef1ee; padding:.1rem .3rem; border-radius:4px; }

/* ===== CMS: pagina's-overzicht + blok-editor ===== */
.card.breed { max-width:680px; }
.knop-primair { display:inline-block; text-decoration:none; color:#fff; background:var(--groen); border-radius:8px; padding:.7rem 1.1rem; font-weight:700; }
.knop-primair.groot { padding:.85rem 1.4rem; font-size:1.02rem; align-self:flex-start; }
.knop-klein { display:inline-block; text-decoration:none; font-size:.85rem; font-weight:600; padding:.4rem .7rem; border-radius:7px; background:var(--groen); color:#fff; border:0; cursor:pointer; }
.knop-gevaar { background:#b3261e; }
table.lijst { width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--rand); border-radius:12px; overflow:hidden; }
table.lijst th, table.lijst td { text-align:left; padding:.7rem .9rem; border-bottom:1px solid var(--rand); font-size:.93rem; }
table.lijst th { background:#eef1ee; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:var(--grijs); }
table.lijst tr:last-child td { border-bottom:0; }
td.acties { white-space:nowrap; display:flex; gap:.4rem; align-items:center; }
.leeg { color:var(--grijs); }
.rij { display:flex; gap:1.5rem; align-items:flex-end; flex-wrap:wrap; }
label.klein { font-size:.85rem; }
.blok-titel { font-size:1.05rem; margin:.5rem 0 0; }
#blokken { display:flex; flex-direction:column; gap:.8rem; }
.blok { border:1px solid var(--rand); border-radius:10px; background:#fafbfa; }
.blok-kop { display:flex; align-items:center; justify-content:space-between; padding:.5rem .75rem; border-bottom:1px solid var(--rand); background:#eef1ee; border-radius:10px 10px 0 0; }
.blok-type { font-weight:700; font-size:.85rem; color:var(--grijs); text-transform:uppercase; letter-spacing:.03em; }
.blok-acties { display:flex; gap:.3rem; }
.blok-acties button { padding:.25rem .55rem; font-size:.9rem; background:#fff; color:var(--tekst); border:1px solid var(--rand); }
.blok-acties button.knop-gevaar { background:#b3261e; color:#fff; border:0; }
.blok-velden { padding:.75rem; display:flex; flex-direction:column; gap:.5rem; }
.blok-velden input, .blok-velden textarea, .blok-velden select { width:100%; font:inherit; padding:.55rem .65rem; border:1px solid var(--rand); border-radius:8px; }
.blok-knoppen { display:flex; gap:.5rem; flex-wrap:wrap; margin:.3rem 0; }
.blok-knoppen button { background:#fff; color:var(--groen); border:1px dashed var(--groen); font-weight:600; }