/* RED+ Radar, stijl UI v3 (30 september 2026).
   Richting (PRODUCT.md, .impeccable/surfaces/radar-static-index-html.md): Apple Kaarten. De kaart ligt onder alles;
   zoeken, de lijst en het dossier zijn bladen van licht materiaal die erboven zweven. Kleuren uit het logo van RED+:
   petrol is de enige interactiekleur, groen de positieve staat, limoen en geel alleen in het logo en de klassemarkers.
   Eén familie: de systeemletter. Alle kleuren, stralen en schaduwen lopen via de tokens hieronder, zodat een donkere
   modus later alleen dit blok opnieuw hoeft te definiëren. */

/* 1. Tokens ------------------------------------------------------------------------------------------------ */
:root{
  color-scheme:light;
  /* neutralen: koel met een petrol zweem. Contrast gerekend op wit en op glas boven de donkerste kaart (luchtfoto) */
  --ink:#0F1D24;                  /* eerste tekst: 17:1 op wit */
  --tekst-2:#4A5A62;              /* secundair: 7,2:1 op wit, 5,0:1 op glas boven zwart */
  --tekst-3:#667780;              /* hulptekst, alleen op dekkend wit: 4,6:1 */
  --icoon:#52636B;                /* lijn-iconen: 4,3:1 op glas */
  --lijn:rgba(15,45,58,.12);      /* haarlijn */
  --lijn-2:rgba(15,45,58,.22);    /* rand van een invoerveld */
  --vlak:#FFFFFF;                 /* dekkend vlak: groepen, pagina-panelen */
  --groep:#EEF1F3;                /* koelgrijze groepsachtergrond */
  --groep-2:#E3E8EB;              /* dieper vlak: kolommen, tabelkop */
  --vulling:rgba(38,70,86,.075);  /* bedieningsvlak: zoekveld, secundaire knop, baan van een schakelaar */
  --vulling-2:rgba(38,70,86,.12); /* hover */
  --vulling-3:rgba(38,70,86,.19); /* ingedrukt */
  --scrim:rgba(12,26,33,.36);     /* achter een vergroot blad of een modaal */
  --scrim-rondleiding:rgba(15,29,36,.55); /* alleen de rondleiding: donkerder, zodat het uitgelichte element eruit springt */
  /* merk en staat */
  --petrol:#004C67; --petrol-hover:#003F56; --petrol-druk:#00324A;
  --petrol-tint:rgba(0,76,103,.10); --petrol-tint-2:rgba(0,76,103,.17);
  --op-petrol:#FFFFFF;
  --groen:#008D73;                /* positieve staat als vlak zonder tekst */
  --groen-tekst:#00735E;          /* groen als tekst: 5,8:1 op wit, 5,1:1 op de groene tint */
  --groen-vlak:#007D66;           /* groen vlak met witte tekst: 5,1:1 */
  --groen-tint:rgba(0,141,115,.12);
  --limoen:#88B626; --geel:#E4DF00; --grijsblauw:#5C7C89;
  --rood:#B42318; --rood-tint:rgba(180,35,24,.09);              /* gevaar en rode vlaggen, spaarzaam */
  --let:#6B6400; --let-tint:#F5F3D0; --let-rand:rgba(107,100,0,.38); /* waarschuwing, afgeleid van het geel */
  --stippel:rgba(15,45,58,.45);   /* rand van test- en voorbeeldlabels: neutraal, gestippeld */
  --positie:#0F1D24;              /* op de positielijst: een inktrand */
  /* klassen: letter plus vorm (A cirkel, B ruit, C vierkant, D open ring) */
  --kl-A:#004C67; --kl-B:#007D66; --kl-C:#88B626; --kl-D:#5A6B74;
  --kl-letter:#FFFFFF; --kl-C-letter:#0F1D24; --kl-ring:#FFFFFF; --kl-C-ring:#5E8A12;
  /* glas: alleen waar de kaart erachter ligt */
  --glas:rgba(248,250,251,.86);
  --glas-dik:rgba(246,248,249,.93);
  --glas-filter:saturate(180%) blur(24px);
  --glas-rand:rgba(255,255,255,.6);
  /* diepte: altijd een offset en een zachte vervaging */
  --sh-rust:0 1px 2px rgba(0,0,0,.07);
  --sh-knop:0 1px 2px rgba(0,0,0,.12), 0 1px 1px rgba(0,0,0,.04);
  --sh-zwevend:0 1px 2px rgba(0,0,0,.08), 0 6px 18px -4px rgba(0,0,0,.2);
  --sh-blad:0 1px 2px rgba(0,0,0,.06), 0 10px 30px -8px rgba(0,0,0,.22), 0 30px 60px -30px rgba(0,0,0,.26);
  --sh-pop:0 2px 6px rgba(0,0,0,.10), 0 18px 44px -12px rgba(0,0,0,.32);
  /* stralen */
  --r-blad:16px; --r-paneel:14px; --r-groep:12px; --r-ctl:9px; --r-klein:6px;
  /* type: vaste schaal, cijfers tabulair */
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --t11:11px; --t12:12px; --t13:13px; --t15:15px; --t17:17px; --t20:20px; --t28:28px;
  /* beweging: één moment, uitlopend */
  --uit:cubic-bezier(.2,.8,.2,1);
  --duur:200ms;
  /* maten */
  --balk:52px; --rand:12px; --paneel-b:360px; --dossier-b:420px;
  --focusring:0 0 0 3px rgba(0,76,103,.28);
}
/* Glas met een dekkende terugval: zonder backdrop-filter of bij verminderde transparantie een dekkend vlak. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--glas:#F6F8F9; --glas-dik:#F4F6F7}
}
@media (prefers-reduced-transparency:reduce){
  :root{--glas:#F6F8F9; --glas-dik:#F4F6F7; --glas-filter:none}
}

/* 2. Basis en browseroppervlakken ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:var(--groep); color:var(--ink); font:400 var(--t13)/1.45 var(--font);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-variant-numeric:tabular-nums; overflow:hidden}
button,input,select,textarea{font:inherit; color:inherit; letter-spacing:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0; font-weight:600}
p{margin:0}
::selection{background:rgba(0,76,103,.2); color:var(--ink)}
input,textarea{caret-color:var(--petrol)}
a{color:var(--petrol); text-decoration:none; text-underline-offset:2px}
a:hover{text-decoration:underline}
b,strong{font-weight:600}
code,pre{font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:var(--t11)}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
.ico{width:16px; height:16px; flex:none; vertical-align:-3px}
:focus-visible{outline:2px solid var(--petrol); outline-offset:2px}
:focus:not(:focus-visible){outline:none}
*{scrollbar-width:thin; scrollbar-color:rgba(15,45,58,.24) transparent}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(15,45,58,.22); border-radius:99px; border:3px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(15,45,58,.34)}
::placeholder{color:var(--tekst-2); opacity:1}
.skiplink{position:fixed; left:var(--rand); top:-60px; z-index:2000; background:var(--vlak); color:var(--ink); padding:8px 12px;
  border-radius:var(--r-ctl); box-shadow:var(--sh-zwevend)}
.skiplink:focus{top:var(--rand)}

/* laadbalk: dunne petrol lijn boven in beeld zolang de API bezig is */
.laadbalk{position:fixed; top:0; left:0; right:0; height:2px; z-index:1200; pointer-events:none; opacity:0; transition:opacity .2s var(--uit); overflow:hidden}
.laadbalk.aan{opacity:1}
.laadbalk i{position:absolute; top:0; bottom:0; width:30%; background:var(--petrol); animation:laad 1.1s var(--uit) infinite}
@keyframes laad{0%{left:-30%}100%{left:100%}}

/* 3. Materiaal -------------------------------------------------------------------------------------------- */
.glas{background:var(--glas); -webkit-backdrop-filter:var(--glas-filter); backdrop-filter:var(--glas-filter);
  border:.5px solid var(--lijn); box-shadow:var(--sh-blad), inset 0 0 0 .5px var(--glas-rand)}

/* 4. Componenten ------------------------------------------------------------------------------------------ */

/* 4.1 knoppen: primair (petrol), secundair (vulling), randloos, klein, groot, icoon; echte ingedrukte staat */
.knop{display:inline-flex; align-items:center; justify-content:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r-ctl);
  border:none; background:var(--vulling); color:var(--ink); font-size:var(--t13); font-weight:500; white-space:nowrap;
  transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit), transform 120ms var(--uit)}
.knop:hover{background:var(--vulling-2)}
.knop:active{background:var(--vulling-3); transform:scale(.98)}
.knop:focus-visible{outline:none; box-shadow:0 0 0 2px var(--vlak), 0 0 0 4px var(--petrol)}
.knop:disabled{opacity:.42; cursor:default; transform:none; background:var(--vulling)}
.knop[aria-busy="true"]{cursor:progress; opacity:.72}
.knop .ico{width:15px; height:15px}
.knop.primair,.knop.groen{background:var(--petrol); color:var(--op-petrol); box-shadow:var(--sh-knop)}
.knop.primair:hover,.knop.groen:hover{background:var(--petrol-hover)}
.knop.primair:active,.knop.groen:active{background:var(--petrol-druk)}
.knop.primair:disabled,.knop.groen:disabled{background:var(--petrol); box-shadow:none}
.knop.rood{color:var(--rood)}
.knop.klein{height:26px; padding:0 10px; font-size:var(--t12); border-radius:var(--r-klein)}
.knop.klein .ico{width:14px; height:14px}
.knop.groot{height:40px; padding:0 18px; font-size:var(--t15); border-radius:10px}
.knop.icoon{width:30px; padding:0}
.knop.klein.icoon{width:26px}
.knop.actief,.knop[aria-pressed="true"]{background:var(--petrol-tint-2); color:var(--petrol)}
.knop.meer{margin:6px auto 2px; display:flex}

/* randloze icoonknop (balk, dossierkop, kaartbediening) */
.icoonknop{position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px;
  border:none; background:transparent; color:var(--icoon); padding:0;
  transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.icoonknop .ico{width:18px; height:18px}
.icoonknop:hover{background:var(--vulling); color:var(--ink)}
.icoonknop:active{background:var(--vulling-3)}
.icoonknop.on,.icoonknop[aria-expanded="true"],.icoonknop[aria-pressed="true"]{background:var(--petrol-tint); color:var(--petrol)}
.icoonknop:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}

/* ronde knop met vulling (sluiten, vergroten) */
.sluit,.rondknop{display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; border:none; padding:0;
  background:var(--vulling); color:var(--tekst-2); transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.sluit .ico,.rondknop .ico{width:15px; height:15px}
.sluit:hover,.rondknop:hover{background:var(--vulling-2); color:var(--ink)}
.sluit:active,.rondknop:active{background:var(--vulling-3)}
.rondknop[aria-pressed="true"]{background:var(--petrol-tint-2); color:var(--petrol)}

/* tekstlink als knop */
.linkbtn,.linkknop{border:none; background:none; padding:0; color:var(--petrol); font-size:var(--t12); font-weight:500; text-underline-offset:2px}
.linkbtn:hover,.linkknop:hover{text-decoration:underline}
.linkknop.rood{color:var(--rood)}

/* 4.2 invoervelden */
select,input[type=search],input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],textarea{
  font-size:var(--t13); color:var(--ink); background:var(--vlak); border:1px solid var(--lijn-2); border-radius:8px;
  min-height:30px; padding:5px 10px; outline:none; transition:border-color var(--duur) var(--uit), box-shadow var(--duur) var(--uit)}
textarea{line-height:1.45}
select{appearance:none; -webkit-appearance:none; padding-right:28px; cursor:pointer;
  background:var(--vlak) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2352636B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center}
select:hover,input:hover,textarea:hover{border-color:rgba(15,45,58,.34)}
input:focus-visible,select:focus-visible,textarea:focus-visible,input:focus,textarea:focus{border-color:var(--petrol); box-shadow:var(--focusring); outline:none}
select:focus:not(:focus-visible){box-shadow:none; border-color:var(--lijn-2)}
input:disabled,select:disabled,textarea:disabled{opacity:.55}
input[type=checkbox],input[type=radio],input[type=range]{accent-color:var(--petrol)}
input[type=checkbox]{width:15px; height:15px; margin:0}

