/* ===== m22l gidspagina's (gids.py) ===== */
.g-bij{margin-top:18px;font-size:var(--fs-2);color:#B9CDF5;font-weight:600}
.g-held-licht{background:var(--koel);color:var(--navy)}
.g-held-licht h1{color:var(--navy)}
.g-held-licht .sp-kruim{color:var(--grijs)}
.g-held-licht .sp-intro{color:var(--zacht)}
.g-held-licht .g-bij{color:var(--grijs)}
.g-held-licht .sp-kn .lnk{color:var(--navy)}
/* scorebord in de held (case 1) */
.g-score{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin-top:44px;max-width:1040px;border-radius:18px;overflow:hidden;background:rgba(255,255,255,.18)}
.g-score div{padding:24px 26px;background:var(--band)}
.g-score b{display:block;font-size:clamp(44px,6vw,80px);line-height:1;font-weight:900;letter-spacing:-.04em;color:var(--wit)}
.g-score span{display:block;margin-top:10px;color:#DCE6FA;font-size:var(--fs-3);line-height:1.4}
.g-score em{font-style:normal;color:var(--or);font-weight:800}
/* reeks als typografie (case 3) */
.g-reeks{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-top:40px}
.g-reeks span{display:grid;gap:4px}
.g-reeks b{font-size:clamp(46px,7vw,104px);line-height:.95;font-weight:900;letter-spacing:-.05em;color:var(--wit)}
.g-reeks small{font-size:var(--fs-2);font-weight:700;color:#B9CDF5}
.g-reeks i{font-style:normal;font-size:clamp(28px,3.4vw,48px);color:var(--or);font-weight:900;align-self:center}
.g-reeks span:last-child b{color:var(--or)}
/* staafgrafieken in HTML, zodat labels echte tekst blijven */
.g-staaf{margin-top:8px;padding:24px 24px 14px;border-radius:18px;background:var(--koel);border:1.5px solid var(--lijn)}
.g-staaf-r{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:end;gap:6px;height:220px}
.g-staaf-k{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:4px;min-width:0}
.g-staaf-k i{display:block;width:100%;max-width:46px;border-radius:6px 6px 2px 2px;background:var(--navy)}
.g-staaf-k i.o{background:var(--or)}
.g-staaf-k i.l{background:var(--lb)}
.g-staaf-k b{font-size:var(--fs-1);font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.g-staaf-a{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin-top:8px;padding-top:8px;border-top:1.5px solid var(--lijn)}
.g-staaf-a span{text-align:center;font-size:var(--fs-1);color:var(--grijs);font-weight:700;min-width:0}
.g-paar{display:flex;align-items:flex-end;justify-content:center;gap:4px;width:100%;height:100%}
.g-paar .g-staaf-k{width:50%}
.g-leg{display:flex;flex-wrap:wrap;gap:6px 18px;margin:14px 0 0;padding:0;list-style:none;font-size:var(--fs-2);color:var(--zacht);font-weight:600}
.g-leg li{display:flex;align-items:center;gap:8px}
.g-leg li:before{content:"";width:14px;height:14px;border-radius:4px;background:var(--navy)}
.g-leg li.o:before{background:var(--or)}
.g-leg li.l:before{background:var(--lb)}
.g-fig{margin:6px 0 0}
.sp-kort strong{font-weight:800}
.g-hub{padding:0;background:none}
.g-hub ul{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g-hub a{background:var(--koel)}
.g-leg-st li:nth-child(2):before{background:var(--blauw)}
.g-leg-st li:nth-child(3):before{background:var(--band-l,#2443A3)}
.g-leg-st li:nth-child(4):before{background:var(--or)}
.g-leg-st li:nth-child(5):before{background:var(--lb)}
.g-fig figcaption+p{margin-top:16px}
.g-fig figcaption{margin-top:10px;font-size:var(--fs-2);color:var(--grijs);max-width:70ch}
/* stippen: één stip per aanvraag (case 2) */
.g-stip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:8px;margin-top:8px;padding:24px;border-radius:18px;background:var(--koel);border:1.5px solid var(--lijn)}
.g-stip-m{display:flex;flex-direction:column-reverse;align-items:center;gap:5px;min-height:150px}
.g-stip-m span{width:16px;height:16px;border-radius:50%;background:var(--navy)}
.g-stip-m b{margin-top:6px;font-size:var(--fs-1);color:var(--grijs);font-weight:700}
.g-stip-m em{font-style:normal;font-size:var(--fs-1);font-weight:900;color:var(--navy)}
/* uitgelicht citaat-loos kader */
.g-noot{margin-top:24px;padding:22px 26px;border-radius:16px;background:var(--wit);border:1.5px dashed var(--grijs);color:var(--zacht)}
.g-noot b{color:var(--navy)}
.g-eerlijk{display:grid;gap:0;margin-top:8px;border-radius:18px;overflow:hidden;border:1.5px solid var(--lijn)}
.g-eerlijk div{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;padding:20px 24px;border-top:1.5px solid var(--lijn)}
.g-eerlijk div:first-child{border-top:0}
.g-eerlijk h3{font-size:var(--fs-4)}
.g-eerlijk p{margin:0;color:var(--zacht)}
.g-eerlijk .z{background:var(--lb2)}
.g-eerlijk .d{background:var(--wit)}
.g-eerlijk .n{background:var(--koel)}
/* gestapelde balk (landingspagina's) */
.g-stapel{display:flex;height:56px;border-radius:12px;overflow:hidden;margin-top:8px}
.g-stapel span{display:grid;place-items:center;min-width:0;font-weight:800;font-size:var(--fs-2);color:var(--wit);background:var(--navy);border-right:2px solid var(--wit)}
.g-stapel span:nth-child(2){background:var(--blauw)}
.g-stapel span:nth-child(3){background:var(--band-l,#2443A3)}
.g-stapel span:nth-child(4){background:var(--or);color:var(--navy)}
.g-stapel span:nth-child(5){background:var(--lb);color:var(--navy)}
/* breedte: van 181 naar 694 */
.g-breed{display:grid;grid-template-columns:minmax(0,181fr) minmax(0,513fr);gap:6px;margin-top:8px}
.g-breed div{padding:18px 16px;border-radius:12px;background:var(--lb);color:var(--navy);min-width:0}
.g-breed div+div{background:var(--navy);color:var(--wit)}
.g-breed b{display:block;font-size:var(--fs-7);font-weight:900;line-height:1}
.g-breed span{display:block;margin-top:6px;font-size:var(--fs-2);line-height:1.35}
/* rekentool */
.g-tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:0;margin-top:40px;max-width:1120px;border-radius:20px;overflow:hidden;background:var(--wit);color:var(--navy);box-shadow:0 30px 60px -30px rgba(5,16,60,.55)}
.g-tool-in{padding:28px;display:grid;gap:18px;align-content:start}
.g-tool label{display:grid;gap:8px;font-weight:800;font-size:var(--fs-3)}
.g-tool select{min-height:52px;padding:0 14px;border-radius:12px;border:1.5px solid var(--lijn);background:var(--koel);color:var(--navy);font:700 var(--fs-4) var(--f)}
.g-tool input[type=range]{width:100%;min-height:44px;accent-color:var(--or)}
.g-tool .g-hulp{font-size:var(--fs-2);color:var(--grijs);font-weight:500}
.g-tool-uit{padding:28px;background:var(--lb2);display:grid;gap:14px;align-content:start}
.g-tool-uit .g-groot{font-size:clamp(40px,5vw,64px);line-height:1;font-weight:900;letter-spacing:-.04em}
.g-tool-uit dl{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 18px;margin:0}
.g-tool-uit dt{color:var(--zacht)}
.g-tool-uit dd{margin:0;font-weight:900;text-align:right;font-variant-numeric:tabular-nums}
.g-tool-uit .g-zin{color:var(--zacht);font-size:var(--fs-3)}
.g-tool-uit .g-zin b{color:var(--navy)}
/* sorteerbare tabel */
.g-sorteer{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.g-sorteer button{min-height:44px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--navy);background:var(--wit);color:var(--navy);font:800 var(--fs-2) var(--f);cursor:pointer}
.g-sorteer button[aria-pressed=true]{background:var(--navy);color:var(--wit)}
.g-balk{display:block;height:10px;border-radius:5px;background:var(--lb);margin-top:6px;overflow:hidden}
.g-balk i{display:block;height:100%;background:var(--or)}
.g-tabel-breed table{min-width:640px}
.g-dl{display:grid;grid-template-columns:200px minmax(0,1fr);gap:14px 24px;margin:8px 0 0;max-width:800px}
.g-dl dt{font-weight:800}
.g-dl dd{margin:0;color:var(--zacht)}
/* sessiegrafiek AI (pagina 6): horizontale balken */
.g-hbalk{display:grid;gap:10px;margin-top:8px;padding:24px;border-radius:18px;background:var(--band);color:var(--wit)}
.g-hbalk div{display:grid;grid-template-columns:110px minmax(0,1fr) 56px;align-items:center;gap:14px}
.g-hbalk span{font-weight:700;color:#DCE6FA;font-size:var(--fs-2)}
.g-hbalk i{display:block;height:22px;border-radius:0 8px 8px 0;background:var(--or);min-width:3px}
.g-hbalk b{text-align:right;font-variant-numeric:tabular-nums}
.g-code{margin:8px 0 0;padding:20px 22px;border-radius:14px;background:#0E1F5C;color:#E6EEFF;font:600 15px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-x:auto;white-space:pre}
.g-drie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px;max-width:1040px;width:calc(100vw - 120px)}
.g-drie>div{padding:22px;border-radius:16px;border:1.5px solid var(--lijn)}
.g-drie>div:nth-child(1){background:var(--lb2)}
.g-drie>div:nth-child(2){background:var(--wit)}
.g-drie>div:nth-child(3){background:var(--koel)}
.g-drie h3{font-size:var(--fs-5);margin-bottom:10px}
.g-drie ul{margin:0;padding-left:1.1em;display:grid;gap:8px;color:var(--zacht)}
/* tijdlijn (pagina 7) */
.g-tijd{list-style:none;margin:8px 0 0;padding:0;position:relative}
.g-tijd:before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--lijn)}
.g-tijd>li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding:0 0 26px}
.g-tijd>li:before{content:"";grid-row:span 2;width:20px;height:20px;margin:6px 0 0 12px;border-radius:50%;background:var(--wit);border:4px solid var(--navy);box-sizing:border-box}
.g-tijd>li.hl:before{border-color:var(--or)}
.g-tijd h3{font-size:var(--fs-5)}
.g-tijd-c{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.g-tijd-c span{padding:6px 12px;border-radius:10px;background:var(--koel);font-size:var(--fs-2);font-weight:700;color:var(--navy)}
.g-tijd-c span b{font-weight:900}
.g-tijd p{margin-top:8px;color:var(--zacht);max-width:64ch}
.g-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:8px;max-width:1040px;width:calc(100vw - 120px)}
.g-mini>div{padding:20px;border-radius:16px;background:var(--koel);border:1.5px solid var(--lijn);min-width:0}
.g-mini h3{font-size:var(--fs-4);margin-bottom:4px}
.g-mini p{font-size:var(--fs-2);color:var(--grijs);margin:0 0 12px}
.g-mini .g-staaf-r{height:120px}
.g-mini .g-staaf-k b{font-size:12px}
/* veldkaart WordPress */
.g-veld{display:grid;gap:0;margin-top:8px;border-radius:18px;overflow:hidden;border:1.5px solid var(--lijn)}
.g-veld>div{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1.3fr);align-items:center;gap:12px;padding:16px 20px;border-top:1.5px solid var(--lijn);background:var(--wit)}
.g-veld>div:first-child{border-top:0;background:var(--navy);color:var(--wit);font-weight:800;font-size:var(--fs-2)}
.g-veld>div:nth-child(even){background:var(--koel)}
.g-veld code{font:700 15px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy);background:var(--lb2);padding:2px 6px;border-radius:6px;word-break:break-all}
.g-veld .p{text-align:center;color:var(--or);font-weight:900;font-size:var(--fs-5)}
.g-veld small{display:block;margin-top:4px;color:var(--grijs);font-size:var(--fs-1)}
/* werkbord (pagina 9) */
.g-bord{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-top:8px;max-width:1120px;width:calc(100vw - 120px)}
.g-bord>div{min-width:0;padding:14px;border-radius:16px;background:var(--koel);border:1.5px solid var(--lijn)}
.g-bord h3{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:var(--fs-3);margin-bottom:10px}
.g-bord h3 span{display:grid;place-items:center;min-width:28px;height:28px;border-radius:999px;background:var(--wit);font-size:var(--fs-1);color:var(--navy);border:1.5px solid var(--lijn)}
.g-bord ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.g-bord li{padding:12px;border-radius:12px;background:var(--wit);border:1.5px solid var(--lijn);font-size:var(--fs-2);font-weight:700;line-height:1.3}
.g-bord li small{display:block;margin-top:6px;font-size:var(--fs-1);font-weight:600;color:var(--grijs)}
.g-bord li.b small{color:var(--zacht)}
.g-bord li.b{border-color:var(--or)}
.g-bord .wie{margin-top:12px;font-size:var(--fs-1);font-weight:700;color:var(--zacht)}
.g-wie{margin-top:8px}
.g-wie td:nth-child(2),.g-wie td:nth-child(3){text-align:center;font-weight:900}
.g-wie .ja{color:var(--navy)}
.g-wie .nee{color:var(--grijs);font-weight:500}
.g-princ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;margin-top:8px;border-radius:18px;overflow:hidden;background:var(--lijn);max-width:900px}
.g-princ div{padding:24px;background:var(--wit)}
.g-princ b{display:block;font-size:var(--fs-6);line-height:1.15;margin-bottom:8px}
.g-princ p{margin:0;color:var(--zacht)}
/* regio-strook bij de bureaulijst */
.g-regio{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.g-regio span{padding:6px 12px;border-radius:999px;background:var(--koel);border:1.5px solid var(--lijn);font-size:var(--fs-2);font-weight:700}
.g-stand{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:8px;max-width:1040px;width:calc(100vw - 120px)}
.g-stand div{padding:18px;border-radius:14px;background:var(--koel)}
.g-stand b{display:block;font-size:var(--fs-8);font-weight:900;line-height:1}
.g-stand span{display:block;margin-top:6px;font-size:var(--fs-2);color:var(--zacht)}
.g-vraag{display:grid;gap:10px;margin-top:8px}
.g-vraag div{display:grid;grid-template-columns:minmax(0,1fr) 90px;gap:12px;align-items:center;padding:12px 16px;border-radius:12px;background:var(--koel)}
.g-vraag b{text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:1100px){.g-drie,.g-mini,.g-bord,.g-stand{width:auto}}
@media (max-width:900px){
 .g-score{grid-template-columns:minmax(0,1fr)}
 .g-tool{grid-template-columns:minmax(0,1fr)}
 .g-drie,.g-mini{grid-template-columns:minmax(0,1fr)}
 .g-bord{grid-template-columns:minmax(0,1fr)}
 .g-bord>div{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 .g-princ{grid-template-columns:minmax(0,1fr)}
 .g-stand{grid-template-columns:repeat(2,minmax(0,1fr))}
 .g-eerlijk div{grid-template-columns:minmax(0,1fr);gap:6px}
 .g-dl{grid-template-columns:minmax(0,1fr);gap:4px}
 .g-dl dd{margin-bottom:12px}
}
@media (max-width:600px){
 .g-staaf{padding:16px 10px 10px}
 .g-staaf-r{gap:3px;height:180px}
 .g-staaf-a{gap:3px}
 .g-staaf-k b{font-size:12px}
 .g-staaf-a span{font-size:12px}
 .g-stip{gap:4px;padding:16px 10px}
 .g-stip-m span{width:12px;height:12px}
 .g-hbalk div{grid-template-columns:82px minmax(0,1fr) 44px;gap:8px}
 .g-veld>div{grid-template-columns:minmax(0,1fr);gap:4px}
 .g-veld .p{display:none}
 .g-breed{grid-template-columns:minmax(0,1fr)}
 .g-stapel{height:auto;flex-direction:column}
 .g-stapel span{padding:10px;border-right:0;border-bottom:2px solid var(--wit);justify-items:start}
 .g-tool-in,.g-tool-uit{padding:20px}
}