:root{--bg:#f7f6f2;--paper:#fff;--ink:#1c1f24;--muted:#5f6670;--line:#dcd9d1;--accent:#1f4e79;--accent2:#8a3b12;--ok:#2e6b3a;--warn:#9a6a00;--bad:#9b2c2c;--chip:#eef2f7;--chipink:#1f4e79;--hl:#fff3c4;--soft:#f1efe8;
 --l-crailo:#8a3b12;--l-huizen:#1f4e79;--l-hilversum:#0e7490;--l-bel:#2e6b3a;--l-gm:#6b2d8f;--l-provincie:#9a6a00;--l-rijk:#5f6670}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#15171b;--paper:#1e2126;--ink:#e8e6e1;--muted:#a4a9b3;--line:#343841;--accent:#8fb8e8;--accent2:#e3a070;--ok:#7fc48c;--warn:#e2b84a;--bad:#e58a8a;--chip:#2a3140;--chipink:#bcd3ee;--hl:#4a4320;--soft:#24272d;
 --l-crailo:#e3a070;--l-huizen:#8fb8e8;--l-hilversum:#67c7d8;--l-bel:#7fc48c;--l-gm:#c9a3e6;--l-provincie:#e2b84a;--l-rijk:#a4a9b3;color-scheme:dark}}
:root[data-theme=dark]{--bg:#15171b;--paper:#1e2126;--ink:#e8e6e1;--muted:#a4a9b3;--line:#343841;--accent:#8fb8e8;--accent2:#e3a070;--ok:#7fc48c;--warn:#e2b84a;--bad:#e58a8a;--chip:#2a3140;--chipink:#bcd3ee;--hl:#4a4320;--soft:#24272d;
 --l-crailo:#e3a070;--l-huizen:#8fb8e8;--l-hilversum:#67c7d8;--l-bel:#7fc48c;--l-gm:#c9a3e6;--l-provincie:#e2b84a;--l-rijk:#a4a9b3;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}a:hover{text-decoration:underline}
header.top{background:var(--accent);color:#fff}
header.top .wrap{max-width:1160px;margin:0 auto;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
header.top .brand{font-weight:800;font-size:1.3rem;color:#fff;text-decoration:none}
header.top .brand small{display:block;font-weight:400;font-size:.8rem;opacity:.9}
header.top form{margin-left:auto;display:flex;gap:6px}
header.top input{border:none;border-radius:6px;padding:7px 10px;min-width:180px;font:inherit}
header.top button{border:none;border-radius:6px;padding:7px 10px;background:#fff;color:var(--accent);font:inherit;cursor:pointer}
nav.main{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:20}
nav.main .wrap{max-width:1160px;margin:0 auto;padding:6px 16px 8px;display:flex;flex-wrap:wrap;gap:4px 26px;font-size:.9rem}
.navg{display:flex;flex-direction:column;min-width:0}
.navg .lab{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-top:2px}
.navg .links{display:flex;flex-wrap:wrap;gap:0 12px}
nav.main a{text-decoration:none;padding:3px 0;white-space:nowrap;color:var(--accent)}
nav.main a.active{font-weight:700;border-bottom:2px solid var(--accent2)}
.navg.voorstel .lab{color:var(--accent2)}
main{max-width:1160px;margin:0 auto;padding:18px 16px 60px}
h1{font-size:1.9rem;line-height:1.15;margin:.3rem 0 .6rem;text-wrap:balance}h2{font-size:1.35rem;color:var(--accent);margin:1.6rem 0 .5rem;border-bottom:2px solid var(--line);padding-bottom:.3rem;text-wrap:balance}
h3{font-size:1.08rem;margin:1.1rem 0 .4rem;color:var(--accent2)}
p{margin:.45rem 0 .8rem}.lead{font-size:1.12rem}.muted{color:var(--muted)}.small{font-size:.9rem}
section.card,.card{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin:14px 0}
.card.accent{border-left:5px solid var(--accent2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:10px 0}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0}
.kpi .n{font-size:2rem;font-weight:800;color:var(--accent);line-height:1.05;font-variant-numeric:tabular-nums}.kpi .l{font-size:.86rem;color:var(--muted)}
.tag{display:inline-block;font-size:.74rem;padding:2px 8px;border-radius:999px;background:var(--chip);color:var(--chipink);margin-right:4px;white-space:nowrap}
.tag.ok{background:rgba(46,107,58,.14);color:var(--ok)}.tag.warn{background:rgba(154,106,0,.14);color:var(--warn)}.tag.bad{background:rgba(155,44,44,.14);color:var(--bad)}
.tag.analyse{background:rgba(138,59,18,.14);color:var(--accent2)}
table{width:100%;border-collapse:collapse;font-size:.92rem;margin:.5rem 0 1rem}th,td{border:1px solid var(--line);padding:7px 9px;vertical-align:top;text-align:left}th{background:var(--chip);color:var(--chipink)}
tr:nth-child(even) td{background:rgba(0,0,0,.025)}
.tablewrap{overflow-x:auto}
.btn{display:inline-block;background:var(--accent);color:#fff;text-decoration:none;padding:9px 14px;border-radius:8px;font-weight:600;border:none;cursor:pointer;font:inherit}
.btn.secondary{background:var(--chip);color:var(--chipink)}.btn.small{padding:5px 9px;font-size:.85rem}.btn.warm{background:var(--accent2)}
.btn:hover{text-decoration:none;filter:brightness(1.08)}
.bronlink{font-size:.85rem;color:var(--muted)}.bronlink a{margin-right:6px}
.quote{border-left:4px solid var(--accent2);padding:6px 14px;margin:.6rem 0;font-style:italic;background:var(--paper)}
.disclaimer{background:var(--chip);border-left:4px solid var(--accent);padding:10px 14px;border-radius:6px;font-size:.9rem}
.standpunt{background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--accent2);padding:14px 18px;border-radius:8px}
.feit{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
.feit h3{margin:.1rem 0 .4rem;color:var(--ink);font-size:1.05rem}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px;align-items:center}
.filters select,.filters input[type=search],.filters input[type=number]{font:inherit;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink)}
.filters label{font-size:.9rem}
.timeline{list-style:none;margin:0;padding:0;border-left:3px solid var(--line)}
.timeline li{position:relative;padding:0 0 12px 18px;font-size:.95rem}
.timeline li::before{content:"";position:absolute;left:-8px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--accent);border:2px solid var(--paper)}
.timeline li.toekomst::before{background:var(--accent2)}
.timeline .d{font-weight:700;color:var(--accent);margin-right:6px}
.timeline .g{font-size:.78rem;background:var(--chip);color:var(--chipink);padding:1px 7px;border-radius:999px;margin-right:6px}
#map{height:70vh;min-height:420px;border:1px solid var(--line);border-radius:10px;background:#eef0ee}
#minimap{height:400px;border:1px solid var(--line);border-radius:10px;background:#eef0ee}
.legend{font-size:.85rem;display:flex;flex-wrap:wrap;gap:8px 16px;margin:.4rem 0}.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:4px;vertical-align:-1px}
.leaflet-popup-content{font-size:.9rem;line-height:1.4}.leaflet-popup-content h4{margin:0 0 .3rem}
.viewerwrap{display:grid;grid-template-columns:320px 1fr;gap:14px}.viewerwrap>*{min-width:0}.viewerwrap aside{overflow-wrap:anywhere}
@media (max-width:900px){.viewerwrap{grid-template-columns:1fr}}
.viewerframe{width:100%;height:80vh;border:1px solid var(--line);border-radius:10px;background:#fff}
footer{max-width:1160px;margin:0 auto;padding:16px 16px 40px;font-size:.82rem;color:var(--muted);border-top:1px solid var(--line)}
ol.clean,ul.clean{padding-left:1.3rem}ol.clean li,ul.clean li{margin:.35rem 0}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
.srch mark{background:var(--hl)}
img.resp{max-width:100%;height:auto;border:1px solid var(--line);border-radius:8px}
.docbody h1{font-size:1.4rem}.docbody h2{font-size:1.15rem}.docbody table{font-size:.85rem}
/* startpagina */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
@media (max-width:820px){.hero{grid-template-columns:1fr}}
.hero .intro{font-size:1.08rem}
.hist{list-style:none;padding:0;margin:0}
.hist li{display:grid;grid-template-columns:120px 1fr;gap:12px;padding:8px 0;border-top:1px solid var(--line)}
.hist li:first-child{border-top:none}
.hist .per{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.hist h3{margin:0 0 .25rem;font-size:1rem;color:var(--ink)}
@media (max-width:520px){.hist li{grid-template-columns:1fr}}
.wegwijzer{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin:8px 0}
.wegwijzer a.item{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.wegwijzer a.item:hover{border-color:var(--accent);text-decoration:none}
.wegwijzer a.item b{display:block;color:var(--accent);margin-bottom:3px}
.wegwijzer a.item span{font-size:.88rem;color:var(--muted)}
/* documenten */
.doc{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0;display:grid;grid-template-columns:1fr auto;gap:10px 18px;align-items:start}
@media (max-width:720px){.doc{grid-template-columns:1fr}}
.doc h3{margin:.1rem 0 .4rem;color:var(--ink);font-size:1.08rem}
.doc .gebruik{font-size:.9rem;color:var(--muted)}
.doc .acties{display:flex;flex-direction:column;gap:6px;min-width:200px}
.doc .acties .btn{text-align:center}
/* uitwegen en voorwaarden */
.uw{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:12px 0}
.uw h3{margin:.1rem 0 .5rem;color:var(--ink)}
.uw .blok{margin:.3rem 0 .6rem}
.uw .blok b.k{color:var(--accent)}
.rv{display:grid;grid-template-columns:52px 1fr;gap:10px;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin:10px 0}
.rv .nr{font-weight:800;font-size:1.2rem;color:var(--accent);font-variant-numeric:tabular-nums}
.rv.hard{border-left:5px solid var(--bad)}.rv.borging{border-left:5px solid var(--warn)}.rv.kosten{border-left:5px solid var(--accent2)}
.rv h3{margin:0 0 .3rem;color:var(--ink);font-size:1.02rem}
/* tijdlijn (interactief) */
.tlbar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0}
.tlbar .grp{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tlbar .grp .lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-right:2px}
.chip{border:1px solid var(--line);background:var(--chip);color:var(--chipink);border-radius:999px;padding:3px 10px;font:inherit;font-size:.82rem;cursor:pointer}
.chip.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.chip.lane{border-left-width:5px;border-left-color:var(--lc)}
.chip.lane.on{background:var(--lc);border-color:var(--lc);color:#fff}
.era{display:flex;align-items:center;gap:6px;font-size:.85rem}
.era input[type=range]{width:120px}
.era .val{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}
.tlbar .cnt{font-size:.85rem;color:var(--muted);margin-left:auto}
#tlh{height:560px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
#tlh.hidden,#tlv.hidden{display:none}
.vis-timeline{border:none;font:inherit}
.vis-item{border-width:1px;border-radius:6px;font-size:.8rem;color:var(--ink);background:var(--paper)}
.vis-item.vis-selected{box-shadow:0 0 0 2px var(--accent2)}
.vis-item .vis-item-content{padding:3px 7px}
.vis-labelset .vis-label{font-size:.8rem;font-weight:700;color:var(--ink)}
.vis-labelset .vis-label .vis-inner{padding:6px 8px}
.vis-time-axis .vis-text{color:var(--ink);opacity:.85;font-size:.75rem}
.vis-panel.vis-center,.vis-panel.vis-left,.vis-panel.vis-right,.vis-panel.vis-top,.vis-panel.vis-bottom{border-color:var(--line)}
.vis-foreground .vis-group{border-bottom:1px solid var(--line)}
.vis-item.toekomst{border-style:dashed}
.vis-item.lane-crailo{border-color:var(--l-crailo);border-left-width:4px}.vis-item.lane-huizen{border-color:var(--l-huizen);border-left-width:4px}.vis-item.lane-hilversum{border-color:var(--l-hilversum);border-left-width:4px}
.vis-item.lane-bel{border-color:var(--l-bel);border-left-width:4px}.vis-item.lane-gm{border-color:var(--l-gm);border-left-width:4px}.vis-item.lane-provincie{border-color:var(--l-provincie);border-left-width:4px}.vis-item.lane-rijk{border-color:var(--l-rijk);border-left-width:4px}
.vis-item.vis-point .vis-item-content{padding-left:2px}
.vis-item.vis-dot{border-width:4px}
.vis-current-time{background:var(--accent2)}
.vis-tooltip{font:inherit;font-size:.82rem;max-width:380px;white-space:normal;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.18)}
#tlv{position:relative}
.vtl-head{position:sticky;top:calc(env(safe-area-inset-top,0px) + 74px);z-index:5;display:grid;gap:6px;padding:6px 0;background:var(--bg)}
.vtl-head .h{font-size:.74rem;font-weight:800;line-height:1.15;border:1px solid var(--lc);border-radius:8px;padding:6px 8px;color:var(--lc);background:var(--paper);min-height:40px;display:flex;align-items:center}
.vtl-grid{display:grid;gap:6px;align-items:start}
.vtl-year{grid-column:1 / -1;position:sticky;z-index:4;font-size:1.25rem;font-weight:800;color:var(--accent);padding:4px 4px 2px;margin-top:8px;border-bottom:1px solid var(--line);background:var(--bg)}
.vtl-gap{grid-column:1 / -1;text-align:center;font-size:.8rem;color:var(--muted);border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:3px;margin:4px 0}
.vtl-card{border:1px solid var(--line);border-left:4px solid var(--lc);border-radius:8px;background:var(--paper);padding:7px 9px;font-size:.83rem;cursor:pointer}
.vtl-card:hover{box-shadow:0 0 0 1px var(--lc)}
.vtl-card.toekomst{border-style:dashed;border-left-style:solid}
.vtl-card .d{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.vtl-card .t{margin:2px 0 4px;line-height:1.35}
.vtl-card .m{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.vtl-card .m .tag{margin:0}
#tldetail{position:sticky;bottom:0;z-index:6}
#tldetail .card{margin:10px 0 0;box-shadow:0 -6px 18px rgba(0,0,0,.08)}
#tldetail .sluit{float:right}
@media (max-width:760px){.vtl-head{display:none}.vtl-grid{grid-template-columns:1fr !important}.vtl-card{grid-column:1 !important}}
.preview-note{background:var(--hl);color:var(--ink);border-bottom:1px solid var(--line);font-size:.84rem;line-height:1.45}
.preview-note .wrap{max-width:1160px;margin:0 auto;padding:8px 16px}
.preview-note b{color:var(--accent2)}
.preview-warn{background:var(--hl);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:10px 0;font-size:.9rem}


/* ---------- kop en navigatie */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:1300;box-shadow:0 2px 8px rgba(0,0,0,.12)}
header.top .wrap{padding:10px 16px;gap:8px 14px}
header.top .brand{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.55rem;letter-spacing:.01em}
header.top .brand small{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:.74rem;opacity:.85}
header.top nav.top{display:flex;flex-wrap:wrap;gap:2px 4px;margin-left:8px}
header.top nav.top a{color:#fff;text-decoration:none;padding:6px 10px;border-radius:6px;font-size:.95rem;white-space:nowrap}
header.top nav.top a:hover{background:rgba(255,255,255,.14);text-decoration:none}
header.top nav.top a.active{background:rgba(255,255,255,.22);font-weight:700}
header.top form{margin-left:auto}
header.top .menubtn{display:none;margin-left:auto;background:transparent;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:6px;padding:6px 10px;font:inherit;cursor:pointer}
@media (max-width:860px){header.top .menubtn{display:inline-block}header.top nav.top{display:none;flex-basis:100%;flex-direction:column;gap:2px;padding:4px 0 2px}
 body.menu-open header.top nav.top{display:flex}header.top form{margin-left:0;flex-basis:100%}header.top input{flex:1}}
nav.main{display:none}
nav.sub{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:76px;z-index:1250}
nav.sub .wrap{max-width:1160px;margin:0 auto;padding:6px 16px;display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:.86rem}
nav.sub .lab{font-size:.68rem;letter-spacing:.07em;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-right:6px}
nav.sub a{text-decoration:none;color:var(--accent);padding:3px 9px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
nav.sub a:hover{border-color:var(--line);text-decoration:none}
nav.sub a.active{background:var(--accent2);color:#fff}
nav.sub.vert .wrap{align-items:flex-start;padding:8px 16px}
nav.sub.vert a{font-size:.8rem;color:var(--muted);padding:2px 7px;order:2}
nav.sub.vert a.done{opacity:.55}
nav.sub.vert a.active{order:1;font-size:1.05rem;font-weight:700;color:#fff;background:var(--accent2);border:1px solid var(--accent2);padding:6px 14px;margin-right:10px;border-radius:10px}
nav.sub.vert a.active::after{content:"";}
nav.sub.vert .lab{order:0;align-self:center}
#tlwrap{overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--paper)}#tlwrap #tlh{border:0;border-radius:0}
.tlhint{font-size:.85rem;color:var(--muted);margin:.4rem 0 .2rem}
.tlpan{display:flex;align-items:center;gap:8px;margin:.2rem 0 .6rem}.tlpan input[type=range]{flex:1;min-width:0}.tlpan .lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.dual{position:relative;width:240px;height:30px;display:inline-block;vertical-align:middle}
.dual .track{position:absolute;left:0;right:0;top:13px;height:4px;background:var(--line);border-radius:2px}
.dual .fill{position:absolute;top:13px;height:4px;background:var(--accent);border-radius:2px}
.dual input[type=range]{position:absolute;left:0;right:0;top:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}
.dual input[type=range]::-webkit-slider-runnable-track{background:transparent;height:30px}.dual input[type=range]::-moz-range-track{background:transparent}
.dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #fff;box-shadow:0 0 0 1px var(--accent);margin-top:6px;cursor:pointer}
.dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:16px;height:16px;border-radius:50%;background:var(--accent);border:2px solid #fff;cursor:pointer}
.tlleg{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:.8rem;margin:.3rem 0 .5rem}.tlleg span{display:inline-flex;align-items:center;gap:5px}.tlleg i{width:12px;height:12px;border-radius:3px;display:inline-block}
.vis-item.s-besluit{border-left:5px solid #1f4e79;background:#e8f0f9}.vis-item.s-vergunning{border-left:5px solid #2e6b3a;background:#e6f3e8}.vis-item.s-verlenging{border-left:5px solid #ef6c00;background:#fdeedd}.vis-item.s-plan{border-left:5px solid #6b2d8f;background:#efe6f5}.vis-item.s-bericht{border-left:5px solid #0e7490;background:#e0f3f7}.vis-item.s-wet{border-left:5px solid #5f6670;background:#eceef1}.vis-item.s-provincie{border-left:5px solid #9a6a00;background:#f8f0d8}.vis-item.s-regio{border-left:5px solid #8a3b12;background:#f6e7df}.vis-item.s-huizen{border-left:5px solid #455a64;background:#e9edf0}.vis-item.s-crailo{border-left:5px solid #c62828;background:#fbe4e4}.vis-item.s-toekomst{border-left:5px dashed #9a6a00;background:#fff8e1}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .vis-item[class*=" s-"]{background:var(--paper)}}
:root[data-theme=dark] .vis-item[class*=" s-"]{background:var(--paper)}
.leaflet-tooltip.lochover{font-size:.8rem;line-height:1.35;max-width:260px;white-space:normal}
.buurtgrens{pointer-events:none}
/* ---------- geschiedenispagina */
.gsec{scroll-margin-top:var(--subh,120px)}
.gsec h3{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.15rem;margin:1.2rem 0 .3rem}
figure.gfig{margin:1rem 0 1.2rem;max-width:760px}figure.gfig img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:8px;background:var(--paper)}
figure.gfig figcaption{font-size:.86rem;color:var(--muted);margin-top:.35rem;line-height:1.4}
.galerij{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:.8rem 0 1.2rem}.galerij figure.gfig{margin:0;max-width:none}.galerij figure.gfig img{aspect-ratio:3/2;object-fit:contain;background:#efe9dc}
.tabelwrap{overflow-x:auto;margin:.5rem 0}.tabelwrap table{min-width:520px}
.bronlijst{list-style:none;padding:0;margin:.2rem 0 .8rem}.bronlijst li{padding:4px 0;border-bottom:1px dotted var(--line);font-size:.93rem}
.meerlink{font-weight:600}
/* ---------- leeswijzer: horizontale lijn met bolletjes, labels om en om boven en onder */
nav.sub.lijn .wrap{display:flex;flex-wrap:nowrap;align-items:stretch;gap:0;padding:2px 16px}
nav.sub.lijn .lab{align-self:center;flex:none;margin-right:14px}
nav.sub.lijn .baan{position:relative;flex:1;min-width:0;display:flex;align-items:stretch}
nav.sub.lijn .baan::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line);transform:translateY(-50%)}
nav.sub.lijn .baan .vul{position:absolute;left:0;top:50%;height:3px;width:0;background:var(--accent2);transform:translateY(-50%);transition:width .25s ease;border-radius:2px}
nav.sub.lijn .baan a{flex:1;min-width:0;position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:66px;padding:3px 2px;margin:0;border:0;border-radius:0;background:none;text-decoration:none;color:var(--muted);font-size:.72rem;line-height:1.15;text-align:center;white-space:normal;z-index:1}
nav.sub.lijn .baan a:nth-child(even){justify-content:flex-end}
nav.sub.lijn .baan a:hover{border:0;color:var(--accent)}
nav.sub.lijn .baan a::before{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--line);transform:translate(-50%,-50%);box-sizing:border-box;transition:all .2s ease}
nav.sub.lijn .baan a.done::before{background:var(--accent2);border-color:var(--accent2)}
nav.sub.lijn .baan a.done{color:var(--muted);opacity:.8}
nav.sub.lijn .baan a.active{color:var(--accent);font-weight:700;font-size:.92rem;opacity:1;background:none}
nav.sub.lijn .baan a.active::before{width:18px;height:18px;background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px rgba(31,78,121,.18)}
nav.sub.lijn .baan a .t{display:block;max-width:100%;overflow-wrap:anywhere}
nav.sub.lijn .baan a.active .t{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:none;background:var(--paper);padding:0 6px;line-height:1.2}
nav.sub.lijn .baan a.active:nth-child(odd) .t{top:5px}nav.sub.lijn .baan a.active:nth-child(even) .t{bottom:5px}
nav.sub.lijn .baan a.active{overflow:visible;z-index:2}
@media (max-width:760px){
  nav.sub.lijn .wrap{padding:2px 10px}nav.sub.lijn .lab{display:none}
  nav.sub.lijn .baan a{height:58px;font-size:.68rem}
  nav.sub.lijn .baan a:not(.active) .t{display:none}
  nav.sub.lijn .baan a.active .t{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--paper);padding:0 6px;font-size:.85rem}
  nav.sub.lijn .baan a.active:nth-child(odd) .t{top:2px}nav.sub.lijn .baan a.active:nth-child(even) .t{bottom:2px}
  nav.sub.lijn .baan a.active{overflow:visible}
}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:2.1rem}
h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:1.45rem;border-bottom:none;padding-bottom:0;margin:1.5rem 0 .4rem}
.lead{font-size:1.12rem;max-width:72ch}
p{max-width:76ch}
.btnrow{display:flex;flex-wrap:wrap;gap:8px;margin:.6rem 0 1rem}
/* ---------- startpagina */
.hero5{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:30px 28px;margin:6px 0 16px}
.hero5 h1{margin:0 0 .4rem;font-size:2.4rem}
.hero5 .intro{font-size:1.15rem;color:var(--muted);margin:0 0 1rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:8px 0}
.tiles a.tile{display:block;text-decoration:none;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.tiles a.tile:hover{border-color:var(--accent);text-decoration:none}
.tiles a.tile b{display:block;color:var(--accent);margin-bottom:3px;font-size:1.05rem}
.tiles a.tile span{font-size:.9rem;color:var(--muted)}
.brief{background:var(--soft);border:1px solid var(--line);border-left:5px solid var(--accent2);padding:16px 20px;border-radius:10px;margin:18px 0 18px}
.brief p{max-width:80ch}
.agenda{list-style:none;margin:0;padding:0}
.agenda li{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:.95rem}
.agenda li:first-child{border-top:none}
.agenda .d{font-weight:700;color:var(--accent2);font-variant-numeric:tabular-nums}
@media (max-width:520px){.agenda li{grid-template-columns:1fr}}
/* ---------- blokken en uitklappers */
details.uit{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 14px;margin:8px 0}
details.uit summary{cursor:pointer;font-weight:700;color:var(--accent);padding:4px 0}
details.uit[open] summary{margin-bottom:.4rem}
.stap{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:10px 0}
.stap h2{margin:.1rem 0 .4rem;font-size:1.25rem}
.stap .pr{font-size:.92rem;color:var(--muted)}
.vraagblok{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.vraagblok h3{margin:.1rem 0 .3rem;color:var(--ink)}
.thema{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.thema h3{margin:.1rem 0 .3rem;color:var(--ink)}
.thema .r{font-size:.85rem;color:var(--muted)}
.tag.toel{background:rgba(138,59,18,.14);color:var(--accent2)}
.gem{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:10px 0}
.gem[hidden]{display:none}
.chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}
.chips .lab{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin-right:2px}
.leeg{padding:12px 14px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:.95rem}
#loclijst table{font-size:.88rem}
/* ---------- leesvenster als venster */
.ux-modal[hidden]{display:none!important}
.ux-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:clamp(8px,3vw,32px)}
.ux-modal-backdrop{position:absolute;inset:0;background:rgba(6,30,51,.72)}
.ux-modal-dialog{position:relative;width:min(1100px,100%);height:min(90dvh,940px);background:var(--paper);border-radius:14px;box-shadow:0 26px 70px rgba(0,0,0,.5);display:flex;flex-direction:column;overflow:hidden}
.ux-modal-head{display:flex;gap:8px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line)}
.ux-modal-head strong{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.95rem}
.ux-modal-head a,.ux-modal-head button{font:inherit;font-size:.83rem;font-weight:700;border:1px solid var(--line);background:var(--chip);padding:7px 10px;border-radius:7px;color:var(--chipink);cursor:pointer;text-decoration:none;white-space:nowrap}
.ux-modal-frame{width:100%;border:0;flex:1;min-height:0;background:#fff}
body.modal-open{overflow:hidden}
.gevonden{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}.gevonden .feit{margin:0}.gevonden .meer{font-weight:600;text-decoration:none;border-bottom:1px solid var(--accent)}
.dossec{border-top:3px solid var(--line);margin-top:34px;padding-top:6px;scroll-margin-top:var(--subh,165px)}
h2.sec{font-size:1.8rem;margin:.6rem 0 .4rem}
#stand,#komend,#waarom{scroll-margin-top:var(--subh,165px)}
.loclabel{background:rgba(255,255,255,.92);border:1px solid #cfd8dc;border-radius:4px;padding:1px 5px;font-size:.72rem;font-weight:600;color:#1c1f24;box-shadow:none;white-space:nowrap}
.loclabel::before{display:none}
.loclabel-gesloten{opacity:.7;font-weight:400}
#map.nolabels .loclabel,#map.zoomklein .loclabel{display:none}
.dossec{border-top:3px solid var(--line);margin-top:34px;padding-top:6px;scroll-margin-top:var(--subh,165px)}
h2.sec{font-size:1.8rem;margin:.6rem 0 .4rem}
#stand,#komend,#waarom{scroll-margin-top:var(--subh,165px)}
#map{height:72vh;min-height:480px}
.legend .k{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--paper);border:1px solid var(--line);font-weight:600}
.legend .k i{width:14px;height:14px;border:2px solid #fff;box-shadow:0 0 0 1px #999}
.legend .k.gepland i{border:2px dashed #666;background:transparent}
.legend .k.gesloten i{opacity:.35}
footer{font-size:.84rem}
footer .f{display:flex;flex-wrap:wrap;gap:6px 18px}
@media print{header.top,nav.sub,.tlbar,#tldetail,.ux-modal{display:none}body{background:#fff;color:#000}}
/* ---------- beeldmerk, kleuren en kopregels */
:root{--accent:#0b4f9c;--chipink:#0b4f9c;--blauw:#0b4f9c;--blauwd:#083d7a;--blauwl:#1a93e0;--blauwz:#e6f1fb;--blauwr:#bcd6ef;
 --h-papier:#f7eed6;--h-papier2:#efe3c2;--h-vlak:#fdf7e7;--h-rood:#8e1b14;--h-goud:#c9962b;--h-groen:#4b6a2c;--h-inkt:#2b2114;--h-lijn:#dcc98f;--h-muted:#6b5a3a}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--blauwz:#1b2a3d;--blauwr:#2f4a6b;--h-papier:#26201a;--h-papier2:#1d1915;--h-vlak:#2f2820;--h-rood:#e8927f;--h-goud:#d9b25a;--h-groen:#a3c47f;--h-inkt:#efe6d2;--h-lijn:#5c4d2e;--h-muted:#c2b394}}
:root[data-theme=dark]{--blauwz:#1b2a3d;--blauwr:#2f4a6b;--h-papier:#26201a;--h-papier2:#1d1915;--h-vlak:#2f2820;--h-rood:#e8927f;--h-goud:#d9b25a;--h-groen:#a3c47f;--h-inkt:#efe6d2;--h-lijn:#5c4d2e;--h-muted:#c2b394}
/* kopbalk: licht, met het beeldmerk links en een blauwe onderrand */
header.top{background:var(--paper);color:var(--accent);border-bottom:4px solid var(--blauw);box-shadow:0 1px 0 var(--blauwl)}
header.top .wrap{padding:8px 16px}
header.top .brand{display:flex;align-items:center;gap:12px;color:var(--accent);font-weight:700}
header.top .brand img{height:62px;width:auto;display:block;background:#fff;border-radius:8px}
header.top .brand small{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-style:italic;font-size:.86rem;line-height:1.25;color:var(--muted);opacity:1}
header.top nav.top a{color:var(--accent);font-weight:600}
header.top nav.top a:hover{background:var(--blauwz)}
header.top nav.top a.active{background:var(--blauw);color:#fff}
header.top input{border:1px solid var(--blauwr);background:var(--paper);color:var(--ink);min-width:150px}
header.top nav.top a{padding:6px 9px}
@media (max-width:1100px) and (min-width:861px){header.top nav.top a{font-size:.88rem;padding:6px 7px}}
header.top button{background:var(--blauw);color:#fff}
header.top .menubtn{border-color:var(--blauw);color:var(--accent)}
@media (max-width:860px){header.top .brand img{height:50px}header.top .brand small{display:none}}
/* startpagina: hero met het beeldmerk */
.hero5{background:linear-gradient(135deg,var(--blauwz) 0%,var(--paper) 62%);border:1px solid var(--blauwr);display:grid;grid-template-columns:1fr auto;gap:12px 28px;align-items:center;padding:26px 28px}
.hero5 h1{color:var(--accent);font-size:2.6rem}
.hero5 .intro{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-size:1.25rem}
.hero5 .hmerk{width:150px;height:auto;justify-self:end;background:#fff;border-radius:12px;box-shadow:0 2px 10px rgba(11,79,156,.15)}
@media (max-width:640px){.hero5{grid-template-columns:1fr}.hero5 .hmerk{width:110px;justify-self:start;order:-1}}
h2{color:var(--accent)}
figure.cijfers{margin:14px auto 20px;max-width:760px}
figure.cijfers a{display:block}figure.cijfers img{width:100%;height:auto;display:block;border:1px solid var(--blauwr);border-radius:12px;background:#fff}
figure.cijfers figcaption{font-size:.86rem;color:var(--muted);margin-top:.4rem;line-height:1.4}
/* geschiedenispagina: traditionele kleuren, serif, perkament */
body.gesch{background:var(--h-papier2)}
body.gesch main{background:var(--h-papier);color:var(--h-inkt);border:1px solid var(--h-lijn);border-top:0;padding:0 28px 60px;box-shadow:0 0 0 1px rgba(201,150,43,.18)}
body.gesch main a{color:var(--h-rood)}
body.gesch main p,body.gesch main li,body.gesch main td,body.gesch main th,body.gesch main figcaption{font-family:Georgia,"Times New Roman",serif}
body.gesch main p{font-size:1.04rem;line-height:1.6}
body.gesch main .muted,body.gesch main figure.gfig figcaption,body.gesch main .bronlink{color:var(--h-muted)}
body.gesch main h2{color:var(--h-rood);border-bottom:1px solid var(--h-goud);padding-bottom:.3rem;margin-top:2rem}
body.gesch main h3,body.gesch main .gsec h3{color:var(--h-groen);font-weight:700;font-size:1.1rem}
body.gesch main .card,body.gesch main section.card{background:var(--h-vlak);border-color:var(--h-lijn)}
body.gesch main .tag{background:rgba(201,150,43,.18);color:var(--h-rood)}
body.gesch main figure.gfig img{border:1px solid var(--h-goud);background:var(--h-vlak);box-shadow:0 1px 6px rgba(43,33,20,.12)}
body.gesch main .galerij figure.gfig img{background:var(--h-vlak)}
body.gesch main table th{background:var(--h-vlak)}
body.gesch main .bronlijst li{border-bottom-color:var(--h-lijn)}
body.gesch nav.sub.lijn .baan a.active{color:var(--h-rood)}body.gesch nav.sub.lijn .baan a.active::before{background:var(--h-rood);border-color:var(--h-rood);box-shadow:0 0 0 4px rgba(142,27,20,.18)}
body.gesch nav.sub.lijn .baan .vul,body.gesch nav.sub.lijn .baan a.done::before{background:var(--h-goud);border-color:var(--h-goud)}
body.gesch nav.sub .lab{color:var(--h-rood)}
.ghero{position:relative;display:grid;grid-template-columns:1fr 250px;gap:24px;align-items:center;margin:0 -28px 20px;padding:36px 28px 30px;border-bottom:3px double var(--h-goud);overflow:hidden;background:var(--h-papier)}
.ghero::before{content:"";position:absolute;inset:0;background:url(../img/merk/kaart_crailoo_historisch.jpg) center/cover no-repeat;opacity:.4;mix-blend-mode:multiply}
.ghero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--h-papier) 0%,rgba(247,238,214,.55) 45%,rgba(247,238,214,0) 100%)}
.ghero>*{position:relative;z-index:1}
.ghero h1{color:var(--h-rood);font-size:2.6rem;margin:0 0 .4rem;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.ghero .lead{color:var(--h-inkt);font-family:Georgia,"Times New Roman",serif;font-style:italic;margin:0}
.ghero .gwapen{width:250px;height:auto;border:3px double var(--h-goud);border-radius:8px;box-shadow:0 3px 14px rgba(43,33,20,.25)}
@media (max-width:760px){.ghero{grid-template-columns:1fr;padding:24px 20px}.ghero .gwapen{width:190px;justify-self:center}.ghero h1{font-size:2.1rem}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .ghero::before{opacity:.18;mix-blend-mode:normal}:root:not([data-theme=light]) .ghero::after{background:linear-gradient(90deg,var(--h-papier) 0%,rgba(38,32,26,.6) 45%,rgba(38,32,26,0) 100%)}:root:not([data-theme=light]) .ghero h1{text-shadow:none}}
:root[data-theme=dark] .ghero::before{opacity:.18;mix-blend-mode:normal}:root[data-theme=dark] .ghero::after{background:linear-gradient(90deg,var(--h-papier) 0%,rgba(38,32,26,.6) 45%,rgba(38,32,26,0) 100%)}:root[data-theme=dark] .ghero h1{text-shadow:none}
figure.gfig.breed{max-width:900px}figure.gfig.breed a{display:block}
.gsier{float:right;width:170px;height:auto;margin:0 0 12px 22px;filter:drop-shadow(0 2px 6px rgba(43,33,20,.25))}
@media (max-width:640px){.gsier{width:120px;margin-left:12px}}
#s-gebeurtenissen::after{content:"";display:block;clear:both}
nav.sub.lijn .baan a.active:first-child .t{left:0;transform:none}nav.sub.lijn .baan a.active:last-child .t{left:auto;right:0;transform:none}
/* ---------- schuifbalk tijdlijn */
.tlpan{margin:.3rem 0 .5rem}
.tlrail{position:relative;flex:1;min-width:0;height:16px;background:var(--chip);border:1px solid var(--line);border-radius:999px;cursor:pointer;touch-action:none}
.tlrail:focus{outline:2px solid var(--accent);outline-offset:2px}
.tlknop{position:absolute;top:1px;bottom:1px;left:0;width:30%;background:var(--accent);border-radius:999px;cursor:grab;box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.tlknop:active{cursor:grabbing;filter:brightness(1.1)}
/* ---------- iconen bij Word/PDF-knoppen; pagina's starten bovenaan */
.btn.word,.btn.pdf{display:inline-flex;align-items:center;gap:7px}
.btn .ico{width:26px;height:26px;flex:none;display:block}
.btn.word{background:#fff;color:#1b5fb4;border:1px solid #1b5fb4}
.btn.pdf{background:#fff;color:#b71c1c;border:1px solid #c62828}
.btn.word:hover,.btn.pdf:hover{filter:none;background:var(--blauwz)}.btn.pdf:hover{background:#fbe4e4}
.btn.small .ico{width:21px;height:21px}
/* ---------- passages per onderwerp */
details.fgroep{margin:8px 0}details.fgroep>summary .fnaam{font-size:1.02rem}
.fkort{margin:.2rem 0 .6rem;padding-left:1.3rem}.fkort li{margin:.25rem 0;line-height:1.4}.fkort a{text-decoration:none}.fkort a:hover{text-decoration:underline}
details.fvol{background:var(--soft);margin:.2rem 0 .4rem}details.fvol>summary{font-weight:600;font-size:.92rem}
.fkaarten .feit{margin:8px 0}.feit.licht{box-shadow:0 0 0 3px var(--accent2)}

/* ---------- passage woonstraten in thema-kaart */
.thema h4{margin:.7rem 0 .25rem;font-size:1rem}