/* zoekveld: gevuld, zonder rand, vergrootglas links */
.zoekveld{position:relative; display:block}
.zoekveld .ico{position:absolute; left:10px; top:50%; margin-top:-8px; color:var(--icoon); pointer-events:none}
.zoekveld input{width:100%; height:36px; padding:0 12px 0 34px; border:none; border-radius:10px; background:var(--vulling); font-size:var(--t15)}
.zoekveld input:hover{background:var(--vulling-2)}
.zoekveld input:focus{background:var(--vlak); box-shadow:var(--focusring), inset 0 0 0 1px var(--petrol)}
.zoekveld input::-webkit-search-cancel-button{-webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; cursor:pointer;
  background:var(--icoon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M17 7 7 17M7 7l10 10'/%3E%3C/svg%3E") center/9px no-repeat}

/* schakelaar (toggle): een echte checkbox met role=switch */
input.schakelaar{appearance:none; -webkit-appearance:none; position:relative; flex:none; width:34px; height:20px; margin:0; border-radius:99px;
  background:var(--vulling-3); cursor:pointer; transition:background-color var(--duur) var(--uit)}
input.schakelaar::before{content:""; position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#FFFFFF;
  box-shadow:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.08); transition:transform var(--duur) var(--uit)}
input.schakelaar:checked{background:var(--petrol)}
input.schakelaar:checked::before{transform:translateX(14px)}
input.schakelaar:active::before{width:19px}
input.schakelaar:checked:active::before{transform:translateX(11px)}
input.schakelaar:focus-visible{outline:2px solid var(--petrol); outline-offset:2px}
.schakelrij{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:30px; font-size:var(--t13); color:var(--ink); cursor:pointer}

/* 4.3 capsules en chips */
.capsule{display:inline-flex; align-items:center; gap:5px; height:30px; padding:0 10px; border-radius:99px; border:none;
  background:var(--vulling); color:var(--ink); font-size:var(--t13); font-weight:500; white-space:nowrap;
  transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.capsule .ico{width:14px; height:14px; color:var(--icoon)}
.capsule .ico.pijltje{width:12px; height:12px; margin-right:-2px}
.capsule:hover{background:var(--vulling-2)}
.capsule:active{background:var(--vulling-3)}
.capsule[aria-expanded="true"],.capsule.actief{background:var(--petrol-tint-2); color:var(--petrol)}
.capsule[aria-expanded="true"] .ico,.capsule.actief .ico{color:var(--petrol)}
.capsule.gezet{background:var(--petrol-tint); color:var(--petrol)}
.capsule.gezet .ico{color:var(--petrol)}
.capsule:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}
.fteller{min-width:17px; height:17px; padding:0 5px; border-radius:99px; background:var(--petrol); color:var(--op-petrol);
  font-size:var(--t11); font-weight:600; display:inline-flex; align-items:center; justify-content:center}

.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; height:26px; padding:0 10px; border-radius:99px; border:none; font-size:var(--t12); font-weight:500;
  background:var(--vulling); color:var(--ink); cursor:pointer; user-select:none; transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.chip:hover{background:var(--vulling-2)}
.chip:active{background:var(--vulling-3)}
.chip.on{background:var(--petrol); color:var(--op-petrol)}
.chip:focus-visible{outline:none; box-shadow:0 0 0 2px var(--vlak), 0 0 0 4px var(--petrol)}

/* 4.4 gesegmenteerde schakelaar */
.segment{display:inline-flex; align-items:center; gap:2px; padding:2px; border-radius:var(--r-ctl); background:var(--vulling)}
.segment > button{position:relative; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:28px; min-width:76px; padding:0 14px;
  border:none; border-radius:7px; background:transparent; color:var(--ink); font-size:var(--t13); font-weight:500;
  transition:background-color var(--duur) var(--uit), box-shadow var(--duur) var(--uit)}
.segment > button:hover:not(.on){background:var(--vulling)}
.segment > button:active:not(.on){background:var(--vulling-2)}
.segment > button.on{background:var(--vlak); box-shadow:var(--sh-knop); font-weight:600}
.segment > button:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}

/* 4.5 popover en menu: dekkend wit, los in de body, geplaatst door popover.js */
.popover{position:fixed; z-index:900; min-width:220px; max-width:min(360px, calc(100vw - 24px)); max-height:calc(100vh - 80px); overflow:auto;
  background:var(--vlak); border-radius:var(--r-groep); border:.5px solid var(--lijn); box-shadow:var(--sh-pop); padding:6px;
  transform-origin:top left; animation:popin 160ms var(--uit)}
@keyframes popin{from{opacity:0; transform:scale(.97) translateY(-4px)}}
.menuoptie{display:flex; align-items:center; gap:8px; min-height:30px; padding:4px 10px 4px 8px; border-radius:7px; font-size:var(--t13); color:var(--ink); cursor:pointer; user-select:none}
.menuoptie:hover{background:var(--vulling)}
.menuoptie:has(input:focus-visible){background:var(--petrol-tint); box-shadow:inset 0 0 0 1.5px var(--petrol)}
.menuoptie input{position:absolute; opacity:0; width:1px; height:1px; pointer-events:none}
.menuoptie .ico{width:15px; height:15px; color:var(--petrol); visibility:hidden}
.menuoptie:has(input:checked) .ico{visibility:visible}
.menuoptie:has(input:checked){font-weight:600}
.menuitem{display:flex; align-items:center; gap:8px; width:100%; min-height:30px; padding:4px 10px; border:none; border-radius:7px; background:none;
  font-size:var(--t13); color:var(--ink); text-align:left}
.menuitem .ico{color:var(--icoon)}
.menuitem:hover{background:var(--vulling)}
.menuitem:active{background:var(--vulling-2)}
.menuitem:focus-visible{outline:none; background:var(--petrol-tint); box-shadow:inset 0 0 0 1.5px var(--petrol)}
.menukop{padding:8px 10px 8px; display:flex; flex-direction:column; gap:1px; border-bottom:1px solid var(--lijn); margin:0 0 4px}
.menukop b{font-size:var(--t13)}
.menukop span{font-size:var(--t12); color:var(--tekst-2)}
.menuscheid{height:1px; background:var(--lijn); margin:4px 6px}
.menurij{min-height:32px; padding:4px 8px 4px 10px; border-radius:7px}
.menurij:hover{background:var(--vulling)}

/* meer filters: gegroepeerd onder een kop, schakelaars als rijen met haarlijnen */
.fpaneel{width:320px; padding:14px 14px 8px; display:flex; flex-direction:column; gap:14px}
.fprij{display:flex; flex-direction:column; gap:6px}
.flabel{font-size:var(--t12); font-weight:600; color:var(--tekst-2)}
label.fprij select{width:100%}
.fprij .schakelrij{padding:3px 0}
.fprij .schakelrij + .schakelrij{border-top:1px solid var(--lijn); padding-top:6px}
.fpvoet{display:flex; justify-content:flex-end; margin:0 -14px; padding:8px 14px 0; border-top:1px solid var(--lijn)}

/* 4.6 tooltip op randloze knoppen: data-tip, onder de knop; data-tip-pos="links" voor de kaartbediening */
[data-tip]:not(.info)::after{content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(-2px);
  width:max-content; max-width:260px; padding:5px 9px; border-radius:7px; background:var(--ink); color:#FFFFFF; font-size:var(--t12); font-weight:400;
  line-height:1.35; text-align:left; white-space:normal; pointer-events:none; opacity:0; z-index:950; box-shadow:var(--sh-zwevend);
  transition:opacity 120ms var(--uit), transform 120ms var(--uit); transition-delay:0s}
[data-tip]:not(.info):hover::after,[data-tip]:not(.info):focus-visible::after{opacity:1; transform:translateX(-50%) translateY(0); transition-delay:450ms}
[data-tip-pos="links"]:not(.info)::after{top:50%; left:auto; right:calc(100% + 10px); transform:translateY(-50%) translateX(2px)}
[data-tip-pos="links"]:not(.info):hover::after,[data-tip-pos="links"]:not(.info):focus-visible::after{transform:translateY(-50%) translateX(0)}
[data-tip-pos="rechts"]:not(.info)::after{left:auto; right:0; transform:translateY(-2px)}
[data-tip-pos="rechts"]:not(.info):hover::after,[data-tip-pos="rechts"]:not(.info):focus-visible::after{transform:translateY(0)}
[aria-expanded="true"][data-tip]::after{display:none}

/* info-teken met uitleg (dossier, leerstrip): lijn-icoon in plaats van een letter */
.info{position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; color:var(--icoon);
  cursor:help; vertical-align:-3px; font-style:normal}
.info .ico{width:15px; height:15px}
.info:hover,.info:focus-visible{color:var(--petrol)}
.info::after{content:attr(data-tip); position:absolute; top:calc(100% + 8px); left:-10px; width:260px; padding:8px 10px; border-radius:8px;
  background:var(--ink); color:#FFFFFF; font-size:var(--t12); font-weight:400; line-height:1.45; text-align:left; text-transform:none; letter-spacing:0;
  opacity:0; pointer-events:none; z-index:900; box-shadow:var(--sh-zwevend); transition:opacity 150ms var(--uit)}
.info:hover::after,.info:focus::after{opacity:1}
/* een verborgen tooltip telt anders mee als scrollbare breedte: pas bij hover of focus in de opmaak */
.info:not(:hover):not(:focus)::after{display:none}

/* 4.7 toast: onderaan in het midden, donker */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(10px); z-index:1100; max-width:min(560px, 92vw);
  background:rgba(15,29,36,.94); color:#FFFFFF; font-size:var(--t13); padding:10px 16px; border-radius:12px; box-shadow:var(--sh-pop);
  opacity:0; pointer-events:none; transition:opacity 220ms var(--uit), transform 220ms var(--uit)}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0)}
.toast.fout{background:var(--rood)}
.toast b{font-weight:600; color:#FFFFFF}

/* 4.8 tabel */
.tbl{width:100%; border-collapse:collapse; font-size:var(--t12)}
.tbl th{text-align:left; font-size:var(--t11); font-weight:600; color:var(--tekst-2); padding:7px 10px 6px 0; border-bottom:1px solid var(--lijn); white-space:nowrap}
.tbl td{padding:8px 10px 8px 0; border-bottom:1px solid var(--lijn); vertical-align:top; color:var(--ink)}
.tbl tr:last-child td{border-bottom:none}
.tbl td:last-child,.tbl th:last-child{padding-right:0}
.tbl td.n,.tbl th.n{text-align:right; white-space:nowrap}
.tbl tr.onbekend td{color:var(--tekst-2)}
.tbl .blok td{background:var(--groep); font-weight:600; font-size:var(--t12); color:var(--ink); padding:6px 10px}
.tbl .blok td:first-child{border-radius:6px 0 0 6px} .tbl .blok td:last-child{border-radius:0 6px 6px 0}
.tbl.ruimte{margin-top:12px}
.tbl.klassen td{font-size:var(--t13); vertical-align:middle}
.tbl.klassen td:first-child{width:38px}
.tsub{display:block; font-size:var(--t11); color:var(--tekst-2); font-weight:400; margin-top:1px}
.tcode{font-size:var(--t11); color:var(--tekst-2)}

/* 4.9 lege staat en laadstaat (skelet, geen spinner in de inhoud) */
.emptystate{padding:36px 24px; text-align:center; color:var(--tekst-2); font-size:var(--t13); line-height:1.5}
.emptystate .titel{display:block; margin-bottom:6px; font-size:var(--t15); font-weight:600; color:var(--ink)}
.emptystate.groot{padding:52px 28px}
.laden{padding:28px 20px; text-align:center; color:var(--tekst-2); font-size:var(--t13); animation:puls 1.4s ease-in-out infinite}
@keyframes puls{50%{opacity:.45}}
.skelet{display:flex; flex-direction:column; gap:12px}
.skelet i,.skeletrij i{display:block; border-radius:var(--r-groep);
  background:linear-gradient(90deg, var(--vulling) 0%, var(--vulling-2) 50%, var(--vulling) 100%); background-size:200% 100%; animation:skelet 1.3s linear infinite}
@keyframes skelet{to{background-position:-200% 0}}
.skelet .s-foto{height:200px}
.skelet .s-kaart{height:132px}
.skelet .s-kaart.kort{height:84px}
.skeletrij{display:grid; grid-template-columns:24px 1fr 44px; gap:6px 10px; padding:12px 10px}
.skeletrij i:nth-child(1){width:24px; height:24px; border-radius:50%}
.skeletrij i:nth-child(2){height:13px; width:78%; border-radius:5px; margin-top:2px}
.skeletrij i:nth-child(3){height:15px; border-radius:5px}
.skeletrij i:nth-child(4){grid-column:2; height:10px; width:52%; border-radius:5px}

/* 4.10 tags: rustige labels, elke soort een eigen vorm */
.tags{display:flex; flex-wrap:wrap; gap:4px}
.tag{display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:var(--r-klein); font-size:var(--t11); font-weight:500;
  white-space:nowrap; background:var(--vulling); color:var(--tekst-2)}
.tag.top{background:none; height:auto; padding:0; border-radius:0; font-size:var(--t12); font-weight:400; color:var(--tekst-2); white-space:normal}
.tag.trig::before,.tag.vroeg::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--groen)}
.tag.vroeg::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--groen)}
.tag.vest::before{content:""; width:6px; height:6px; border-radius:1.5px; background:var(--icoon)}
.tag.pos{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--positie); font-weight:600}
.tag.uitsl{background:transparent; color:var(--tekst-2); border:1px dashed rgba(15,45,58,.34)}
.tag.dek{background:transparent; padding:0}
.tag.pcpm{background:transparent; border:1px dashed rgba(15,45,58,.34)}
/* vergund, niet gestart: een indicatie, geen feit; neutraal en gestippeld (De Eerlijk-Anders Regel) */
.tag.vzs{background:transparent; color:var(--ink); border:1px dotted var(--stippel)}
.tag.lbl{background:transparent; box-shadow:inset 0 0 0 1px var(--lijn-2); text-transform:lowercase}
.tag.lbl::before{content:""; width:6px; height:6px; border:1.5px solid currentColor; border-radius:1.5px}
.tag.lbl-netwerk::before{border-radius:50%}

/* bron, voorbeeld en onbekend: altijd zichtbaar anders dan een feit */
.bron{display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:5px; font-size:var(--t11); font-weight:500;
  background:var(--vulling); color:var(--tekst-2); white-space:nowrap; vertical-align:1px}
/* testomgeving en voorbeelddata: neutraal met een gestippelde rand, zonder geel */
.bron.warn,.kvklabel{background:transparent; color:var(--tekst-2); border:1px dotted var(--stippel)}
.kadchip{font-weight:600; letter-spacing:.01em}
.onb{display:inline-flex; align-items:center; height:18px; padding:0 6px; border-radius:5px; font-size:var(--t11); font-weight:500; color:var(--tekst-2);
  background:transparent; border:1px dashed rgba(15,45,58,.34); white-space:nowrap; vertical-align:1px}

/* status: tekst plus een vorm */
.spil{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px 0 7px; border-radius:99px; font-size:var(--t11); font-weight:600;
  white-space:nowrap; background:var(--vulling); color:var(--ink)}
