:root{--bg:#fff;--soft:#f4f6f8;--ink:#161b22;--muted:#59636e;--line:#d8dee4;--dark:#0d1117;--dark2:#161b22;--dline:#30363d;--rood:#ff4d4f;--oranje:#ffa62b;--groen:#2ecc71;--blauw:#3d8bff;--wit:#e6edf3;--link:#0b5cad;--focus:#3d8bff}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--link)}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:-9999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.7rem;z-index:9}
.wrap{max-width:1100px;margin:0 auto;padding:0 16px}
.site-header{background:var(--dark);color:#fff;border-bottom:1px solid var(--dline)}
.header-in{max-width:1100px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:20px;font-weight:600;letter-spacing:-.3px}.brand strong{color:var(--oranje)}
.brand-mark{width:34px;height:34px;color:var(--wit)}
nav#mainnav{display:flex;flex-wrap:wrap;gap:4px 18px}nav#mainnav a{color:#c9d1d9;text-decoration:none;font-size:15px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}nav#mainnav a:hover{color:#fff}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0;border:1px solid var(--dline);border-radius:10px;background:var(--dark2);cursor:pointer}.nav-toggle span{display:block;width:20px;height:2px;margin:0 auto;background:#fff;border-radius:2px}
@media (max-width:760px){.nav-toggle{display:flex}nav#mainnav{display:none;position:absolute;left:0;right:0;top:61px;background:var(--dark);flex-direction:column;padding:8px 16px 14px;border-bottom:1px solid var(--dline);z-index:5}nav#mainnav.open{display:flex}.site-header{position:relative}}
main{display:block}
.crumbs{font-size:14px;color:var(--muted);padding:14px 0 0}.crumbs a{color:var(--muted)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}h1{font-size:clamp(28px,5vw,42px);margin:.4em 0 .4em}h2{font-size:clamp(22px,3.4vw,30px);margin:1.6em 0 .5em}h3{font-size:18px}
.page-hero{max-width:720px}.direct{font-size:18px;color:#24292f;margin:0 0 22px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:10px}
.muted{color:var(--muted)}
/* dashboard-panelen */
.panel{background:var(--dark);color:var(--wit);border-top:1px solid var(--dline);border-bottom:1px solid var(--dline)}
.symbol-panel{padding:26px 0}.sym-row{display:flex;flex-wrap:wrap;gap:12px 36px;justify-content:center}
.sym-fig{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}.sym-fig figcaption{font-size:14px;color:#c9d1d9}
.sym{width:44px;height:44px;display:block}.sym-big{width:96px;height:96px;filter:drop-shadow(0 0 8px currentColor)}.sym-sm{width:36px;height:36px;flex:none}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:baseline;box-shadow:0 0 8px currentColor}
/* check */
.tool-shell{max-width:720px;margin:28px 0;padding:22px 18px;background:var(--dark);color:var(--wit);border:1px solid var(--dline);border-radius:16px;scroll-margin-top:12px}
.tool-shell .eyebrow{color:#9da7b3}
.progress-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:14px;color:#9da7b3;margin-bottom:14px}.progress{flex:1 1 100%;height:6px;border-radius:6px;background:var(--dark2);overflow:hidden}.progress i{display:block;height:100%;width:0;background:var(--oranje);transition:width .25s}
fieldset.question{border:0;margin:0;padding:0;min-width:0}legend{font-size:20px;font-weight:700;padding:0;margin-bottom:12px;display:flex;gap:10px;align-items:flex-start}
.question-number{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--dark2);border:1px solid var(--dline);font-size:14px}
.question-help{color:#9da7b3;font-size:14px;margin:0 0 10px}
.options{display:grid;gap:8px}.option{display:block;cursor:pointer}.option input{position:absolute;opacity:0;width:1px;height:1px}
.option span{display:flex;align-items:center;min-height:48px;padding:10px 14px;border:1px solid var(--dline);border-radius:12px;background:var(--dark2);color:var(--wit)}
.option:hover span{border-color:#8b949e}.option input:checked+span,.option.selected span{border-color:var(--oranje);background:#241b0b;box-shadow:0 0 0 1px var(--oranje)}
.form-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.button{border:0;border-radius:12px;background:var(--oranje);color:#161b22;min-height:48px;padding:12px 22px;font:700 16px system-ui,sans-serif;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.button:hover{filter:brightness(1.08)}.button:disabled{opacity:.4;cursor:not-allowed}.button.ghost{background:transparent;color:var(--wit);border:1px solid var(--dline)}.button.danger{background:var(--rood);color:#160304}
.result{margin-top:4px}.result h2{margin:.3em 0 .3em;font-size:26px}.result-summary{font-size:18px}.result h3{margin-bottom:6px}.result ol{padding-left:22px}.result li{margin:6px 0}.result-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.result-kicker,.badge{display:inline-block;padding:4px 12px;border-radius:999px;font-weight:700;font-size:14px}
.level-A{background:#12351f;color:#4be58a}.level-B{background:#3a3208;color:#f5d742}.level-C{background:#3d2506;color:#ffa62b}.level-D{background:#40100f;color:#ff7375}
.levels{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;padding:0;margin:18px 0 0;font-size:13px;color:#9da7b3}.levels b{display:inline-block;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;font-size:12px}
/* artikel */
.longform{max-width:720px}.longform ul{padding-left:22px}.longform li{margin:6px 0}
.kleurlijst{display:grid;gap:12px;margin:0}.kleurlijst>div{padding:12px 14px;background:var(--soft);border-radius:12px}.kleurlijst dt{font-weight:700}.kleurlijst dd{margin:4px 0 0}
.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}th{background:var(--soft)}
@media (max-width:640px){thead{position:absolute;left:-9999px}tr{display:block;border:1px solid var(--line);border-radius:12px;margin-bottom:10px;padding:6px 0}td{display:block;border:0;padding:6px 12px}td:before{content:attr(data-l);display:block;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}}
.faq{max-width:720px}.faq details{border-bottom:1px solid var(--line);padding:4px 0}.faq summary{cursor:pointer;font-weight:700;padding:12px 0;min-height:44px}.faq p{margin:0 0 14px}
.related{margin:30px 0 20px}.related-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.related-grid a{display:flex;gap:12px;align-items:center;text-decoration:none;color:var(--ink);background:var(--dark);color:var(--wit);border:1px solid var(--dline);border-radius:12px;padding:12px 14px;min-height:64px}
.related-grid a .sym{color:var(--oranje)}.related-grid small{display:block;color:#9da7b3;font-size:13px;line-height:1.4}.related-color{background:var(--soft)!important;color:var(--ink)!important;border-color:var(--line)!important}.related-color small{color:var(--muted)!important}
.back-home{margin-top:16px}
/* kaartenraster */
.lamp-grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));margin:14px 0}
.lamp-card{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;text-decoration:none;color:var(--wit);background:var(--dark);border:1px solid var(--dline);border-radius:14px;padding:16px 10px;min-height:44px}
.lamp-card:hover{border-color:var(--lamp,#8b949e)}.lamp-card .sym{width:56px;height:56px;color:var(--lamp,var(--oranje));filter:drop-shadow(0 0 6px currentColor)}.lamp-name{font-weight:700;font-size:15px;max-width:100%;overflow-wrap:anywhere;hyphens:auto}.badge{font-size:12px;padding:3px 10px}
.overzicht-kaart{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.ov-card{display:grid;grid-template-columns:64px 1fr;gap:6px 14px;align-items:start;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px;background:#fff}
.ov-card:hover{border-color:#8b949e}.ov-sym{background:var(--dark);border-radius:12px;display:grid;place-items:center;height:64px;color:var(--lamp)}.ov-sym .sym{width:44px;height:44px;filter:drop-shadow(0 0 6px currentColor)}
.ov-card h3{margin:0 0 2px;font-size:17px}.ov-card p{margin:0 0 6px;font-size:14px;color:var(--muted);line-height:1.45}.ov-card .badge{margin-right:4px}.ov-kl{display:inline-flex;gap:4px;vertical-align:middle;margin-right:6px}.ov-kl .dot{margin:0;width:10px;height:10px}
.kleurkop{display:flex;align-items:center;gap:8px;margin-top:26px}
/* home */
.home-hero{padding-top:6px}.home-hero h1{max-width:20ch}.intro{font-size:18px;max-width:640px}
.wizard{background:var(--dark);color:var(--wit);border:1px solid var(--dline);border-radius:18px;padding:22px 16px;margin:20px 0 34px}
.wizard h2{margin:0 0 6px;font-size:22px;color:#fff}.wizard .stap{margin:0 0 14px;color:#9da7b3;font-size:15px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 6px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:10px 18px;border-radius:999px;border:1px solid var(--dline);background:var(--dark2);color:var(--wit);font:600 16px system-ui,sans-serif;cursor:pointer}
.chip i{width:16px;height:16px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}.chip:hover{border-color:var(--c)}.chip.on{border-color:var(--c);box-shadow:0 0 0 1px var(--c)}
.wizard .lamp-card .sym{color:var(--lamp,var(--oranje))}.wiz-group{margin-top:14px}.wiz-group h3{color:#fff;margin:10px 0 0;font-size:16px}.wizard.js .wiz-group h3{display:none}
.wiz-extra{margin-top:12px;font-size:15px}.wiz-extra a{color:#7cb7ff}
.kleurregel{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:14px 0}
.kr{border:1px solid var(--dline);border-radius:14px;padding:16px;background:var(--dark);color:var(--wit)}.kr h3{margin:0 0 6px;display:flex;align-items:center}.kr p{margin:0;color:#c9d1d9;font-size:15px}
.home-sec>*:not(.kleurregel){max-width:720px}.home-sec h2{margin-top:1.4em}
.disclaimer{background:var(--soft);margin-top:30px;padding:22px 0;font-size:15px}.disclaimer p{margin:6px 0 0;max-width:720px}
footer{background:var(--dark);color:#c9d1d9;padding:28px 0}.foot{max-width:1100px;margin:0 auto;padding:0 16px;display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between}
footer p{margin:6px 0 0;font-size:14px;color:#9da7b3}.footer-links{display:flex;flex-wrap:wrap;gap:4px 18px}.footer-links a{color:#c9d1d9;font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.info-page{max-width:720px;margin:0 auto;padding:20px 16px}.info-page address{font-style:normal;background:var(--soft);padding:14px;border-radius:12px}
.alle-img{max-width:100%;height:auto;border-radius:12px}
.stappen-lijst{counter-reset:s;list-style:none;padding:0}.stappen-lijst li{counter-increment:s;position:relative;padding:10px 0 10px 44px}.stappen-lijst li:before{content:counter(s);position:absolute;left:0;top:8px;width:30px;height:30px;border-radius:50%;background:var(--dark);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.alert{border-left:5px solid var(--rood);background:#fff1f0;padding:12px 16px;border-radius:8px;margin:16px 0}
.video{margin:24px 0;max-width:720px}.video video{width:100%;height:auto;border-radius:12px;background:#0d1117;display:block}.video figcaption{font-size:.9rem;color:#57606a;margin-top:8px}.overzicht-plaat{margin:12px 0 20px;max-width:720px}.overzicht-plaat summary{cursor:pointer;font-weight:600}.overzicht-plaat img{width:100%;height:auto;border-radius:12px;margin-top:10px}
