/* SUMP-monitor: kopbalk, kaart, wiel, matrix en opgavepagina */
body { font-family: 'Source Sans 3', 'Segoe UI', Helvetica, Arial, sans-serif; color: #1f1f1f; }
.kopbalk { height: 42px; box-sizing: border-box; background: #00CA8C; color: #fff;
           display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.kruimels { display: flex; align-items: center; min-width: 0; white-space: nowrap; overflow: hidden;
            text-overflow: ellipsis; font-size: 15px; }
.kruimels a { color: #fff; text-decoration: none; font-weight: 600; }
.kruimels a:hover { text-decoration: underline; }
.kruimel-sep { margin: 0 9px; opacity: .75; }
.kruimel-hier { opacity: .95; overflow: hidden; text-overflow: ellipsis; }
.kop-rechts { display: flex; align-items: center; gap: 10px; font-weight: 700; flex: none; }
a.kop-rechts { color: #fff; text-decoration: none; }
a.kop-rechts:hover img, a.kop-rechts:focus-visible img { transform: scale(1.08); }
a.kop-rechts img { transition: transform .15s; }
.handleiding-pagina { padding: 24px 16px 60px; box-sizing: border-box; }
.handleiding { max-width: 920px; margin: 0 auto; line-height: 1.55; color: #1f2d27; font-size: 15px; }
.handleiding h1 { color: #00805a; font-size: 26px; margin: 0 0 8px; }
.handleiding h2 { color: #00805a; font-size: 20px; margin: 32px 0 8px; padding-bottom: 4px; border-bottom: 2px solid #00CA8C; }
.handleiding h3 { font-size: 16px; margin: 20px 0 6px; }
.handleiding hr { border: none; border-top: 1px solid #dfe9e5; margin: 24px 0; }
.handleiding table { border-collapse: collapse; width: 100%; margin: 8px 0 14px; font-size: 14px; display: block; overflow-x: auto; }
.handleiding th, .handleiding td { border: 1px solid #dfe9e5; padding: 6px 9px; text-align: left; vertical-align: top; }
.handleiding th { background: #e6faf3; }
.handleiding code { background: #f2f5f4; padding: 1px 5px; border-radius: 4px; font-size: 13px; word-break: break-word; }
.handleiding li { margin: 3px 0; }
.scroll { height: calc(100vh - 42px); overflow-y: auto; background: #f5f8f6; }
.inhoud { max-width: 1400px; margin: 0 auto; padding: 22px 24px 48px; }
.paginatitel { color: #00805a; margin: 4px 0 6px; font-size: 30px; }
.intro { color: #555; font-size: 16px; margin: 0 0 18px; }
.voetnoot { color: #777; font-size: 12.5px; margin-top: 14px; max-width: 110ch; }
.stip { display: inline-block; border-radius: 50%; flex: none; vertical-align: middle; }
.stip.leeg { background: #fff; border: 1.5px dashed #9aa39f; box-sizing: border-box; }
.stip.ruit { background: #9aa39f; border-radius: 2px; transform: rotate(45deg); margin: 0 1px; }
/* startscherm */
.tegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.tegel-link { text-decoration: none; color: inherit; }
.tegel { border-radius: 10px; padding: 24px 22px; min-height: 170px; box-sizing: border-box;
         height: 100%; display: flex; flex-direction: column; gap: 8px; }
.tegel.actief { background: #00CA8C; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.tegel.inactief { background: #e4e6e5; color: #9a9d9b; cursor: not-allowed; }
.tegel-naam { font-size: 28px; font-weight: 700; }
.tegel-sub { font-size: 14px; opacity: .9; }
.startkaart { position: relative; height: min(68vh, 640px); min-height: 420px; background: #f5f8f6;
              border: 1px solid #e1e7e4; border-radius: 10px; overflow: hidden; }
.startkaart .leaflet-container { background: #f5f8f6; }
.startkaart .leaflet-interactive { cursor: default; }
.leaflet-tooltip.gem-label { background: transparent; border: none; box-shadow: none;
             color: #6f7472; font-weight: 600; font-size: 13px; padding: 0; }
.gem-label::before { display: none; }
.gem-label.actief { color: #ffffff; font-size: 16px; font-weight: 700;
                    text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.regio-marker { background: transparent; border: none; }
.startkaart .regio-marker { cursor: pointer; }
.regio-logo { display: flex; box-sizing: border-box; width: max-content; white-space: nowrap;
              align-items: center; gap: 10px; background: #fff; border-radius: 10px;
              padding: 10px 14px; text-decoration: none; color: #1f1f1f;
              box-shadow: 0 2px 8px rgba(0,0,0,.15); border: 2px solid #00CA8C;
              transition: transform .12s ease, box-shadow .12s ease; }
.regio-logo:hover, .regio-logo:focus-visible { transform: translateY(-2px);
              box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.regio-logo-img { height: 44px; }
.regio-naam { font-weight: 700; color: #00805a; font-size: 16px; }
.regio-sub { font-size: 12.5px; color: #666; }
.startkaart-legenda { position: absolute; left: 16px; bottom: 16px; z-index: 1000; }
/* legenda met kleurverloop */
.legenda-status { background: #fff; border: 1px solid #dde3e0; border-radius: 8px;
                  padding: 10px 14px 10px; display: inline-flex; flex-direction: column; gap: 6px;
                  font-size: 12.5px; width: 270px; box-sizing: border-box; }
.legenda-kop { font-weight: 700; color: #00805a; font-size: 13px; }
.legenda-balk { position: relative; height: 12px; border-radius: 6px; }
.legenda-streep { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #1f1f1f; }
.legenda-uiteinden { display: flex; justify-content: space-between; color: #777; font-size: 11.5px;
                     margin: -3px 0 2px; }
.legenda-rij { display: flex; align-items: center; gap: 6px; color: #333; }
.legenda-sub { color: #888; margin-left: auto; white-space: nowrap; }
/* gebiedspagina */
.gebied-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.kerngegevens { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.kg { background: #fff; border: 1px solid #e1e7e4; border-radius: 8px; padding: 8px 14px; min-width: 150px; }
.kg-label { font-size: 12.5px; color: #00805a; font-weight: 700; }
.kg-waarde { font-size: 20px; font-weight: 700; }
.kg-bron { font-size: 11.5px; color: #888; }
.wiel-blok { position: relative; background: #fff; border-radius: 10px; border: 1px solid #e1e7e4;
             margin-bottom: 22px; }
.wiel-blok .legenda-details { position: absolute; top: 14px; left: 14px; z-index: 2; }
.legenda-details > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center;
    gap: 6px; background: #fff; border: 1px solid #dde3e0; border-radius: 16px; padding: 4px 12px;
    font-size: 13px; font-weight: 700; color: #00805a; }
.legenda-details > summary::-webkit-details-marker { display: none; }
.legenda-details > summary::before { content: "▸"; }
.legenda-details[open] > summary::before { content: "▾"; }
.legenda-details[open] > summary { margin-bottom: 6px; }
.legenda-noot { color: #666; font-size: 11.5px; line-height: 1.35; border-top: 1px solid #eef1ef; padding-top: 6px; }
.matrix { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 1.45fr) minmax(0, 1.6fr)
          minmax(220px, 1fr); gap: 10px; align-items: stretch; }
.m-kolomkop { font-weight: 700; color: #00805a; font-size: 14px; padding: 0 4px; }
.m-opgave { border-radius: 8px; padding: 14px 16px; }
.m-titel { font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.m-tekst { font-size: 13.5px; line-height: 1.4; }
.m-doelen { font-size: 12.5px; line-height: 1.4; margin-top: 8px; opacity: .9; }
.m-stand-link { text-decoration: none; color: inherit; display: block; }
.m-nul, .m-stand { position: relative; border: 1px solid #dfe5e2; border-radius: 8px;
           padding: 14px 64px 14px 16px; height: 100%; box-sizing: border-box; }
.m-nul { background: #f1f3f2; }
.m-stand { background: #fff; }
.m-stand-link:hover .m-stand, .m-stand-link:focus-visible .m-stand {
    border-color: #00CA8C; box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.m-licht { position: absolute; top: 10px; right: 10px; }
.m-zin { font-size: 13.5px; line-height: 1.45; margin: 0 0 6px; }
.m-bron { font-size: 11.5px; color: #8a8a8a; }
.m-meer { font-size: 13px; color: #00805a; font-weight: 700; margin-top: 6px; }
.m-kans-link { text-decoration: none; color: inherit; display: block; }
.m-kans { background: #fff; border: 1px solid #dfe5e2; border-radius: 8px; padding: 12px 14px; height: 100%;
          box-sizing: border-box; font-size: 13px; line-height: 1.4; }
.m-kans-link:hover .m-kans, .m-kans-link:focus-visible .m-kans { border-color: #00CA8C;
          box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.m-kans-kop { font-weight: 700; color: #00805a; margin-bottom: 4px; }
.m-kans-sub { color: #666; font-size: 12.5px; }
.beweging { font-size: 12.5px; font-weight: 700; border-radius: 10px; padding: 1px 8px; }
.beweging.beter { color: #0b6b2f; background: #e3f3e7; }
.beweging.slechter { color: #a11616; background: #fbe5e5; }
.beweging.neutraal { color: #666; background: #eef0ef; font-weight: 600; }
/* verkeerslicht: lichtgrijze kast (de lampen springen er beter uit), lampen met kap */
.verkeerslicht { --vl: 16px; display: inline-block; background: #c3c8c5; padding: 3px;
                 border-radius: calc(var(--vl) * .45); border: 2px solid #fff;
                 box-shadow: 0 0 0 1px #a9afac, 0 2px 5px rgba(0,0,0,.18); }
.verkeerslicht.voorstel { border: 2px dashed #6f7672; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.vl-kast { background: linear-gradient(90deg, #d2d6d4, #e1e4e2 45%, #c9cdcb);
           border-radius: calc(var(--vl) * .35); padding: calc(var(--vl) * .28) calc(var(--vl) * .22);
           display: flex; flex-direction: column; gap: calc(var(--vl) * .3); }
.vl-kap { position: relative; padding: 2px; border-radius: 50%; background: #9aa09d;
          box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.vl-kap::before { content: ""; position: absolute; left: -12%; right: -12%; top: -14%; height: 46%;
                  background: linear-gradient(#b3b8b5, #9ba19e); z-index: 2;
                  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
                  box-shadow: 0 2px 2px rgba(0,0,0,.25); }
.vl-lamp { border-radius: 50%; position: relative; }
.vl-lamp.rood { background: radial-gradient(circle at 40% 35%, #8a6a6a, #6c5050); }
.vl-lamp.geel { background: radial-gradient(circle at 40% 35%, #8a8262, #6c6650); }
.vl-lamp.groen { background: radial-gradient(circle at 40% 35%, #627a69, #4c6052); }
.vl-lamp.aan { z-index: 1; }
.status-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
                border: 1.5px solid; border-radius: 12px; padding: 2px 10px 2px 6px; background: #fff; }
.status-label.grijs { border-color: #b9c0bd; color: #666; padding-left: 10px; }
.status-label.voorstel { border-style: dashed; }
.sump-badge { display: inline-block; font-size: 10.5px; font-weight: 700; color: #fff;
              background: #2c5c8a; border-radius: 4px; padding: 0 5px; vertical-align: middle;
              letter-spacing: .03em; }
.datavraag { color: #8a8a8a; font-style: italic; }
.datavraag-p { background: #f6f7f6; border-left: 3px solid #b9c0bd; padding: 6px 10px; }
/* opgavepagina */
.opgave-pagina { display: flex; height: calc(100vh - 42px); }
.nav { width: 290px; min-width: 290px; background: #eef8f3; border-right: 1px solid #d3e9de;
       overflow-y: auto; padding: 14px 12px 24px; box-sizing: border-box; }
.nav-kop { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.nav-titel { font-weight: 700; color: #00805a; font-size: 16px; line-height: 1.3; }
.nav-sectie { margin: 16px 0 4px; font-size: 12.5px; font-weight: 700; color: #00805a; padding-left: 9px; }
.nav-doelblok { margin: 12px 0 0; border: 1px solid #b9dccd; border-radius: 8px; background: #f6fbf9;
                overflow: hidden; }
.nav-doel { display: flex; gap: 7px; align-items: flex-start; color: #fff; font-size: 14.5px; font-weight: 700;
            padding: 9px 10px 8px; background: #00805a; line-height: 1.3; }
.nav-doel .stip { margin-top: 3px; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
a.nav-doel { text-decoration: none; }
.ctx-gebruikt { box-shadow: inset 4px 0 0 #00CA8C; }
.ctx-gebruikt-label { display: inline-block; font-size: 12px; font-weight: 600; color: #00805a; background: #e6faf3;
                      border: 1px solid #b6ead6; border-radius: 10px; padding: 1px 9px; margin: 0 0 6px; }
.ctx-stip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.ctx-stip.gebruikt { background: #00CA8C; box-shadow: 0 0 0 2px #e6faf3; }
.nav-legenda { font-weight: 400; color: #6b6b6b; font-size: 11.5px; display: inline-flex; align-items: center; gap: 4px;
               margin-left: 6px; }
a.nav-doel:hover { filter: brightness(.95); text-decoration: underline; }
a.nav-doel:focus-visible { outline: 2px solid #00805a; outline-offset: -2px; }
.nav-gewenst { font-size: 12px; color: #6b6b6b; font-style: italic; padding: 5px 12px 7px; }
.nav-doelblok .nav-link { border-radius: 0; padding-left: 12px; }
.nav-doelblok .nav-link + .nav-link { border-top: 1px solid #e6f1ec; }
.nav-link { display: flex; gap: 8px; align-items: center; padding: 6px 9px 6px 14px; border-radius: 6px;
            color: #1f1f1f; text-decoration: none; font-size: 14px; line-height: 1.3; }
.nav-link:hover { background: #d7f2e6; }
.nav-link:focus-visible { outline: 2px solid #00805a; }
.nav-link.actief { background: #00CA8C; color: #fff; font-weight: 600; }
.nav-link.actief .nav-sub { color: rgba(255,255,255,.9); }
.nav-link.zonder-data { color: #7b7f7d; }
.nav-link.actief.zonder-data { color: #fff; }
.nav-sub { font-size: 12px; color: #6b6b6b; font-weight: 400; }
.hoofd { flex: 1; min-width: 0; display: flex; overflow: hidden; background: #fff; }
.hoofd-scroll { flex: 1; overflow-y: auto; padding: 20px 28px 40px; max-width: 1150px; }
.hoofd-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.hoofdtitel { color: #00805a; margin: 0 0 8px; font-size: 24px; }
.verhaal { max-width: 80ch; font-size: 15px; line-height: 1.55; margin: 8px 0 8px; }
.verhaal p { margin: 0 0 8px; }
.nul-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 10px 0 18px; }
.ns-blok { position: relative; border: 1px solid #dfe5e2; border-radius: 8px; padding: 12px 64px 12px 14px;
           font-size: 14px; line-height: 1.5; }
.ns-blok:first-child { background: #f1f3f2; }
.ns-blok h4 { margin: 0 0 6px; color: #00805a; }
.ns-blok .verkeerslicht { position: absolute; top: 10px; right: 10px; }
.ns-blok p { margin: 8px 0 4px; }
.doel-kop { display: flex; align-items: center; gap: 9px; margin-top: 18px; flex-wrap: wrap; }
.doel-kop h4 { margin: 0; font-size: 16px; }
.doel-status { font-size: 13px; color: #555; }
.doel-bron { font-size: 12px; color: #888; margin: 2px 0 6px 23px; }
.sectiekop { color: #00805a; font-size: 19px; margin: 26px 0 4px; }
.doel-sectie { margin: 18px 0 8px; }
.doel-balk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-radius: 8px 8px 0 0;
             padding: 10px 14px; }
.doel-code { font-weight: 800; font-size: 18px; background: rgba(255,255,255,.22); border-radius: 6px;
             padding: 1px 8px; }
.doel-titel { font-weight: 700; font-size: 18px; flex: 1 1 auto; }
.doel-score { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600;
              background: #fff; color: #333; border-radius: 12px; padding: 2px 10px 2px 6px; }
.doel-bron2 { font-size: 13px; color: #444; background: #f3f6f5; border: 1px solid #e1e7e4; border-top: none;
              border-radius: 0 0 8px 8px; padding: 7px 14px; margin-bottom: 10px; line-height: 1.4; }
.ind-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.ind-kaart-link { text-decoration: none; color: inherit; }
.ind-kaart { border: 1px solid #dfe5e2; border-radius: 8px; padding: 9px 10px 8px; background: #fff;
             height: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 4px; }
.ind-kaart.leeg { background: #f6f7f6; border-style: dashed; }
.ind-kaart-link:hover .ind-kaart, .ind-kaart-link:focus-visible .ind-kaart { border-color: #00CA8C;
             box-shadow: 0 3px 10px rgba(0,0,0,.07); }
.ind-kop { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ind-kop .stip { margin-top: 3px; }
.ind-naam { flex: 1; }
.ind-spark { width: 100%; height: 64px; }
.ind-voet { display: flex; flex-direction: column; font-size: 12.5px; line-height: 1.35; }
.ind-waarde { font-weight: 700; color: #1f1f1f; }
.ind-streven { color: #777; }
.ind-datavraag { font-size: 12.5px; color: #7b7f7d; font-style: italic; line-height: 1.4; }
.gewenst { margin-top: 10px; border: 1px dashed #b9c0bd; border-radius: 8px; padding: 8px 14px;
           background: #fbfcfb; font-size: 13.5px; }
.gewenst-kop { font-weight: 700; color: #5d6b66; font-size: 13px; }
.gewenst ul { margin: 4px 0 2px; padding-left: 18px; color: #444; }
.deel-tabel { border-collapse: collapse; width: 100%; font-size: 14px; }
.deel-tabel th { text-align: left; color: #00805a; border-bottom: 2px solid #d3e9de; padding: 6px 8px; }
.deel-tabel td { border-bottom: 1px solid #edf1ef; padding: 7px 8px; vertical-align: top; }
.deel-tabel td.deel-titel { font-weight: 600; min-width: 220px; }
.deel-tabel a { color: #00805a; }
.deel-tabel.smal { width: auto; min-width: 220px; }
.info-rij { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 14px; }
.info-blok { flex: 1 1 320px; font-size: 14px; line-height: 1.5; }
.info-blok p { margin: 0 0 8px; max-width: 75ch; }
/* vraagkader op het welkomstscherm */
.vraag-kader { margin-top: 18px; background: #fff; border: 1px solid #e1e7e4; border-left: 5px solid #00CA8C;
               border-radius: 10px; padding: 16px 20px 18px; }
.vraag-kop { margin: 0 0 4px; color: #00805a; font-size: 20px; }
.vraag-uitleg { margin: 0 0 10px; color: #555; font-size: 14px; max-width: 95ch; }
.vraag-rij { display: flex; gap: 10px; align-items: stretch; }
.vraag-tekst { flex: 1; min-height: 64px; font: inherit; font-size: 15px; padding: 9px 11px; border-radius: 8px;
               border: 1px solid #c9d3cf; resize: vertical; box-sizing: border-box; }
.vraag-tekst:focus { outline: 2px solid #00CA8C; border-color: #00CA8C; }
.vraag-knop { background: #00805a; color: #fff; border: none; border-radius: 8px; padding: 0 20px; font-size: 15px;
              font-weight: 700; cursor: pointer; }
.vraag-knop:hover, .vraag-knop:focus-visible { background: #006a4a; }
.vraag-antwoord { margin-top: 12px; font-size: 15px; line-height: 1.55; max-width: 100ch; }
.vraag-antwoord a { color: #00805a; font-weight: 600; }
.vraag-md p { margin: 0 0 8px; }
.vraag-sub { color: #666; font-size: 13.5px; }
.vraag-bron { color: #888; font-size: 12px; margin-top: 6px; }
a.vraag-link { display: inline-block; padding: 12px 22px; text-decoration: none; white-space: nowrap; }
/* Stel een vraag (verkenner.py) */
.vk-kader { background: #fff; border: 1px solid #e1e7e4; border-left: 5px solid #00CA8C; border-radius: 10px;
            padding: 14px 18px 16px; margin: 6px 0 14px; }
.vk-vraag { background: #eef8f3; border-radius: 10px; padding: 8px 12px; margin: 10px 0 4px; font-weight: 600;
            max-width: 90ch; }
.vk-antwoord { padding: 2px 4px 6px; }
.vk-antwoord.oud { color: #555; font-size: 14px; }
.vk-toelichting { margin: 6px 0 4px; font-size: 15px; line-height: 1.5; max-width: 100ch; }
.vk-keuzes { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.vk-keuze { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfd8d4; border-radius: 18px;
            padding: 5px 12px 5px 8px; background: #fff; cursor: pointer; font-size: 14px; }
.vk-keuze:has(input:checked),
.dash-options-list-option.selected .vk-keuze { background: #e3f5ec; border-color: #00805a;
                                               box-shadow: 0 0 0 1px #00805a; }
.vk-keuzes .dash-options-list-option-wrapper { position: absolute; opacity: 0; pointer-events: none; }
.vk-keuze-sub { color: #7b7f7d; font-size: 12px; margin-left: 6px; }
.vk-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; margin: 4px 0 8px; }
.vk-leg-item { display: inline-flex; align-items: center; gap: 5px; }
.vk-stip { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid #333; }
.vk-noten { color: #6b716e; font-size: 12.5px; margin-top: 8px; }
.vk-samenhang { margin-top: 14px; }
.vk-uitleg { font-size: 14px; max-width: 100ch; }
/* kansenkaart */
.kans-advies { background: #f3f6fb; border: 1px solid #d6e0ee; border-left: 5px solid #244f8f; border-radius: 8px;
               padding: 12px 16px; margin: 6px 0 16px; font-size: 14.5px; line-height: 1.55; max-width: 110ch; }
.kans-advies p { margin: 0 0 6px; }
.kans-kies { font-weight: 700; color: #00805a; font-size: 14px; margin-bottom: 6px; }
.kans-radio { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.kans-radio-label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #cfd8d4;
                    border-radius: 18px; padding: 5px 12px 5px 8px; background: #fff; cursor: pointer; font-size: 14px; }
.kans-radio-label:has(input:checked),
.dash-options-list-option.selected .kans-radio-label { border-color: #244f8f; background: #eaf0f8;
                                                       box-shadow: 0 0 0 1px #244f8f; }
.kans-radio-input { position: absolute; opacity: 0; pointer-events: none; }
.kans-radio-label { position: relative; padding-left: 12px; }
.kans-keuze { display: inline-flex; align-items: center; gap: 8px; }
.kans-urgentie { font-size: 11.5px; font-weight: 700; border-radius: 10px; padding: 1px 8px; white-space: nowrap;
                 background: #eef0ef; color: #555; }
.kans-urgentie.u2 { background: #fbe5e5; color: #a11616; }
.kans-urgentie.u1 { background: #fdf3d4; color: #7a5c00; }
.kans-urgentie.u0 { background: #e3f3e7; color: #0b6b2f; }
.kans-rij { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.kans-kaartvak { flex: 1 1 520px; min-width: 0; border: 1px solid #e1e7e4; border-radius: 10px; overflow: hidden; }
.kans-legenda { padding: 8px 12px; border-bottom: 1px solid #e1e7e4; background: #fff; }
.kans-legenda-balk { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-size: 12.5px; color: #444; }
.kans-blok { display: inline-block; width: 22px; height: 12px; border-radius: 2px; border: 1px solid #d0d7e2; }
.kans-paneel { flex: 1 1 320px; max-width: 460px; font-size: 14px; line-height: 1.45; }
.kans-uitleg { color: #555; margin: 0 0 8px; }
.kans-doelen { color: #555; font-size: 13px; }
.kans-sub { color: #00805a; margin: 14px 0 4px; font-size: 14px; }
.kans-lijst { margin: 0; padding-left: 20px; }
.kans-lijst li { margin-bottom: 6px; }
.kans-reden { color: #666; font-size: 12.5px; }
.kans-kenmerken { margin: 0; padding-left: 18px; }
.kans-leeg { color: #7b7f7d; font-style: italic; }
@media (max-width: 1100px) {
  .matrix { grid-template-columns: 1fr 1fr; }
  .m-kolomkop { display: none; }
  .nul-stand { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .matrix { grid-template-columns: 1fr; }
  .nav { width: 210px; min-width: 210px; }
}