:root {
  --achtergrond: #0d0c0b;
  --vlak: #161412;
  --vlak-2: #1d1a17;
  --tekst: #ece4d8;
  --zacht: #9c9184;
  --lijn: #2e2924;
  --accent: #c8935a;
  --accent-licht: #e2b884;
  --accent-tekst: #120f0c;
  --fout: #e07b6a;
  --melding: #d9b25c;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.6 var(--sans); background: var(--achtergrond); color: var(--tekst); }
a { color: var(--accent); }
.kop { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--lijn); background: var(--vlak); }
.merk { font-weight: 700; text-decoration: none; color: var(--tekst); font-size: 18px; }
.merk span { color: var(--accent); }
.kop nav { display: flex; gap: 12px; align-items: center; }
.kop form { margin: 0; }
.inhoud { max-width: 1200px; margin: 0 auto; padding: 16px; }
h1 { font-size: 24px; margin: 8px 0 4px; }
h2 { font-size: 17px; margin: 16px 0 8px; }
.sub { color: var(--zacht); margin: 0 0 16px; }
.kaartje { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 10px; padding: 16px; margin-bottom: 16px; }
.kaartje.smal { max-width: 380px; margin: 40px auto; }
.formulier { display: flex; flex-direction: column; gap: 14px; }
.formulier label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; }
.formulier small, legend small { font-weight: 400; color: var(--zacht); }
fieldset { border: 1px solid var(--lijn); border-radius: 8px; padding: 12px; display: flex; flex-direction: column; gap: 12px; }
legend { font-weight: 700; padding: 0 4px; }
input, textarea { font: inherit; padding: 9px 10px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--achtergrond); color: var(--tekst); width: 100%; }
.knop { background: var(--accent); color: var(--accent-tekst); border: 0; border-radius: 6px; padding: 10px 16px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; align-self: flex-start; }
.knop.klein { padding: 6px 12px; font-size: 14px; }
.link { background: none; border: 0; color: var(--zacht); font: inherit; cursor: pointer; }
.fout { color: var(--fout); font-weight: 600; }
.melding { color: var(--melding); margin: 4px 0; }
.hint, .bron, .zacht, .leeg { color: var(--zacht); font-size: 14px; }
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.kaart { height: 460px; border-radius: 10px; border: 1px solid var(--lijn); }
.percelen { list-style: none; padding: 0; margin: 0 0 12px; max-height: 380px; overflow-y: auto; }
.percelen li { border-bottom: 1px solid var(--lijn); padding: 6px 0; }
.percelen label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; cursor: pointer; }
.percelen input { width: auto; }
.label { font-size: 12px; padding: 1px 7px; border-radius: 99px; background: var(--achtergrond); border: 1px solid var(--lijn); color: var(--zacht); }
.label.klaar_voor_analyse { color: var(--accent); border-color: var(--accent); }
.tabel { width: 100%; border-collapse: collapse; background: var(--vlak); }
.tabel th, .tabel td { text-align: left; padding: 8px; border-bottom: 1px solid var(--lijn); }
.tabel.compact td, .tabel.compact th { padding: 4px 6px; font-size: 14px; }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.gegevens dt { color: var(--zacht); }
.gegevens dd { margin: 0; }
.pre { white-space: pre-wrap; }
.mono { font-family: ui-monospace, monospace; font-size: 13px; }
@media (max-width: 760px) {
  .twee { grid-template-columns: 1fr; }
  .kaart { height: 300px; }
  .tabel { font-size: 14px; }
}
.stappen, .bevindingen { list-style: none; padding: 0; margin: 0; }
.stappen li, .bevindingen li { padding: 6px 0; border-bottom: 1px solid var(--lijn); }
.optie { border-left: 3px solid var(--accent); padding: 4px 0 4px 12px; margin: 12px 0; }
.optie h3 { margin: 0 0 4px; font-size: 16px; }
.label.klaar, .label.ok, .label.feit { color: #2f7d4f; border-color: #2f7d4f; }
.label.mislukt, .label.fout { color: var(--fout); border-color: var(--fout); }
.label.bezig, .label.gedeeltelijk, .label.opgave { color: var(--melding); border-color: var(--melding); }
.label.afleiding { color: var(--accent); border-color: var(--accent); }
.citaat { margin: 4px 0 2px 0; padding-left: 10px; border-left: 2px solid var(--lijn); font-style: italic; color: var(--zacht); font-size: 14px; }
.label.regel { color: #2b5ea7; border-color: #2b5ea7; }
.label.markt { color: #7a4fb0; border-color: #7a4fb0; }
details.onderbouwing { margin: 6px 0; }
details.onderbouwing summary { cursor: pointer; color: var(--accent); font-size: 14px; }
.ref { text-decoration: none; }
.chat-vraag { margin: 14px 0 4px; padding: 8px 12px; background: var(--achtergrond); border-radius: 8px; font-weight: 600; white-space: pre-wrap; }
.chat-antwoord { padding: 4px 12px 8px; border-left: 3px solid var(--accent); }
.chat-antwoord.mislukt { border-color: var(--fout); }
.chat-antwoord p { margin: 6px 0; }
.knop:disabled { opacity: .5; cursor: default; }
.md table { border-collapse: collapse; margin: 8px 0; font-size: 14px; }
.md th, .md td { border: 1px solid var(--lijn); padding: 4px 8px; text-align: left; vertical-align: top; }
.md h1, .md h2, .md h3 { font-size: 16px; margin: 12px 0 4px; }
.md { overflow-x: auto; }
.vraag { border-bottom: 1px solid var(--lijn); padding: 10px 0; display: flex; flex-direction: column; gap: 6px; }
.vraag p { margin: 0; font-size: 14px; }
.vraag select { font: inherit; padding: 8px; border: 1px solid var(--lijn); border-radius: 6px; background: var(--achtergrond); color: var(--tekst); }
.weetniet { font-weight: 400 !important; flex-direction: row !important; align-items: center; gap: 6px !important; font-size: 14px; }
.weetniet input { width: auto; }
.vragenronde { border-color: var(--accent); }
.label.invloed-hoog { color: var(--accent); border-color: var(--accent); }
.label.vragen, .label.advies_bezig { color: var(--accent); border-color: var(--accent); }
.plus { color: #2f7d4f; font-weight: 600; } .min { color: var(--fout); font-weight: 600; }

/* ── Factorij look & feel ─────────────────────────────────────────────── */
.kop { background: linear-gradient(180deg, #14110f, #0d0c0b); border-bottom: 1px solid var(--lijn); padding: 14px 20px; }
.merk { font-family: var(--sans); font-weight: 700; letter-spacing: .14em; font-size: 20px; text-transform: uppercase;
        background: linear-gradient(180deg, var(--accent-licht), var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.merk small { display: block; font-size: 9px; letter-spacing: .2em; line-height: 1; margin-bottom: -2px; }
.merk span { font-weight: 400; letter-spacing: .3em; font-size: 11px; margin-left: 10px; color: var(--zacht); -webkit-text-fill-color: var(--zacht); }
h1 { font-family: var(--serif); font-weight: 500; font-size: 34px; letter-spacing: .01em; color: var(--tekst); }
h2 { font-family: var(--sans); font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); margin-top: 22px; }
h3 { font-family: var(--serif); font-weight: 500; font-size: 21px; }
.optie h3 { font-family: var(--serif); font-size: 20px; }
.kaartje { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 4px; box-shadow: 0 1px 0 rgba(255,255,255,.02) inset; }
.knop { background: linear-gradient(180deg, var(--accent-licht), var(--accent)); color: var(--accent-tekst); border-radius: 3px;
        letter-spacing: .08em; text-transform: uppercase; font-size: 13px; padding: 11px 18px; }
.knop:hover { filter: brightness(1.08); }
.link { color: var(--accent); }
input, textarea, select { background: var(--vlak-2) !important; border-color: var(--lijn) !important; color: var(--tekst) !important; border-radius: 3px !important; }
input:focus, textarea:focus, select:focus { outline: 1px solid var(--accent); }
.tabel, .md table { background: transparent; }
.tabel th, .md th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--zacht); font-weight: 500; }
.label { border-radius: 2px; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; background: transparent; }
.optie { border-left: 1px solid var(--accent); padding-left: 16px; }
.citaat { border-left: 1px solid var(--accent); color: #b9ad9e; }
.chat-vraag { background: var(--vlak-2); border: 1px solid var(--lijn); border-radius: 3px; font-weight: 500; }
.chat-antwoord { border-left: 1px solid var(--accent); }
.sub { color: var(--zacht); letter-spacing: .02em; }
a { color: var(--accent-licht); }
.kaart { border-radius: 4px; border-color: var(--lijn); }
/* kaart in dezelfde warme, donkere sfeer */
.leaflet-tile-pane { filter: invert(1) hue-rotate(185deg) brightness(.82) contrast(.9) sepia(.35) saturate(.7); }
.leaflet-container { background: #0d0c0b; }
.leaflet-tooltip { background: var(--vlak); color: var(--tekst); border-color: var(--lijn); }
.leaflet-control-attribution { background: rgba(13,12,11,.75) !important; color: var(--zacht) !important; }
.leaflet-control-attribution a { color: var(--accent) !important; }
.route { font-size: 11.5px; padding: 2px 8px; border-radius: 2px; border: 1px solid var(--lijn); letter-spacing: .03em; }
.route-binnenplans_aangetoond { color: #6fbf8e; border-color: #6fbf8e; }
.route-binnenplans_te_toetsen { color: var(--accent-licht); border-color: var(--accent); }
.route-buitenplans_te_onderzoeken { color: #a99be0; border-color: #7a6bc0; }
.route-aangetoond_strijdig_onhaalbaar { color: var(--fout); border-color: var(--fout); }
h3.categorie { font-family: var(--sans); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--zacht); margin-top: 22px; }
.beste-opties { border-color: var(--accent); }
summary h2.inline { display: inline; }
img.beeld { width: 100%; max-width: 900px; display: block; margin: 8px 0 14px; border-radius: 6px; background: #fff; }
.review label { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.review .rij { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.review .rij label { flex-direction: row; align-items: center; gap: 6px; }
.review select { font: inherit; padding: 6px; background: var(--achtergrond); color: var(--tekst); border: 1px solid var(--lijn); border-radius: 6px; max-width: 100%; }
.review-optie summary { cursor: pointer; padding: 4px 0; }