.spil::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--icoon)}
.spil.sd-interessant{background:var(--groen-tint); color:var(--groen-tekst)}
.spil.sd-interessant::before{background:var(--groen)}
.spil.sd-in_behandeling::before{background:var(--petrol); border-radius:2px}
.spil.sd-afgewezen{color:var(--tekst-2)}
.spil.sd-afgewezen::before{background:transparent; box-shadow:inset 0 0 0 1.5px var(--icoon)}
.kdot{display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--icoon)}
.kdot.sd-nieuw{background:transparent; box-shadow:inset 0 0 0 2px var(--icoon)}
.kdot.sd-interessant{background:var(--groen)}
.kdot.sd-in_behandeling{background:var(--petrol); border-radius:2.5px}
.kdot.sd-afgewezen{background:var(--vulling-3)}

/* verschil met de vorige run */
.delta{display:inline-flex; align-items:center; height:17px; padding:0 5px; border-radius:5px; font-size:var(--t11); font-weight:600}
.delta.pos{color:var(--groen-tekst); background:var(--groen-tint)}
.delta.neg{color:var(--rood); background:var(--rood-tint)}

/* 4.11 klasse: letter in een vorm per klasse (A cirkel, B ruit, C vierkant, D open ring) */
.kl{display:inline-flex; align-items:center; gap:6px; font-size:var(--t13); font-weight:600; color:var(--ink); white-space:nowrap}
.kl b{font-weight:600}
.kl i,.klvorm i{position:relative; flex:none; width:22px; height:22px; display:inline-flex; align-items:center; justify-content:center; isolation:isolate;
  font-style:normal; font-size:var(--t11); font-weight:700; color:var(--kl-letter); line-height:1}
.kl i::before,.klvorm i::before{content:""; position:absolute; inset:0; z-index:-1; background:var(--kc)}
.kl-A{--kc:var(--kl-A)} .kl-B{--kc:var(--kl-B)} .kl-C{--kc:var(--kl-C)} .kl-D{--kc:var(--kl-D)}
.kl-A i::before{border-radius:50%}
.kl-B i::before{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); inset:-2.5px}
.kl-C i{color:var(--kl-C-letter)}
.kl-C i::before{border-radius:4px; inset:1px}
.kl-D i{color:var(--kl-D)}
.kl-D i::before{border-radius:50%; background:var(--vlak); box-shadow:inset 0 0 0 2px var(--kl-D)}
.klvorm{display:inline-flex; flex:none}
.klvorm.l i{width:30px; height:30px; font-size:var(--t13)}
.klvorm.l.kl-D i::before{box-shadow:inset 0 0 0 2.5px var(--kl-D)}
.klvorm.xl i{width:44px; height:44px; font-size:var(--t20)}
.klvorm.xl.kl-D i::before{box-shadow:inset 0 0 0 3px var(--kl-D)}
.kl .plaf{height:18px; display:inline-flex; align-items:center; padding:0 6px; border-radius:99px; font-size:var(--t11); font-weight:500; color:var(--tekst-2);
  box-shadow:inset 0 0 0 1px var(--lijn-2)}
.plafregel{font-size:var(--t13); color:var(--tekst-2); line-height:1.35}

/* 4.12 kleine bouwstenen */
.fbnote{font-size:var(--t13); color:var(--tekst-2); line-height:1.45}
.fbnote.warn{color:var(--let); font-weight:500}
.rij{display:flex; gap:8px; align-items:center; margin-top:10px; flex-wrap:wrap}
.rij.kaal{margin:0}
.minikop{font-size:var(--t13); font-weight:600; color:var(--tekst-2); margin-bottom:6px}
.veldlabel{display:block; font-size:var(--t13); font-weight:500; color:var(--tekst-2); margin:12px 0 5px}
.veldlabel:first-of-type{margin-top:0}
.kv{display:grid; grid-template-columns:auto minmax(0,1fr); font-size:var(--t15)}
.kv > .k,.kv > .v{padding:8px 0; border-top:1px solid var(--lijn)}
.kv > .k:first-child,.kv > .k:first-child + .v{border-top:none; padding-top:2px}
.kv .k{color:var(--tekst-2); padding-right:16px}
.kv .v{color:var(--ink); text-align:right; font-weight:500}
.kv .v .tm{color:var(--tekst-2); font-weight:400; font-size:var(--t13)}
.lagcheck{display:inline-flex; align-items:center; gap:8px; font-size:var(--t13); color:var(--ink); cursor:pointer; user-select:none}
.avatar{width:26px; height:26px; border-radius:50%; background:var(--groep-2); color:var(--ink); font-size:var(--t11); font-weight:600;
  display:inline-flex; align-items:center; justify-content:center; flex:none}
.avatar.m{background:var(--petrol-tint-2); color:var(--petrol)}

/* 5. App-frame en bovenbalk ------------------------------------------------------------------------------- */
.app{position:fixed; inset:0}
.main{position:absolute; inset:0; overflow:hidden}
/* op-kaart: de weergaven die op de schermvullende kaart liggen (Week en Kaart); de rest is een pagina onder de balk */
body:not(.op-kaart) .main{top:var(--balk)}
.board,.page{display:none}
body.view-pijplijn .board{display:flex}
body.view-instellingen #instellingenpage,body.view-uitleg #uitlegpage{display:block}

/* bovenbalk: glas boven de kaart, dekkend wit boven een pagina */
.topbar{position:absolute; top:0; left:0; right:0; z-index:800; height:var(--balk); display:flex; align-items:center; gap:16px;
  padding:0 10px 0 16px; background:var(--vlak); border-bottom:1px solid var(--lijn)}
body.op-kaart .topbar{background:var(--glas); -webkit-backdrop-filter:var(--glas-filter); backdrop-filter:var(--glas-filter);
  border-bottom:.5px solid var(--lijn); box-shadow:0 6px 20px -12px rgba(0,0,0,.3)}
.brand{display:flex; align-items:center; gap:8px; flex:none}
.brand .plus{display:block; width:22px; height:22px}
.brand .naam{font-size:var(--t15); font-weight:600; letter-spacing:-.01em}
.viewswitch{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)}
/* ronde 2: met de labels in de balk staat de schakelaar midden in de ruimte tussen merk en rechterkant */
.topbar .viewswitch{position:static; transform:none; margin:0 auto; flex:none}
.vtel{min-width:18px; height:16px; padding:0 5px; margin-left:1px; border-radius:99px; background:var(--vulling-2); color:var(--tekst-2);
  font-size:var(--t11); font-weight:600; display:inline-flex; align-items:center; justify-content:center}
.vbtn.on .vtel{background:var(--petrol-tint-2); color:var(--petrol)}
.balkrechts{display:flex; align-items:center; gap:14px; min-width:0}
.kvklabel{display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:99px; font-size:var(--t11); font-weight:600;
  white-space:nowrap; cursor:help}
.runinfo{display:flex; align-items:baseline; gap:6px; font-size:var(--t12); color:var(--tekst-2); white-space:nowrap}
.runinfo b{color:var(--ink); font-weight:600}
.balkknoppen{display:flex; align-items:center; gap:2px}
/* balkknop: de randloze icoonknop met zijn label ernaast (ronde 2: niets belangrijks alleen achter een icoon) */
.balkknop{position:relative; display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 10px 0 8px; border:none; border-radius:8px;
  background:transparent; color:var(--ink); font-size:var(--t13); font-weight:500; white-space:nowrap;
  transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.balkknop .ico{width:17px; height:17px; color:var(--icoon)}
.balkknop:hover{background:var(--vulling)}
.balkknop:active{background:var(--vulling-3)}
.balkknop.on,.balkknop[aria-expanded="true"],.balkknop[aria-pressed="true"]{background:var(--petrol-tint); color:var(--petrol)}
.balkknop.on .ico,.balkknop[aria-expanded="true"] .ico,.balkknop[aria-pressed="true"] .ico{color:var(--petrol)}
.balkknop:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}
.gebruiker{display:flex}

