/* maximumprijzen.be — De Drempel. Aplat rouge brique, encre presque noire, une seule famille : Rethink Sans
   (SIL OFL 1.1, The Rethink Sans Project Authors) en 400, 500 et 800, servie par le site (@font-face dans base.html). */
:root{--rood:#bd3114;--zwart:#15100e;--wit:#fff;--inkt:#15100e;--wit-dim:rgba(255,255,255,.82);--lijn:rgba(255,255,255,.28);
  --f:"Rethink Sans",system-ui,sans-serif;--rand:clamp(1rem,4vw,4rem)}
*{box-sizing:border-box}
html{background:var(--zwart);color:var(--wit);font:400 19px/1.5 var(--f);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-width:320px;background:var(--zwart);overflow-wrap:break-word}
a{color:inherit;text-underline-offset:3px}
:focus-visible{outline:3px solid #fff;outline-offset:3px}
.kop :focus-visible,.rail :focus-visible,.kopband :focus-visible{outline-color:var(--inkt)}
h1,h2{font-weight:800;line-height:1.08;margin:0;letter-spacing:-.01em}
.spring{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.6rem 1rem;z-index:10}
.spring:focus{left:1rem}
.verborgen{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
[hidden]{display:none!important}

/* Kop : rouge, sans séparation avec le rail */
.kop,.rail,.kopband{--wit-dim:rgba(255,255,255,.95)}
.kop{background:var(--rood);padding:1rem var(--rand) 0;display:grid;grid-template-columns:auto 1fr;gap:.3rem 2rem;align-items:center}
.merk{font-weight:800;font-size:1.1rem;text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
.kop-nav{display:flex;flex-wrap:wrap;gap:.1rem .2rem}
.kop-nav a{text-decoration:none;padding:.5rem .6rem;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--wit-dim)}
.kop-nav a:hover,.kop-nav a[aria-current]{color:#fff;text-decoration:underline;text-decoration-thickness:3px}
.menu-knop{display:none}
.onafhankelijk{grid-column:1/-1;margin:0;font-size:1rem;color:var(--wit-dim)}

/* Le rail : premier écran rouge plein */
.rail,.kopband{background:var(--rood);padding:1.4rem var(--rand) 3rem}
.rail.met-tool{min-height:calc(100vh - 6.5rem)}
.boven{margin:0 0 .5rem;font-size:1rem;color:var(--wit-dim)}
h1{font-size:clamp(1.7rem,2.6vw,2.4rem);max-width:30ch}
.lead{max-width:62ch;margin:2rem 0 0}
.plafonds{display:flex;flex-wrap:wrap;gap:.6rem 3rem;margin:.8rem 0 .3rem}
.plafond p{margin:0}
.pl-regel{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .45rem}
.pl-prijs{font-size:clamp(2.4rem,4.4vw,3.8rem);font-weight:800;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pl-eenheid{font-size:1.2rem;font-weight:800}
.pl-wat{font-size:1.1rem;font-weight:500}
.pl-morgen{font-size:1rem;color:var(--wit-dim);margin-top:.2rem!important}
.plafonds.enkel .pl-prijs{font-size:clamp(3rem,6vw,5rem)}
.andere{margin:.6rem 0 0;font-size:1rem}
.andere a{display:inline-block;padding:.55rem 0;font-weight:500;white-space:nowrap}

/* Startpagina : de belangrijkste plafonds op één rij */
.prijzenrij{list-style:none;margin:1rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:0 1.6rem;max-width:1320px}
.prijzenrij a{display:flex;flex-direction:column;min-height:44px;padding:.6rem 0 .8rem;border-top:3px solid #fff;text-decoration:none}
.prijzenrij a:hover .pr-naam{text-decoration:underline}
.pr-naam{font-weight:500}
.pr-prijs{font-size:clamp(2rem,3.4vw,2.9rem);font-weight:800;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pr-prijs small{font-size:1rem;letter-spacing:0}
.pr-morgen{font-size:1rem;color:var(--wit-dim)}

/* Het gereedschap */
.vraag{font-size:clamp(1.3rem,1.9vw,1.6rem);margin:1.8rem 0 .5rem;color:var(--inkt)}
.schuif{max-width:1100px;margin:0}
.liters{margin:0 0 .4rem;font-size:clamp(2.4rem,4.2vw,3.6rem);font-weight:800;line-height:1;color:var(--inkt);font-variant-numeric:tabular-nums}
.liters span{font-size:.4em;font-weight:500;color:var(--wit)}
.spoor-wrap{position:relative;height:96px;margin:0 .5rem}
#schuif{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;width:100%;height:56px;margin:0;background:transparent;z-index:2;cursor:pointer}
#schuif::-webkit-slider-runnable-track{height:56px;background:transparent}
#schuif::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:44px;height:56px;border-radius:4px;background:var(--inkt);border:0;box-shadow:inset 0 0 0 3px var(--rood),inset 0 0 0 5px #fff}
#schuif::-moz-range-track{height:56px;background:transparent}
#schuif::-moz-range-thumb{width:44px;height:56px;border-radius:4px;background:var(--inkt);border:0}
#schuif:focus-visible{outline:3px solid var(--inkt);outline-offset:4px}
.spoor{position:absolute;left:0;right:0;top:18px;height:20px;border-top:3px solid #fff;
  background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px calc(100% / var(--klein)));background-size:100% 10px;background-repeat:no-repeat}
.spoor::before{content:"";position:absolute;left:0;right:0;top:0;height:18px;background-image:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px calc(100% / var(--groot)));background-repeat:no-repeat}
.tik{position:absolute;top:30px;transform:translateX(-50%);font-size:.95rem;color:var(--wit-dim);white-space:nowrap}
.tik:first-child{transform:none}
.tik:last-child{transform:translateX(-100%)}
.tik.drempel{color:var(--inkt);font-weight:800;top:28px;font-size:1.05rem}
.tik.drempel::before{content:"";position:absolute;left:50%;top:-28px;width:4px;height:26px;background:var(--inkt);transform:translateX(-50%)}
.knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.4rem}
.knoppen button{font:inherit;font-weight:800;font-size:1.05rem;min-width:48px;min-height:48px;padding:0 1rem;border:0;border-radius:6px;background:var(--inkt);color:#fff;cursor:pointer}
.knoppen button:hover{background:#000;text-decoration:underline}
.knoppen label{font-weight:500}
.knoppen input{font:inherit;font-weight:800;font-size:1.1rem;width:9ch;min-height:48px;padding:.3rem .6rem;border:2px solid var(--inkt);border-radius:6px;background:#fff;color:var(--inkt);font-variant-numeric:tabular-nums}
.fout-tekst{font-weight:800;color:#fff;background:var(--inkt);padding:.05rem .45rem;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.uitkomst{margin-top:1.4rem}
.uitkomst p{margin:0}
.groot{font-size:clamp(2.4rem,5vw,4.4rem);font-weight:800;line-height:1;color:var(--inkt);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.groot .label{display:inline-block;font-size:.28em;font-weight:500;color:#fff;margin-left:.4em;vertical-align:.2em;letter-spacing:0}
.detail{margin-top:.4rem!important;font-size:1.1rem}
.morgen{margin-top:.3rem!important;font-weight:500;max-width:70ch}
.wenk{margin-top:.6rem!important;max-width:60ch;font-weight:800}
.wenk span{background:var(--inkt);color:#fff;padding:.1rem .45rem;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.noot-rail{margin:.8rem 0 0;max-width:70ch;color:var(--wit-dim)}
.drempel-zin{max-width:70ch;margin:2.2rem 0 0}

/* Kopband : pagina's zonder gereedschap (colofon, privacy, 404) */
.kopband{padding-bottom:2.4rem}
.kopband .lead{margin-top:1rem}

/* Zwarte secties */
.curve,.jaar,.sprongen,.tabel,.gemiddelden,.artikel,.voet,.reclame{padding:3rem var(--rand)}
.curve h2,.jaar h2,.sprongen h2,.tabel h2,.gemiddelden h2,.artikel h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.6rem}
section .lead{margin:0 0 1rem;color:var(--wit-dim)}
.rail .lead{color:var(--wit);margin-top:2rem}
.grafieken{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2rem;max-width:1200px;align-items:start}
.grafieken figure{margin:0}
figcaption,.noot{font-size:.95rem;color:var(--wit-dim);margin-top:.4rem;max-width:75ch}
.grafiek{width:100%;height:auto;display:block;font-family:var(--f)}
.grafiek .kader-loep{fill:rgba(255,255,255,.07)}
.grafiek .as line{stroke:rgba(255,255,255,.25);stroke-width:1.5}
.grafiek .as text{fill:var(--wit-dim);font-size:19px}
.grafiek .lijn{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.grafiek .sprong{stroke:var(--rood);stroke-width:8;stroke-linecap:round}
.grafiek .drempel-lijn{stroke:#fff;stroke-width:2}
.grafiek .loep-vlak{fill:rgba(189,49,20,.35)}
.grafiek .noot-svg{fill:#fff;font-size:20px;font-weight:500}
.grafiek .punt{fill:var(--rood);stroke:#fff;stroke-width:4}
.grafiek .punt-tekst{fill:#fff;font-size:22px;font-weight:800}

/* Het jaar */
.aflezing{margin:0 0 .6rem;font-size:1.05rem}
.aflezing b{font-size:1.5rem;font-weight:800;margin-left:.4rem;font-variant-numeric:tabular-nums}
.jaar-vlak{position:relative;height:clamp(240px,28vw,380px);max-width:1200px;margin:0 0 3rem 3.6rem;border-left:1px solid var(--lijn);border-bottom:1px solid var(--lijn);touch-action:pan-y;cursor:crosshair}
.jaar-vlak svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.jaar-vlak polyline{fill:none;stroke-width:3;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.jaar-vlak .verleden{stroke:#fff}
.jaar-vlak .toekomst{stroke:#ff6a4a;stroke-width:4}
.y-lijn{position:absolute;left:0;right:0;border-top:1px solid rgba(255,255,255,.14)}
.y-tik{position:absolute;right:100%;margin-right:.5rem;transform:translateY(-50%);font-size:.95rem;color:var(--wit-dim);font-variant-numeric:tabular-nums}
.x-tik{position:absolute;top:100%;padding-top:.35rem;transform:translateX(-50%);font-size:.95rem;color:var(--wit-dim);white-space:nowrap}
.x-tik::before{content:"";position:absolute;left:50%;top:-6px;height:6px;border-left:1px solid var(--lijn)}
.x-tik.rechts{transform:translateX(-100%)}
.x-tik.rechts::before{left:100%}
.x-tik.weg{display:none}
.vandaag-streep{position:absolute;top:-.6rem;bottom:0;width:4px;margin-left:-2px;background:var(--rood)}
.wijzer{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;pointer-events:none}
.jaar-vlak:focus-visible{outline:3px solid #fff;outline-offset:6px}

/* Sprongen */
.sprong-lijst{list-style:none;margin:0;padding:0;max-width:1100px}
.sprong-lijst li{display:grid;grid-template-columns:minmax(9rem,14rem) 5.5rem minmax(0,1fr);grid-template-areas:"d p b" "d v v";gap:.1rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--lijn);align-items:center}
.sp-datum{grid-area:d;font-weight:500}
.sp-pct{grid-area:p;font-weight:800;font-size:1.2rem;font-variant-numeric:tabular-nums;text-align:right}
.sp-balk{grid-area:b;height:14px;background:linear-gradient(90deg,#fff var(--w),transparent var(--w))}
.sp-pct.op+.sp-balk{background:linear-gradient(90deg,var(--rood) var(--w),transparent var(--w))}
.sp-van{grid-area:v;color:var(--wit-dim)}

/* Tabellen */
.tabel table,.gemiddelden table{width:100%;max-width:1100px;border-collapse:collapse;font-variant-numeric:tabular-nums;margin-bottom:1rem}
.tabel th,.tabel td,.gemiddelden th,.gemiddelden td{text-align:left;padding:.6rem .5rem;border-bottom:1px solid var(--lijn);vertical-align:top}
.tabel thead th,.gemiddelden thead th{font-weight:500;color:var(--wit-dim);font-size:.95rem}
.tabel td,.gemiddelden td{font-weight:500}
.tabel tbody th,.gemiddelden tbody th{font-weight:500}
.tabel td:nth-child(2),.tabel td:nth-child(3),.tabel thead th:nth-child(2),.tabel thead th:nth-child(3){text-align:right}
.tabel td:nth-child(4),.tabel thead th:nth-child(4){padding-left:1.5rem}
.gemiddelden td,.gemiddelden thead th:not(:first-child){text-align:right}
.gemiddelden td.met-balk{position:relative;text-align:right;min-width:9rem}
.balk{position:absolute;left:.5rem;top:50%;height:10px;width:calc(var(--w) * .55);transform:translateY(-50%);background:#fff;opacity:.85}
.gemiddelden h2+.lead,.gemiddelden h2{margin-top:0}
.gemiddelden table+h2{margin-top:2.4rem}

/* Artikel en voet */
.artikel{max-width:none}
.artikel>*{max-width:68ch}
.artikel h2{margin-top:2.2rem}
.artikel h2:first-child{margin-top:0}
.artikel p,.artikel li{line-height:1.55}
.artikel strong{font-weight:800}
.reclame p{margin:0 0 .4rem;font-size:1rem;letter-spacing:.04em;text-transform:uppercase;color:var(--wit-dim)}
.reclame-vak{min-height:120px;max-width:1100px;background:rgba(255,255,255,.08)}
.voet{border-top:1px solid var(--lijn);font-size:1rem;color:var(--wit-dim)}
.voet h2{font-size:1.2rem;color:#fff;margin:0 0 .6rem}
.voet-nav ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1.4rem;margin:0 0 2rem}
.voet-nav a{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.bronnen{padding-left:1.2rem;max-width:80ch;margin:0 0 1rem}
.bronnen li{margin-bottom:.5rem}
.voet p{max-width:80ch}

@media (max-width:860px){
  .kop{grid-template-columns:1fr auto;gap:0 1rem;padding-top:.4rem}
  .kop-nav{display:none}
  .menu-knop{display:inline-flex;align-items:center;justify-content:flex-end;min-height:44px;min-width:44px;font-weight:800;color:#fff}
  .onafhankelijk{font-size:.95rem;line-height:1.35}
  .rail.met-tool{min-height:0;display:flex;flex-direction:column}
  .rail.met-tool>.andere{order:2;margin-top:1.2rem}
  .rail.met-tool>.noot-rail,.rail.met-tool>.drempel-zin,.rail.met-tool>.lead{order:3}
  .rail,.kopband{padding-top:1.2rem}
  .rail .lead{margin:1.2rem 0 0}
  h1{font-size:1.4rem}
  .boven{font-size:.95rem}
  .plafonds{gap:.3rem 1.4rem;margin-top:.5rem}
  .pl-prijs{font-size:2.1rem}
  .plafonds.enkel .pl-prijs{font-size:3rem}
  .pl-eenheid{font-size:1rem}
  .pl-wat{font-size:1rem}
  .pl-morgen{font-size:.95rem}
  .andere{font-size:.95rem;line-height:1.35}
  .prijzenrij{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
  .pr-prijs{font-size:1.9rem}
  .pr-naam,.pr-morgen{font-size:.95rem}
  .vraag{font-size:1.2rem;margin-top:.9rem}
  .liters{font-size:2.1rem}
  .liters span{font-size:1rem}
  .spoor-wrap{height:80px}
  .knoppen{gap:.35rem}
  .knoppen button{padding:0 .45rem;font-size:1rem}
  .knoppen input{width:calc(5.6ch + 1.1rem);padding:.3rem .4rem}
  .knoppen label{position:absolute;left:-9999px}
  .uitkomst{margin-top:.8rem}
  .groot .label{display:block;font-size:1rem;margin:.4rem 0 0;vertical-align:0}
  .tik.breed{display:none}
  .grafieken{grid-template-columns:1fr}
  .grafieken .heel{display:none}
  .x-tik.breed{display:none}
  .jaar-vlak{margin-left:3rem}
  .sprong-lijst li{grid-template-columns:5rem minmax(0,1fr);grid-template-areas:"p d" "p b" "v v"}
  .sp-pct{text-align:left}
  .tabel thead{position:absolute;left:-9999px}
  .tabel tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 .6rem;padding:.5rem 0;border-bottom:1px solid var(--lijn)}
  .tabel tbody th{grid-column:1/-1;border:0;padding:0 0 .2rem}
  .tabel td{border:0;padding:.05rem 0;text-align:left!important}
  .tabel td:nth-child(2)::before{content:"vandaag ";font-weight:400;color:var(--wit-dim)}
  .tabel td:nth-child(3)::before{content:"morgen ";font-weight:400;color:var(--wit-dim)}
  .tabel td:nth-child(4){grid-column:1/-1}
  .gemiddelden th,.gemiddelden td{padding:.5rem .25rem;font-size:.95rem}
  .gemiddelden td.met-balk{min-width:0}
  .balk{display:none}
}
/* Texte agrandi : les mots longs et les montants passent à la ligne plutôt que de déborder. */
.merk,.groot,.liters,.pl-prijs,.pr-prijs,h1,h2,th,td,.voet a,.bronnen a{overflow-wrap:anywhere}