/* dashboard-nieuw.css (31-10, nieuw ontwerp stap 5b): het dashboard van één funnel in de schil met zijbalk.
   Bron: DEMO 3 v7 (intern/startscherm-voorstel/dashboard-demo3/d3.css) + besluiten Tamara 31-10 (handoff 2026-10-31 deel 9):
   app-indeling van de vakjes met het uiterlijk van het ontwerp, één pagina met springmenu, instellingen als kaart boven de funnel,
   geen legenda, "Hier zit je winst" als regel onderin met doelwit, detailkaart rechts naast de vakjes (weer, Tamara 31-10 nacht), doelkaart bovenaan.
   Alles hangt aan body.db-schil (index.html toonScherm, alleen waar het nieuwe overzicht aan staat). Nergens schaduw. */

body.db-schil #cijferOverlay{left:232px;z-index:210;background:#faf9ff;--fm-schaduw:none;--kaart-schaduw:none;--fm-radius:16px}
body.db-schil.st-zij-smal #cijferOverlay{left:64px}   /* smalle zijbalk (startscherm.js) */
body.db-schil #cijferOverlay>.fov-header{display:none}
body.db-schil #cijferOverlay .fov-body{padding:0}
body.db-schil #cijferDashboard{padding:0 0 130px;max-width:none}
body.db-schil #cijferDashboard>*{max-width:none}

/* witte balk van rand tot rand: naam | periode | Cijfers invoeren */
body.db-schil #cijferDashboard>.dbp-balk{position:sticky;top:0;z-index:30;display:flex;align-items:center;flex-wrap:nowrap;gap:4px;height:56px;box-sizing:border-box;
  margin:0;padding:0 24px;background:#fff;border-bottom:1px solid #ebe9f2;white-space:nowrap}
body.db-schil #cijferDashboard>.dbp-balk::before{display:none}
body.db-schil #cijferOverlay .dbp-naam{font:700 14.5px/1.3 "DM Sans",system-ui,sans-serif;color:#141414;padding:0 6px;overflow:hidden;text-overflow:ellipsis;min-width:0;max-width:420px}
/* smal scherm (Tamara 2-11, uitzondering op "geen ellipsis op eigen namen"): alleen de naam krimpt met …, de volle naam staat in de tooltip; knoppen krimpen nooit */
@media (min-width:761px){
  body.db-schil #cijferOverlay .dbp-balk>.dbp-naam{flex:0 1 auto;white-space:nowrap}
  body.db-schil #cijferOverlay .dbp-balk>.cd-kiezer,body.db-schil #cijferOverlay .dbp-balk>.dbp-instelknop{flex-shrink:0}
}
body.db-schil #cijferOverlay .dbp-ruimte{flex:1 1 auto;min-width:16px}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer{flex-direction:row;align-items:center;gap:4px;min-width:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-kop{display:none}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-soorten{border:0;border-radius:0;overflow:visible;gap:2px;background:none;padding:0}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-soorten button{flex:none;border:0;border-radius:8px;background:none;color:#4101df;font:600 13.5px "DM Sans",system-ui,sans-serif;padding:7px 11px}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-soorten button:not(.aan):hover{background:#f3f2f8}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-soorten button.aan{background:#ededff;color:#4101df}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-nav.geen{display:none}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-nav{display:flex;align-items:center;gap:2px;margin-left:6px}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-tekst{font-size:13.5px;color:#141414}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-pijl{border:0;background:none;color:#4101df;border-radius:8px;width:28px;height:28px;cursor:pointer}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer .per-pijl:hover{background:#f3f2f8}
body.db-schil #cijferOverlay .dbp-balk .cd-kiezer.een .per-tekst{font-weight:500;color:#6b6b74;margin-right:6px}
body.db-schil #cijferOverlay .dbp-balk .cd-invoer{margin-left:8px;border:none;border-radius:8px;background:#ededff;color:#4101df;box-shadow:none;font:600 13.5px "DM Sans",system-ui,sans-serif;padding:8px 14px}
body.db-schil #cijferOverlay .dbp-balk .cd-invoer:hover{background:#dcd8f5}

/* tweede menu links (wit, 236 px, plakt onder de balk) en de inhoud ernaast */
body.db-schil #cijferDashboard>.db-menuvlak{display:grid;grid-template-columns:236px minmax(0,1fr);gap:0;max-width:none;margin:0;align-items:start}
body.db-schil #cijferOverlay .dbp-menu{position:sticky;top:56px;height:calc(100vh - 56px);box-sizing:border-box;display:flex;flex-direction:column;gap:2px;margin:0;
  padding:22px 16px 28px;background:#fff;border:0;border-right:1px solid #ebe9f2;border-radius:0;box-shadow:none;overflow:auto}