/* 6. Kaart: van rand tot rand, met zwevende panelen ------------------------------------------------------- */
#map{position:absolute; inset:0; z-index:0; background:#E8ECEE; isolation:isolate}
body:not(.op-kaart) #map{display:none}
.leaflet-container{font:inherit; background:#E8ECEE}
.leaflet-container a{color:var(--petrol)}
/* één kaart, twee lagensets: in de Kaart de locaties, pins en plangebieden; in de Week alleen de vijf (eigen panes) */
body.view-week #map :is(.leaflet-overlay-pane,.leaflet-marker-pane,.leaflet-shadow-pane),
body:not(.view-week) #map :is(.leaflet-weekvlak-pane,.leaflet-weekmerk-pane){display:none}

/* 6.1 paneel links: gemeente, zoeken, capsule-filters, telling, lijst (Kaart); de vijf van deze week (Week) */
.paneel-kaart{position:absolute; left:var(--rand); top:calc(var(--balk) + var(--rand)); bottom:var(--rand); width:var(--paneel-b); z-index:600;
  display:none; flex-direction:column; border-radius:var(--r-blad); overflow:hidden}
body.view-kaart #paneel,body.view-week #weekpage{display:flex}
.pkop{display:flex; flex-direction:column; gap:10px; padding:14px 12px 12px}
.gemeentekeuze{align-self:flex-start; max-width:100%}
.puitleg{margin:-4px 0 0; font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.gemeentekeuze select{height:34px; min-height:0; max-width:100%; padding:0 26px 0 6px; margin-left:-6px; border:none; border-radius:7px;
  background-color:transparent; background-position:right 7px center; font-size:var(--t20); font-weight:600; color:var(--ink)}
.gemeentekeuze select:hover{background-color:var(--vulling)}
.gemeentekeuze select:focus-visible{box-shadow:0 0 0 2px var(--petrol)}
.capsules{display:flex; flex-wrap:wrap; align-items:center; gap:5px}
.capsules .capsule{padding:0 8px}
.klassekeuze{display:inline-flex; gap:1px; padding:2px; border-radius:99px; background:var(--vulling)}
.klchip{display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:99px; cursor:pointer;
  transition:background-color var(--duur) var(--uit), box-shadow var(--duur) var(--uit)}
.klchip .klvorm i{width:18px; height:18px}
.klchip:hover{background:var(--vulling)}
.klchip:active{background:var(--vulling-2)}
.klchip.on{background:var(--vlak); box-shadow:var(--sh-knop)}
.klassekeuze:has(.on) .klchip:not(.on) .klvorm{opacity:.35}
.klchip:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}
.ptelling{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; padding:4px 10px 10px 16px; border-bottom:.5px solid var(--lijn)}
.ptelling > div{min-width:0}
.count{font-size:var(--t15); color:var(--ink)}
.count b{font-weight:600}
#subcount{font-size:var(--t13); color:var(--tekst-2)}
.capsule.kaal{background:transparent; color:var(--tekst-2); padding:0 6px 0 8px; flex:none}
.capsule.kaal:hover{background:var(--vulling); color:var(--ink)}
.capsule.kaal[aria-expanded="true"]{background:var(--petrol-tint-2); color:var(--petrol)}
.pscroll{flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:6px 6px 10px}
.slist{display:flex; flex-direction:column}
.pscroll .kvkvoet{padding:10px 10px 2px; font-size:var(--t12)}
.pscroll .emptystate{padding:40px 20px}

/* 6.2 lijstrijen (contract): marker, naam op één regel, adres, één redenregel, de volgende stap; haarlijnen die wegvallen
   naast een gemarkeerde rij. Elke regel blijft één regel, zodat er minstens zes rijen in beeld passen. */
.scard{position:relative; display:grid; grid-template-columns:24px minmax(0,1fr) auto; column-gap:10px; padding:11px 10px 12px; border-radius:10px;
  color:inherit; text-align:left; cursor:pointer; transition:background-color var(--duur) var(--uit)}
.scard + .scard::before{content:""; position:absolute; top:0; left:44px; right:10px; height:1px; background:var(--lijn); transition:opacity var(--duur) var(--uit)}
.scard:hover{background:var(--vulling)}
.scard.active{background:var(--petrol-tint-2)}
.scard:hover::before,.scard:hover + .scard::before,.scard.active::before,.scard.active + .scard::before{opacity:0}
.scard:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--petrol)}
.scard .rijmerk{align-self:start; margin-top:0}
.scard .rijmerk i{width:22px; height:22px}
.rijtekst{min-width:0; display:flex; flex-direction:column; gap:2px}
.rijtekst > *{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.scard h3{font-size:var(--t17); font-weight:600; line-height:1.25; color:var(--ink)}
.scard .sub{font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.redenen{font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.redenen .tag.top{display:inline; white-space:nowrap}
.redenen .tag.top + .tag.top::before{content:"\00a0· "; color:var(--icoon)}
.stap{display:flex; align-items:baseline; font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.stap .ico{flex:none; width:13px; height:13px; margin-right:5px; color:var(--icoon); transform:translateY(1.5px)}
.staptekst{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; font-weight:500; color:var(--ink)}
.stap .tag{flex:none; display:inline; height:auto; padding:0; border-radius:0; background:none; font-size:var(--t13); font-weight:400; color:var(--tekst-2)}
.stap .tag::before{content:none}
.stap .staptekst + .tag::before,.stap .tag + .tag::before{content:"\00a0· "; display:inline; width:auto; height:auto; background:none; box-shadow:none; color:var(--icoon)}
.rijlabels{display:flex; gap:4px; margin-top:1px}
.rijlabels > *{flex:0 1 auto; min-width:0}
.rijlabels .tag{display:inline-block; height:18px; line-height:16px; overflow:hidden; text-overflow:ellipsis}
.rijlabels .tag.lbl::before{display:inline-block; margin-right:4px; vertical-align:0}
.rijlabels .dekregel{overflow:hidden; text-overflow:ellipsis; line-height:18px}
.dekregel{font-size:var(--t12); color:var(--tekst-2)}
.dekregel.laag{color:var(--let); font-weight:500}
.rijcijfers{display:grid; grid-template-columns:auto auto; justify-content:end; justify-items:end; align-content:start; column-gap:4px; row-gap:2px; text-align:right}
.rijcijfers .kl{display:contents}
.rijcijfers .kl b{grid-column:1; font-size:var(--t20); line-height:1.15; letter-spacing:-.01em}
.rijcijfers .kl .delta{grid-column:2; align-self:center}
.rijcijfers .m2{grid-column:1 / -1; font-size:var(--t13); line-height:1.35; color:var(--tekst-2); white-space:nowrap}
.rijcijfers .kl .plaf{grid-column:1 / -1; order:3; margin-top:1px; cursor:help}
.rijcijfers .spil{grid-column:1 / -1; order:4; margin-top:2px}
.rijcijfers .onb{grid-column:1 / -1}

/* leerstrip: voorstel uit jullie oordelen, bovenaan de lijst */
.leerstrip{margin:2px 4px 8px; padding:12px 12px 12px; border-radius:var(--r-groep); background:var(--vlak); box-shadow:var(--sh-rust);
  font-size:var(--t13); color:var(--tekst-2); line-height:1.45}
.leerstrip .lkop{display:flex; align-items:center; gap:4px; color:var(--ink)}
.leerstrip b{font-size:var(--t15); font-weight:600; color:var(--ink)}
.leerstrip .lregels{display:flex; flex-wrap:wrap; gap:4px; margin:8px 0 10px}
.leerstrip .lr{display:inline-flex; align-items:center; min-height:22px; padding:1px 8px; border-radius:6px; background:var(--vulling); color:var(--ink); font-weight:500}
.leerstrip .lr.pos{color:var(--groen-tekst)} .leerstrip .lr.neg{color:var(--tekst-2)}
.leerstrip.binnen{margin:0 0 16px; background:var(--groep); box-shadow:none}
.leerstrip.binnen .lr{background:var(--vlak); margin:2px 4px 0 0}

/* 6.2b weekgids (ronde 2): de vijf van deze week in het zwevende paneel, genummerd als hun markers op de kaart. Kop met
   titel, wat je hier doet, de week en de weeknavigatie; daaronder vijf rijen die van boven naar beneden lezen: naam,
   klasse en score met oppervlak, adres, de drie redenen, de volgende stap en de handelingen. Links de luchtfoto met het
   rangnummer in de klassevorm, zoals de marker op de kaart. Vijf rijen mogen ruim zijn: leesbaarheid boven dichtheid. */
.weekwrap{flex:1; min-height:0; display:flex; flex-direction:column}
.wkkop{display:flex; flex-direction:column; gap:3px; padding:14px 12px 12px 16px; border-bottom:.5px solid var(--lijn)}
.wktitel{font-size:var(--t20); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--ink); text-wrap:balance}
.wktitel em{font-style:normal}
.wkintro{font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.wknav{display:flex; align-items:center; gap:8px; margin-top:9px}
.wknav .segment > button{min-width:0; padding:0 10px}
.wknav .segment > button.pijl{width:30px; padding:0}
.wknav .segment > button .ico{width:15px; height:15px; color:var(--icoon)}
.wknav .knop{position:relative; margin-left:auto}
.wkrijen{margin:0; padding:0; list-style:none; display:flex; flex-direction:column}
.wkrij{position:relative; display:grid; grid-template-columns:64px minmax(0,1fr); column-gap:12px; padding:12px 10px 12px;
  border-radius:10px; cursor:pointer; transition:background-color var(--duur) var(--uit)}
.wkrij + .wkrij::before{content:""; position:absolute; top:0; left:86px; right:10px; height:1px; background:var(--lijn); transition:opacity var(--duur) var(--uit)}
.wkrij:hover{background:var(--vulling)}
.wkrij.active{background:var(--petrol-tint-2)}
.wkrij:hover::before,.wkrij:hover + .wkrij::before,.wkrij.active::before,.wkrij.active + .wkrij::before{opacity:0}
.wkrij:has(.titelknop:focus-visible){box-shadow:inset 0 0 0 2px var(--petrol)}
.wkrij .titelknop:focus-visible{outline:none}
.wkfoto{grid-column:1; grid-row:1 / span 3; position:relative; align-self:start; width:64px; height:64px; margin-top:2px; border-radius:var(--r-ctl); background:var(--vulling)}
.wkfoto .luchtfoto{width:64px; height:64px; border-radius:var(--r-ctl); box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.wkfoto .kmerk{position:absolute; left:-6px; top:-6px; cursor:inherit}
.wkrij .rijtekst{grid-column:2; gap:3px}
.wkrij h3{font-size:var(--t17); font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--ink); white-space:normal}
.wkrij .titelknop{-webkit-line-clamp:2}
.wkitem.vervangen .titelknop{display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.wkcijfers{display:flex; align-items:center; gap:8px; margin:2px 0 1px; font-size:var(--t13); color:var(--tekst-2)}
.wkcijfers .kl b{font-size:var(--t17); line-height:1.15; letter-spacing:-.01em}
.wkcijfers .kl .plaf{cursor:help}
.wkcijfers .m2{font-weight:500; color:var(--ink); white-space:nowrap}
.wkrij .sub{font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.wkredenen{margin:0; padding:0; list-style:none; font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.wkredenen li{display:inline}
.wkredenen li + li::before{content:"\00a0· "; color:var(--icoon)}
.wkrij .stap{font-size:var(--t13); line-height:1.4}
.wkrij .stap .ico{width:13px; height:13px}
.wkrij .rijlabels{margin-top:2px}
/* de handelingen als voetregel over de volle breedte van de rij, zodat ze ook in het smalle paneel passen */
.wkacties{grid-column:1 / -1; display:flex; align-items:center; gap:14px; min-width:0; margin-top:10px}
.wkacties .kijklink{height:auto; padding:0; gap:5px; border-radius:var(--r-klein); background:none; box-shadow:none; color:var(--petrol); font-size:var(--t13); font-weight:500}
.wkacties .kijklink:hover{background:none; text-decoration:underline}
.wkacties .kijklink:focus-visible{outline:2px solid var(--petrol); outline-offset:2px}
.wkacties .knop{margin-left:auto}
.wkrij .vervangform{grid-column:1 / -1; display:flex; flex-direction:column; gap:6px; margin-top:8px; cursor:default}
.wkrij .vervangform input{width:100%}
.wkrij .vervangform .rij{margin:0}
.wkscroll .emptystate .knop{margin-top:14px}
.wkvervangen{margin:14px 0 0; padding-top:10px; border-top:.5px solid var(--lijn)}
.wkvervangen h2{margin:0 10px 4px; font-size:var(--t13); font-weight:600; color:var(--tekst-2)}
.wkitem.vervangen{display:grid; grid-template-columns:18px minmax(0,1fr) auto; align-items:start; column-gap:10px; row-gap:1px; padding:7px 10px}
.wkitem.vervangen .vrang{font-size:var(--t15); font-weight:600; color:var(--tekst-2); text-align:right}
.wkitem.vervangen .vnaam{min-width:0; font-size:var(--t15); font-weight:600; color:var(--ink)}
.wkitem.vervangen .vreden{grid-column:2; font-size:var(--t13); color:var(--tekst-2); overflow-wrap:anywhere}
.wkitem.vervangen .kl{grid-column:3; grid-row:1}
.wkhint{margin:12px 10px 0; font-size:var(--t13); line-height:1.45; color:var(--tekst-2)}
.wkhint + .wkhint{margin-top:6px}

/* 6.3 kaartbediening en legenda: kleine glazen stapel rechtsonder, schuift mee met het dossierblad */
.kaartstapel{position:absolute; right:var(--rand); bottom:calc(var(--rand) + 6px); z-index:610; display:none; flex-direction:column; align-items:flex-end; gap:8px;
  transition:right var(--duur) var(--uit)}
body.op-kaart .kaartstapel{display:flex}
body.op-kaart.dossier-open:not(.dossier-vol) .kaartstapel{right:calc(var(--dossier-b) + var(--rand) * 2)}
/* in de Week: geen eigen pin (een Kaart-handeling) en in de legenda alleen de klassen */
body.view-week #pingroep,body.view-week .lgrij.alleenkaart{display:none}
.kgroep{display:flex; flex-direction:column; border-radius:10px}
.kaartstapel .glas{box-shadow:var(--sh-zwevend), inset 0 0 0 .5px var(--glas-rand)}
.kgroep .icoonknop{width:36px; height:36px; border-radius:0; color:var(--ink)}
.kgroep .icoonknop:first-child{border-radius:10px 10px 0 0}
.kgroep .icoonknop:last-child{border-radius:0 0 10px 10px}
.kgroep .icoonknop:only-child{border-radius:10px}
.kgroep .icoonknop .ico{width:17px; height:17px}
.kgroep .icoonknop:disabled{color:var(--icoon); opacity:.45; background:transparent; cursor:default}
.kscheid{height:1px; margin:0 8px; background:var(--lijn)}
.maplegend{border-radius:12px; font-size:var(--t13); color:var(--ink); width:max-content; max-width:260px}
.lgknop{display:flex; align-items:center; gap:10px; width:100%; height:36px; padding:0 8px 0 12px; border:none; border-radius:12px; background:none;
  font-size:var(--t13); font-weight:600; color:var(--ink)}
.lgknop:hover{background:var(--vulling)}
.lgknop:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}
.lgmerken{display:inline-flex; gap:4px}
.lgmerken .klvorm i{width:18px; height:18px}
.lgknop .lgpijl{margin-left:auto; width:14px; height:14px; color:var(--icoon); transition:transform var(--duur) var(--uit)}
.maplegend.open .lgpijl{transform:rotate(180deg)}
.maplegend.open .lgmerken{display:none}
.maplegend.open .lgknop{justify-content:space-between}
.lgbody{display:flex; flex-direction:column; gap:7px; padding:2px 12px 12px}
.lgrij{display:flex; align-items:center; gap:8px}
.lgrij > span:not(.klvorm){margin-left:auto; padding-left:12px; color:var(--tekst-2)}
.lgrij .klvorm i{width:18px; height:18px}
.lgnoot{margin:1px 0 1px; font-size:var(--t12); line-height:1.4; color:var(--tekst-2)}
.sw{display:inline-block; flex:none; width:18px; height:14px; border-radius:3px}
.sw.pos{background:var(--vlak); box-shadow:inset 0 0 0 2.5px var(--positie)}
.sw.pcp{border:1px solid rgba(140,155,163,.8); background:rgba(140,155,163,.14)}

/* 6.4 klassemarker op de kaart: letter plus vorm, witte ring en schaduw; de gekozen marker tilt op */
.kmerk-houder{display:flex; align-items:center; justify-content:center; background:none; border:none}
.kmerk{position:relative; display:flex; align-items:center; justify-content:center; width:22px; height:22px; isolation:isolate; cursor:pointer;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.34)) drop-shadow(0 3px 5px rgba(0,0,0,.16));
  transition:transform var(--duur) var(--uit), filter var(--duur) var(--uit), opacity var(--duur) var(--uit)}
.kmerk::before,.kmerk::after{content:""; position:absolute; z-index:-1}
.kmerk::before{inset:-2px; background:var(--kl-ring)}
.kmerk::after{inset:0; background:var(--kc)}
.kmerk i{font-style:normal; font-size:var(--t11); font-weight:700; line-height:1; color:var(--kl-letter)}
.kmerk.kl-A::before,.kmerk.kl-A::after,.kmerk.kl-D::before,.kmerk.kl-D::after{border-radius:50%}
/* de ruit met ring heeft dezelfde voetafdruk (26 px) als de cirkel en het vierkant; de ring is overal 2 px dik */
.kmerk.kl-B::before{inset:-2px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.kmerk.kl-B::after{inset:.83px; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.kmerk.kl-C::before{border-radius:6px; background:var(--kl-C-ring)}
.kmerk.kl-C::after{border-radius:4px}
.kmerk.kl-C i{color:var(--kl-C-letter)}
.kmerk.kl-D::after{background:var(--vlak); box-shadow:inset 0 0 0 2px var(--kl-D)}
.kmerk.kl-D i{color:var(--kl-D)}
.kmerk.gedempt{opacity:.55}
/* telbubbel: vorm en kleur van de beste klasse in de bundel, het aantal erin */
.kmerk.bundel{width:24px; height:24px}
.kmerk.bundel.breed{width:30px; height:30px}
.kmerk.bundel i{font-size:var(--t11); font-weight:700; letter-spacing:-.02em}
.kmerk.positie{filter:drop-shadow(1.5px 0 0 var(--positie)) drop-shadow(-1.5px 0 0 var(--positie)) drop-shadow(0 1.5px 0 var(--positie))
  drop-shadow(0 -1.5px 0 var(--positie)) drop-shadow(0 2px 4px rgba(0,0,0,.3))}
.kmerk-houder:hover .kmerk,.kmerk.zweef{transform:scale(1.14); opacity:1}
.kmerk.gekozen{transform:scale(1.36); opacity:1; filter:drop-shadow(0 2px 2px rgba(0,0,0,.3)) drop-shadow(0 8px 14px rgba(0,0,0,.3))}
#map.ver .kmerk{transform:scale(.8)}
#map.ver .kmerk-houder:hover .kmerk,#map.ver .kmerk.zweef{transform:scale(.95)}
#map.ver .kmerk.gekozen{transform:scale(1.25)}
/* genummerde marker van de weekgids: het rangnummer in de klassevorm, iets groter en ook ver weg op volle maat */
.kmerk.wk{width:24px; height:24px}
.kmerk.wk i{font-size:var(--t13)}
#map.ver .kmerk.wk{transform:none}
#map.ver .kmerk-houder:hover .kmerk.wk,#map.ver .kmerk.wk.zweef{transform:scale(1.14)}
#map.ver .kmerk.wk.gekozen{transform:scale(1.36)}
.eigenpin{background:none; border:none; filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
.eigenpin svg{display:block}

/* 6.5 kaartmodus, popups, tooltips en bronvermelding */
.kaartmodus{position:absolute; top:calc(var(--balk) + var(--rand)); left:calc(50% + (var(--paneel-b) + var(--rand)) / 2); transform:translateX(-50%); z-index:700;
  display:flex; align-items:center; gap:12px; padding:5px 5px 5px 14px; border-radius:99px; font-size:var(--t13); color:var(--ink); white-space:nowrap}
body.dossier-open .kaartmodus{left:calc(50% + (var(--paneel-b) - var(--dossier-b)) / 2)}
.leaflet-popup-content-wrapper{background:var(--vlak); color:var(--ink); border-radius:var(--r-groep); box-shadow:var(--sh-pop); padding:0}
.leaflet-popup-content{margin:12px 14px; font-size:var(--t13); line-height:1.45; min-width:180px}
.leaflet-popup-content form{display:flex; flex-direction:column; gap:6px}
.leaflet-popup-content form .knop{align-self:flex-start; margin-top:2px}
.leaflet-popup-content input,.leaflet-popup-content textarea{width:100%}
.leaflet-popup-tip{background:var(--vlak); box-shadow:var(--sh-rust)}
.leaflet-container a.leaflet-popup-close-button{top:6px; right:6px; width:22px; height:22px; border-radius:50%; color:var(--tekst-2); font:400 17px/21px var(--font)}
.leaflet-container a.leaflet-popup-close-button:hover{background:var(--vulling); color:var(--ink); text-decoration:none}
.leaflet-tooltip{font:inherit; font-size:var(--t12); line-height:1.4; color:var(--ink); background:var(--vlak); border:none; border-radius:8px;
  box-shadow:var(--sh-zwevend); padding:6px 9px}
.leaflet-tooltip-top::before{border-top-color:var(--vlak)} .leaflet-tooltip-bottom::before{border-bottom-color:var(--vlak)}
.leaflet-tooltip-left::before{border-left-color:var(--vlak)} .leaflet-tooltip-right::before{border-right-color:var(--vlak)}
.tippos{color:var(--ink); font-weight:600}
.tipzacht{color:var(--tekst-2); font-size:var(--t12)}
.tipknop{margin-top:8px}
.leaflet-control-attribution.leaflet-control{margin:0 0 var(--rand) 0; padding:2px 8px; border-radius:6px; background:rgba(248,250,251,.82); color:var(--tekst-2); font-size:var(--t11)}
.leaflet-control-attribution a{color:var(--tekst-2)}
body.op-kaart .leaflet-bottom.leaflet-left{left:calc(var(--rand) * 2 + var(--paneel-b))}
/* de bronvermelding blijft binnen het vrije kaartvlak, ook naast een open dossier */
body.op-kaart .leaflet-control-attribution{max-width:calc(100vw - var(--paneel-b) - var(--rand) * 4 - 64px)}
body.op-kaart.dossier-open .leaflet-control-attribution{max-width:calc(100vw - var(--paneel-b) - var(--dossier-b) - var(--rand) * 6 - 44px)}

/* 7. Dossierblad: rechts over de kaart (Kaart en Week), sleepbaar in breedte, één leesas -------------------- */
.side{display:none; position:absolute; right:var(--rand); top:calc(var(--balk) + var(--rand)); bottom:var(--rand); width:var(--dossier-b); z-index:620}
body.op-kaart.dossier-open .side{display:block}
.dossier{position:absolute; inset:0; display:none; flex-direction:column; min-height:0; overflow:hidden; border-radius:var(--r-blad)}
.dossier.open{display:flex}
body.op-kaart .dossier.open{background:var(--glas-dik); -webkit-backdrop-filter:var(--glas-filter); backdrop-filter:var(--glas-filter);
  border:.5px solid var(--lijn); box-shadow:var(--sh-blad), inset 0 0 0 .5px var(--glas-rand); animation:inschuif 220ms var(--uit)}
@keyframes inschuif{from{opacity:0; transform:translateX(18px)}}

/* kop: klassemarker, naam, adres; score en oppervlak; rechts vergroten en sluiten */
.dhead{flex:none; padding:16px 14px 12px 16px}
.dtitel{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; align-items:start}
.dmerk{padding-top:1px}
.dmerk:empty{display:none}
.dnaamblok{min-width:0}
.dhead h2{font-size:var(--t20); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; overflow-wrap:anywhere}
.dhead .sub{display:flex; flex-direction:column; gap:6px; margin-top:3px; font-size:var(--t13); color:var(--tekst-2)}
.dhead .sub:empty{display:none}
.dhead .sub .tags{gap:4px}
.dknoppen{display:flex; align-items:center; gap:6px; margin-top:-1px}
.dknoppen .dvolknop{position:relative; height:28px; border-radius:99px; padding:0 11px 0 9px}
.dstat{display:grid; grid-template-columns:1fr 1fr; margin-top:12px; border-radius:var(--r-groep); background:var(--vlak); box-shadow:var(--sh-rust)}
.dstat:empty{display:none}
.dstat > div{display:flex; flex-direction:column; gap:1px; padding:9px 12px 10px; min-width:0}
.dstat > div + div{border-left:1px solid var(--lijn)}
.kernrij{display:flex; align-items:center; gap:6px}
.dstat b{font-size:var(--t20); font-weight:600; line-height:1.25; letter-spacing:-.01em}
.dstat .kernscore > span,.dstat .kernm2 > span{font-size:var(--t13); color:var(--tekst-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.skeletstat{grid-column:1 / -1; display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:12px}
.skeletstat i{height:30px; border-radius:6px; background:var(--vulling); animation:puls 1.4s ease-in-out infinite}

/* oordeel: direct onder de kop, één primaire actie; de gekozen status is ingedrukt */
.dfoot{flex:none; padding:0 14px 12px 16px}
.dfoot:empty{display:none}
.fbrow{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.fblabel{font-size:var(--t13); font-weight:500; color:var(--tekst-2)}
.dfoot .fblabel{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.fbtn{flex:1 1 auto; min-width:0; display:inline-flex; align-items:center; justify-content:center; gap:5px; height:36px; padding:0 10px; border:none; border-radius:var(--r-ctl);
  background:var(--vulling); color:var(--ink); font-size:var(--t15); font-weight:500; white-space:nowrap;
  transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit), transform 120ms var(--uit)}
.fbtn span{overflow:hidden; text-overflow:ellipsis}
.fbtn .ico{width:15px; height:15px; color:var(--icoon)}
.fbtn:hover{background:var(--vulling-2)}
.fbtn:active{background:var(--vulling-3); transform:scale(.98)}
.fbtn:focus-visible{outline:none; box-shadow:0 0 0 2px var(--vlak), 0 0 0 4px var(--petrol)}
.fbtn.primair{background:var(--petrol); color:var(--op-petrol); box-shadow:var(--sh-knop)}
.fbtn.primair .ico{color:var(--op-petrol)}
.fbtn.primair:hover{background:var(--petrol-hover)}
.fbtn.primair:active{background:var(--petrol-druk)}
.fbtn.on{background:var(--vulling-3); color:var(--ink); box-shadow:inset 0 1px 2px rgba(0,0,0,.14); font-weight:600}
.fbtn.on .ico{color:var(--ink)}
.fbtn.primair.on{background:var(--groen-vlak); color:#FFFFFF; box-shadow:inset 0 1px 2px rgba(0,0,0,.18)}
.fbtn.primair.on .ico{color:#FFFFFF}
.fbrow .terug{flex:none}
.afwijsrij{display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:10px}
.afwijsrij > span{flex-basis:100%; font-size:var(--t13); font-weight:500; color:var(--tekst-2)}
.skeletknoppen i{flex:1; height:32px; border-radius:var(--r-ctl); background:var(--vulling); animation:puls 1.4s ease-in-out infinite}

/* sectie-index: vastgezet boven de leesas, loopt mee met het scrollen */
.dindex{flex:none; display:flex; gap:2px; padding:0 10px 8px; border-bottom:.5px solid var(--lijn); overflow-x:auto; scrollbar-width:none}
.dindex::-webkit-scrollbar{display:none}
.dindex:empty{display:none}
.dindex button{flex:1 0 auto; height:30px; padding:0 9px; border:none; border-radius:99px; background:transparent; color:var(--tekst-2);
  font-size:var(--t13); font-weight:500; transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.dindex button:hover{background:var(--vulling); color:var(--ink)}
.dindex button.on{background:var(--petrol-tint-2); color:var(--petrol); font-weight:600}
.dindex button:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--petrol)}

/* leesas: secties als gegroepeerde lijsten */
.dbody{position:relative; flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; display:flex; flex-direction:column}
.dsecties{display:flex; flex-direction:column; gap:26px; padding:14px 12px 28px}
.dsec{min-width:0}
.dsec .dlabel{display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:0 4px 8px; font-size:var(--t17); font-weight:700; color:var(--ink); line-height:1.3}
.dsec .dlabel .rechts{margin-left:auto}
.dtel{font-size:var(--t13); font-weight:400; color:var(--tekst-2)}
.dgroep{background:var(--vlak); border-radius:var(--r-groep); padding:12px 16px; box-shadow:var(--sh-rust); font-size:var(--t15); overflow-wrap:anywhere; min-width:0}
.dgroep:empty{display:none}
.dsec .leeg{font-size:var(--t15); color:var(--tekst-2); line-height:1.5}
.scorereden{font-size:var(--t15); color:var(--tekst-2); margin:0 0 8px}

/* dossier: nooit horizontale overflow (29 september). Flex- en gridkinderen mogen krimpen, lange tekst breekt. */
.dbody,.dsecties,.dsec,.dgroep,.herleiding,.dsec .tt,.dsec .cb,.kv > *,.kadrij > *,.kadpnaam > *,.hwaarde,.tl-inhoud,.opinhoud{min-width:0}
.dsec{overflow-wrap:anywhere}
.dsec pre,.dsec code{white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word}
/* een onbekend-label mag in een smalle waardekolom afbreken (tekst op 15 px, ronde 2) */
.dsec .kv .onb{white-space:normal; height:auto; min-height:18px; padding:1px 6px}
.dsec .tbl{max-width:100%; font-size:var(--t13)}
.dsec .tbl th{font-size:var(--t12)}
.dsec .tsub{font-size:var(--t12)}
/* uitleg onder de kop van een sectie (Score, Triggers): wat je hier ziet, in gewone taal */
.dsecuitleg{margin:-2px 4px 10px; font-size:var(--t13); line-height:1.45; color:var(--tekst-2)}
.dsec .tbl td{overflow-wrap:anywhere}

/* kern: waarom, wat nu, wat telt, hoe zeker */
.kern .dgroep > * + *{border-top:1px solid var(--lijn); margin-top:10px; padding-top:10px}
.plafond{font-size:var(--t15); color:var(--ink); line-height:1.45}
.plafond .plafkop{display:block; font-size:var(--t13); font-weight:600; color:var(--tekst-2); margin-bottom:2px}
.plafond b{font-weight:600}
.volgende{display:flex; gap:10px; align-items:flex-start; font-size:var(--t17); font-weight:600; line-height:1.35; color:var(--ink)}
.volgende > .ico{flex:none; width:18px; height:18px; margin-top:1px; padding:3px; box-sizing:content-box; border-radius:50%; background:var(--petrol-tint); color:var(--petrol)}
.volgende span{display:block; font-size:var(--t13); font-weight:500; color:var(--tekst-2); margin-bottom:1px}
.factoren{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.factoren li{display:grid; grid-template-columns:1fr auto; gap:4px 10px; font-size:var(--t15)}
.factoren .fnaam{color:var(--ink)}
.factoren .fwaarde{color:var(--groen-tekst); font-weight:600}
.factoren .fbalk{grid-column:1 / -1; height:4px; border-radius:99px; background:var(--vulling); overflow:hidden}
.factoren .fbalk i{display:block; height:100%; border-radius:99px; background:var(--groen)}
.dekking{display:flex; align-items:center; gap:10px; font-size:var(--t13); color:var(--tekst-2)}
.dekking .dmeter{flex:none; width:56px; height:4px; border-radius:99px; background:var(--vulling); overflow:hidden}
.dekking .dmeter i{display:block; height:100%; background:var(--icoon)}
.dekking.laag{color:var(--let); font-weight:500}
.dekking.laag .dmeter i{background:var(--let)}

/* luchtfoto met omtrek en kijklinks */
.hero{position:relative; border-radius:var(--r-groep); overflow:hidden; background:#2E3A3F; box-shadow:var(--sh-rust)}
.luchtfoto{position:relative; margin:0; overflow:hidden; background:#34413F; width:100%}
.luchtfoto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.luchtfoto img.mislukt{display:none}
.lfomtrek{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.lfomtrek .halo{fill:none; stroke:rgba(255,255,255,.95); stroke-width:5; stroke-linejoin:round}
.lfomtrek .lijn{fill-opacity:.22; stroke-width:2.5; stroke-linejoin:round}
.lfomtrek .kl-A{stroke:var(--kl-A); fill:var(--kl-A)} .lfomtrek .kl-B{stroke:var(--kl-B); fill:var(--kl-B)}
.lfomtrek .kl-C{stroke:var(--kl-C); fill:var(--kl-C)} .lfomtrek .kl-D{stroke:var(--kl-D); fill:var(--kl-D)}
.herolinks{position:absolute; left:10px; bottom:10px; display:flex; gap:6px}
.herobron{position:absolute; right:10px; top:9px; font-size:var(--t11); color:rgba(255,255,255,.92); text-shadow:0 1px 2px rgba(0,0,0,.6)}
.kijklink{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 10px; border-radius:99px; font-size:var(--t13); font-weight:500;
  color:var(--ink); background:rgba(255,255,255,.94); box-shadow:0 1px 2px rgba(0,0,0,.16), 0 4px 12px -4px rgba(0,0,0,.3); white-space:nowrap; text-decoration:none}
.kijklink:hover{background:#FFFFFF; text-decoration:none}
.kijklink .ico{width:14px; height:14px; color:var(--icoon)}

/* tabellen, lijsten en rijen in een groep */
.minikop.tl-kop{margin-top:12px}
.adressen{margin-top:10px; padding-top:10px; border-top:1px solid var(--lijn); font-size:var(--t13); color:var(--tekst-2); line-height:1.6}
.trigrow{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--lijn); font-size:var(--t15)}
.trigrow:first-child{border-top:none; padding-top:2px}
.trigrow:last-child{padding-bottom:2px}
.trigrow .tdot{flex:none; width:8px; height:8px; margin-top:6px; border-radius:50%; background:var(--groen)}
.trigrow .tdot.plan{background:var(--icoon); border-radius:2px}
.trigrow .tt b{display:block; font-weight:600; color:var(--ink)}
.trigrow .tt .tm{font-size:var(--t13); color:var(--tekst-2)}
.trigrow a{font-weight:500}
.linklijst{display:flex; flex-direction:column; margin:-4px 0}
.linklijst a{display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:38px; padding:6px 0; color:var(--petrol); font-size:var(--t15); font-weight:500}
.linklijst a + a{border-top:1px solid var(--lijn)}
.linklijst a .ico{width:14px; height:14px; color:var(--icoon)}
.linklijst a:hover{text-decoration:none}
.linklijst a:hover span{text-decoration:underline}
.dsec select,.dsec textarea{width:100%; resize:vertical}
.dsec textarea{min-height:64px}
.kvkregel{margin-top:10px}
.kvkvoet{margin:4px 2px 0}
.comment{display:flex; gap:10px; padding:10px 0; border-top:1px solid var(--lijn); font-size:var(--t15)}
.comment:first-child{border-top:none; padding-top:2px}
.comment .cb b{font-size:var(--t15)}
.comment .cb .tm{margin-left:6px; font-size:var(--t13); color:var(--tekst-2)}
.comment .cb div{white-space:pre-wrap; overflow-wrap:anywhere}
.commentform{display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--lijn)}
#clist:has(.leeg) + .commentform{border-top:none; padding-top:0}
.commentform input{flex:1; min-width:0}
.timeline .trow{display:grid; grid-template-columns:minmax(0,112px) minmax(0,1fr); gap:10px; padding:8px 0; border-top:1px solid var(--lijn); font-size:var(--t13)}
.timeline .trow:first-child{border-top:none; padding-top:2px}
.timeline .tdate{color:var(--tekst-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.timeline .tact{color:var(--tekst-2)}

/* triggers als tijdlijn: datum links, as met stip, nieuwste boven */
.tl-legenda{display:flex; flex-wrap:wrap; align-items:center; gap:4px 5px; margin:-3px 4px 8px; font-size:var(--t12); color:var(--tekst-2)}
.tl-legenda i{display:inline-block; width:8px; height:8px; margin-left:6px; border-radius:50%}
.tl-legenda i:first-child{margin-left:0}
.tl-legenda i.pos,.tl-item.pos .tl-stip{background:var(--groen)}
.tl-legenda i.neg,.tl-item.neg .tl-stip{background:var(--rood)}
.tl-legenda i.nietmee,.tl-item.nietmee .tl-stip{background:var(--vlak); box-shadow:inset 0 0 0 2px var(--icoon)}
.tl-legenda i.neutraal,.tl-item.neutraal .tl-stip{background:var(--icoon)}
.tlijn{position:relative; margin:0; padding:0; list-style:none}
.tlijn::before{content:""; position:absolute; left:46px; top:8px; bottom:8px; width:2px; border-radius:1px; background:var(--lijn)}
.tl-jaar{position:relative; display:grid; grid-template-columns:40px 14px minmax(0,1fr); column-gap:7px; margin:4px 0 2px}
.tl-jaar span{grid-column:1 / 3; justify-self:start; padding:1px 7px; border-radius:5px; background:var(--groep); color:var(--tekst-2); font-size:var(--t11); font-weight:600}
.tl-item{position:relative; display:grid; grid-template-columns:40px 14px minmax(0,1fr); column-gap:7px; padding:8px 0 9px}
.tl-item + .tl-item{border-top:1px solid var(--lijn)}
.tl-datum{text-align:right; line-height:1.1; padding-top:1px}
.tl-datum b{display:block; font-size:var(--t17); font-weight:600; color:var(--ink)}
.tl-datum span{display:block; margin-top:1px; font-size:var(--t11); font-weight:500; color:var(--tekst-2)}
.tl-stip{position:relative; z-index:1; width:10px; height:10px; margin:6px auto 0; border-radius:50%; box-shadow:0 0 0 3px var(--vlak)}
.tl-item.nietmee .tl-stip{box-shadow:inset 0 0 0 2px var(--icoon), 0 0 0 3px var(--vlak)}
.tl-inhoud{font-size:var(--t15)}
.tl-titel{display:flex; align-items:center; gap:6px; min-width:0}
.tl-tekst{flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; color:var(--ink)}
.tl-titel .hardlab,.tl-titel .effect{flex:none; margin-left:0}
.tl-item.nietmee .tl-tekst{color:var(--tekst-2); font-weight:500}
.tl-meta{display:flex; gap:4px; min-width:0; margin-top:2px; font-size:var(--t13); color:var(--tekst-2); white-space:nowrap}
.tl-metatekst{min-width:0; overflow:hidden; text-overflow:ellipsis}
.tl-meta .tl-match{flex:none}
.tl-bron{flex:none; margin-left:auto; padding-left:6px; font-size:var(--t13); font-weight:500; color:var(--petrol)}
.tl-match[title]{text-decoration:underline dotted var(--icoon); text-underline-offset:3px; cursor:help}
.tl-sam{margin-top:4px; font-size:var(--t13); color:var(--tekst-2); line-height:1.45}
.tl-sam.lang:not(.open) .tl-samtekst{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.tl-meer{margin-top:1px; padding:0; font-size:var(--t13); font-weight:500}
.hardlab{display:inline-flex; align-items:center; height:17px; padding:0 5px; margin-left:6px; border-radius:4px; font-size:var(--t11); font-weight:600; letter-spacing:.02em; vertical-align:1px}
.hardlab.h{background:var(--vulling-3); color:var(--ink)}
.hardlab.v{background:transparent; color:var(--tekst-2); box-shadow:inset 0 0 0 1px var(--lijn-2)}
.effect{display:inline-flex; align-items:center; height:17px; padding:0 6px; margin-left:4px; border-radius:4px; font-size:var(--t11); font-weight:600}
.effect.positief{background:var(--groen-tint); color:var(--groen-tekst)}
.effect.negatief{background:var(--rood-tint); color:var(--rood)}
.effect.context{background:var(--vulling); color:var(--tekst-2)}
.effect.tl-effect{flex:none; margin-left:0}
/* publicaties op de plek zelf: een rode vlag bovenaan de tijdlijn, als band over de volle breedte van de groep */
.oplocatie{margin:-12px -16px 8px; padding:10px 16px 8px; border-radius:var(--r-groep) var(--r-groep) 0 0; background:var(--rood-tint)}
.oplocatie:last-child{margin-bottom:-12px; border-radius:var(--r-groep)}
.opkop{margin-bottom:4px; font-size:var(--t15); font-weight:600; color:var(--rood)}
.opkop span{display:block; font-size:var(--t13); font-weight:400; color:var(--tekst-2)}
.oplocatie ul{margin:0; padding:0; list-style:none}
.oplocatie li{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; padding:6px 0; border-top:1px solid rgba(180,35,24,.14); font-size:var(--t15)}
.oplocatie li:first-child{border-top:none}
.opdatum{font-weight:600; color:var(--ink); white-space:nowrap}

/* herleiding: audit-laag, standaard dicht, gegroepeerd */
.herleid > summary{list-style:none; cursor:pointer; margin-bottom:0}
.herleid > summary::-webkit-details-marker{display:none}
.herleid > summary::before{content:""; flex:none; width:7px; height:7px; margin:0 4px 0 1px; border-right:2px solid var(--icoon); border-bottom:2px solid var(--icoon);
  transform:rotate(-45deg); transition:transform var(--duur) var(--uit)}
.herleid[open] > summary::before{transform:rotate(45deg)}
.herleid[open] > summary{margin-bottom:7px}
.herleid > summary:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol); border-radius:6px}
.herleid > .herleiding{background:var(--vlak); border-radius:var(--r-groep); padding:12px 16px; box-shadow:var(--sh-rust)}
.herleiding{font-size:var(--t13); color:var(--tekst-2); line-height:1.55}
.herleiding code{padding:1px 5px; border-radius:4px; background:var(--groep); font-size:var(--t11)}
.hrun{padding-bottom:8px; margin-bottom:6px; border-bottom:1px solid var(--lijn); color:var(--ink)}
.hgroep{margin-top:10px}
.hgroep .minikop{margin-bottom:2px; color:var(--ink)}
.hrij{padding:7px 0; border-top:1px solid var(--lijn)}
.hgroep .minikop + .hrij{border-top:none}
.hrij.kort{display:grid; grid-template-columns:minmax(0,40%) minmax(0,1fr); gap:10px; align-items:baseline}
.hrij.kort .hwaarde{text-align:right; font-weight:500}
.hnaam{font-size:var(--t13); font-weight:600; color:var(--ink)}
.hwaarde{font-size:var(--t13); color:var(--tekst-2)}
.hbron{color:var(--tekst-2)}
.hleeg{color:var(--tekst-2); font-style:italic}
.htbl{width:100%; margin-top:4px; table-layout:fixed; border-collapse:collapse; font-size:var(--t13)}
.htbl th{padding:3px 6px 3px 0; border-bottom:1px solid var(--lijn); text-align:left; font-weight:600; color:var(--tekst-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.htbl td{padding:3px 6px 3px 0; border-bottom:1px solid var(--lijn); color:var(--ink); vertical-align:top; overflow-wrap:anywhere}
.htbl.kv2 th{width:42%; font-weight:500}
.htbl .htbl{margin-top:0}
.htbl.kv2 tr.sub th{width:auto; padding-top:7px; border-bottom:none; color:var(--ink); font-weight:600}
.htbl.kv2 tr.subw > td{padding:0 0 4px 10px; border-left:2px solid var(--lijn)}
.htabel .hmeer{display:none}
.htabel.alle .hmeer{display:table-row}
.htabel.alle li.hmeer{display:list-item}
.hlijst{margin:2px 0 0; padding-left:18px}
.hknop{margin-top:3px; padding:0; font-size:var(--t13); font-weight:500}
.hjson{font-size:var(--t11)}
.ruw{margin-top:4px}
.ruw > summary{width:max-content; cursor:pointer; font-size:var(--t11); font-weight:600; color:var(--tekst-2)}
.ruw pre{max-height:220px; margin:4px 0 0; padding:6px 8px; overflow:auto; border-radius:var(--r-klein); background:var(--groep); font-size:var(--t11)}

/* Kadaster-knop: perceelkeuze als lijst, bevestiging vooraf als band */
.kaduitleg{margin:0 0 10px}
.kadkeuze{max-height:200px; overflow:auto; margin:0 0 10px; border-top:1px solid var(--lijn); border-bottom:1px solid var(--lijn)}
.kadkeuzekop{padding:8px 0 4px; font-size:var(--t13); color:var(--tekst-2)}
.kadrij{display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; padding:5px 0; font-size:var(--t13); cursor:pointer}
.kadrij input:disabled + span{color:var(--tekst-2)}
.kadsub{font-size:var(--t11); color:var(--tekst-2)}
.kadbevestig{margin:10px -16px; padding:10px 16px; background:var(--let-tint); font-size:var(--t15); color:var(--ink)}
.kadbevestig:first-child{margin-top:-12px; border-radius:var(--r-groep) var(--r-groep) 0 0}
.kadbevestig .rij{margin-top:8px}
.kadresultaat{margin-top:12px; padding-top:10px; border-top:1px solid var(--lijn)}
.kadkop{margin-bottom:6px; font-size:var(--t13); color:var(--tekst-2)}
.kadperceel{margin-bottom:10px}
.kadpnaam{display:flex; gap:8px; align-items:center; margin-bottom:4px; font-size:var(--t13)}
.kadkvk{white-space:nowrap}

/* sleepgreep op de linkerrand van het blad */
.dgreep{display:none}
body.dossier-open.op-kaart:not(.dossier-vol) .dgreep{display:block; position:absolute; left:-7px; top:0; bottom:0; width:14px; z-index:5; cursor:col-resize; touch-action:none}
.dgreep::before{content:""; position:absolute; left:5px; top:50%; width:4px; height:36px; margin-top:-18px; border-radius:99px; background:var(--vulling-3);
  opacity:0; transition:opacity var(--duur) var(--uit), background-color var(--duur) var(--uit)}
.side:hover .dgreep::before{opacity:1}
.dgreep:hover::before,.dgreep:focus-visible::before,body.greep-sleept .dgreep::before{opacity:1; background:var(--petrol)}
.dgreep:focus-visible{outline:none}
body.greep-sleept{cursor:col-resize; user-select:none}
body.greep-sleept #map,body.greep-sleept .dossier{pointer-events:none}

/* dossier-layout: één render, een hoofdkolom en een zijkolom. In het blad zijn beide display:contents en houdt order de
   leesas aan; in het vergrote blad (body.dossier-vol) wordt het een brede hoofdkolom met rechts een smalle zijkolom. */
.dlayout .dkol{display:contents}
.dvoetslot,.dlayout .dstatslot{display:none}
body:not(.dossier-vol) .dlayout [data-sectie="hero"]{order:0}
body:not(.dossier-vol) .dlayout [data-sectie="kern"]{order:1; margin-top:-10px}
body:not(.dossier-vol) .dlayout [data-sectie="triggers"]{order:2}
body:not(.dossier-vol) .dlayout [data-sectie="locatie"]{order:3}
body:not(.dossier-vol) .dlayout [data-sectie="percelen"]{order:4}
body:not(.dossier-vol) .dlayout [data-sectie="panden"]{order:5}
body:not(.dossier-vol) .dlayout [data-sectie="plannen"]{order:6}
body:not(.dossier-vol) .dlayout [data-sectie="maatvoering"]{order:7}
body:not(.dossier-vol) .dlayout [data-sectie="buurt"]{order:8}
body:not(.dossier-vol) .dlayout [data-sectie="links"]{order:9}
body:not(.dossier-vol) .dlayout [data-sectie="vestigingen"]{order:10}
body:not(.dossier-vol) .dlayout [data-sectie="kadaster"]{order:11}
body:not(.dossier-vol) .dlayout [data-sectie="score"]{order:12}
body:not(.dossier-vol) .dlayout [data-sectie="herleiding"]{order:13}
body:not(.dossier-vol) .dlayout [data-sectie="oordeel"]{order:14}
body:not(.dossier-vol) .dlayout [data-sectie="comments"]{order:15}
body:not(.dossier-vol) .dlayout [data-sectie="gebeurtenissen"]{order:16}

/* 8. Vergroot dossier en het dossier als modal buiten de kaart ------------------------------------------- */
.dvolachter{display:none}
/* het vergrote blad en de scrim beginnen onder de bovenbalk: de balk blijft staan en bruikbaar */
body.dossier-vol:not(.dossier-modaal) .dvolachter{display:block; position:fixed; inset:var(--balk) 0 0 0; z-index:850; background:var(--scrim); animation:vervaag 200ms var(--uit)}
@keyframes vervaag{from{opacity:0}}
body.dossier-vol .side{z-index:860}
/* ook buiten de kaart (pijplijn, instellingen): de tweede selector wint van body.dossier-modaal .dossier.open */
body.dossier-vol .dossier.open,body.dossier-vol.dossier-modaal .dossier.open{position:fixed; z-index:860; top:calc(var(--balk) + var(--rand)); bottom:var(--rand); width:auto; height:auto;
  left:max(2vw, calc((100vw - 1400px) / 2)); right:max(2vw, calc((100vw - 1400px) / 2)); border-radius:var(--r-blad);
  box-shadow:0 2px 6px rgba(0,0,0,.12), 0 40px 100px -30px rgba(0,0,0,.55); animation:groei 220ms var(--uit)}
@keyframes groei{from{opacity:.4; transform:scale(.985)}}
/* één leesas: hoofdkolom (waarom, triggers, score, locatie, percelen, vestigingen en de rest) met rechts een smalle
   zijkolom (luchtfoto, score en oppervlak, oordeel en notitie); kop en sectie-index lijnen uit op dezelfde breedte */
body.dossier-vol .dossier{--vol-b:1128px}
body.dossier-vol .dhead{padding:18px max(24px, calc((100% - var(--vol-b)) / 2)) 10px}
body.dossier-vol .dhead h2{font-size:var(--t28)}
body.dossier-vol .dhead #dstat,body.dossier-vol .dfoot{display:none}
body.dossier-vol .dindex{justify-content:flex-start; padding:0 max(18px, calc((100% - var(--vol-b)) / 2 - 6px)) 10px}
body.dossier-vol .dindex button{flex:none; padding:0 12px}
body.dossier-vol .dlayout{display:grid; grid-template-columns:minmax(0,780px) 320px; grid-template-areas:"hoofd zij"; justify-content:center;
  gap:28px; align-items:start; padding:14px 24px 32px}
body.dossier-vol .dkol{display:flex; flex-direction:column; gap:20px; min-width:0}
body.dossier-vol .khoofd{grid-area:hoofd}
body.dossier-vol .kzij{grid-area:zij}
body.dossier-vol .dstatslot{display:grid}
@media (min-height:760px){
  body.dossier-vol .kzij{position:sticky; top:14px}
}
/* in de brede kolom breken triggertitels volledig af in plaats van af te kappen */
body.dossier-vol .tl-titel{align-items:flex-start}
body.dossier-vol .tl-tekst{white-space:normal; overflow:visible; text-overflow:clip}
body.dossier-vol .tl-meta{flex-wrap:wrap; white-space:normal}
body.dossier-vol .tl-metatekst{white-space:normal}
body.dossier-vol .dvoetslot{display:block; position:relative; padding:12px 14px 14px; border-radius:var(--r-groep); background:var(--vlak); box-shadow:var(--sh-rust)}
body.dossier-vol .dvoetslot:empty{display:none}
/* in de kolom: de primaire actie over de volle breedte, de twee andere eronder */
body.dossier-vol .dvoetslot .fbrow{display:grid; grid-template-columns:1fr 1fr; gap:6px}
body.dossier-vol .dvoetslot .fblabel{grid-column:1 / -1; margin-bottom:2px}
body.dossier-vol .dvoetslot .fbtn.primair{grid-column:1 / -1; height:36px}
body.dossier-vol .dvoetslot .terug{position:absolute; right:10px; top:8px; width:26px; height:26px}
body.dossier-vol .dvoetslot .afwijsrij > span{flex-basis:auto}
@media (max-width:1100px){
  body.dossier-vol .dlayout{grid-template-columns:minmax(0,1fr) 280px; gap:20px}
}
@media (max-width:800px){
  body.dossier-vol .dossier.open{top:var(--balk); bottom:0; left:0; right:0; border-radius:0}
  body.dossier-vol .dlayout{grid-template-columns:minmax(0,1fr); grid-template-areas:"zij" "hoofd"; padding:14px}
  body.dossier-vol .kzij{position:static}
}
/* buiten de kaart ligt er geen kaart achter het blad: dekkend, op de groepsachtergrond */
body.dossier-modaal .side{display:flex; position:fixed; inset:var(--balk) 0 0 0; z-index:860; width:auto; align-items:center; justify-content:center;
  background:var(--scrim); animation:vervaag 200ms var(--uit)}
body.dossier-modaal .side > :not(.dossier){display:none}
body.dossier-modaal .dossier.open{position:relative; inset:auto; width:min(760px,94vw); height:min(calc(100vh - var(--balk) - var(--rand) * 3), 880px); background:var(--groep);
  box-shadow:0 2px 6px rgba(0,0,0,.12), 0 40px 100px -30px rgba(0,0,0,.55); animation:groei 220ms var(--uit)}
body.dossier-vol:not(.op-kaart) .dossier.open{background:var(--groep)}

/* 9. Weergaven buiten de kaart: dekkend wit op de koelgrijze groepsachtergrond (ronde 2) --------------------- */
.page{position:absolute; inset:0; overflow-y:auto; background:var(--groep); padding:28px 28px 64px}
.pagewrap{max-width:920px; margin:0 auto}
.pagewrap.breed{max-width:1120px}
.pagewrap h1{margin:0 0 6px; font-size:var(--t28); font-weight:700; line-height:1.15; letter-spacing:-.015em; text-wrap:balance}
.pagewrap h1 em{font-style:normal}
.pagewrap h2{margin:0 0 4px; font-size:var(--t17); font-weight:600}
.pagewrap .intro{max-width:680px; margin:0 0 24px; font-size:var(--t15); line-height:1.5; color:var(--tekst-2)}
.paneel{margin-bottom:16px; padding:18px 20px; border-radius:var(--r-paneel); background:var(--vlak); box-shadow:var(--sh-rust)}
.paneel p.hulp{max-width:70ch; margin:2px 0 14px; font-size:var(--t13); color:var(--tekst-2)}
.paneel > div > p{margin:4px 0 14px; font-size:var(--t13); color:var(--tekst-2)}
.paneel .leeg{font-size:var(--t13); color:var(--tekst-2)}
.linkrow{display:flex; flex-wrap:wrap; gap:6px}
.linkrow a{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:var(--r-ctl); background:var(--vulling);
  color:var(--petrol); font-size:var(--t13); font-weight:500}
.linkrow a:hover{background:var(--vulling-2); text-decoration:none}
.linkrow a .ico{width:13px; height:13px}

/* titel als knop (weekgids, vervangen items): de naam opent het dossier */
.titelknop{all:unset; cursor:pointer; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.titelknop:hover{color:var(--petrol)}
.titelknop:focus-visible{outline:2px solid var(--petrol); outline-offset:2px; border-radius:3px}

/* pijplijn (ronde 2): een bord in de wereld van de kaart. Vier kolommen als ingezette gegroepeerde lijsten op de
   groepsachtergrond; elke locatie is een rij met klassemarker, naam, score en de statusknoppen. Elke kolom scrolt
   voor zich, de kop blijft staan. Rustig en dicht: geen kaarten, geen decoratie. */
.board{position:absolute; inset:0; flex-direction:column; gap:12px; padding:18px 20px 20px; background:var(--groep)}
.kolommen{flex:1; min-height:0; display:grid; grid-template-columns:repeat(4,minmax(260px,1fr)); gap:16px; overflow-x:auto}
/* kaartfilters die ook hier gelden: een rustige regel over de volle breedte, alleen als er een filter afwijkt */
.bordregel{flex:none; padding:0 4px; font-size:var(--t13); color:var(--tekst-2)}
.filterregel{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:0 2px 0 4px; font-size:var(--t13)}
.fregelkop{display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--ink)}
.fregelkop .ico{width:15px; height:15px; color:var(--icoon)}
.fregelcapsules{display:flex; flex-wrap:wrap; gap:6px}
.filtercapsule,.filtercapsule:hover,.filtercapsule:active{cursor:default; background:var(--vlak); box-shadow:inset 0 0 0 1px var(--lijn)}
.fregeltel{margin-left:auto; font-size:var(--t12); color:var(--tekst-2)}
.kcol{display:flex; flex-direction:column; min-height:0; border-radius:var(--r-groep); transition:background-color var(--duur) var(--uit), box-shadow var(--duur) var(--uit)}
.kcol.drag{background:var(--petrol-tint); box-shadow:0 0 0 2px var(--petrol)}
.khead{flex:none; display:flex; align-items:center; gap:8px; padding:2px 6px 8px}
.khead h3{flex:1; font-size:var(--t15); font-weight:600; color:var(--ink)}
.khead .kn{min-width:22px; height:20px; padding:0 7px; border-radius:99px; background:var(--vulling-2); font-size:var(--t12); font-weight:600; color:var(--tekst-2);
  display:inline-flex; align-items:center; justify-content:center}
.klijst{flex:0 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:4px; border-radius:var(--r-groep); background:var(--vlak); box-shadow:var(--sh-rust)}
.kcard{position:relative; display:grid; grid-template-columns:22px minmax(0,1fr) auto; grid-template-areas:"merk tekst score" "kaart acties acties";
  column-gap:10px; row-gap:7px; padding:9px 10px 10px; border-radius:var(--r-ctl); cursor:grab; transition:background-color var(--duur) var(--uit)}
.kcard + .kcard::before{content:""; position:absolute; top:0; left:42px; right:10px; height:1px; background:var(--lijn); transition:opacity var(--duur) var(--uit)}
.kcard:hover{background:var(--vulling)}
.kcard:hover::before,.kcard:hover + .kcard::before{opacity:0}
.kcard:has(.titelknop:focus-visible){box-shadow:inset 0 0 0 2px var(--petrol)}
.kcard .titelknop:focus-visible{outline:none}
.kcard.dragging{opacity:.45; cursor:grabbing}
.kcard .kmerkrij{grid-area:merk; align-self:start; margin-top:1px}
.kcard .rijtekst{grid-area:tekst}
.kcard h4{font-size:var(--t15); font-weight:600; line-height:1.3; color:var(--ink)}
.kcard .titelknop{display:block; width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kcard .sub{font-size:var(--t13); line-height:1.35; color:var(--tekst-2)}
.kcard .kscore{grid-area:score; text-align:right}
.kcard .kscore .kl{flex-direction:column; align-items:flex-end; gap:3px}
.kcard .kscore .kl b{font-size:var(--t17); line-height:1.15; letter-spacing:-.01em}
.kcard .kscore .plaf{cursor:help}
.kcard .kacties{grid-area:acties; display:flex; flex-wrap:wrap; align-items:center; gap:4px}
.kcard .kacties .sbtn{height:26px; padding:0 9px; border:none; border-radius:var(--r-klein); background:var(--vulling); font-size:var(--t12); font-weight:500; color:var(--ink);
  cursor:pointer; transition:background-color var(--duur) var(--uit), transform 120ms var(--uit)}
.kcard .kacties .sbtn:hover{background:var(--vulling-2)}
.kcard .kacties .sbtn:active{background:var(--vulling-3); transform:scale(.98)}
.kcard .kacties .sbtn:focus-visible{outline:none; box-shadow:0 0 0 2px var(--vlak), 0 0 0 4px var(--petrol)}
.kcard .kmap{grid-area:kaart; justify-self:center; position:relative; display:inline-flex; padding:5px; border:none; border-radius:var(--r-klein); background:none; color:var(--icoon); cursor:pointer}
.kcard .kmap:hover{background:var(--vulling-2); color:var(--petrol)}
.kcard .kmap:active{background:var(--vulling-3)}
.kcard .kmap:focus-visible{outline:none; box-shadow:0 0 0 2px var(--petrol)}
.kdropnote{padding:14px 12px; text-align:center; font-size:var(--t13); line-height:1.45; color:var(--tekst-2)}

/* instellingen (ronde 2): de grammatica van macOS Systeeminstellingen. Links een vaste zijbalk met de secties,
   rechts de gekozen sectie met een grote titel, een uitleg en gegroepeerde lijsten met haarlijnen; labels links,
   bedieningen rechts uitgelijnd; één primaire knop per sectie, rechts onder de groepen. */
#instellingenpage{padding:0; overflow:hidden}
.instlayout{display:grid; grid-template-columns:252px minmax(0,1fr); height:100%}
.secnav{display:flex; flex-direction:column; gap:2px; min-height:0; overflow-y:auto; padding:20px 12px 24px; background:var(--vlak); border-right:1px solid var(--lijn)}
.seckop{padding:0 10px 16px}
.seckop h1{font-size:var(--t20); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--ink)}
.seckop p{margin-top:4px; font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.secnav button{display:flex; align-items:center; gap:10px; min-height:36px; padding:0 10px; border:none; border-radius:var(--r-ctl); background:transparent;
  color:var(--ink); font-size:var(--t15); font-weight:500; text-align:left; transition:background-color var(--duur) var(--uit), color var(--duur) var(--uit)}
.secnav button .ico{width:17px; height:17px; color:var(--icoon)}
.secnav button:hover{background:var(--vulling)}
.secnav button:active{background:var(--vulling-2)}
.secnav button.on{background:var(--petrol-tint-2); color:var(--petrol); font-weight:600}
.secnav button.on .ico{color:var(--petrol)}
.secnav button:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--petrol)}
.instpaneel{min-height:0; overflow-y:auto; padding:28px 32px 48px}
.instwrap{max-width:760px; margin:0 auto}
.insttitel{font-size:var(--t28); font-weight:700; line-height:1.15; letter-spacing:-.015em; color:var(--ink); text-wrap:balance}
.instsectie > .hulp{max-width:68ch; margin:8px 0 6px; font-size:var(--t15); line-height:1.5; color:var(--tekst-2)}
.instgroepkop{margin:22px 4px 8px; font-size:var(--t15); font-weight:600; color:var(--ink)}
.instgroep{padding:0 16px; border-radius:var(--r-groep); background:var(--vlak); box-shadow:var(--sh-rust)}
.instsectie > .instgroep:first-of-type,.instsectie > .instmelding + .instgroep{margin-top:18px}
.instrij{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:50px; padding:10px 0; font-size:var(--t15); color:var(--ink)}
.instrij + .instrij{border-top:1px solid var(--lijn)}
label.instrij{cursor:pointer}
.instrij.leeg,.instrij.laden{color:var(--tekst-2)}
.instlabel{min-width:0; display:flex; flex-direction:column; gap:1px}
.instlabel b{font-weight:500}
.instlabel span{font-size:var(--t13); line-height:1.4; color:var(--tekst-2)}
.instctl{flex:none; display:flex; align-items:center; justify-content:flex-end; gap:10px; font-size:var(--t13); color:var(--tekst-2)}
.instctl input[type=text],.instctl input[type=date],.instctl input[type=number]{min-height:32px; font-size:var(--t15)}
.instctl input[type=text],.instctl input[type=date]{width:280px}
.instctl input[type=number]{width:92px; text-align:right}
.instctl input[type=range]{width:160px}
.instctl input.breed{width:320px}
.instgroep > .tbl{margin:6px 0}
.instgroep .tbl{font-size:var(--t13)}
.instgroep .tbl th{font-size:var(--t12)}
.instgroep .tbl .tsub{font-size:var(--t12)}
.instacties{display:flex; align-items:center; gap:8px; margin-top:16px}
.instacties .knop.primair{margin-left:auto}
.instacties .fbnote{font-size:var(--t13)}
/* bij de gewichten blijft de knop in beeld terwijl je door de criteria schuift */
.instacties.vast{position:sticky; bottom:-48px; z-index:2; margin-top:20px; padding:12px 0; background:var(--groep); border-top:1px solid var(--lijn)}
.instmelding{margin:14px 0 0; padding:10px 14px; border-radius:var(--r-groep); background:var(--let-tint); color:var(--let); font-size:var(--t13); font-weight:500}
.instleer{margin:18px 0 0; font-size:var(--t13)}
.instleer .lkop b{font-size:var(--t15)}
.instleer .knop{margin-top:2px}
.instlink{color:var(--petrol); font-weight:500; text-decoration:none}
.instlink .ico{width:17px; height:17px; color:var(--icoon)}
.instlink:hover{text-decoration:none}
.instlink:hover span{text-decoration:underline}
.instlink:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--petrol); border-radius:var(--r-klein)}
.gewicht .gl b{display:inline}
.gewicht.gewijzigd .gl b{color:var(--petrol)}
.gewicht.gewijzigd .gl b::after{content:"gewijzigd"; display:inline-block; margin-left:8px; padding:1px 6px; border-radius:5px; background:var(--petrol-tint); font-size:var(--t11); font-weight:600; vertical-align:2px}

/* uitleg (ronde 2): een leesblad. Eén witte kolom op de groepsachtergrond, lopende tekst in 15 px met hooguit circa
   72 tekens per regel, koppen op de vaste schaal (28, 20, 17), de stappen als genummerde koppen, tabellen binnen de kolom. */
.leesblad{max-width:calc(35em + 96px); margin:0 auto; padding:40px 48px 48px; border-radius:var(--r-paneel); background:var(--vlak); box-shadow:var(--sh-rust);
  font-size:var(--t15); line-height:1.55; color:var(--ink)}
.leesblad h1{font-size:var(--t28); font-weight:700; line-height:1.15; letter-spacing:-.015em; text-wrap:balance}
.leesblad h1 em{font-style:normal}
.leesblad .intro{margin:10px 0 0; font-size:var(--t17); line-height:1.5; color:var(--tekst-2)}
.leesblad h2{margin:0 0 8px; font-size:var(--t20); font-weight:600; line-height:1.25; letter-spacing:-.01em; text-wrap:balance}
.leesblad p{margin:0 0 12px}
.leesblad b{font-weight:600}
.stappen{margin:36px 0 0; padding:0; list-style:none}
.istep{padding:28px 0 0; margin-top:28px; border-top:1px solid var(--lijn)}
.istep:first-child{margin-top:0}
.istep h2{display:flex; align-items:baseline; gap:10px}
.istep .inum{flex:none; min-width:1.2em; color:var(--tekst-2); font-weight:600}
.istep .tech{margin:4px 0 0; padding:10px 14px; border-radius:var(--r-ctl); background:var(--groep); font-size:var(--t13); line-height:1.5; color:var(--tekst-2)}
.istep .tech b{color:var(--ink)}
.leessectie{margin-top:36px; padding-top:28px; border-top:1px solid var(--lijn)}
.leesblad .tbl{margin-top:6px; font-size:var(--t13)}
.leesblad .tbl th{font-size:var(--t12)}
.leesblad .tbl .tsub{font-size:var(--t12)}
.leesblad .tbl.klassen td{font-size:var(--t15); vertical-align:middle}

/* weekdigest: voorbeeld van de mail */
.veil{display:none; position:fixed; inset:0; z-index:870; align-items:center; justify-content:center; background:var(--scrim)}
.veil.open{display:flex; animation:vervaag 200ms var(--uit)}
.mailmodal{width:min(640px,92vw); max-height:86vh; overflow-y:auto; border-radius:var(--r-blad); background:var(--vlak);
  box-shadow:0 2px 6px rgba(0,0,0,.12), 0 40px 100px -30px rgba(0,0,0,.55); animation:groei 220ms var(--uit)}
.mailmodal .mhead{position:relative; padding:18px 56px 14px 22px; border-bottom:1px solid var(--lijn)}
.mailmodal .mhead .sluit{position:absolute; right:14px; top:14px}
.mailmodal .mhead .mfrom{font-size:var(--t12); color:var(--tekst-2)}
.mailmodal .mhead h3{margin:4px 0 0; font-size:var(--t17); font-weight:600}
.mailmodal .mbody{padding:14px 22px 22px; font-size:var(--t13); color:var(--ink)}
.mailmodal .mitem{display:flex; align-items:flex-start; gap:12px; padding:12px 0; border-top:1px solid var(--lijn)}
.mailmodal .mitem:first-of-type{border-top:none}
.mailmodal .mitem .rank{min-width:18px; font-size:var(--t17); font-weight:600; color:var(--tekst-2)}
.mailmodal .mitem b{color:var(--ink)}
.mailmodal .mitem .mreden{font-size:var(--t12); color:var(--tekst-2)}
.mailmodal .mitem .mm{margin-left:auto; white-space:nowrap; text-align:right; font-size:var(--t12); color:var(--tekst-2)}
.mailnote{margin-top:8px; padding-top:12px; border-top:1px solid var(--lijn); font-size:var(--t12); color:var(--tekst-2)}
.mailnote + .kvkdigest{margin-top:0; padding-top:6px; border-top:none}
.kvkdigest.warn b{color:var(--let)}

/* 10. Inloggen ------------------------------------------------------------------------------------------- */
body.loginpagina{overflow:auto; background:var(--groep)}
.loginwrap{min-height:100%; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(420px,1fr)}
.loginbeeld{position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; padding:32px 40px; background:#1B2A30; color:#FFFFFF}
.loginbeeld img.foto{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.loginbeeld::after{content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,24,30,.58) 0%, rgba(10,24,30,.06) 30%, rgba(10,24,30,.18) 55%, rgba(10,24,30,.9) 100%)}
.loginbeeld > *:not(img){position:relative; z-index:1}
.loginmerk{display:flex; align-items:center; gap:12px; font-size:var(--t20); font-weight:600}
.loginmerk b{font-weight:700}
.plustegel{display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; background:#FFFFFF; box-shadow:0 4px 14px rgba(0,0,0,.3)}
.plustegel img{display:block; width:26px; height:26px}
.loginclaim{max-width:540px}
.claim{margin:0 0 12px; font-size:var(--t28); font-weight:600; line-height:1.3; letter-spacing:-.01em; text-wrap:balance}
.claimsub{max-width:60ch; margin:0; font-size:var(--t15); line-height:1.5; color:rgba(255,255,255,.88)}
.beeldbron{position:absolute !important; right:16px; bottom:12px; font-size:var(--t11); color:rgba(255,255,255,.78)}
.loginvak{display:flex; align-items:center; justify-content:center; padding:40px 24px; background:var(--groep)}
.loginkaart{width:min(380px,100%); padding:28px 28px 24px; border-radius:var(--r-blad); background:var(--vlak); box-shadow:var(--sh-zwevend)}
.loginkaart h1{margin:0 0 4px; font-size:var(--t28); font-weight:700; letter-spacing:-.015em}
.loginkaart p{margin:0 0 18px; font-size:var(--t13); color:var(--tekst-2)}
.loginkaart label{display:block; margin:14px 0 6px; font-size:var(--t12); font-weight:500; color:var(--tekst-2)}
.loginkaart input{width:100%; height:38px; padding:0 12px; font-size:var(--t15)}
.loginkaart .knop.groot{width:100%; margin-top:22px}
.loginfout{min-height:18px; margin-top:12px; font-size:var(--t13); font-weight:500; color:var(--rood)}
.snellogin{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--lijn)}
.snellogin span{flex-basis:100%; font-size:var(--t12); font-weight:500; color:var(--tekst-2)}
.snellogin .knop{flex:1}

/* 11a. Rondleiding (ronde 2): een donker scherm met één uitgelicht element en een tekstballon ---------------- */
.rondleiding{position:fixed; inset:0; z-index:1500}
.rlvang{position:absolute; inset:0}
.rlspot{position:fixed; border-radius:var(--r-groep); pointer-events:none; box-shadow:0 0 0 2px var(--vlak), 0 0 0 200vmax var(--scrim-rondleiding)}
.rondleiding.zonderdoel .rlspot{box-shadow:0 0 0 200vmax var(--scrim-rondleiding)}
.rlballon{position:fixed; width:min(360px, calc(100vw - 24px)); padding:16px 18px 14px; border-radius:var(--r-groep); background:var(--vlak);
  box-shadow:var(--sh-pop); transition:opacity 160ms var(--uit)}
.rondleiding.wisselt .rlballon{opacity:.6}
.rlstap{font-size:var(--t12); font-weight:500; color:var(--tekst-2)}
.rlballon h2{margin:3px 0 6px; font-size:var(--t17); font-weight:600; line-height:1.25; letter-spacing:-.01em; color:var(--ink)}
.rlballon p{font-size:var(--t15); line-height:1.5; color:var(--ink)}
.rlvoet{display:flex; align-items:center; gap:8px; margin-top:16px}
.rlvoet .linkknop{margin-right:auto; font-size:var(--t13); color:var(--tekst-2)}
.rlvoet .linkknop:hover{color:var(--ink)}
.rlvoet .linkknop:focus-visible{outline:2px solid var(--petrol); outline-offset:2px; border-radius:3px}

/* 11. Kleinere schermen, beweging ----------------------------------------------------------------------- */
@media (max-width:1280px){
  .runinfo{display:none}
}
@media (max-width:1200px){
  :root{--paneel-b:330px}
}
@media (max-width:1100px){
  .viewswitch{position:static; transform:none; margin-left:8px}
  .kvklabel{padding:0 7px}
}
@media (max-width:1180px){
  /* tablet en kleine laptop: met een open dossier maakt het paneel links plaats voor de kaart */
  body.dossier-open #paneel,body.dossier-open #weekpage{display:none}
  body.dossier-open .kaartmodus{left:calc(50% - var(--dossier-b) / 2)}
  body.op-kaart.dossier-open .leaflet-bottom.leaflet-left{left:var(--rand)}
  body.op-kaart.dossier-open .leaflet-control-attribution{max-width:calc(100vw - var(--dossier-b) - var(--rand) * 5 - 44px)}
}
@media (max-width:900px){
  .segment > button{min-width:0; padding:0 10px}
  /* smal: de zijbalk wordt een strook met de secties boven de inhoud */
  .instlayout{grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr)}
  .secnav{flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:10px 12px; border-right:none; border-bottom:1px solid var(--lijn)}
  .seckop{display:none}
  .secnav button{flex:none; min-height:32px}
  .instpaneel{padding:20px 16px 40px}
  .instrij{flex-wrap:wrap}
  .loginwrap{grid-template-columns:1fr}
  .loginbeeld{min-height:260px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important; scroll-behavior:auto !important}
}