:root {
  --inkt: #1c1b19;
  --zacht: #5d5a54;
  --lijn: #e3dfd7;
  --papier: #faf8f4;
  --wit: #ffffff;
  --accent: #23423a;
  --accent-licht: #e5ede9;
  --rood: #a8261d;
  --rood-bg: #fbeceb;
  --oranje: #b45309;
  --oranje-bg: #fdf1e3;
  --geel: #8a6a00;
  --geel-bg: #fbf5df;
  --groen: #2f6b3a;
  --groen-bg: #e9f3eb;
  --grijs: #6b6b6b;
  --grijs-bg: #f0efec;
  --radius: 10px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --inkt: #ecebe7; --zacht: #b0ada6; --lijn: #3a3833; --papier: #171614; --wit: #201f1c;
    --accent: #8fc1b0; --accent-licht: #22322d;
    --rood: #f08a80; --rood-bg: #3a1d1a; --oranje: #f3a85c; --oranje-bg: #3a2814;
    --geel: #e6c457; --geel-bg: #352d12; --groen: #84c591; --groen-bg: #1b2e1f;
    --grijs: #aaa; --grijs-bg: #2a2926;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--inkt); font: 16px/1.6 var(--sans); }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
h2 { font-size: 1.45rem; margin-top: 2rem; }
h3 { font-size: 1.1rem; }
p { margin: 0 0 1em; }
small, .zacht { color: var(--zacht); }
input, select, textarea, button { font: inherit; color: inherit; }
input[type=text], input[type=email], input[type=password], input[type=url], input[type=number],
input[type=date], select, textarea {
  width: 100%; padding: .6rem .75rem; border: 1px solid var(--lijn); border-radius: 8px;
  background: var(--wit);
}
textarea { min-height: 7rem; resize: vertical; }
label { display: block; font-weight: 600; margin: .8rem 0 .3rem; font-size: .95rem; }
.knop, button {
  display: inline-flex; align-items: center; gap: .4rem; padding: .65rem 1.1rem; border-radius: 8px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--papier); cursor: pointer;
  text-decoration: none; font-weight: 600; font-size: .95rem;
}
.knop.licht, button.licht { background: transparent; color: var(--accent); }
.knop.klein, button.klein { padding: .35rem .7rem; font-size: .85rem; }
button.gevaar { background: transparent; color: var(--rood); border-color: var(--rood); }
.flash { background: var(--accent-licht); border-radius: 8px; padding: .7rem 1rem; margin-bottom: 1rem; }

/* ---------- publiek ---------- */
.pub-kop { max-width: 760px; margin: 0 auto; padding: 1.4rem 16px 0; display: flex;
           justify-content: space-between; align-items: baseline; }
.pub-kop .merk { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; text-decoration: none; color: var(--inkt); }
.pub { max-width: 760px; margin: 0 auto; padding: 2rem 16px 4rem; }
.pub-voet { max-width: 760px; margin: 0 auto; padding: 2rem 16px 3rem; border-top: 1px solid var(--lijn);
            font-size: .85rem; color: var(--zacht); }
.kaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1.4rem; }
.uitslag { border-left: 6px solid var(--grijs); }
.uitslag.rood { border-left-color: var(--rood); background: var(--rood-bg); }
.uitslag.oranje { border-left-color: var(--oranje); background: var(--oranje-bg); }
.uitslag.geel { border-left-color: var(--geel); background: var(--geel-bg); }
.uitslag.groen { border-left-color: var(--groen); background: var(--groen-bg); }
.uitslag .label { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; margin-bottom: .2rem; }
.uitslag.rood .label { color: var(--rood); } .uitslag.oranje .label { color: var(--oranje); }
.uitslag.geel .label { color: var(--geel); } .uitslag.groen .label { color: var(--groen); }
.uitslag p:last-child { margin-bottom: 0; }
.opties { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: 1rem; }
.opties .kaart h3 { margin-bottom: .3rem; }
.zoekbalk { display: flex; gap: .5rem; flex-wrap: wrap; }
.zoekbalk input { flex: 1 1 240px; }
.vraag { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--lijn); align-items: center; }
.vraag span { flex: 1; }
.jn { display: flex; gap: .35rem; flex-shrink: 0; }
.jn input { position: absolute; opacity: 0; pointer-events: none; }
.jn label { margin: 0; padding: .35rem .8rem; border: 1px solid var(--lijn); border-radius: 999px; cursor: pointer; font-weight: 500; }
.jn input:checked + label { background: var(--accent); border-color: var(--accent); color: var(--papier); }
.jn input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.check-rij { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.check-rij input { margin-top: .35rem; }
.verborgen { position: absolute; left: -9999px; }
.over { display: flex; gap: 1rem; align-items: flex-start; }

/* ---------- beheer ---------- */
.beheer { display: grid; grid-template-columns: 210px 1fr; min-height: 100vh; }
.zij { background: var(--wit); border-right: 1px solid var(--lijn); padding: 1.2rem 1rem; }
.zij .merk { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin-bottom: 1.4rem; display: block; color: var(--inkt); text-decoration: none; }
.zij nav a { display: block; padding: .45rem .6rem; border-radius: 6px; color: var(--inkt); text-decoration: none; }
.zij nav a:hover, .zij nav a.actief { background: var(--accent-licht); }
.hoofd { padding: 1.6rem 2rem 4rem; min-width: 0; }
.balk { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.balk h1 { font-size: 1.8rem; margin: 0; }
.testmodus { background: var(--geel-bg); color: var(--geel); border-radius: 8px; padding: .5rem .9rem; font-size: .9rem; margin-bottom: 1rem; }
.trechter { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.tegel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: .9rem 1rem; }
.tegel .n { font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.tegel .t { font-size: .85rem; color: var(--zacht); }
.tegel .p { font-size: .8rem; color: var(--zacht); }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.blok { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--radius); padding: 1rem 1.1rem; min-width: 0; }
.blok h2 { font-size: 1.1rem; margin: 0 0 .7rem; font-family: var(--sans); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--lijn); vertical-align: top; }
th { font-weight: 600; color: var(--zacht); font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabelwrap { overflow-x: auto; }
.stip { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; background: var(--grijs); margin-right: .35rem; vertical-align: middle; }
.stip.rood { background: var(--rood); } .stip.oranje { background: var(--oranje); }
.stip.geel { background: var(--geel); } .stip.groen { background: var(--groen); }
.tag { display: inline-block; font-size: .78rem; padding: .1rem .5rem; border-radius: 999px; background: var(--grijs-bg); color: var(--zacht); white-space: nowrap; }
.tag.heet { background: var(--oranje-bg); color: var(--oranje); }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem; }
.filters select, .filters input { width: auto; }
.bulk { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin: .6rem 0; }
.bulk select { width: auto; }
.twee { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.2rem; }
.form-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.tijdlijn { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.tijdlijn li { padding: .45rem 0; border-bottom: 1px solid var(--lijn); display: grid; grid-template-columns: 90px 120px 1fr; gap: .5rem; }
.tijdlijn .s { font-weight: 600; }
pre.mail { white-space: pre-wrap; font: .92rem/1.55 var(--sans); background: var(--papier); border: 1px solid var(--lijn); border-radius: 8px; padding: 1rem; margin: 0; }
.bord { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.kolom { background: var(--grijs-bg); border-radius: var(--radius); padding: .6rem; width: 230px; flex-shrink: 0; min-height: 120px; }
.kolom.over { outline: 2px dashed var(--accent); }
.kolom h3 { font-family: var(--sans); font-size: .9rem; margin: .1rem .2rem .6rem; display: flex; justify-content: space-between; }
.bordkaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: 8px; padding: .55rem .65rem; margin-bottom: .5rem; font-size: .88rem; cursor: grab; }
.bordkaart a { color: var(--inkt); text-decoration: none; font-weight: 600; }
.bordkaart .zacht { font-size: .8rem; }
@media (max-width: 860px) {
  .beheer { grid-template-columns: 1fr; }
  .zij { border-right: 0; border-bottom: 1px solid var(--lijn); }
  .zij nav { display: flex; flex-wrap: wrap; gap: .2rem; }
  .hoofd { padding: 1.2rem 16px 3rem; }
  .twee, .form-raster { grid-template-columns: 1fr; }
  .tijdlijn li { grid-template-columns: 1fr; gap: 0; }
}