body.db-schil #cijferOverlay .dbp-mkop{margin:0 8px 6px;font:700 11px/1.5 "DM Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6b74}
body.db-schil #cijferOverlay .dbp-menu a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font:600 14px/1.3 "DM Sans",system-ui,sans-serif;color:#4101df;text-decoration:none;cursor:pointer}
body.db-schil #cijferOverlay .dbp-menu a:hover{background:#f3f2f8}
body.db-schil #cijferOverlay .dbp-menu a.aan{background:#ededff}
body.db-schil #cijferOverlay .dbp-menu a:focus-visible{outline:2px solid #4101df;outline-offset:2px}
body.db-schil #cijferDashboard .db-inhoud{padding:24px 48px 0 40px;min-width:0}

/* de vier blokken */
body.db-schil #cijferOverlay .dbp-deel{margin:0 0 56px;scroll-margin-top:76px}
body.db-schil #cijferOverlay .dbp-kop{margin:0 0 14px;font:700 13px/1.4 "DM Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6b74}
body.db-schil #cijferOverlay .dbp-funnel{display:flex;flex-direction:column;gap:20px;margin:0 0 32px}
body.db-schil #cijferOverlay .dbp-funnel:last-child{margin-bottom:0}
body.db-schil #cijferOverlay .dbp-funnel>.cd-funnel-naam{margin:0;font:700 18px/1.3 "DM Sans",system-ui,sans-serif;color:#141414}
body.db-schil #cijferOverlay .dbp-leeg{margin:0;font-size:14px;color:#6b6b74}
body.db-schil #cijferDashboard .fm-kaart{box-shadow:none;border:1px solid #ebe9f2;border-radius:16px}
body.db-schil #cijferDashboard .cd-kaart,body.db-schil #cijferDashboard .cd-check{box-shadow:none}

/* Overzicht: board links, detail rechts (plakt mee, op hoogte van de Voorkant) */
/* Tamara 31-10 nacht: het kaartje weer rechts, zodat je het uitgelichte vakje en de uitleg naast elkaar ziet */
body.db-schil #cijferOverlay .dbp-twee{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
body.db-schil #cijferDashboard .dbp-twee>.db-funnelblok{background:none;border:0;border-radius:0;padding:0;gap:20px}
body.db-schil #cijferDashboard .dbp-twee>.db-detail{position:sticky;top:76px;border:1.5px solid #4101df;border-radius:10px;padding:18px 20px;gap:16px;max-height:calc(100vh - 96px);overflow:auto;scroll-margin-top:24px}
body.db-schil #cijferDashboard .dbp-twee>.db-detail h2{color:#4101df;font-size:16px}
/* te veel kolommen voor naast elkaar (dbPaginaBreedte): detail onder het board */
body.db-schil #cijferOverlay .dbp-twee.onder{grid-template-columns:minmax(0,1fr)}
body.db-schil #cijferDashboard .dbp-twee.onder>.db-detail{position:static;max-height:none;max-width:820px;padding:22px 26px}
body.db-schil #cijferOverlay .dbp-funnel>.db-fmkop{display:flex;flex-direction:column;gap:10px;margin:0}
body.db-schil #cijferOverlay .dbp-funnel>.db-fmkop:empty{display:none}

