:root{
    --petrol:#12716C; --petrol-deep:#0E4F4B; --petrol-dark:#0A3936; --petrol-light:#7FC4BE;
    --terra:#C87941; --terra-hover:#b96d38;
    --cream:#FAF8F5; --cream2:#F2EEE7;
    --ink:#2A2A28; --ink-soft:#6B6862; --line:#DDD8CF;
    --groen:#2C8A6B; --geel:#D9A63C; --rood:#C0563A;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* [hidden] moet áltijd verbergen. Een component-regel met display:flex/block
     heeft gelijke specificiteit als [hidden] en wint op bronvolgorde, waardoor
     een "hidden" menu toch zichtbaar blijft (de terugkerende "filter staat
     open"-bug). Deze ene !important-regel dekt dat globaal af — de losse
     .x[hidden]{display:none}-lapmiddelen zijn daarmee overbodig. */
  [hidden]{display:none !important}
  body{background:var(--cream);color:var(--ink);font-family:Figtree,system-ui,sans-serif;font-size:16px;line-height:1.55}
  .wrap{max-width:760px;margin:0 auto;padding:36px 20px 96px}
  button{font:inherit;cursor:pointer;background:none;border:0}
  button:focus-visible,summary:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}

  .fases{display:flex;gap:0;margin-bottom:28px}
  .fase{flex:1;text-align:left;padding:0 10px 9px 0;border-bottom:3px solid var(--line);color:var(--ink-soft);cursor:pointer}
  .fase .f-nr{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:block}
  .fase .f-titel{font-size:13px;font-weight:500;display:block;margin-top:2px}
  .fase[data-s="klaar"]{border-bottom-color:var(--petrol);color:var(--petrol-deep)}
  .fase[data-s="klaar"] .f-nr::after{content:" \002713"}
  .fase[data-s="huidig"]{border-bottom-color:var(--terra);color:var(--ink)}
  .fase[data-s="huidig"] .f-nr{color:var(--terra)}
  .fase[data-leeg="1"]{cursor:default}
  @media (max-width:560px){.fase .f-titel{display:none}}

  .fase-kop h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:29px;letter-spacing:-.01em;line-height:1.15;color:var(--petrol-dark)}
  .fase-intro{color:var(--ink-soft);font-size:14.5px;margin-top:6px;max-width:60ch}

  .subs{margin:22px 0 30px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
  .sub{border-top:1px solid var(--line)}
  .sub:first-child{border-top:0}
  .sub-kop{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px}
  .sub-merk{flex:none;width:8px;height:8px;border-radius:50%;background:var(--line)}
  .sub[data-actief="1"] .sub-merk{background:var(--terra)}
  .sub[data-klaar="1"] .sub-merk{background:var(--petrol)}
  .sub-naam{flex:1;font-size:13.5px;font-weight:600;color:var(--ink-soft);letter-spacing:.01em}
  .sub[data-actief="1"] .sub-naam{color:var(--petrol-dark)}
  .sub-tel{flex:none;font-size:12px;font-weight:600;color:var(--ink-soft);background:var(--cream2);border-radius:999px;padding:2px 9px}
  .sub[data-klaar="1"] .sub-tel{color:var(--petrol-deep)}
  .sub-body{display:none;padding:2px 16px 16px}
  .sub[data-actief="1"] .sub-body{display:block}
  .minirij{display:flex;align-items:flex-start;gap:0}
  .mininode{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;min-width:0}
  .mininode::before{content:"";position:absolute;top:11px;left:-50%;width:100%;height:2px;background:var(--line)}
  .mininode:first-child::before{display:none}
  .mininode.doorlopen::before{background:var(--petrol)}
  .m-bol{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:11px;background:#fff;position:relative;z-index:1;transition:all .18s}
  .mininode[data-s="todo"] .m-bol{border:2px solid var(--line);color:var(--ink-soft)}
  .mininode[data-s="huidig"] .m-bol{border:2px dotted var(--terra);color:var(--terra);box-shadow:0 0 0 3px rgba(200,121,65,.12)}
  .mininode[data-s="klaar"] .m-bol{border:2px solid var(--petrol);background:var(--petrol);color:#fff}
  .m-label{font-size:10.5px;line-height:1.25;text-align:center;color:var(--ink-soft);max-width:92px}
  .mininode[data-s="huidig"] .m-label{color:var(--ink);font-weight:600}
  @media (max-width:560px){.m-label{display:none}}

  /* R84-kleuren: de werk-kaart is #FAF8F5 (--cream), niet stark wit — het canvas
     eronder (#EDE9E1) is de donkerste laag, de kaart een tint lichter (tokens.md).
     Wit als kaartvlak liet de crème sub-blokken dónkerder ogen dan hun omhulsel. */
  .kaart{background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:26px 28px}
  .k-eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--terra)}
  .k-titel{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:23px;color:var(--petrol-dark);margin:4px 0 14px}

  .doel{background:var(--cream2);border-radius:10px;padding:14px 18px 4px}
  .doel .d-label{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:4px}
  .doel .d-tekst{font-family:Fraunces,Georgia,serif;font-style:italic;font-size:17px;color:var(--petrol-deep);line-height:1.4}
  .duiding{display:flex;gap:18px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
  .duiding-label{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--petrol-deep);padding:2px 0}
  .duiding-label .chev{font-size:10px;transition:transform .18s}
  .duiding-label[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .duiding-paneel{display:none;margin:0 0 18px;padding:14px 16px;background:var(--cream2);border-radius:10px;font-size:15px}
  .duiding-paneel.zichtbaar{display:block}
  .duiding-paneel p + p{margin-top:8px}
  .duiding-paneel ul{margin:6px 0 0 18px}
  .duiding-paneel li{margin-bottom:5px}
  .duiding-paneel li::marker{color:var(--terra)}
  .duiding-paneel details{margin-top:10px}
  .duiding-paneel summary{cursor:pointer;color:var(--petrol-deep);font-weight:500;font-size:14px}

  .blok-titel{display:flex;align-items:baseline;gap:10px;margin:26px 0 4px}
  .blok-titel h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:17px;color:var(--petrol-dark)}
  .blok-titel span{font-size:13px;color:var(--ink-soft)}
  .blok-uitleg{font-size:13.5px;color:var(--ink-soft);margin:2px 0 4px}

  .vraagblok{margin-top:14px}
  .vraagblok > label{font-size:15px;font-weight:600;color:var(--ink)}
  .vraagblok .v-nr{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--cream2);color:var(--petrol-deep);font-size:12px;font-weight:600;margin-right:8px}
  .vraagblok .hint{font-size:13px;color:var(--ink-soft);margin:2px 0 6px 30px}
  .vraagblok .veld{margin-left:30px}
  @media (max-width:560px){.vraagblok .veld{margin-left:0}.vraagblok .hint{margin-left:0}}

  /* FB10: number/date meelaten in de basis-inputstijl, zodat alle invulvelden
     (ook op één rij, bv. doelgroep + richtaantal) dezelfde box en hoogte krijgen.
     R84-veldhoogte: één canonieke, compacte veldhoogte (tokens --pad-veld /
     --t-veld / --lh-veld) zodat een invoerveld niet meer bóven de andere
     elementen uittorent — het probleem dat telkens terugkwam. Overal waar een
     scherm nog een eigen inputmaat zette, is die naar deze maat gebracht. */
  /* R74-veldkleur: één globale veldachtergrond = WIT (--wit). Invulvelden liggen
     op crème kaarten (#FAF8F5); wit geeft ze contrast (frame 74a). Voorheen stond
     de basis op --cream en zetten ~5 losse contexten hem per stuk terug op #fff —
     dat gaf net het gat waar een niet-overschreven veld (kern-stap) crème-op-crème
     verdween. Deze ene regel is nu de bron; de losse #fff-overrides zijn overbodig. */
  input[type=text],input[type=number],input[type=date],textarea,select{width:100%;padding:var(--pad-veld);border:1px solid var(--line);border-radius:8px;background:var(--wit);font:inherit;font-size:var(--t-veld);line-height:var(--lh-veld);color:var(--ink)}
  input[type=text]:focus,textarea:focus,select:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
  textarea{resize:vertical;overflow:hidden;line-height:1.5}
  select{cursor:pointer}

  .mensen-rij{display:flex;gap:8px;margin-bottom:8px;align-items:center}
  .mensen-rij input.naam{flex:0 0 34%}
  .mensen-rij input.rol{flex:1}
  .rij-weg{flex:none;width:34px;height:34px;border-radius:8px;border:1px solid var(--line);color:var(--ink-soft);font-size:17px;line-height:1;display:grid;place-items:center;transition:all .15s}
  .rij-weg:hover{border-color:var(--terra);color:var(--terra)}
  .rij-toe{margin-top:2px;font-size:14px;font-weight:600;color:var(--petrol-deep);display:inline-flex;align-items:center;gap:6px;padding:6px 0}
  .rij-toe:hover{color:var(--petrol-dark)}
  .prefill-tip{font-size:12.5px;color:var(--ink-soft);margin-bottom:8px;font-style:italic}
  .rol-vast{flex:1;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--cream2);font-size:14px;color:var(--petrol-deep);font-weight:600;display:flex;align-items:center}
  .rij-weg-plek{flex:none;width:34px;height:34px}
  .leeg-tip{margin-top:8px;font-size:14px;color:var(--ink-soft);font-style:italic}

  .actie-rij{display:flex;gap:10px;align-items:center;margin-bottom:8px}
  .actie-vink{flex:none;width:22px;height:22px;border-radius:6px;border:2px solid var(--line);background:#fff;display:grid;place-items:center;transition:all .15s}
  .actie-vink[data-aan="1"]{border-color:var(--petrol);background:var(--petrol);color:#fff}
  .actie-vink .v{font-size:13px;opacity:0}
  .actie-vink[data-aan="1"] .v{opacity:1}
  .actie-rij input.actie{flex:1}
  .actie-rij input.actie.gedaan{text-decoration:line-through;color:var(--ink-soft)}

  .uitkomst-veld{margin-top:14px}
  .uitkomst-veld > label{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
  .persoon-veld{margin-top:12px}
  .persoon-veld label{display:block;font-size:14px;font-weight:600;color:var(--petrol-deep);margin-bottom:5px}
  .persoon-veld .rol-inline{color:var(--ink-soft);font-weight:400}

  /* matrix */
  .matrix{margin-top:12px}
  .mx-rij{border:1px solid var(--line);border-radius:10px;padding:12px 12px 4px;margin-bottom:10px;background:var(--cream)}
  .mx-grid{display:grid;gap:8px 10px}
  .mx-cel{display:flex;flex-direction:column;gap:3px;min-width:0}
  .mx-cel > .mx-lab{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
  .mx-vast{font-weight:600;color:var(--petrol-dark);padding:9px 0;font-size:15px}
  .vannaar{display:flex;align-items:center;gap:6px}
  .vannaar input{flex:1;min-width:0}
  .vannaar .pijl{color:var(--terra);font-weight:600}
  .mx-rij-top{display:flex;justify-content:flex-end;margin-bottom:-4px}
  .mx-breed{margin-top:8px}
  .mx-breed textarea{width:100%;padding:var(--pad-veld);border:1px solid var(--line);border-radius:8px;background:var(--wit);font:inherit;font-size:var(--t-veld);color:var(--ink);resize:vertical;overflow:hidden;line-height:1.5}
  .mx-breed textarea:focus{outline:2px solid var(--petrol);outline-offset:1px;border-color:var(--petrol)}
  .mx-info-toggle{font-size:12.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:5px;padding:4px 6px}
  .mx-info-toggle:hover{color:var(--ink)}
  .mx-info-toggle .chev{font-size:9px;transition:transform .18s}
  .mx-info-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .mx-info{display:none;margin-top:6px}
  .mx-info.zichtbaar{display:block}
  .mx-weg{align-self:flex-start}
  @media(max-width:600px){.mx-grid{grid-template-columns:1fr !important}}

  /* schaal-pillen (laag/midden/hoog) */
  .schaal{display:flex;gap:6px}
  .schaal button{flex:1;padding:7px 4px;border:1px solid var(--line);border-radius:7px;font-size:12.5px;font-weight:600;color:var(--ink-soft);background:#fff;transition:all .13s}
  .schaal button[data-aan="1"]{border-color:var(--petrol);background:var(--petrol);color:#fff}

  /* posities (stap 5) */
  .positie{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .positie-kop{padding:11px 15px;background:var(--cream2)}
  .positie-kop .p-as{font-size:14px;font-weight:600;color:var(--petrol-dark)}
  .positie-kop .p-uitkomst{font-size:13px;color:var(--ink-soft);font-weight:400}
  .positie-body{padding:12px 15px}
  .groep-kaart{border:1px solid var(--line);border-radius:9px;padding:11px 12px 5px;margin-bottom:9px;background:var(--cream)}
  .gk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  .gk-cel{display:flex;flex-direction:column;gap:3px}
  .gk-cel-breed{margin-top:8px}
  /* Ronde 26 §5 — geloofwaardige stem */
  .gk-stem{margin-top:10px;padding-top:10px;border-top:1px solid var(--line-ghost,#EFEBE3)}
  .gk-stem-kop{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
  .gk-stem-rij{display:flex;flex-wrap:wrap;gap:16px;margin-top:6px}
  .gk-stem-toets{display:flex;align-items:center;gap:8px}
  .gk-stem-lab{font-size:12.5px;color:var(--ink)}
  .gk-stem-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
  .gk-stem-knop{font-family:var(--font-ui);font-size:12px;color:var(--ink-soft);background:var(--wit);border:0;padding:3px 12px;cursor:pointer}
  .gk-stem-knop.is-aan{background:var(--petrol);color:#fff}
  .gk-stem-hint{margin-top:6px;font-size:12px;color:var(--ink-soft);line-height:1.45}
  .gk-cel label{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft)}
  .gk-onder{display:flex;align-items:center;gap:14px;margin-top:8px;flex-wrap:wrap}
  .lid-vink{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink);cursor:pointer}
  .lid-vink .box{width:19px;height:19px;border-radius:5px;border:2px solid var(--line);display:grid;place-items:center;font-size:12px;color:#fff}
  .lid-vink input{display:none}
  .lid-vink input:checked + .box{border-color:var(--petrol);background:var(--petrol)}
  .lid-vink .box .v{opacity:0}
  .lid-vink input:checked + .box .v{opacity:1}
  @media(max-width:600px){.gk-grid{grid-template-columns:1fr}}

  /* ontwerpgroep-inschatting (stap 6) */
  .lid-blok{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}
  .lid-kop{padding:10px 15px;background:var(--cream2);font-size:14px;font-weight:600;color:var(--petrol-dark)}
  .lid-kop .lid-rol{font-weight:400;color:var(--ink-soft);font-size:13px}
  .lid-body{padding:12px 15px}

  /* heatmap (stap 11) */
  .heat-wrap{overflow-x:auto;margin-top:12px}
  .heat{border-collapse:separate;border-spacing:4px;min-width:100%}
  .heat th{font-size:11px;font-weight:600;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;padding:4px 6px;text-align:center;vertical-align:bottom}
  .heat th.groep-h{text-align:left}
  .heat td.groep-c{font-size:13.5px;font-weight:600;color:var(--petrol-dark);white-space:nowrap;padding-right:8px}
  .heat-cel{width:46px;height:34px;border-radius:6px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:all .13s}
  .heat-cel[data-k="groen"]{background:var(--groen);border-color:var(--groen)}
  .heat-cel[data-k="geel"]{background:var(--geel);border-color:var(--geel)}
  .heat-cel[data-k="rood"]{background:var(--rood);border-color:var(--rood)}
  .heat-leg{display:flex;gap:16px;margin-top:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-soft)}
  .heat-leg span{display:inline-flex;align-items:center;gap:7px}
  .heat-leg i{width:13px;height:13px;border-radius:4px;display:inline-block}
  .risk{margin-top:16px}
  .risk-rij{border:1px solid var(--line);border-radius:9px;padding:11px 12px;margin-bottom:9px;background:var(--cream)}
  .risk-rij .r-kop{font-size:13px;font-weight:600;color:var(--petrol-dark);margin-bottom:7px;display:flex;align-items:center;gap:7px}
  .risk-rij .r-kop .r-dot{width:11px;height:11px;border-radius:3px}
  .risk-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}
  @media(max-width:600px){.risk-grid{grid-template-columns:1fr}}

  .notitie-toggle{margin-top:18px;font-size:13.5px;font-weight:500;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;padding:4px 0}
  .notitie-toggle:hover{color:var(--ink)}
  .notitie-toggle .chev{font-size:10px;transition:transform .18s}
  .notitie-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
  .notitie-body{display:none;margin-top:8px}
  .notitie-body.zichtbaar{display:block}
  .notitie-body .hint{font-size:12.5px;color:var(--ink-soft);margin-bottom:6px}

  .namen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .naam-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:999px;border:1.5px dashed var(--terra);background:#fff;font-size:14px}
  .naam-pill .dot{width:10px;height:10px;border-radius:50%;border:1.5px dashed var(--terra)}
  .naam-pill[data-s="groen"]{border:1.5px solid var(--petrol);color:var(--petrol-deep)}
  .naam-pill[data-s="groen"] .dot{border:0;background:var(--petrol)}
  .naam-pill[data-s="bezwaar"]{border:1.5px solid var(--terra)}
  .naam-pill[data-s="bezwaar"] .dot{border:0;background:var(--terra);border-radius:2px;transform:rotate(45deg);width:9px;height:9px}
  .naam-pill[data-s="afwezig"]{border:1.5px solid var(--line);color:var(--ink-soft)}
  .naam-pill[data-s="afwezig"] .dot{border:1.5px solid var(--line)}
  .legende{margin-top:12px;display:grid;gap:7px}
  .leg-rij{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-soft)}
  .leg-dot{flex:none;width:11px;height:11px;border-radius:50%;margin-top:3px}
  .leg-dot.open{border:1.5px dashed var(--terra)}
  .leg-dot.groen{background:var(--petrol)}
  .leg-dot.bezwaar{background:var(--terra);border-radius:2px;transform:rotate(45deg);width:10px;height:10px}
  .leg-dot.afwezig{border:1.5px solid var(--line)}
  .leg-rij b{color:var(--ink);font-weight:600}

  .afronden{display:flex;align-items:flex-start;gap:14px;margin-top:28px;padding-top:18px;border-top:1px solid var(--cream2)}
  .klaar-als{flex:1;font-size:14px;color:var(--ink-soft)}
  .klaar-als b{color:var(--ink)}
  .knop{flex:none;padding:10px 20px;border-radius:9px;background:var(--terra);color:#fff;font-size:15px;font-weight:600}
  .knop:hover{background:var(--terra-hover)}
  .knop.heropen{background:none;border:1.5px solid var(--petrol);color:var(--petrol-deep)}
  .nav{display:flex;justify-content:space-between;margin-top:16px}
  .nav button{padding:8px 14px;border-radius:8px;color:var(--petrol-deep);font-size:14px;font-weight:500;border:1.5px solid transparent}
  .nav button:hover{border-color:var(--petrol)}
  .nav button:disabled{opacity:.35;cursor:default;border-color:transparent}

  .review{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font-size:12px;font-weight:600;color:var(--geel-tekst);background:var(--vul-amber);border:1px solid var(--amber-rand);border-radius:8px;padding:6px 11px}

  /* go/no-go signalen */
  .signaal{border:1px solid var(--line);border-left:4px solid var(--line);border-radius:10px;padding:13px 15px;margin-bottom:10px;background:var(--cream)}
  .signaal.gunstig{border-left-color:var(--groen)}
  .signaal.let{border-left-color:var(--terra)}
  .sig-kop{display:flex;align-items:center;gap:9px;font-size:14.5px;font-weight:600;color:var(--petrol-dark);margin-bottom:5px}
  .sig-dot{width:11px;height:11px;border-radius:50%;flex:none;background:var(--line)}
  .signaal.gunstig .sig-dot{background:var(--groen)}
  .signaal.let .sig-dot{background:var(--terra)}
  .sig-bev{font-size:13.5px;color:var(--ink-soft);margin-bottom:9px}
  .sig-oordeel{max-width:300px}
  .gonogo-besluit{margin-top:18px;padding-top:6px}
  .bron{margin-top:16px;font-size:12.5px;color:var(--ink-soft)}
  .bron a{color:var(--petrol-deep)}

  @media (max-width:560px){.afronden{flex-direction:column}.kaart{padding:20px 18px}.mensen-rij{flex-wrap:wrap}.mensen-rij input.naam{flex:1 1 100%}}
  @media (prefers-reduced-motion:reduce){*{transition:none !important}}

  /* ── launch-scherm ── */
  #launch{position:fixed;inset:0;z-index:1000;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;transition:opacity .6s ease}
  #launch.weg{opacity:0;pointer-events:none}
  #launch .merk{width:170px;height:auto;animation:opkomst .7s ease both}
  #launch .woord{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:44px;letter-spacing:-.01em;color:var(--petrol-deep);animation:opkomst .7s ease .12s both}
  #launch .woord .punt{color:var(--terra)}
  #launch .tagline{font-size:13.5px;letter-spacing:.02em;color:var(--ink-soft);margin-top:-14px;animation:opkomst .7s ease .24s both}
  @keyframes opkomst{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

  /* ── opslagbalk in de kop (sticky) ── */
  .opslagbalk{position:sticky;top:0;z-index:500;display:flex;align-items:center;gap:14px;flex-wrap:nowrap;margin:0 0 22px;padding:12px 0 14px;border-bottom:1px solid var(--line);background:var(--cream)}
  .traject-naam{flex:1;min-width:0}
  .traject-naam input{width:100%;border:1px solid transparent;background:transparent;font-family:Fraunces,Georgia,serif;font-weight:600;font-size:19px;color:var(--petrol-dark);padding:6px 8px;border-radius:8px}
  .traject-naam input:hover{border-color:var(--line)}
  .traject-naam input:focus{border-color:var(--petrol);background:#fff;outline:none}
  .opslag-acties{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
  .opslag-knoppen{display:flex;gap:8px}
  .opslag-status{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
  .knop-klein{padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;border:1.5px solid var(--petrol);color:var(--petrol-deep);background:#fff;transition:all .15s}
  .knop-klein:hover{background:var(--petrol);color:#fff}
  .knop-klein.prim{background:var(--terra);border-color:var(--terra);color:#fff}
  .knop-klein.prim:hover{background:var(--terra-hover);border-color:var(--terra-hover)}
  @media(max-width:560px){
    .wrap{padding:20px 14px 80px}
    .fase-kop h1{font-size:24px}
    /* 16px invoer voorkomt dat iOS bij focus inzoomt en maakt de velden beter tikbaar */
    .wrap input[type=text],.wrap input[type=date],.wrap input[type=number],.wrap select,.wrap textarea{font-size:16px}
    /* slanke opslagbalk: minder hoogte, kleinere titel, compacte knoppen */
    .opslagbalk{flex-wrap:wrap;gap:8px;padding:8px 0 9px;margin-bottom:14px}
    .traject-naam{flex:1 1 100%;order:1}
    .traject-naam input{padding:5px 8px}
    .opslag-acties{order:2;align-items:center;flex-direction:row;justify-content:space-between;width:100%;gap:6px}
    .opslag-knoppen{gap:6px}
    .knop-klein{padding:8px 12px;font-size:13px}
    .opslag-status{display:none}
    /* de bewaar-herinnering als vaste onderbanner i.p.v. in de kop: duidelijk
       zichtbaar dat je nog moet bewaren, zonder ruimte bovenaan te kosten. */
    .bewaar-herinnering{position:fixed;left:12px;right:12px;bottom:12px;z-index:520;text-align:center;box-shadow:0 4px 16px rgba(10,57,54,.14);transform:translateY(6px)}
    .bewaar-herinnering.zichtbaar{transform:translateY(0)}
  }
  .knop-klein.prim:hover{background:var(--terra-hover);border-color:var(--terra-hover)}
  .laad-zone{position:fixed;inset:0;z-index:950;background:rgba(10,57,54,.55);display:none;align-items:center;justify-content:center;padding:20px}
  .laad-zone.open{display:flex}
  .laad-box{background:#fff;border-radius:16px;padding:30px;max-width:440px;width:100%;text-align:center}
  .laad-box h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:20px;color:var(--petrol-dark);margin-bottom:8px}
  .laad-box p{font-size:14px;color:var(--ink-soft);margin-bottom:18px}
  .drop{border:2px dashed var(--line);border-radius:12px;padding:32px 20px;color:var(--ink-soft);font-size:14px;cursor:pointer;transition:all .15s}
  .drop:hover,.drop.over{border-color:var(--petrol);background:var(--cream2);color:var(--petrol-deep)}
  .drop.bezig{border-style:solid;border-color:var(--petrol);color:var(--petrol-deep);cursor:default}
  @keyframes spin{to{transform:rotate(360deg)}}
  .spin{display:inline-block;width:16px;height:16px;margin-right:8px;vertical-align:-3px;border:2px solid var(--line);border-top-color:var(--petrol);border-radius:50%;animation:spin .7s linear infinite}
  .laad-sluit{margin-top:16px;font-size:13.5px;color:var(--ink-soft)}
  .privacy-regel{font-size:12px;color:var(--ink-soft);margin-top:10px;display:flex;align-items:center;gap:6px}

  /* De opmaak van het veranderplan is sinds ronde 6 verhuisd naar
     css/plan.css, samen met de tijdlijn. Wat hier stond was de
     SVG-gantt en de pl-actiekaart; die zijn vervangen door de
     tijdlijn- en lijstrijcomponenten uit componenten.css. */


/* subtiel herkomst-icoon: één ↗ i.p.v. een pil met tekst; de tooltip draagt
   de betekenis (waarheen en wat je er doet). Klik navigeert altijd, ook op
   mobiel zonder hover. Vervangt de bs-/pl-herkomst-pillen app-breed. */
.herkomst-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;padding:0;border:none;background:none;color:var(--ink-soft);font-family:Figtree,system-ui,sans-serif;font-size:13px;line-height:1;cursor:pointer;border-radius:6px;opacity:.5;transition:opacity .12s,color .12s,background .12s;vertical-align:middle}
.herkomst-ic:hover,.herkomst-ic:focus-visible{opacity:1;color:var(--petrol);background:var(--cream2)}
.herkomst-ic.uit{opacity:.22;cursor:default}
.herkomst-ic.uit:hover{background:none;color:var(--ink-soft)}
/* korte lege-staat: kort zinnetje met het ↗ ernaast, geen lange cursieve uitleg */
.leeg-ref{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-soft);margin-top:8px}

/* opslagbalk: 'Verander aanpak'-menu en de bewaar-herinnering */
.verander-aanpak{position:relative;display:inline-block}
.verander-aanpak .chev{font-size:10px}
.verander-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:600;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:0 6px 20px rgba(10,57,54,.14);padding:4px;min-width:132px;display:flex;flex-direction:column}
.verander-menu[hidden]{display:none}
.verander-menu button{font:inherit;font-size:13px;text-align:left;padding:7px 10px;border:0;background:none;border-radius:6px;cursor:pointer;color:var(--ink)}
.verander-menu button:hover{background:var(--cream2)}
.bewaar-herinnering{font-size:12.5px;color:var(--geel-tekst);background:rgba(217,166,60,.14);border:1px solid rgba(217,166,60,.4);border-radius:999px;padding:3px 11px;white-space:nowrap;opacity:0;transform:translateY(-3px);transition:opacity .4s ease,transform .4s ease}
.bewaar-herinnering.zichtbaar{opacity:1;transform:translateY(0)}
.bewaar-herinnering[hidden]{display:none}

/* De toast-meldingen droegen tot ronde 8 hun eigen .toast-klassen hier.
   Sinds toast.js de designcomponent .c-toast gebruikt (componenten.css +
   afwerking.css), zijn die regels verwijderd. Eén stelsel, geen twee. */


  /* ══════════════════════════════════════════════════════════════
     Vooruitblik-kaart (nog niet uitgebouwde fase)
     Read-only: legt uit waar de fase over gaat en waar de data vandaan
     komt. Elke fase blijft zo aanklikbaar.
     ══════════════════════════════════════════════════════════════ */
  .vooruitblik{margin-top:12px}
  .vb-intro{font-size:14.5px;color:var(--ink-soft);margin-bottom:14px}
  .vb-lijst{display:flex;flex-direction:column;gap:10px}
  .vb-bron{display:flex;gap:12px;align-items:flex-start;padding:13px 15px;background:var(--cream2);border-radius:10px}
  .vb-merk{flex:none;width:10px;height:10px;margin-top:5px;border:2px solid var(--petrol);border-radius:50%}
  .vb-tekst{flex:1;min-width:0}
  .vb-bron-fase{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol-deep);margin-bottom:3px}
  .vb-bron-wat{font-size:14px;color:var(--ink);line-height:1.5}

  /* ══════════════════════════════════════════════════════════════
     Fase 4 — uitvoeren en bijsturen (veldtype 'bijsturen')
     Drie lagen: het noorden, de signalen, de besluiten. Leest de
     bronfasen live; elke bron is klikbaar (herkomst) zodat je meteen
     naar de juiste stap kunt om aan te vullen. Kleuren volgen de app.
     ══════════════════════════════════════════════════════════════ */
  .bs{margin-top:12px;display:flex;flex-direction:column;gap:22px}

  /* klikbare herkomst-link, overal waar data uit een eerdere stap komt */
    .bs-mist{color:var(--ink-soft);font-style:italic}

  /* een laag met genummerde kop */
  .bs-laag{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
  .bs-laag-kop{display:flex;align-items:center;gap:12px;padding:13px 16px;background:transparent;border-bottom:1px solid var(--line)}
  .bs-laag-nr{flex:none;width:26px;height:26px;border-radius:50%;background:var(--petrol);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center}
  .bs-laag[data-laag="2"] .bs-laag-nr{background:var(--terra)}
  .bs-laag[data-laag="3"] .bs-laag-nr{background:var(--petrol-deep)}
  .bs-laag[data-laag="4"] .bs-laag-nr{background:var(--ink-soft)}
  .bs-laag-titel{display:flex;flex-direction:column;gap:1px}
  .bs-laag-naam{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:17px;color:var(--petrol-dark)}
  .bs-laag-sub{font-size:12.5px;color:var(--ink-soft)}
  /* inklapbare lagen + sticky mini-nav + warme lege staat (usability) */
  .bs-laag-kop{width:100%;border:0;border-bottom:1px solid var(--line);font:inherit;text-align:left;cursor:pointer}
  .bs-laag-chev{margin-left:auto;flex:none;color:var(--ink-soft);transition:transform .18s}
  .bs-laag.ingeklapt .bs-laag-kop{border-bottom-color:transparent}
  .bs-laag.ingeklapt .bs-laag-chev{transform:rotate(-90deg)}
  .bs-laag.ingeklapt > :not(.bs-laag-kop){display:none}
  .bs-nav{position:sticky;top:0;z-index:60;display:flex;gap:6px;flex-wrap:wrap;padding:9px 0;background:var(--cream)}
  .bs-nav-knop{font:inherit;font-size:12.5px;font-weight:600;color:var(--petrol-deep);background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 13px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
  .bs-nav-knop:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
  .bs-warm{border:1px solid var(--line);border-radius:14px;background:#fff;padding:26px 22px;text-align:center}
  .bs-warm-titel{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:18px;color:var(--petrol-dark);margin:0 0 8px}
  .bs-warm-tekst{font-size:14px;color:var(--ink-soft);line-height:1.55;max-width:56ch;margin:0 auto 18px}
  .bs-warm-links{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
  .bs-warm-knop{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;color:var(--petrol-deep);background:var(--cream2);border:1px solid var(--line);border-radius:10px;padding:9px 14px;cursor:pointer;transition:background .12s,color .12s,border-color .12s}
  .bs-warm-knop:hover{background:var(--petrol);color:#fff;border-color:var(--petrol)}
  .bs-warm-knop:hover .bs-warm-waar{color:rgba(255,255,255,.8)}
  .bs-warm-pijl{font-size:14px}
  .bs-warm-lab{font-weight:600}
  .bs-warm-waar{color:var(--ink-soft)}

  /* een lege-zone-verwijzing met klikbare herkomst */
  .bs-leeg{font-size:13.5px;color:var(--ink-soft);font-style:normal;line-height:1.5;padding:14px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
  .bs-leeg span{flex:1;min-width:180px}

  /* ── laag 1: het noorden ── */
  /* De carrousel-kaart is .c-carrousel-item zelf; de vroegere .bs-crit-
     wrapper eromheen is verwijderd (dubbele rand en ribbon). De bs-crit-*
     kindklassen hieronder stylen alleen nog de inhoud van de kaart. */
  .bs-crit-ambitie{font-size:12px;color:var(--ink-soft);margin-bottom:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .bs-ambitie-lab{font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:11px;color:var(--petrol-deep)}
  .bs-crit-kop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .bs-crit-doel{font-size:15.5px;font-weight:600;color:var(--petrol-dark)}
  .bs-crit-meet{font-size:12.5px;color:var(--ink-soft);background:var(--cream2);border-radius:999px;padding:2px 9px}
  .bs-crit-vannaar{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:14px}
  .bs-crit-vannaar .bs-van{color:var(--ink-soft)}
  .bs-crit-vannaar .bs-pijl{color:var(--terra);font-weight:600}
  .bs-crit-vannaar .bs-naar{color:var(--petrol-deep);font-weight:600}
  .bs-crit-indicator{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:3px}
  .bs-ind-rij{font-size:13px;color:var(--ink)}
  .bs-ind-lab{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol-deep);margin-right:6px}
  /* Ronde 23 §0: de drempel is een stille grijze regel, geen terracotta caps.
     De rij zelf kleurt amber/rood via zijn status-rand als de drempel geraakt is. */
  .bs-ind-lab.bs-ind-drempel{color:var(--ink-soft);text-transform:none;letter-spacing:0;font-weight:500;font-size:11.5px}
  .bs-ind-leeg{font-size:12.5px;color:var(--ink-soft);font-style:italic}

  /* voortgang naar een criterium, afgeleid uit de mijlpalen */
  .bs-voortgang{margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
  .bs-voortgang .bs-leeg{padding:0;font-size:12.5px}
  .bs-voortgang-leeg{font-size:12.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  .bs-voortgang-kop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .bs-vg-lab{font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft)}
  .bs-vg-mijl{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
  .bs-vg-chip{font-size:11.5px;background:var(--cream2);border:1px solid var(--line);border-radius:999px;padding:2px 9px;color:var(--ink)}
  .bs-vg-chip[data-mp="1"]{border-color:var(--petrol-light)}
  .bs-vg-balk{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--cream2);gap:1px}
  .bs-vg-deel[data-k="af"]{background:var(--groen)}
  .bs-vg-deel[data-k="loopt"]{background:var(--petrol-light)}
  .bs-vg-deel[data-k="issue"]{background:var(--geel)}
  .bs-vg-deel[data-k="blok"]{background:var(--rood)}
  .bs-vg-deel[data-k="todo"]{background:var(--rest)}
  .bs-vg-tekst{font-size:12px;color:var(--ink-soft);margin-top:5px}
  .bs-vg-geen{font-size:12px;color:var(--ink-soft);font-style:italic}

  /* ── laag 1: het noorden als samenvattingsstrip (16d) ── */
  /* De strip vervangt de carrousel: één rij per criterium, klikbaar naar de
     criteriumkaart in de detail-popup. Standen tonen, detail op aanvraag. */
  .bs-noord-samenvatting{margin-left:auto;flex:none;font-size:12px;color:var(--ink-soft);white-space:nowrap}
  .bs-noord-strip{display:flex;flex-direction:column}
  .bs-noord-rij{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;
    background:transparent;border:0;border-bottom:1px solid var(--line-zacht,var(--line));padding:11px 16px;cursor:pointer;transition:background .12s}
  .bs-noord-rij:last-child{border-bottom:0}
  .bs-noord-rij:hover{background:var(--cream2)}
  .bs-noord-dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--ink-soft)}
  .bs-noord-dot[data-k="groen"]{background:var(--groen)}
  .bs-noord-dot[data-k="amber"]{background:var(--geel)}
  .bs-noord-dot[data-k="rood"]{background:var(--rood)}
  .bs-noord-dot[data-k="grijs"]{background:var(--rest,var(--ink-soft))}
  .bs-noord-naam{font-size:13.5px;font-weight:600;color:var(--ink)}
  .bs-noord-cijfer{margin-left:auto;flex:none;font-size:12.5px;color:var(--ink-soft);white-space:nowrap}
  .bs-noord-koers{flex:none;font-size:11.5px;font-weight:600;border-radius:999px;padding:2px 10px;white-space:nowrap;
    border:1px solid var(--line);color:var(--ink-soft)}
  .bs-noord-koers[data-k="groen"]{color:var(--groen-tekst,#1E6B4F);background:rgba(44,138,107,.12);border-color:rgba(44,138,107,.4)}
  .bs-noord-koers[data-k="amber"]{color:var(--geel-tekst);background:rgba(217,166,60,.13);border-color:var(--amber-rand)}
  /* de criteriumkaart in de popup: dezelfde rijke inhoud, nu in de body */
  .bs-crit-detail{display:flex;flex-direction:column}
  .bs-crit-acties{margin-top:10px;padding-top:9px;border-top:1px solid var(--line)}

  /* ── Ronde 18b: tabs "Meetpunt | Verloop" + de bewijslijn ── */
  .c-crit-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px}
  .c-crit-tab{font:inherit;font-size:12.5px;color:var(--ink-soft);background:none;border:0;border-bottom:2px solid transparent;padding:7px 14px;cursor:pointer}
  .c-crit-tab.is-actief{font-weight:700;color:var(--petrol-dark);border-bottom-color:var(--terra)}
  .c-verloop{display:flex;flex-direction:column}
  .c-verloop-rij{display:flex;gap:12px}
  .c-verloop-spoor{display:flex;flex-direction:column;align-items:center;flex:none;width:14px}
  .c-verloop-punt{width:10px;height:10px;border-radius:50%;background:var(--ink-soft);flex:none}
  .c-verloop-punt[data-k="groen"]{background:var(--groen)}
  .c-verloop-punt[data-k="rood"]{background:var(--rood)}
  .c-verloop-punt[data-k="amber"]{background:var(--geel)}
  .c-verloop-punt.is-ruit{width:12px;height:12px;border-radius:3px;transform:rotate(45deg);background:var(--terra)}
  .c-verloop-lijn{width:2px;flex:1;background:var(--line);min-height:14px}
  .c-verloop-inhoud{display:flex;flex-direction:column;gap:2px;padding-bottom:14px}
  .c-verloop-rij:last-child .c-verloop-inhoud{padding-bottom:0}
  .c-verloop-kop{font-size:11.5px;color:var(--ink-soft)}
  .c-verloop-kop.is-interventie{color:var(--terra-tekst);font-weight:700}
  .c-verloop-tekst{font-size:13px;color:var(--ink);line-height:1.45}
  .c-verloop-pijl{font:inherit;font-size:11.5px;font-weight:600;color:var(--petrol-deep);background:none;border:0;cursor:pointer;white-space:nowrap}
  .c-verloop-pijl:hover{text-decoration:underline}
  /* §8: inline-correctie van een gemeten waarde vanuit de Verloop-tab */
  .c-verloop-corrigeer{font:inherit;font-size:11.5px;font-weight:600;color:var(--ink-soft);background:none;border:0;cursor:pointer;white-space:nowrap}
  .c-verloop-corrigeer:hover{text-decoration:underline;color:var(--petrol-deep)}
  .c-verloop-corr{display:flex;gap:6px;align-items:center;margin-top:6px}
  .c-verloop-corr-in{max-width:140px}
  .c-verloop-corr-ok{font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--terra);border:0;border-radius:var(--r-pil,999px);padding:4px 12px;cursor:pointer}

  /* ── "Wat we leren" (16a): kwalitatieve helft van agendapunt 2 ── */
  /* Ingesloten paneel (--cream2) binnen de witte laag-kaart, zodat de witte
     kolommen eruit lichten — vlakkenhiërarchie (design-review §2, frame 16a:
     witte kaartjes op een getint paneel). Velden/kaartjes blijven wit. */
  .c-watweleren{background:var(--cream2);border-radius:var(--r-l);padding:16px 18px;margin:14px 16px}
  .wwl-kop{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
  .wwl-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
  .wwl-sub{font-size:12px;color:var(--ink-soft)}
  .wwl-trend{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
    color:var(--terra-tekst);background:rgba(200,121,65,.08);border:1px solid rgba(200,121,65,.4);border-radius:999px;padding:4px 13px;white-space:nowrap}
  /* FB22: de vertrouwen-chip is klikbaar naar de uitleg-popup */
  .wwl-trend.is-klik{font-family:var(--font-ui);cursor:pointer}
  .wwl-trend.is-klik:hover{background:rgba(200,121,65,.14)}
  .wwl-kolommen{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
  .wwl-kolom{border:1px solid var(--line);border-radius:10px;background:var(--wit);padding:14px 16px}
  .wwl-koltitel{font-size:11.5px;font-weight:700}
  .wwl-kolom[data-soort="zorgen"] .wwl-koltitel{color:var(--terra-tekst)}
  .wwl-kolom[data-soort="positief"] .wwl-koltitel{color:var(--petrol-deep)}
  .wwl-dekking .wwl-koltitel{color:var(--ink-soft)}
  .wwl-leeg{font-size:12.5px;color:var(--ink-soft);font-style:italic;margin-top:10px;line-height:1.5}
  .wwl-lijst{display:flex;flex-direction:column;gap:9px;margin-top:10px}
  .wwl-rij{display:flex;align-items:flex-start;gap:8px;width:100%;text-align:left;font:inherit;background:transparent;border:0;padding:0;cursor:pointer}
  .wwl-rij:hover .wwl-tekst{color:var(--petrol-deep)}
  .wwl-dot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:5px;background:var(--ink-soft)}
  .wwl-dot[data-k="groen"]{background:var(--groen)}
  .wwl-dot[data-k="amber"]{background:var(--geel)}
  .wwl-dot[data-k="rood"]{background:var(--rood)}
  .wwl-tekst{font-size:13px;color:var(--ink);line-height:1.45}
  .wwl-meta{font-size:11.5px;color:var(--ink-soft);white-space:nowrap}
  /* FB23: de petrol ↗ rechts op de rij; herkomst-pijl (spring naar de bron) */
  .wwl-pijl{flex:none;margin-left:auto;padding-left:6px;color:var(--petrol-deep);font-size:13px;line-height:1.45;opacity:.7}
  .wwl-rij:hover .wwl-pijl{opacity:1}
  /* dekking-kolom: naam · balk · aantal, met een nudge onderaan */
  .wwl-dekking-lijst{display:flex;flex-direction:column;gap:8px;margin-top:10px}
  .wwl-dekking-lijst[hidden]{display:none}
  .wwl-dek-rij{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink)}
  .wwl-dek-naam{width:88px;flex:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wwl-dek-balk{flex:1;height:7px;border-radius:4px;background:var(--cream2);overflow:hidden;display:flex}
  .wwl-dek-vul{background:var(--groen)}
  .wwl-dek-vul[data-k="amber"]{background:var(--geel)}
  .wwl-dek-vul[data-k="rood"]{background:var(--rood)}
  .wwl-dek-n{flex:none;font-size:11px;color:var(--ink-soft);min-width:14px;text-align:right}
  .wwl-dek-nudge{display:inline-block;margin-top:10px;font:inherit;font-size:11px;font-weight:600;color:var(--petrol-deep);
    background:transparent;border:0;padding:0;cursor:pointer;text-align:left}
  .wwl-dek-nudge:hover{text-decoration:underline}
  /* mobiel (16c): "Wat we leren" stapelt, dekking klapt in tot één regel */
  .wwl-dekking-samen{display:none}
  @media(max-width:699px){
    .wwl-kolommen{grid-template-columns:1fr}
    .wwl-dekking-samen{display:flex;align-items:center;gap:8px;width:100%;font:inherit;font-size:12px;color:var(--ink);
      background:transparent;border:0;padding:8px 0 0;cursor:pointer}
    .wwl-dekking-samen .wwl-dot{margin-top:0}
    .wwl-dekking-samen .wwl-chev{margin-left:auto;transition:transform .16s}
    .wwl-dekking-samen.is-open .wwl-chev{transform:rotate(180deg)}
  }

  /* ── laag 2: de signalen ── */
  .bs-signalen{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 16px}
  @media(max-width:640px){.bs-signalen{grid-template-columns:1fr}}
  .bs-sig-kaart{border:1px solid var(--line);border-radius:11px;padding:12px 13px;background:var(--cream2);display:flex;flex-direction:column}
  .bs-sig-kaart.prominent{border-color:var(--terra);border-width:1.5px}
  .bs-sig-kop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
  .bs-sig-titel{font-size:14px;font-weight:600;color:var(--petrol-dark)}
  .bs-sig-bron{font-size:11px;color:var(--ink-soft)}
  .bs-sig-kop .herkomst-ic{margin-left:auto}
  .bs-sig-lijst{display:flex;flex-direction:column;gap:7px}
  .bs-sig-item{padding:8px 10px;background:#fff;border:1px solid var(--line);border-radius:8px}
  .bs-sig-item[data-status="blok"]{border-left:3px solid var(--rood)}
  .bs-sig-item[data-status="issue"]{border-left:3px solid var(--geel)}
  .bs-sig-item[data-zone="rood"]{border-left:3px solid var(--rood)}
  .bs-sig-item[data-zone="geel"]{border-left:3px solid var(--geel)}
  .bs-sig-item[data-oordeel="rood"]{border-left:3px solid var(--rood)}
  .bs-sig-item[data-oordeel="groen"]{border-left:3px solid var(--groen)}
  .bs-sig-item.bs-sig-weerstand{border-left:3px solid var(--terra)}
  .bs-sig-hoofd{font-size:13.5px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:7px;flex-wrap:wrap}
  .bs-sig-sub{font-size:12px;color:var(--ink-soft);margin-top:2px}
  .bs-sig-lab{font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:10.5px;color:var(--terra);margin-right:5px}
  .bs-sig-kaart .bs-leeg{padding:0;font-size:12.5px}
  .bs-zone-dot{flex:none;width:11px;height:11px;border-radius:3px}
  .bs-zone-dot[data-k="rood"]{background:var(--rood)}
  .bs-zone-dot[data-k="geel"]{background:var(--geel)}

  /* ── laag 3: de besluiten (bewerkbaar) ── */
  .bs-besluit{border:1px solid var(--line);border-left:4px solid var(--petrol);border-radius:0 10px 10px 0;background:#fff;overflow:hidden}
  .bs-besluit[data-aard="taai"]{border-left-color:var(--terra)}
  .bs-besluit[data-status="goedgekeurd"]{border-left-color:var(--groen)}
  .bs-besluit[data-status="uitgevoerd"]{border-left-color:var(--ink-soft)}
  .bs-besluit[data-status="afgewezen"]{border-left-color:var(--rood)}
  .bs-besluit[data-status="voorleggen"],.bs-besluit[data-status="aanpassing"]{border-left-color:var(--geel)}
  .bs-besluit[data-aard="taai"] .bs-aard-merk{background:var(--terra);border-radius:2px;transform:rotate(45deg)}
  .bs-veld{display:flex;flex-direction:column;gap:5px}
  .bs-veld-lab{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--petrol-deep)}
  .bs-hint{font-size:12px;color:var(--ink-soft);line-height:1.45}
  .bs-veld textarea,.bs-veld input[type=text],.bs-veld input[type=date]{width:100%;font:inherit;font-size:var(--t-veld);line-height:var(--lh-veld);padding:var(--pad-veld);border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);resize:none}
  .bs-veld textarea:focus,.bs-veld input:focus{outline:none;border-color:var(--petrol-light)}
  .bs-pillen,.bs-status-rij{display:flex;flex-wrap:wrap;gap:6px}
  .bs-pil,.bs-status-knop{font:inherit;font-size:12.5px;padding:4px 11px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink-soft);cursor:pointer}
  .bs-pil[data-aan="1"],.bs-status-knop[data-aan="1"]{background:var(--petrol);color:#fff;border-color:var(--petrol)}
  .bs-impact-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
  @media(max-width:640px){.bs-impact-grid{grid-template-columns:1fr}}
  .bs-impact-cel{display:flex;flex-direction:column;gap:4px}
  .bs-impact-lab{font-size:11.5px;font-weight:600;color:var(--ink)}
  .bs-impact-cel textarea{width:100%;font:inherit;font-size:13.5px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;resize:none}
  .bs-act-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  @media(max-width:640px){.bs-act-grid{grid-template-columns:1fr}}
  .bs-cel{display:flex;flex-direction:column;gap:4px}
  .bs-lab{font-size:11.5px;font-weight:600;color:var(--ink)}
  .bs-cel input{width:100%;font:inherit;font-size:var(--t-veld);line-height:var(--lh-veld);padding:var(--pad-veld);border:1px solid var(--line);border-radius:8px;background:#fff}
  .bs-bronkeuze{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:2px}
  .bs-bronkeuze-lab{font-size:12px;color:var(--ink-soft)}
  .bs-bronkeuze select{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;max-width:100%}
  .bs-item-acties{margin-top:2px}
  .bs-item-acties .pl-verwijder{font:inherit;font-size:12.5px;color:var(--rood);background:none;border:0;cursor:pointer;padding:4px 0}
  .bs-item-acties .pl-verwijder:hover{text-decoration:underline}

  /* ── besluitenzone-herwerking (bouwronde): meta-header, werkbalk, tijdlijn ── */
  .bs-sig-item{position:relative}
  .bs-sig-hoofd{padding-right:22px}
  /* Ronde 23 §0: geen knoppen op de rij. De hele rij is klikbaar naar de
     signaal-popup; een subtiel ↗ rechtsboven verraadt dat. */
  .bs-sig-klik{cursor:pointer;transition:background .12s,border-color .12s}
  .bs-sig-klik:hover{background:var(--cream2);border-color:var(--petrol-light)}
  .bs-sig-klik:focus-visible{outline:2px solid var(--petrol-light);outline-offset:1px}
  .bs-sig-open{position:absolute;top:8px;right:9px;font-size:12px;color:var(--ink-soft);line-height:1;pointer-events:none}
  .bs-sig-klik:hover .bs-sig-open{color:var(--petrol)}
  /* De stille grijze drempel op de indicatorrij (was terracotta caps). */
  .bs-sig-drempel{font-size:11.5px;color:var(--ink-soft);margin-right:5px}
  /* De signaal-popup (17d): detailregels + de actie-zone die vroeger op de rij stond. */
  .bs-sigpop{display:flex;flex-direction:column;gap:10px}
  .bs-sigpop-rij{font-size:14px;color:var(--ink);line-height:1.5}
  .bs-sigpop-lab{font-size:11px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-soft);margin-right:6px}
  .bs-sigpop-val{color:var(--ink)}
  .bs-sigpop-actie{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;padding-top:10px;border-top:1px solid var(--line)}
  .bs-sigpop-plus{font:inherit;font-size:13px;font-weight:600;color:#fff;background:var(--terra);border:1px solid var(--terra);border-radius:999px;padding:6px 15px;cursor:pointer}
  .bs-sigpop-plus:hover{background:var(--terra-hover,#b96d38);border-color:var(--terra-hover,#b96d38)}
  /* De actie-zone rechtsboven: de lopende-acties-chip (indien aanwezig) plus
     de "+ actie"-knop, naast elkaar. Nog gebruikt in de meetpunt-detailkaart. */
  .bs-sig-actie{position:absolute;top:7px;right:7px;display:flex;align-items:center;gap:6px}
  /* §Z/36c — "+ actie" is een ACTIE-affordance: terracotta (#C87941), niet grijs.
     Volgt de kleurgrammatica (terracotta = handelen), overal waar de pill staat. */
  .bs-sig-besluit{font:inherit;font-size:11px;font-weight:600;color:var(--terra-tekst);background:rgba(200,121,65,.08);border:1px solid var(--terra);border-radius:999px;padding:2px 9px;cursor:pointer;transition:background .12s,color .12s}
  .bs-sig-item:hover .bs-sig-besluit,.bs-sig-besluit:focus-visible{background:rgba(200,121,65,.15)}
  .bs-sig-besluit:hover{background:var(--terra);color:#fff;border-color:var(--terra)}
  /* De lopende-acties-chip: petrol als er iets goedgekeurd/uitgevoerd is,
     amber als het bij voorstel/voorleggen blijft. Altijd volledig zichtbaar
     (niet vervagend zoals de knop), want ze waarschuwt voor dubbel werk. */
  .bs-lopende-chip{font:inherit;font-size:11px;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap;cursor:pointer}
  .bs-lopende-chip.is-hoog{color:var(--petrol);background:var(--vul-petrol);border:1px solid var(--petrol-light)}
  .bs-lopende-chip.is-open{color:var(--geel-tekst);background:var(--vul-amber-zacht);border:1px solid var(--geel)}
  .bs-tl-leeg{font-size:13px;color:var(--ink-soft);margin:2px 0 8px}
  .bs-tl-lijst{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
  .bs-tl-rij{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:0 8px 8px 0;background:var(--cream2);padding:8px 10px}
  .bs-tl-rij[data-k="goedgekeurd"]{border-left-color:var(--groen)}
  .bs-tl-rij[data-k="uitgevoerd"]{border-left-color:var(--ink-soft)}
  .bs-tl-rij[data-k="afgewezen"]{border-left-color:var(--rood)}
  .bs-tl-rij[data-k="voorleggen"],.bs-tl-rij[data-k="aanpassing"]{border-left-color:var(--geel)}
  .bs-tl-kop{display:flex;align-items:center;gap:8px;margin-bottom:6px}
  .bs-tl-badge{font-size:11.5px;font-weight:600;color:var(--petrol-dark)}
  .bs-tl-reg{font-size:11px;color:var(--ink-soft)}
  .bs-tl-kop .rij-weg{margin-left:auto}
  .bs-tl-velden{display:grid;grid-template-columns:170px 1fr;gap:8px}
  @media(max-width:640px){.bs-tl-velden{grid-template-columns:1fr}}
  .bs-tl-toevoeg{display:flex;flex-wrap:wrap;gap:6px}
  .bs-tl-knop{font:inherit;font-size:12px;color:var(--ink-soft);background:#fff;border:1px dashed var(--line);border-radius:999px;padding:3px 10px;cursor:pointer;transition:border-color .12s,color .12s}
  .bs-tl-knop:hover{border-color:var(--petrol);color:var(--petrol)}

  /* meetpunten in het noorden (C): waarde-invoer per meetpunt */
  .bs-meetpunten{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
  .bs-mp-kop{display:flex;align-items:center;gap:6px;margin-bottom:6px}
  .bs-mp-kop .bs-vg-lab{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--terra)}
  .bs-vg-af{font-size:12.5px;font-weight:600;color:var(--groen);margin-top:4px}
  .bs-vg-af::before{content:"\002713 "}
  .bs-effect{margin-top:6px;padding:9px 11px;border-radius:8px;background:var(--cream2);border:1px solid var(--line)}
  .bs-effect-ind{font-size:13px;color:var(--ink);margin-bottom:5px}
  .bs-effect-stand{font-size:12.5px;font-weight:600}
  .bs-effect-stand[data-k="onder"]{color:var(--geel-tekst)}
  .bs-effect-stand[data-k="herstel"]{color:var(--groen)}
  .bs-effect-stand[data-k="herstel"]::before{content:"\002713 "}
  .bs-effect-stand[data-k="geen"]{color:var(--ink-soft);font-weight:400}
  /* contextregel noorden (V2.2), versheid (V2.4) */
  .bs-mp-vers{font-size:11.5px;color:var(--ink-soft);margin-top:6px}
  .bs-mp-vers[data-stale="1"]{color:var(--geel-tekst);font-weight:600}
  .bs-mp-uitleg{font-size:12px;color:var(--ink-soft);line-height:1.55;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
  .bs-mp-uitleg b{color:var(--petrol-deep);font-weight:600}
  /* meetpunten in het noorden: laatste meting, volgende meting */
  .bs-mp-laatste{margin-top:8px;padding:10px 12px;border-radius:9px;background:#fff;border:1px solid var(--line);border-left:3px solid var(--line)}
  .bs-mp-laatste[data-oordeel="groen"]{border-left-color:var(--groen)}
  .bs-mp-laatste[data-oordeel="rood"]{border-left-color:var(--rood)}
  .bs-mp-laatste-kop{font-size:12px;color:var(--ink-soft)}
  .bs-mp-laatste-det{font-size:13.5px;color:var(--ink);margin:3px 0 8px}
  .bs-mp-laatste-det b{color:var(--petrol-dark)}
  .bs-mp-volgende{margin-top:8px;font-size:12.5px;color:var(--ink-soft)}
  .bs-mp-grafiek{margin:8px 0}
  .bs-mp-svg{display:block;overflow:visible}
  .bs-mp-svg rect{transition:opacity .12s}
  .bs-mp-svg rect:hover{opacity:.82}
  .bs-mp-leg{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px;font-size:11px;color:var(--ink-soft)}
  .bs-mp-leg-i{display:inline-flex;align-items:center;gap:5px}
  .bs-mp-leg-i::before{content:"";width:9px;height:9px;border-radius:2px;background:var(--ink-soft)}
  .bs-mp-leg-i[data-k="groen"]::before{background:var(--groen)}
  .bs-mp-leg-i[data-k="rood"]::before{background:var(--rood)}
  .bs-mp-leg-i[data-k="lijn"]::before{width:14px;height:0;border-radius:0;background:none;border-top:2px solid var(--petrol-deep)}
  /* §8: het gat in de grafiek — een geplande meting die niet gebeurde */
  .bs-mp-leg-i[data-k="gemist"]::before{border-radius:50%;background:var(--cream);border:1.4px dashed var(--ink-soft)}

  /* ── frame 30e (§9): change-impact-matrix groep × domein ──
     één bordered tabel (fijne binnen-lijnen), cel = stip in drie standen:
     geen/licht = open ringetje · stevig = amber · ingrijpend = terracotta. */
  .c-impactmatrix{margin-top:8px}
  .c-impact-intro{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0 0 12px}
  .c-impact-leeg{font-size:13px;color:var(--ink-soft);background:var(--cream2);border-radius:10px;padding:14px 16px;line-height:1.5}
  .c-impact-leeg-link{display:inline-block;margin-top:8px;border:0;background:none;padding:0;font-family:var(--font-ui);font-size:13px;font-weight:var(--gew-zwaar);color:var(--petrol);cursor:pointer}
  .c-impact-leeg-link:hover{text-decoration:underline}
  /* §9b — "+ domein"-toolbar + klikbare eigen-kolomkop + gedimde delta-suggestie */
  .c-impact-toolbar{display:flex;justify-content:flex-end;margin:0 0 6px}
  .c-impact-plusdomein{border:1px dashed var(--line-sterk);background:transparent;color:var(--petrol-deep);font-size:12px;border-radius:999px;padding:3px 12px;cursor:pointer}
  .c-impact-plusdomein:hover{border-color:var(--petrol);background:var(--cream2)}
  .c-impact-kop-eigen{font:inherit;font-size:10.5px;color:var(--petrol-deep);background:none;border:0;border-bottom:1px dashed var(--line-sterk);padding:9px 4px;cursor:pointer;align-self:stretch;line-height:1.2}
  .c-impact-kop-eigen:hover{color:var(--terra-tekst)}
  .c-impact-domein-rename{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink)}
  .c-impact-domein-del{margin-top:14px;border:1px solid var(--line);background:var(--wit);color:var(--terra-tekst);font-size:13px;border-radius:8px;padding:8px 12px;cursor:pointer}
  .c-impact-domein-del:hover{border-color:var(--terra-tekst)}
  .c-impact-suggestie{display:block;width:100%;text-align:left;border:1px dashed var(--line-sterk);background:transparent;color:var(--ink-soft);font-size:12px;line-height:1.4;border-radius:8px;padding:6px 9px;margin:2px 0 6px;cursor:pointer}
  .c-impact-suggestie:hover{color:var(--ink);border-color:var(--petrol)}
  .c-impact-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .c-impact-grid{display:grid;min-width:min-content;border:1px solid var(--line);border-radius:10px;background:var(--wit);overflow:hidden}
  /* elke cel deelt de rij-lijn onderaan; de laatste rij niet */
  .c-impact-kop,.c-impact-groep,.c-impact-cel,.c-impact-landtcel{border-bottom:1px solid #EFEBE3}
  .c-impact-cel.is-laatste,.c-impact-landtcel.is-laatste,.c-impact-groep.is-laatste{border-bottom:0}
  .c-impact-kop{font-size:10.5px;color:var(--ink-soft);padding:9px 4px;text-align:center;line-height:1.2;letter-spacing:.03em;align-self:stretch;display:flex;align-items:flex-end;justify-content:center}
  .c-impact-hoek{border-right:0}
  .c-impact-groep{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:none;border:0;padding:10px 12px;text-align:left;cursor:pointer;display:flex;align-items:center}
  .c-impact-groep:hover{color:var(--petrol-deep);text-decoration:underline}
  .c-impact-cel{display:flex;align-items:center;justify-content:center;padding:8px 4px}
  /* de stip zelf */
  .c-impact-dot{border:0;background:none;cursor:pointer;padding:4px;line-height:0;border-radius:50%}
  .c-impact-dot:hover{background:var(--cream2)}
  .c-impact-dot-p{display:block;width:14px;height:14px;border-radius:50%}
  .c-impact-dot[data-stand="licht"] .c-impact-dot-p{background:#fff;border:1.5px solid #C9C2B4}
  .c-impact-dot[data-stand="stevig"] .c-impact-dot-p{background:#D9A63C}
  .c-impact-dot[data-stand="ingrijpend"] .c-impact-dot-p{background:#C0563A}
  .c-impact-landtcel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px}
  .c-impact-landt{font:inherit;font-size:11.5px;border:1px solid var(--line);border-radius:7px;padding:4px 6px;background:var(--wit);width:100%;max-width:84px;color:var(--ink)}
  /* §9: de twee "landt"-modi — koppel-link, ontkoppelen, en "zet als mijlpaal" */
  .c-impact-zetmijlpaal{font:inherit;font-size:9.5px;font-weight:600;color:var(--petrol-deep);background:none;border:0;cursor:pointer;padding:0;line-height:1.2;text-align:center}
  .c-impact-zetmijlpaal:hover{text-decoration:underline}
  .c-impact-landtlink{font:inherit;font-size:10.5px;font-weight:600;color:var(--petrol-deep);background:none;border:0;cursor:pointer;padding:0;white-space:nowrap}
  .c-impact-landtlink:hover{text-decoration:underline}
  .c-impact-ontkoppel{font:inherit;font-size:9px;color:var(--ink-soft);background:none;border:0;cursor:pointer;padding:0}
  .c-impact-ontkoppel:hover{text-decoration:underline}
  .c-impact-leg{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px;font-size:11px;color:var(--ink-soft)}
  .c-impact-leg-i{display:inline-flex;align-items:center;gap:6px}
  .c-impact-leg-i::before{content:"";width:12px;height:12px;border-radius:50%}
  .c-impact-leg-i[data-stand="licht"]::before{background:#fff;border:1.5px solid #C9C2B4}
  .c-impact-leg-i[data-stand="stevig"]::before{background:#D9A63C}
  .c-impact-leg-i[data-stand="ingrijpend"]::before{background:#C0563A}
  .c-impact-leg-hint{margin-left:auto;color:#A6A198}
  /* de groep-popup (17d): per domein een stip + nu→straks + notitie */
  .c-impact-popup-intro{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:0 0 14px}
  .c-impact-popup-leeg{font-size:13px;color:var(--ink-soft);line-height:1.5;margin:2px 0 4px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;background:var(--wit)}
  .c-impact-domein{border:1px solid var(--line);border-left:3px solid #C9C2B4;border-radius:10px;padding:12px 14px;margin-bottom:10px;background:var(--wit)}
  .c-impact-domein[data-stand="stevig"]{border-left-color:#D9A63C}
  .c-impact-domein[data-stand="ingrijpend"]{border-left-color:#C0563A}
  .c-impact-domein-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
  .c-impact-domein-lab{font-size:14px;font-weight:600;color:var(--ink)}
  .c-impact-domein-stand{display:inline-flex;align-items:center;gap:7px}
  .c-impact-domein-standlab{font-size:11.5px;font-weight:600;color:var(--ink-soft)}
  .c-impact-vannaar{display:flex;align-items:center;gap:8px;margin-bottom:8px}
  .c-impact-vannaar .c-veldvak-invoer{flex:1;min-width:0}
  .c-impact-pijl{color:var(--ink-soft);flex:none}
  .c-impact-notitie{width:100%;resize:vertical}
  @media(max-width:560px){
    .c-impact-vannaar{flex-direction:column;align-items:stretch;gap:4px}
    .c-impact-pijl{align-self:center}
  }
  /* fase 3: verwachting- en resultaatblok van een meetpunt */
  .pl-mp-verwacht{margin-top:6px}
  .pl-mp-resultaat{margin-top:8px}

  /* ── het ritme: denkvragen met een link naar een actie ── */
  .bs-ritme{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;padding:14px 16px}
  @media(max-width:640px){.bs-ritme{grid-template-columns:1fr}}
  .bs-ritme-blok{border:1px solid var(--line);border-radius:12px;background:#fff;padding:13px 14px}
  .bs-ritme-kop{display:flex;flex-direction:column;gap:1px;margin-bottom:9px}
  .bs-ritme-naam{font-size:14px;font-weight:600;color:var(--petrol-dark)}
  .bs-denkvraag-tekst{font-size:13px;color:var(--ink-soft);line-height:1.5;margin-bottom:10px}
  .bs-actie-link{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;color:var(--petrol-deep);background:none;border:0;padding:2px 0;cursor:pointer}
  .bs-actie-link:hover{color:var(--terra)}
  .bs-actie-pijl{transition:transform .14s}
  .bs-actie-link:hover .bs-actie-pijl{transform:translateX(3px)}

  /* ── Brede schermen: de schil groeit mee, fase 3 en 4 benutten de ruimte ── */
  @media(min-width:1100px){
    .wrap{max-width:1160px}
    .kaart{max-width:760px;margin-left:auto;margin-right:auto}
    .kaart.breed{max-width:none}
    /* in een brede kaart schaalt alles mee: ook het doel, de duiding-panelen
       (waarom dit telt, zo pak je het aan), notities en bron gebruiken de
       volledige breedte in plaats van een smalle leeskolom. */

    /* fase 4: elke laag blijft een brede, horizontale band. De inhoud spreidt
       over de breedte, zodat de banden laag blijven en er geen witruimte naast
       een korte laag ontstaat (i.p.v. drie ongelijke verticale kolommen).
       auto-fit: bij een enkele kaart rekt die tot de volle breedte, bij meer
       komen ze naast elkaar. Zo blijft er nergens een leeg kolomvak staan. */
    .kaart.breed .bs-signalen{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
  }

  /* ── fase 5 (borgen): dropdown in matrixLive en de eindbalans ── */
  .mx-select{font:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
  .afsluiting{display:flex;flex-direction:column;gap:12px;margin-top:4px}
  .afs-cel{display:flex;flex-direction:column;gap:5px}
  .afs-lab{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol-deep)}
  .afs-rij{display:grid;grid-template-columns:1fr 180px;gap:12px}
  @media(max-width:560px){.afs-rij{grid-template-columns:1fr}}
  .afsluiting textarea,.afsluiting input{font:inherit;font-size:13.5px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);width:100%}
  .afsluiting textarea{resize:vertical;line-height:1.5}

  /* ── betrokkenen-blok in de uitkomst, en de praktische nudge onderaan ── */
  .betr-lijst{display:flex;flex-direction:column;gap:7px;margin-top:6px}
  .stap-nudge{margin-top:16px;padding:11px 14px;border-radius:10px;background:var(--cream2);border:1px solid var(--line)}
  .sn-lab{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--petrol-deep)}
  .sn-tekst{margin:4px 0 0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}

  /* ── acties in fase 1 en 2, en hun herkomst-label op het bord in fase 4 ── */
  .stap-acties{margin-top:18px}