:root{--plaat:#E8EBEE;--wit:#F7F8F9;--inkt:#0E2233;--nacht:#10243A;--nacht2:#16304C;--amber:#F5A300;--rood:#D7262E;--groen:#2BA36B;--lijn:#c5ced6;--mut:#4D5E6E;--disp:"Saira Condensed",system-ui,sans-serif;--body:"Atkinson Hyperlegible",system-ui,sans-serif}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--plaat);color:var(--inkt);font:18px/1.6 var(--body)}
a{color:inherit}:focus-visible{outline:3px solid var(--amber);outline-offset:3px}
.w,.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.kop{position:fixed;inset:0 0 auto 0;z-index:40;color:#fff}.kop.vast{background:rgba(16,36,58,.95);backdrop-filter:blur(10px)}
.kop .w{display:flex;align-items:center;justify-content:space-between;height:66px;gap:18px}
.merk{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 23px/1 var(--disp)}
.kop nav{display:flex;gap:22px;font-size:16px}.kop nav a{text-decoration:none;color:#c9d4de}.kop nav a:hover{color:#fff}
.knop{display:inline-flex;align-items:center;gap:10px;border-radius:8px;padding:12px 20px;font:700 17px/1 var(--body);text-decoration:none;border:2px solid transparent;cursor:pointer}
.knop.amber{background:var(--amber);color:var(--inkt)}.knop.amber:hover{background:#ffb829}
.knop.lijn{border-color:#ffffff55;color:#fff}.knop.lijn:hover{border-color:#fff}
.knop.lijnd{border-color:var(--inkt);color:var(--inkt)}
.knop.donker{background:var(--inkt);color:#fff}
@media(max-width:900px){.kop nav{display:none}.kop .knop.lijn{display:none}}
/* held van een subpagina: het lampje van deze storing */
.held-sub{background:radial-gradient(120% 120% at 80% 50%,var(--nacht2) 0%,var(--nacht) 65%);color:#fff;padding:120px 0 56px}
.held-sub .w{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:center}
.kruim{font-size:15px;color:#9fb2c4;margin-bottom:14px}.kruim a{color:#c9d4de;text-decoration:none}
.held-sub h1{font:800 clamp(40px,5.4vw,72px)/.95 var(--disp);margin:0 0 18px;letter-spacing:-.4px}
.held-sub .lead{color:#c9d4de;font-size:clamp(18px,1.6vw,21px);max-width:34em;margin:0 0 26px}
.rij{display:flex;flex-wrap:wrap;gap:12px}
.lampvak{display:flex;flex-direction:column;align-items:center;gap:14px}
.grootlamp{width:min(260px,60vw);height:auto;overflow:visible}
.grootlamp g{fill:none;stroke:var(--lk);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px var(--lk)) drop-shadow(0 0 18px var(--lk));transition:stroke .6s,filter .6s}
.grootlamp.uit g{stroke:var(--groen);filter:none}
.lampstatus{font:600 18px/1.2 var(--disp);color:var(--amber);letter-spacing:.3px;min-height:1.2em}
.lampstatus.ok{color:var(--groen)}
@media(max-width:860px){.held-sub .w{grid-template-columns:1fr}.lampvak{order:-1;flex-direction:row;justify-content:flex-start}.grootlamp{width:110px}.held-sub{padding-top:96px}}
/* kort antwoord */
.kort{background:var(--nacht);padding:0 0 46px}
.answer{background:var(--wit);color:var(--inkt);border-left:6px solid var(--amber);border-radius:10px;padding:18px 22px;max-width:860px;font-size:18px;margin:0}
.answer b{font-family:var(--disp);font-size:21px;letter-spacing:.2px}
/* inhoud */
section{padding:64px 0}section.alt{background:var(--wit)}
h2{font:800 clamp(30px,3.6vw,46px)/1.02 var(--disp);margin:0 0 16px;letter-spacing:-.3px;color:var(--inkt)}
h3{font:700 25px/1.15 var(--disp);margin:28px 0 8px;color:var(--inkt)}
p{margin:0 0 14px}
.cols{display:grid;grid-template-columns:1.45fr 1fr;gap:44px}@media(max-width:900px){.cols{grid-template-columns:1fr}}
.cols>div{max-width:44em}
.side{background:var(--wit);border:1px solid var(--lijn);border-radius:10px;padding:22px;position:sticky;top:86px;align-self:start}
section.alt .side{background:#fff}
ul.check{list-style:none;padding:0;margin:10px 0 16px}
ul.check li{padding:7px 0 7px 32px;position:relative;border-bottom:1px dashed var(--lijn)}
ul.check li:before{content:"";position:absolute;left:4px;top:15px;width:12px;height:12px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px #f5a30033}
table.prijs{width:100%;border-collapse:collapse;margin:8px 0 10px;font-size:17px}
table.prijs td{padding:11px 0;border-bottom:1px solid var(--lijn)}table.prijs td:last-child{text-align:right;font-weight:700;white-space:nowrap;padding-left:12px}
.note{font-size:15px;color:var(--mut)}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px;margin:14px 0 6px;counter-reset:s}
.steps div{position:relative;padding-top:46px;font-size:16px;color:var(--mut)}
.steps div b{display:block;color:var(--inkt);font:700 21px/1.1 var(--disp);margin-bottom:4px}
.steps div:before{counter-increment:s;content:counter(s);position:absolute;top:0;left:0;width:32px;height:32px;border-radius:50%;border:3px solid var(--inkt);display:grid;place-items:center;font:700 16px/1 var(--disp)}
.grid{display:grid;grid-template-columns:1fr;gap:0;border-top:2px solid var(--inkt)}
.card{display:block;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--lijn)}
.card b{display:block;font:700 19px/1.2 var(--disp)}.card span{font-size:15px;color:var(--mut)}.card:hover b{color:#8a5c00}
.side .btn,.side .knop{width:100%;justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--amber);color:var(--inkt);text-decoration:none;font-weight:700;border-radius:8px;padding:12px 20px}
/* formulier */
form.melding{background:#fff;border-radius:10px;padding:24px;border:1px solid var(--lijn);align-self:start}
form.melding h2{font-size:34px;margin-bottom:6px}.klein{font-size:15px;color:var(--mut)}
label{display:block;font-weight:700;font-size:15px;margin:14px 0 6px}
input,textarea{width:100%;font:inherit;font-size:17px;padding:12px 14px;border:1.5px solid #b7c2cc;border-radius:8px;background:var(--wit);color:var(--inkt)}
input:focus,textarea:focus{border-color:var(--inkt);outline:none}
.kenteken{font:700 22px/1 var(--disp);letter-spacing:2px;text-transform:uppercase;background:#F5C400;border-color:#c79f00;max-width:240px}
form .knop{margin-top:18px;width:100%;justify-content:center}.hp{position:absolute;left:-9999px}
.ph{background:#ffe7b3;border-radius:3px;padding:0 4px;color:var(--inkt)}
.vragen{background:var(--wit);padding:64px 0}
details{border-top:1px solid var(--lijn);padding:16px 0;max-width:52em}details:last-of-type{border-bottom:1px solid var(--lijn)}
summary{font-weight:700;cursor:pointer;font-size:19px}details p{margin:10px 0 0;color:var(--mut)}
footer{background:var(--nacht);color:#9fb2c4;padding:50px 0 100px;font-size:15px}
footer>.w{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:28px}
footer .fk{color:#fff;font:700 20px/1 var(--disp);margin:0 0 12px}footer a{display:block;text-decoration:none;color:#c9d4de;padding:3px 0}
footer .voet{display:block;margin-top:24px;color:#7f93a6}
@media(max-width:860px){footer>.w{grid-template-columns:1fr 1fr}}
.mbar{position:fixed;inset:auto 0 0 0;z-index:50;display:none;gap:8px;padding:10px;background:var(--wit);border-top:1px solid var(--lijn)}
.mbar .knop{flex:1;justify-content:center}@media(max-width:900px){.mbar{display:flex}}

.cols .steps{grid-template-columns:repeat(2,1fr)}@media(max-width:520px){.cols .steps{grid-template-columns:1fr}}
table.merken td:first-child{width:36%;vertical-align:top;padding-right:16px}table.merken td:last-child{text-align:left;font-weight:400;white-space:normal;padding-left:0}@media(max-width:640px){table.merken td{display:block;width:auto!important;border:0;padding:2px 0}table.merken tr{display:block;padding:10px 0;border-bottom:1px solid var(--lijn)}}

.kruim a{display:inline-block;padding:12px 6px;margin:-12px -6px}