/* de instellingenkaart */
body.db-schil #cijferOverlay .dbp-fset{background:#fff;border:1px solid #ebe9f2;border-radius:16px}
/* vakjes in een raster; de lijnen ertussen zijn de 1 px gap op de lijnkleur, zodat ze ook kloppen als een vakje naar de volgende rij gaat */
body.db-schil #cijferOverlay .dbp-fset{overflow:hidden}
/* Instellingen (Tamara 31-10): de knop staat in de witte balk naast Cijfers invoeren (knoppen A: geen vlak, aan = lila); het paneel staat dicht tot je hem aanklikt */
body.db-schil #cijferOverlay .dbp-instel[hidden]{display:none}
/* zelfde knop als Cijfers invoeren (Tamara 31-10: ze weken te veel af); aan = rand */
body.db-schil #cijferOverlay .dbp-instelknop{display:inline-flex;align-items:center;gap:7px;margin-left:8px;border:1px solid transparent;border-radius:8px;background:#ededff;color:#4101df;font:600 13.5px "DM Sans",system-ui,sans-serif;padding:8px 14px;cursor:pointer;white-space:nowrap}
body.db-schil #cijferOverlay .dbp-instelknop:hover{background:#dcd8f5}
body.db-schil #cijferOverlay .dbp-instelknop[aria-pressed="true"]{border-color:#a99ef0}
/* A/B: de ingangen vergeleken (Tamara 31-10), twee witte vakjes met een streep in de kleur van de ingang, één zin eronder */
body.db-schil #cijferOverlay .dbp-ab{background:#fff;border:1px solid #ebe9f2;border-radius:16px;padding:18px 22px 20px}
body.db-schil #cijferOverlay .dbp-ab>.dbp-flab{margin:0 0 12px}
body.db-schil #cijferOverlay .dbp-abvakken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
body.db-schil #cijferOverlay .dbp-abvak{border:1px solid #ebe9f2;border-left:5px solid #a99ef0;border-radius:12px;padding:12px 16px;min-width:0}
body.db-schil #cijferOverlay .dbp-abvak[data-ab="0"]{border-left-color:#2a0197}
body.db-schil #cijferOverlay .dbp-abvak .dbp-flab{margin:0 0 4px;text-transform:none;letter-spacing:0;font-size:12.5px;overflow-wrap:anywhere}
body.db-schil #cijferOverlay .dbp-abpct{display:block;font:700 34px/1.1 "Antonio","Arial Narrow",sans-serif;color:#2a0197}
body.db-schil #cijferOverlay .dbp-abvak[data-ab="1"] .dbp-abpct{color:#6b5be0}
body.db-schil #cijferOverlay .dbp-absub{font-size:13px;color:#6b6b74}
body.db-schil #cijferOverlay .dbp-abzin{margin:14px 0 0;font-size:14.5px;font-weight:600;color:#141414}
@media (max-width:560px){body.db-schil #cijferOverlay .dbp-abvakken{grid-template-columns:1fr}}
body.db-schil #cijferOverlay .dbp-fvakken{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:#ebe9f2}
body.db-schil #cijferOverlay .dbp-fvak{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:16px 22px;min-width:0;background:#fff}
body.db-schil #cijferOverlay .dbp-flab{display:flex;align-items:center;gap:6px;font:700 11px/1.5 "DM Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6b74}
body.db-schil #cijferOverlay .dbp-flab .dk-vr{text-transform:none;letter-spacing:0}
body.db-schil #cijferOverlay .dbp-fnoot{font-size:12.5px;color:#6b6b74;white-space:normal}
body.db-schil #cijferOverlay .dbp-fnoot:empty{display:none}
body.db-schil #cijferOverlay .dbp-fwaarde{font:600 15px "DM Sans",system-ui,sans-serif;color:#141414}
body.db-schil #cijferOverlay .dbp-fvak .dk-doelkeuze{display:inline-flex;align-items:center;gap:6px;margin-left:-10px;padding:5px 10px;border:none;border-radius:8px;background:none;
  font:600 15px "DM Sans",system-ui,sans-serif;color:#4101df;cursor:pointer;white-space:nowrap;box-shadow:none}
body.db-schil #cijferOverlay .dbp-fvak .dk-doelkeuze:hover{background:#f3f2f8}
body.db-schil #cijferOverlay .dbp-fveld{display:inline-flex;align-items:baseline;gap:6px;font:600 15px "DM Sans",system-ui,sans-serif;color:#4101df}
body.db-schil #cijferOverlay .dbp-fveld input{width:48px;box-sizing:border-box;margin-left:-10px;padding:5px 10px;border:1px solid transparent;border-radius:8px;background:none;
  font:600 15px "DM Sans",system-ui,sans-serif;color:#4101df;text-align:left;-moz-appearance:textfield}
body.db-schil #cijferOverlay .dbp-fveld input::-webkit-outer-spin-button,body.db-schil #cijferOverlay .dbp-fveld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* altijd grijs (Tamara 31-10): zo zie je dat het een vakje is en valt de ruimte tot "dagen" niet op; hover = rand */
body.db-schil #cijferOverlay .dbp-fveld input{margin-left:0;background:#f3f2f8}
body.db-schil #cijferOverlay .dbp-fveld input:hover{border-color:#a99ef0}
body.db-schil #cijferOverlay .dbp-fveld input:focus{outline:none;background:#fff;border-color:#a99ef0}
body.db-schil #cijferOverlay .dbp-fveld input.is-voorstel::placeholder{color:#4101df;opacity:1}
body.db-schil #cijferOverlay .dbp-fvink{display:inline-flex;align-items:center;gap:8px;font:600 14px "DM Sans",system-ui,sans-serif;color:#141414;cursor:pointer;padding:5px 0}
body.db-schil #cijferOverlay .dbp-fvink input{accent-color:#4101df;width:16px;height:16px;margin:0}
body.db-schil #cijferOverlay .dbp-froute{display:flex;align-items:center;gap:14px;padding:12px 22px;border-top:1px solid #ebe9f2}
body.db-schil #cijferOverlay .dbp-fvakken:empty+.dbp-froute{border-top:0}
body.db-schil #cijferOverlay .dbp-froute .dk-routes{gap:4px}
body.db-schil #cijferOverlay .dbp-froute .dk-routes button{border:none;border-radius:8px;background:none;color:#4101df;font:600 14px "DM Sans",system-ui,sans-serif;padding:6px 10px}
body.db-schil #cijferOverlay .dbp-froute .dk-routes button:not([aria-pressed="true"]):hover{background:#f3f2f8}
body.db-schil #cijferOverlay .dbp-froute .dk-routes button[aria-pressed="true"]{background:#ededff;color:#4101df}
body.db-schil #cijferOverlay .dbp-froute .dk-routes .dk-routen{font-weight:500;font-size:12.5px;color:#6b6b74;opacity:1}

/* het board: koppen boven de groepen ("VERKEER · 5 BRONNEN") en witte vakjes */
body.db-schil #cijferDashboard .db-funnelblok .db-kcap{font:700 11px/1.4 "DM Sans",system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#6b6b74;white-space:normal;overflow:visible;text-overflow:clip}
body.db-schil #cijferDashboard .db-funnelblok .db-kcap b{font-weight:700;color:inherit}
body.db-schil #cijferDashboard .db-funnelblok .db-kcap span::before{content:"· "}
body.db-schil #cijferDashboard .db-funnelblok .db-bord{padding-top:4px}
/* v43 stap 2b (2-11): de bronkaart (Verkeer) is minstens DBP_KOL breed, anders steekt het pilletje over de rand. Tijdelijk: het board gaat in stap 4 weg */
body.db-schil #cijferDashboard .db-funnelblok .db-bord>.db-kol[data-db-groep="bronnen"]{min-width:120px}
body.db-schil #cijferDashboard .db-funnelblok .db-vk,
body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-goed,body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-top,
body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-beter,body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-slecht,
body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-geen{--v:#fff;background:#fff;border:1px solid #e3e1f2;border-radius:10px;box-shadow:none;transform:none;transition:border-color .12s}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-check{background:#fff;border:1.5px dashed var(--db-amber-rand);border-radius:10px}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.db-weinig{--v:#fff;background:#fff;border:1px dashed #d4d4de;border-radius:10px}
body.db-schil #cijferDashboard .db-funnelblok .db-vk:hover{border-color:#a99ef0;transform:none}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.gekozen,body.db-schil #cijferDashboard .db-funnelblok .db-vk.gekozen:hover{border:1.5px solid #4101df;box-shadow:none;transform:none}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.wijzer{margin-top:0}
/* pillen: lichte tint op wit; de wijzer wordt een regel onderin met doelwit (dwinst=regel) */
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.goed{background:var(--fm-goed-vlak)}
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.beter{background:var(--fm-beter-vlak)}
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.letop{background:var(--fm-rood-vlak)}
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.top{background:var(--fm-top-vlak)}
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.weinig{background:var(--fm-neutraal-vlak)}
/* grijze pil (Voorlopig, Te vroeg) heeft nu een vlak: dan ook de binnenruimte en het midden van de andere pillen (Tamara 1-11: tekst zat tegen de rand) */
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.weinig{padding:5px 9px;font-size:12px;line-height:1.25;align-items:center}
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.weinig::before{margin-top:0}
/* Voorlopig is een bijlabel: kleiner dan de statuspil, zodat hij ook in een smal vakje past */
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.db-vvoorlopig{white-space:nowrap;line-height:1;font-size:11px;padding:4px 7px;gap:4px}
body.db-schil #cijferDashboard .db-funnelblok .db-vpillen .fm-pil.db-vvoorlopig::before{width:5px;height:5px}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.vm .db-vpillen .fm-pil.weinig{font-size:11.5px;padding:4px 8px}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.wijzer .db-vpillen{display:contents}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.wijzer .db-vpillen>.fm-pil:not(.db-wijzer){align-self:flex-start;margin:0 0 4px}
body.db-schil #cijferDashboard .db-funnelblok .db-vk.wijzer .db-vpillen>.fm-pil:not(.db-wijzer)+.fm-pil:not(.db-wijzer){margin-top:-2px}
body.db-schil #cijferDashboard .db-funnelblok .db-wijzer{order:9;display:flex;align-items:center;gap:6px;margin:8px 0 0;padding:7px 0 0;border:0;border-top:1px solid #e6e4f4;border-radius:0;
  background:none;color:#4101df;font:700 12px/1.3 "DM Sans",system-ui,sans-serif;white-space:normal;max-width:none}
body.db-schil #cijferDashboard .db-funnelblok .db-wijzer::before{content:"";display:block;width:14px;height:14px;flex:none;border-radius:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
body.db-schil #cijferDashboard .db-funnelblok .db-vbalk .db-vstip{box-shadow:0 0 0 2px #fff}

/* Alle cijfers en Scenario's: de kop staat al boven het blok */
body.db-schil #dbp-cijfers .db-alle:not(.db-verloop)>h3{display:none}
body.db-schil #dbp-watals details[data-db-deel="watals"]>summary{display:none}
body.db-schil #dbp-watals details[data-db-deel="watals"]{border:0;background:none;padding:0}
body.db-schil #dbp-watals details[data-db-deel="watals"]>.db-deel{display:flex;flex-direction:column;gap:28px;padding:0}
body.db-schil #dbp-watals details[data-db-deel="watals"]>.db-deel>*{margin-left:0;margin-right:0;max-width:none}

/* telefoon: zijbalk weg, menu als rij knoppen onder de balk */
@media (max-width:980px){
  body.db-schil #cijferDashboard>.db-menuvlak{grid-template-columns:200px minmax(0,1fr)}
  body.db-schil #cijferDashboard .db-inhoud{padding:20px 24px 0 24px}
  body.db-schil #cijferOverlay .dbp-twee{grid-template-columns:minmax(0,1fr)}
  body.db-schil #cijferDashboard .dbp-twee>.db-detail{position:static;max-height:none}
}
@media (max-width:760px){
  body.db-schil #cijferOverlay{left:0}
  body.db-schil #cijferOverlay>.fov-header{display:flex}
  body.db-schil #cijferDashboard>.dbp-balk{position:static;height:auto;flex-wrap:wrap;padding:10px 16px;gap:8px}
  body.db-schil #cijferOverlay .dbp-ruimte{display:none}
  body.db-schil #cijferOverlay .dbp-naam{flex:1 1 100%;max-width:none}
  body.db-schil #cijferDashboard>.db-menuvlak{display:block}
  body.db-schil #cijferOverlay .dbp-menu{position:sticky;top:0;z-index:20;height:auto;flex-direction:row;overflow-x:auto;padding:8px 12px;border-right:0;border-bottom:1px solid #ebe9f2}
  body.db-schil #cijferOverlay .dbp-mkop{display:none}
  body.db-schil #cijferOverlay .dbp-menu a{white-space:nowrap}
  body.db-schil #cijferDashboard .db-inhoud{padding:16px 16px 0}
  body.db-schil #cijferOverlay .dbp-deel{scroll-margin-top:56px}
  body.db-schil #cijferOverlay .dbp-fvak+.dbp-fvak{border-left:0;border-top:1px solid #ebe9f2}
  body.db-schil #cijferOverlay .dbp-fvak{flex:1 1 100%}
  body.db-schil #cijferOverlay .dbp-froute{flex-direction:column;align-items:flex-start}
}

/* menu-iconen */
body.db-schil #cijferOverlay .dbp-menu a svg{flex:none}
/* Duur grijs bij een lancering */
body.db-schil #cijferOverlay .dbp-fvak.dbp-grijs>*{opacity:.5}
/* de doelkaart als statuskaart (Tamara 31-10): bovenin één kleine doelregel met "aanpassen" (of de zin als je aanpast),
   daaronder groot getal, balk en drie tegels op een rij, gescheiden door een dunne lijn. Antonio voor de bedragen. */
body.db-schil #cijferOverlay .dbp-doel{display:flex;flex-direction:column;gap:18px;background:#fff;border:1px solid #ebe9f2;border-radius:16px;padding:22px 26px 24px}
body.db-schil #cijferOverlay .dbp-doel.leeg{display:block;padding:16px 22px}
body.db-schil #cijferOverlay .dbp-doel .dbp-flab{margin:0 0 10px}
body.db-schil #cijferOverlay .dbp-dregel{margin:0;font-size:14px;color:#6b6b74}
body.db-schil #cijferOverlay .dbp-dregel .dbp-flab{display:inline;margin:0 6px 0 0}
body.db-schil #cijferOverlay .dbp-dregel b{color:#141414;font-weight:700}
body.db-schil #cijferOverlay .dbp-daanpas{border:0;background:none;padding:0;font:inherit;font-weight:600;color:#4101df;cursor:pointer}
body.db-schil #cijferOverlay .dbp-daanpas:hover{text-decoration:underline}
body.db-schil #cijferOverlay .dbp-dveld{min-width:0}
body.db-schil #cijferOverlay .dbp-dveld .dz-zin{font-size:22px}
body.db-schil #cijferOverlay .dbp-dveld .dz-veldblok{gap:10px}
body.db-schil #cijferOverlay .dbp-dveld .dz-menu{box-shadow:none;border-color:#a99ef0}
body.db-schil #cijferOverlay .dbp-dopslaan{margin-top:12px;border:0;border-radius:10px;background:#4101df;color:#fff;font:600 14px "DM Sans",system-ui,sans-serif;padding:9px 18px;cursor:pointer}
body.db-schil #cijferOverlay .dbp-dstand{min-width:0;display:flex;flex-direction:column;gap:20px;padding-top:18px;border-top:1px solid #ebe9f2}
body.db-schil #cijferOverlay .dbp-dstand:empty{display:none}
body.db-schil #cijferOverlay .dbp-dlinks{min-width:0}
body.db-schil #cijferOverlay .dbp-dbedrag{display:block;font:700 48px/1 "Antonio","Arial Narrow",sans-serif;color:#141414}
body.db-schil #cijferOverlay .dbp-dsub{margin:6px 0 0;font-size:14px;color:#6b6b74}
body.db-schil #cijferOverlay .dbp-dbalk{height:10px;border-radius:999px;background:#ededff;margin-top:14px;overflow:hidden}
body.db-schil #cijferOverlay .dbp-dbalk i{display:block;height:100%;border-radius:999px;background:#4101df}
body.db-schil #cijferOverlay .dbp-dtegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
body.db-schil #cijferOverlay .dbp-dtegel+.dbp-dtegel{border-left:1px solid #ebe9f2;padding-left:24px}
@media (max-width:560px){body.db-schil #cijferOverlay .dbp-dtegels{grid-template-columns:1fr}body.db-schil #cijferOverlay .dbp-dtegel+.dbp-dtegel{border-left:0;padding-left:0}}
body.db-schil #cijferOverlay .dbp-dtegel{display:flex;flex-direction:column;align-items:flex-start;text-align:left}
body.db-schil #cijferOverlay .dbp-dgroot{font:700 32px/1.05 "Antonio","Arial Narrow",sans-serif;color:#4101df}
body.db-schil #cijferOverlay .dbp-dtegel span{font:700 11px/1.5 "DM Sans",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#6b6b74;margin-top:4px}
body.db-schil #cijferOverlay .dbp-dtegel span:empty{display:none}
/* de kaart in Scenario's zonder veld: alleen kop en uitkomst */
body.db-schil #cijferOverlay .dz-zonderveld .dz-leeg a{color:#4101df;font-weight:600;text-decoration:none}
body.db-schil #cijferOverlay .dz-zonderveld .dz-leeg a:hover{text-decoration:underline}
/* de doelkaart in donkerpaars (besluit Tamara 31-10, zelfde kleur als Jouw successen op het startscherm): alleen de kleur.
   Witte tekst, lime voor de balk en de invulwoorden, lijnen wit op 20%. De keuzemenu's zelf blijven wit. */
body.db-schil #cijferOverlay .dbp-doel{background:linear-gradient(120deg,#2a0197 0%,#4101df 100%);border-color:#2a0197;color:#fff}   /* verloop gekozen 31-10 */
body.db-schil #cijferOverlay .dbp-doel .dbp-flab{color:#c7c2ff}
body.db-schil #cijferOverlay .dbp-doel .dbp-dregel{color:#dcd8ff}
body.db-schil #cijferOverlay .dbp-doel .dbp-dregel b{color:#fff}
body.db-schil #cijferOverlay .dbp-doel .dbp-daanpas{color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel .dbp-dopslaan{background:#dfffb9;color:#2a0197}
body.db-schil #cijferOverlay .dbp-doel .dbp-dstand,body.db-schil #cijferOverlay .dbp-doel .dbp-dtegel+.dbp-dtegel{border-color:rgba(255,255,255,.2)}
body.db-schil #cijferOverlay .dbp-doel .dbp-dsub,body.db-schil #cijferOverlay .dbp-doel .dbp-dtegel span{color:#dcd8ff}
body.db-schil #cijferOverlay .dbp-doel .dbp-dbedrag{color:#fff}
body.db-schil #cijferOverlay .dbp-doel .dbp-dgroot{color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel .dbp-dbalk{background:rgba(255,255,255,.2)}
body.db-schil #cijferOverlay .dbp-doel .dbp-dbalk i{background:linear-gradient(90deg,#dfffb9 0%,#f3ffd9 100%)}
body.db-schil #cijferOverlay .dbp-doel .dz-zin{color:#fff}
body.db-schil #cijferOverlay .dbp-doel .dz-in,body.db-schil #cijferOverlay .dbp-doel .dz-kies{color:#dfffb9;border-bottom-color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel .dz-in input{color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel .dz-in input::placeholder{color:#dfffb9;opacity:.5}
body.db-schil #cijferOverlay .dbp-doel .dz-kies:focus-visible,body.db-schil #cijferOverlay .dbp-doel input[data-dz-schuif]:focus-visible{outline-color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel .dz-hint,body.db-schil #cijferOverlay .dbp-doel .dz-groeikop{color:#dcd8ff}
body.db-schil #cijferOverlay .dbp-doel .dz-hint.fout{color:#ffc2b5}
body.db-schil #cijferOverlay .dbp-doel .dz-groeikop b{color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel input[data-dz-schuif]::-webkit-slider-runnable-track{background:linear-gradient(to right,#dfffb9 0 var(--v),rgba(255,255,255,.2) var(--v) 100%)}
body.db-schil #cijferOverlay .dbp-doel input[data-dz-schuif]::-moz-range-track{background:rgba(255,255,255,.2)}
body.db-schil #cijferOverlay .dbp-doel input[data-dz-schuif]::-moz-range-progress{background:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel input[data-dz-schuif]::-webkit-slider-thumb{border-color:#dfffb9;box-shadow:none}
body.db-schil #cijferOverlay .dbp-doel input[data-dz-schuif]::-moz-range-thumb{border-color:#dfffb9;box-shadow:none}
body.db-schil #cijferOverlay .dbp-doel .dz-ticks button{background:none;border-color:rgba(255,255,255,.2);color:#fff}
body.db-schil #cijferOverlay .dbp-doel .dz-ticks button:hover{border-color:#dfffb9;color:#dfffb9}
body.db-schil #cijferOverlay .dbp-doel .dz-ticks button.aan{background:rgba(255,255,255,.14);border-color:#dfffb9;color:#dfffb9}
/* doelvlak onderin: succes en grootste verbeterkans (Tamara 31-10) */
body.db-schil #cijferOverlay .dbp-doel .dbp-oordeel{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid rgba(255,255,255,.2);padding-top:16px}
body.db-schil #cijferOverlay .dbp-doel .dbp-orij{display:flex;flex-direction:column;gap:6px;min-width:0}
body.db-schil #cijferOverlay .dbp-doel .dbp-orij .dbp-flab{margin:0}
body.db-schil #cijferOverlay .dbp-doel .dbp-otekst{color:#fff;font-weight:600;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
body.db-schil #cijferOverlay .dbp-doel .dbp-oalle{color:#dfffb9;font-size:13px;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
@media (max-width:720px){body.db-schil #cijferOverlay .dbp-doel .dbp-oordeel{grid-template-columns:1fr}}
/* variant A (doelkaart-handoff 31-10): kop met periode en doel, stand met pil, tegels met noot, referentieregel */
body.db-schil #cijferOverlay .dbp-doel{gap:22px;padding:28px 32px 26px}
body.db-schil #cijferOverlay .dbp-dkop{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap}
body.db-schil #cijferOverlay .dbp-dkop .dbp-flab{margin:0}
body.db-schil #cijferOverlay .dbp-doel .dbp-dregel .dbp-dwoord{color:#dcd8ff}
body.db-schil #cijferOverlay .dbp-doel .dbp-dstand{border-top:0;padding-top:0;gap:22px}
body.db-schil #cijferOverlay .dbp-dtop{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 16px;min-width:0}
body.db-schil #cijferOverlay .dbp-dtop .dbp-dbedrag{font-size:72px}
body.db-schil #cijferOverlay .dbp-dtop .dbp-dsub{margin:0;font-size:17px}
body.db-schil #cijferOverlay .dbp-dpil{align-self:baseline;font:700 12px/1 "DM Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.14);color:#fff}
body.db-schil #cijferOverlay .dbp-dpil.aan{background:#dfffb9;color:#2a0197}
body.db-schil #cijferOverlay .dbp-doel .dbp-dbalk{margin-top:0}
body.db-schil #cijferOverlay .dbp-doel .dbp-dtegels{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
body.db-schil #cijferOverlay .dbp-doel .dbp-dgroot{color:#fff;font-size:40px}
body.db-schil #cijferOverlay .dbp-doel .dbp-dtegel span{color:#dfffb9;margin-top:6px}
body.db-schil #cijferOverlay .dbp-dnoot{font-style:normal;font-size:14px;color:#dcd8ff;margin-top:2px}
body.db-schil #cijferOverlay .dbp-dref{margin:0;padding-top:16px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;color:#dcd8ff}
body.db-schil #cijferOverlay .dbp-dref b{color:#fff}
body.db-schil #cijferOverlay .dbp-dhint{margin:10px 0 0;font-size:14px;color:#dcd8ff}
@media (max-width:720px){body.db-schil #cijferOverlay .dbp-doel .dbp-dtegels{grid-template-columns:repeat(2,minmax(0,1fr))}body.db-schil #cijferOverlay .dbp-doel .dbp-dtegel:nth-child(odd){border-left:0;padding-left:0}body.db-schil #cijferOverlay .dbp-dtop .dbp-dbedrag{font-size:52px}}
/* het doelbedrag zelf is de knop om het doel te wijzigen (Tamara 31-10) */
body.db-schil #cijferOverlay .dbp-doel .dbp-dsub .dbp-daanpas{color:#fff;font-weight:600;border-bottom:1px dashed #dfffb9;border-radius:0;padding:0 1px}
body.db-schil #cijferOverlay .dbp-doel .dbp-dsub .dbp-daanpas:hover{color:#dfffb9;text-decoration:none}
/* de beker van Home in het doelvlak (Tamara 31-10): wit vlak op 14%, lime lijn; gehaald = lime vlak */
body.db-schil #cijferOverlay .dbp-dbeker{margin-left:auto;align-self:center;flex:none;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.14);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#dfffb9;display:grid;place-items:center}
body.db-schil #cijferOverlay .dbp-dbeker svg{width:58%;height:58%}
body.db-schil #cijferOverlay .dbp-dbeker.behaald{background:#dfffb9;color:#2a0197}
body.db-schil #cijferOverlay .dbp-dbeker.feest{animation:dbpBeker .26s ease-in-out 9 alternate}
@keyframes dbpBeker{from{transform:scale(1)}to{transform:scale(1.22) rotate(-8deg);background:#dfffb9;color:#2a0197}}
@media (prefers-reduced-motion: reduce){body.db-schil #cijferOverlay .dbp-dbeker.feest{animation:none}}

/* Tamara 31-10 nacht: het kaartje pas na een klik; dan klapt het menu in tot iconen en staat het kaartje rechts (dbPaginaKaartje) */
body.db-schil #cijferDashboard[data-db-tab="pagina"] .dbp-twee>.db-detail:not([data-db-open]){display:none}
body.db-schil #cijferOverlay .dbp-twee.zonder{grid-template-columns:minmax(0,1fr)}
body.db-schil #cijferDashboard .dbp-twee>.db-detail[data-db-open]{position:sticky;padding-top:38px}
body.db-schil #cijferDashboard .dbp-twee.onder>.db-detail[data-db-open]{position:relative}
body.db-schil #cijferOverlay .dbp-sluit{position:absolute;top:8px;right:8px;width:28px;height:28px;display:grid;place-items:center;border:0;border-radius:8px;background:none;color:#6b6b74;cursor:pointer}
body.db-schil #cijferOverlay .dbp-sluit:hover{background:#f3f2f8;color:#4101df}
body.db-schil #cijferOverlay .dbp-sluit:focus-visible{outline:2px solid #4101df;outline-offset:2px}
@media (min-width:981px){
  body.db-schil #cijferDashboard.dbp-smal>.db-menuvlak{grid-template-columns:64px minmax(0,1fr)}
  body.db-schil #cijferDashboard.dbp-smal .dbp-menu{padding:22px 10px 28px}
  body.db-schil #cijferDashboard.dbp-smal .dbp-mkop,body.db-schil #cijferDashboard.dbp-smal .dbp-menu a>span{display:none}
  body.db-schil #cijferDashboard.dbp-smal .dbp-menu a{justify-content:center;padding:9px 0}
}
/* Scenario's (1-11): de doelkaart even breed als de kaarten eromheen (de 760 px centreren kwam uit het oude tabblad Wat als) */
body.db-schil #cijferOverlay .dz-kaart{max-width:none;margin:0 0 28px}