/* Trommelwijs — stoer en grafisch in de oorspronkelijke kleuren: diep groen, fris mint, zacht mintgrijs en donkerblauwe inkt. Het EU-energielabel blijft het beeldmotief. */
:root{
  --paper:#f3f6f5; --surface:#ffffff; --ink:#122033; --muted:#566373; --line:#122033;
  --cobalt:#0b6e4f; --on-cobalt:#ffffff; --yellow:#3fcf98; --on-yellow:#122033;
  --coral:#0b6e4f; --soft:#e2efe9; --shadow:#122033;
  --accent:#0b6e4f; --accent-ink:#ffffff;
  --block-sub:#cfe9dd; --warn:#8a3a00; --warn-soft:#fbeee0;
  --lA:#00a651; --lB:#4cb848; --lC:#bfd730; --lD:#fff200; --lE:#fdb913; --lF:#f37021; --lG:#ed1c24;
  --display:"Big Shoulders Display","Impact","Arial Narrow",sans-serif;
  --body:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0e1622; --surface:#16212f; --ink:#e7eef3; --muted:#9fb0bf; --line:#e7eef3;
  --cobalt:#0f5c43; --yellow:#3fcf98; --on-yellow:#06261a; --coral:#3fcf98; --soft:#173229; --shadow:#000000;
  --accent:#3fcf98; --accent-ink:#06261a; --block-sub:#cfe9dd; --warn:#ffb08f; --warn-soft:#3a2219; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0e1622; --surface:#16212f; --ink:#e7eef3; --muted:#9fb0bf; --line:#e7eef3;
  --cobalt:#0f5c43; --yellow:#3fcf98; --on-yellow:#06261a; --coral:#3fcf98; --soft:#173229; --shadow:#000000;
  --accent:#3fcf98; --accent-ink:#06261a; --block-sub:#cfe9dd; --warn:#ffb08f; --warn-soft:#3a2219; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--body);padding-inline:16px}
img{max-width:100%}
.wrap{max-width:1100px;margin:0 auto}
.read{max-width:760px}
h1,h2,h3{font-family:var(--display);line-height:.95;text-wrap:balance;margin:0;text-transform:uppercase;letter-spacing:.005em}
h1{font-size:clamp(3rem,9vw,6.4rem);font-weight:900}
h2{font-size:clamp(2.2rem,5.5vw,3.6rem);font-weight:900}
h3{font-size:1.6rem;font-weight:800;line-height:1}
p{margin:0}
a{color:var(--accent);text-underline-offset:3px;text-decoration-thickness:2px}
.eyebrow{font:500 .78rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
mark{background:var(--yellow);color:var(--on-yellow);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;padding-block:18px;flex-wrap:wrap;border-bottom:3px solid var(--line)}
.logo{display:flex;align-items:center;gap:10px;font:900 1.9rem/1 var(--display);text-transform:uppercase;color:var(--ink);text-decoration:none}
.drum{width:34px;height:34px;border-radius:7px;background:var(--cobalt);border:3px solid var(--line);display:grid;place-items:center;flex:none}
.drum::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--yellow);border:3px solid var(--line)}
.top nav{display:flex;gap:6px 22px;flex-wrap:wrap}
.top nav a{color:var(--ink);text-decoration:none;font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:.04em;padding-block:4px;border-bottom:3px solid transparent}
.top nav a:hover,.top nav a[aria-current]{border-color:var(--coral)}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:0;font:800 1rem var(--body);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;border:3px solid var(--line);cursor:pointer;text-align:center;box-shadow:5px 5px 0 var(--shadow);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--shadow)}
.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
.btn.primary{background:var(--cobalt);color:#ffffff}
.btn.ghost{background:var(--surface);color:var(--ink)}
.shops{display:flex;flex-wrap:wrap;gap:14px}
.shops .btn{flex:1 1 180px}
.shops-note{font-size:.85rem;color:var(--muted)}

/* hero */
.hero{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;padding-block:44px 56px}
.lead{font-size:1.2rem;color:var(--muted);margin-top:22px;max-width:52ch}
.cta{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.disclose{font-size:.85rem;color:var(--muted);margin-top:22px;max-width:60ch}

/* wasmachine-illustratie */
.machine{position:relative;background:var(--surface);border:4px solid var(--line);box-shadow:12px 12px 0 var(--cobalt);padding:18px;display:grid;gap:16px;max-width:420px;justify-self:center;width:100%}
.machine .panel{display:flex;justify-content:space-between;align-items:center;border-bottom:4px solid var(--line);padding-bottom:12px;gap:12px}
.machine .knob{width:36px;height:36px;border-radius:50%;border:4px solid var(--line);background:var(--coral);flex:none}
.machine .screen{font:500 .9rem var(--mono);background:var(--ink);color:var(--yellow);padding:4px 10px;letter-spacing:.06em}
.machine .door{aspect-ratio:1;max-width:100%;border-radius:50%;border:10px solid var(--line);background:var(--cobalt);display:grid;place-items:center;overflow:hidden;position:relative}
.machine .glass{width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffffff55 0 18%,transparent 19%),conic-gradient(from 0deg,var(--yellow) 0 25%,var(--coral) 0 50%,#ffffff 0 75%,var(--yellow) 0);border:5px solid var(--line)}
@media (prefers-reduced-motion:no-preference){.machine .glass{animation:spin 6s linear infinite}}
@keyframes spin{to{transform:rotate(360deg)}}
.machine .tag{position:absolute;top:-18px;right:-14px;background:var(--yellow);color:var(--on-yellow);border:3px solid var(--line);font:900 1.1rem/1 var(--display);text-transform:uppercase;padding:8px 12px;transform:rotate(6deg)}

/* lichtkrant */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;margin-inline:-16px;border-block:3px solid var(--line)}
.ticker-track{display:flex;width:max-content;gap:0;padding-block:12px}
.ticker span{font:900 1.5rem/1 var(--display);text-transform:uppercase;padding-inline:20px;white-space:nowrap}
.ticker span:nth-child(3n+2){color:var(--yellow)}
.ticker span:nth-child(3n){color:var(--soft)}
@media (prefers-reduced-motion:no-preference){.ticker-track{animation:slide 28s linear infinite}}
@keyframes slide{to{transform:translateX(-50%)}}

/* energielabel-strook */
.labelstrip{display:grid;grid-template-columns:repeat(7,1fr);border:3px solid var(--line)}
.labelstrip span{font:900 1.4rem/1 var(--display);color:#111;text-align:center;padding-block:10px;border-right:3px solid var(--line)}
.labelstrip span:last-child{border-right:0}

/* secties */
section{padding-block:64px;border-top:3px solid var(--line)}
section.block{background:var(--cobalt);color:var(--on-cobalt);margin-inline:-16px;padding-inline:16px;border-top:0}
section.block .eyebrow,section.block .sec-head p{color:var(--block-sub)}
section.yellow{background:var(--soft);color:var(--ink);margin-inline:-16px;padding-inline:16px;border-top:0}
section.yellow .eyebrow,section.yellow .sec-head p{color:var(--muted)}
.sec-head{display:grid;gap:12px;margin-bottom:32px}
.sec-head p{color:var(--muted);max-width:62ch;font-size:1.08rem}

/* keuzehulp */
.bench{display:grid;grid-template-columns:1.2fr 1fr;gap:28px;align-items:start}
.qs{display:grid;gap:26px}
fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
legend{font:800 1.05rem var(--body);margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips input{position:absolute;opacity:0;pointer-events:none}
.chips label{padding:10px 16px;border:3px solid #111318;cursor:pointer;background:#ffffff;color:#111318;font-weight:700;box-shadow:3px 3px 0 #111318;transition:transform .1s ease}
.chips label:hover{transform:translate(-1px,-1px)}
.chips input:checked + label{background:var(--yellow);transform:translate(2px,2px);box-shadow:1px 1px 0 #111318}
.chips input:focus-visible + label{outline:3px solid var(--coral);outline-offset:3px}
.result{background:var(--surface);color:var(--ink);border:4px solid #111318;box-shadow:10px 10px 0 #111318;padding:26px;display:grid;gap:18px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 20px)}
.result h3{font-size:2rem}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0;border:3px solid var(--line)}
.spec{padding:12px;min-width:0;border-right:3px solid var(--line);border-bottom:3px solid var(--line)}
.spec:nth-child(2n){border-right:0}
.spec:nth-child(n+3){border-bottom:0}
.spec b{display:block;font:900 1.7rem/1.05 var(--display)}
.spec span{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.result ul{margin:0;padding-left:20px;color:var(--muted)}
.result li{margin-bottom:6px}
.result .more{font-weight:800;color:var(--accent)}

/* rekenhulp */
.calc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.field{display:grid;gap:6px;min-width:0}
.field label{font-weight:800;font-size:.95rem}
.field input{font:600 1.15rem var(--mono);padding:12px 14px;border-radius:0;border:3px solid var(--line);background:var(--surface);color:var(--ink);width:100%;box-shadow:3px 3px 0 var(--shadow)}
.field small{color:var(--muted)}
.out{grid-column:1/-1;background:var(--yellow);color:#122033;border:4px solid #111318;box-shadow:8px 8px 0 #111318;padding:24px;display:grid;gap:6px}
.out .big{font:900 clamp(3rem,10vw,5.5rem)/.9 var(--display)}
.example{justify-self:start;font:600 .7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;background:#ffffff;color:#111318;border:2px solid #111318;padding:3px 8px}

/* situaties */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{display:grid;gap:10px;padding:24px;background:var(--surface);border:3px solid var(--line);box-shadow:6px 6px 0 var(--shadow);text-decoration:none;color:var(--ink);align-content:start;transition:transform .12s ease,box-shadow .12s ease}
.card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--shadow)}
.card p{color:var(--muted)}
.card .eyebrow{color:var(--coral);font-weight:600}
.card.wide{grid-column:1/-1;background:var(--ink);color:var(--paper);box-shadow:6px 6px 0 var(--coral)}
.card.wide:hover{box-shadow:9px 9px 0 var(--coral)}
.card.wide p{color:var(--paper);opacity:.8}
.card.wide .eyebrow{color:var(--yellow)}
.card.wide h3{font-size:clamp(2rem,5vw,3rem)}

/* gids */
.guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.guide article{display:grid;gap:10px;align-content:start;border-top:6px solid var(--line);padding-top:16px}
.guide .unit{font:900 2.6rem/1 var(--display);text-transform:uppercase;color:var(--cobalt)}
.guide p{color:var(--muted)}
.table-wrap{overflow-x:auto;margin-block:28px}
table{border-collapse:collapse;width:100%;min-width:460px;font-variant-numeric:tabular-nums;border:3px solid var(--line);background:var(--surface)}
caption{text-align:left;padding-bottom:10px}
th,td{text-align:left;padding:12px 14px;border-bottom:2px solid var(--line);vertical-align:top}
th{font:600 .75rem var(--mono);letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper)}

/* modellentabel */
table.models{font-size:.92rem}
table.models th,table.models td{vertical-align:middle;padding:10px 9px}
table.models td.mono{white-space:nowrap}
table.models small{color:var(--muted)}
table.models b{font:900 1.35rem/1 var(--display)}
.minishops{display:flex;flex-direction:column;gap:5px;min-width:96px}
.box .minishops{flex-direction:row;flex-wrap:wrap}
.minishops a{font:700 .72rem var(--body);text-transform:uppercase;letter-spacing:.03em;text-decoration:none;color:var(--ink);border:2px solid var(--line);padding:5px 8px;text-align:center;background:var(--surface)}
.minishops a:first-child{background:var(--cobalt);color:#ffffff}
.minishops a:hover{background:var(--yellow);color:var(--on-yellow)}

/* artikelen */
.article-head{display:grid;gap:16px;padding:32px;margin-block:32px 40px;background:var(--cobalt);color:var(--on-cobalt);border:4px solid var(--line);box-shadow:10px 10px 0 var(--yellow)}
.article-head .eyebrow,.article-head .meta{color:var(--block-sub)}
.article-head .lead{margin-top:0;color:#eaf5f0}
.article-head h1{font-size:clamp(2.6rem,7vw,4.8rem)}
.meta{font:400 .8rem var(--mono);color:var(--muted)}
.prose{display:grid;gap:18px;padding-bottom:48px}
.prose h2{margin-top:26px}
.prose h3{margin-top:8px}
.prose p,.prose li{max-width:66ch}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.prose ol li::marker{font-weight:800}
.box{background:var(--surface);border:3px solid var(--line);padding:22px;display:grid;gap:12px;box-shadow:6px 6px 0 var(--shadow)}
.box > strong{font:900 1.4rem/1 var(--display);text-transform:uppercase}
.box.tip{background:var(--yellow);color:var(--on-yellow)}
.box.warn{background:var(--warn-soft)}
.box.warn > strong{color:var(--warn)}
.check{list-style:none;padding-left:0 !important}
.check li{padding-left:34px;position:relative}
.check li::before{content:"";position:absolute;left:0;top:.2em;width:20px;height:20px;border:3px solid var(--line);background:var(--surface)}
.check li::after{content:"";position:absolute;left:6px;top:.35em;width:7px;height:12px;border:solid var(--cobalt);border-width:0 3px 3px 0;transform:rotate(45deg)}

/* faq */
details{border-bottom:3px solid var(--line);padding-block:18px}
details:first-of-type{border-top:3px solid var(--line)}
summary{cursor:pointer;font-weight:800;font-size:1.1rem}
details p{color:var(--muted);margin-top:10px}

footer.site{padding-block:44px;border-top:3px solid var(--line);color:var(--muted);font-size:.9rem;display:grid;gap:12px}
footer.site strong{color:var(--ink)}
footer.site nav{display:flex;gap:8px 20px;flex-wrap:wrap}
footer.site a{color:var(--ink);font-weight:600}

@media (max-width:860px){
  .hero,.bench{grid-template-columns:1fr}
  .guide,.cards{grid-template-columns:1fr}
  .result{position:static}
  .machine{max-width:340px}
}
@media (max-width:540px){
  .calc{grid-template-columns:1fr}
  .article-head{padding:22px}
  .labelstrip span{font-size:1.1rem}
}