:root{--papier:#EFEBE3;--papier2:#F7F5F0;--inkt:#141210;--inkt2:#1F1C18;--zacht:#6E675E;--rand:#D5CFC2;--rood:#B5281E;--oranje:#E8543F;
  /* --kaart werd zes keer gebruikt en was nooit gedefinieerd, dus .kaartdoos, .vb,
     .schuifkaart en .rustkaart hadden helemaal geen achtergrond. */
  --kaart:#F7F5F0;
  --h1:56px;--h2:36px;--h3:22px;--body:18px;--klein:14px;--cijfer:48px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--papier);color:var(--inkt);font-family:"Public Sans",system-ui,sans-serif;font-size:var(--body);line-height:1.5}
.site{container-type:inline-size;container-name:site;background:var(--papier)}
.r{width:100%;max-width:1440px;margin:0 auto;padding-left:105px;padding-right:105px}
h1,h2,h3,.g{font-family:Gabarito,sans-serif;letter-spacing:-.025em;text-wrap:balance}
h1{font-weight:900;font-size:var(--h1);line-height:1.02;letter-spacing:-.035em}
h1 em,.rood{font-style:normal;color:var(--rood)}
h2{font-weight:900;font-size:var(--h2);line-height:1.08}
h3{font-weight:700;font-size:var(--h3);line-height:1.2}
p{max-width:34em;text-wrap:pretty}
.zacht{color:var(--zacht)}
.klein{font-size:var(--klein)}
.tab{font-variant-numeric:tabular-nums}
.ico{width:24px;height:24px;flex:0 0 24px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.ico.groot{width:32px;height:32px}

.knop{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;background:var(--inkt);color:var(--papier);font-weight:700;font-size:16px;border-radius:6px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;white-space:nowrap;text-wrap:balance;transition:transform .12s ease,opacity .12s ease}
.knop:hover{opacity:.92}
.knop:active{transform:translateY(1px)}
.knop:focus-visible{outline:3px solid var(--rood);outline-offset:2px}


nav{height:96px;display:flex;align-items:center;justify-content:space-between}
/* 43 pixels hoog was net te weinig om betrouwbaar te raken. */
.merk{min-height:44px;display:inline-flex;align-items:center;background:var(--inkt);color:var(--papier);font-family:Gabarito,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.02em;padding:8px 11px 7px;border-radius:4px;text-decoration:none;display:inline-block}
.merk i{color:var(--oranje);font-style:normal}
nav ul{list-style:none;display:flex;gap:28px;font-size:16px;font-weight:700}
nav a{color:var(--zacht);text-decoration:none}
/* Niet .merk: dat is lichte tekst op een zwart blokje, en die regel maakte hem
   zwart op zwart zodra je er met de muis overheen ging. */
nav a:not(.merk):hover{color:var(--inkt)}
/* Het logo blijft klikbaar en laat dat zien met een lichtere achtergrond, niet met
   een andere tekstkleur. */
.merk{transition:background-color .12s ease}
.merk:hover,.merk:focus-visible{background:var(--inkt2)}
nav .mob{display:none}
nav .mnu{display:none}


.held{padding:96px 0}
.held .r{display:grid;grid-template-columns:584px 584px;column-gap:62px;align-items:start}
.held p.sub{margin-top:20px;font-size:20px;line-height:1.45;max-width:26em}
.form{margin-top:28px;display:flex;flex-direction:column;gap:16px;max-width:520px}
.veld{--slop-allow: redundant-border;height:52px;border:1.5px solid var(--inkt);border-radius:6px;background:#fff; padding:0 16px; font:inherit; font-size:16px; color:var(--inkt); width:100%}
.veld::placeholder{color:var(--zacht)}
.rij{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.stapel{position:relative;padding-bottom:0}
.kaart{border-radius:6px; background:#fff; padding:26px 28px; box-shadow:0 8px 24px rgba(20,18,16,.08); position:relative; z-index:2}
.kaart .waar{font-size:var(--klein);color:var(--zacht)}
.kaart .uit{font-family:Gabarito,sans-serif;font-weight:900;font-size:30px;line-height:1.1;letter-spacing:-.025em;margin:8px 0 18px}
.kaart dl{display:grid;grid-template-columns:1fr auto;row-gap:10px;column-gap:20px;font-size:16px}
.kaart dt{color:var(--zacht)}
.kaart dd{font-weight:700;text-align:right}
.kaart .cta{margin-top:20px}
.kaart .cta .knop{height:48px;padding:0 18px;font-size:15px}
.opbouw{--slop-allow: nested-cards;position:relative; margin:-14px 0 0 36px; width:calc(100% - 36px); background:var(--papier2); border-radius:0 0 6px 6px; padding:30px 22px 16px; z-index:1}
.opbouw .waar{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);font-weight:700}
.balken{margin-top:10px;display:grid;grid-template-columns:auto 1fr auto;column-gap:12px;row-gap:6px;align-items:center;font-size:13px}
.balken span:first-child{color:var(--zacht)}
.balken i{display:block;height:8px;background:var(--inkt);border-radius:2px;transform-origin:left;animation:groei .9s cubic-bezier(.2,.8,.3,1) both}
.balken i:nth-of-type(2){animation-delay:.1s}.balken i:nth-of-type(3){animation-delay:.2s}.balken i:nth-of-type(4){animation-delay:.3s}
.balken b{text-align:right}
@keyframes groei{from{transform:scaleX(0)}to{transform:scaleX(1)}}


.strook{padding:48px 0;border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.strook .r.bewijs{display:grid;grid-template-columns:auto 1fr 300px;column-gap:48px;align-items:center}
.strook .groot{font-size:96px;line-height:1;letter-spacing:-.04em}
.strook .tekst{font-size:22px;line-height:1.35;max-width:30em}
.strook .bron{font-size:13px;color:var(--zacht);margin-top:8px}
.strook .klein{text-align:right}
.feit .g{font-weight:900;font-size:var(--cijfer);line-height:1;letter-spacing:-.03em}
.feit p{margin-top:8px;font-size:16px;color:var(--zacht);line-height:1.45}


.hoe{padding:128px 0}
.stappen{margin-top:48px;display:grid;grid-template-columns:repeat(3,390px);column-gap:30px}
.stap .n{font-family:Gabarito,sans-serif;font-weight:900;font-size:var(--cijfer);line-height:1;color:var(--rood);letter-spacing:-.03em}
.stap h3{margin-top:14px}
.ui{margin-top:20px; border-radius:6px; background:#fff; padding:16px; font-size:14px}
.ui .veldje{height:40px;border:1.5px solid var(--inkt);border-radius:6px;padding:0 12px;display:flex;align-items:center;color:var(--inkt)}
.ui .lijst{margin-top:8px;border-radius:6px;overflow:hidden;box-shadow:inset 0 0 0 1px var(--rand)}
.ui .lijst div{padding:9px 12px;border-bottom:1px solid var(--rand);color:var(--zacht)}
.ui .lijst div:last-child{border-bottom:0}
.ui .lijst div.hi{background:var(--papier2);color:var(--inkt);font-weight:700}
.registers{margin-top:10px;display:grid;row-gap:6px}
.registers div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--rand);color:var(--zacht);opacity:0;animation:binnen .5s ease forwards}
.registers div:nth-child(1){animation-delay:.3s}.registers div:nth-child(2){animation-delay:.9s}.registers div:nth-child(3){animation-delay:1.5s}.registers div:nth-child(4){animation-delay:2.1s}
.registers div:last-child{border-bottom:0}
.registers b{color:var(--inkt)}
@keyframes binnen{to{opacity:1}}
.brief{font-size:13px;line-height:1.5}
.brief .kop{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid var(--rand);margin-bottom:10px}
.brief .kop small{color:var(--zacht)}
.brief p{color:var(--zacht);max-width:none}
.brief p b{color:var(--inkt)}
.waswordt{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.waswordt div{padding:12px 0 0;border-top:2px solid var(--rand)}
.waswordt small{display:block;color:var(--zacht);font-size:12px}
.waswordt .g{font-weight:900;font-size:26px;line-height:1.1;margin-top:4px}
.waswordt .oud .g{text-decoration:line-through;text-decoration-thickness:2px;color:var(--zacht)}


.film{padding:64px 0}
.film .r{display:grid;grid-template-columns:384px 1fr;column-gap:62px;align-items:center}
.film p{margin-top:12px;color:var(--zacht)}
.speler{position:relative;aspect-ratio:16/9;border-radius:6px;overflow:hidden;background:var(--inkt);color:var(--papier);display:flex;align-items:flex-end;padding:28px 32px}
.speler .titel{font-family:Gabarito,sans-serif;font-weight:900;font-size:28px;letter-spacing:-.025em;line-height:1.05;max-width:12em}
.speler .titel i{color:var(--oranje);font-style:normal}
.speler .duur{position:absolute;right:20px;bottom:24px;font-size:13px;color:#B5ADA3}
.speler .play{--slop-allow: nested-cards;position:absolute;left:50%;top:50%;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--papier);display:flex;align-items:center;justify-content:center;border:0;cursor:pointer}
.speler .play:after{--slop-allow: edge-stripe;content:"";display:block;width:0;height:0;border-left:22px solid var(--inkt);border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}


.wet{padding:128px 0;background:var(--inkt);color:var(--papier)}
.wet .r{display:grid;grid-template-columns:584px 584px;column-gap:62px;align-items:start}
.wet p.tekst{margin-top:18px;color:#B5ADA3}
.wet .g.groot{font-weight:900;font-size:72px;line-height:1;letter-spacing:-.035em;margin-top:32px}
.wet .g.groot small{font-family:"Public Sans",sans-serif;font-weight:400;font-size:18px;letter-spacing:0;color:#B5ADA3}
.schuif{border-radius:6px;padding:28px;background:var(--inkt2);box-shadow:inset 0 0 0 1px #332E27}
.schuif label{display:flex;justify-content:space-between;font-size:14px;color:#9C948A;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.schuif output{font-family:Gabarito,sans-serif;font-weight:900;font-size:64px;line-height:1;letter-spacing:-.035em;color:var(--papier);display:block;margin:12px 0 6px}
.schuif output small{font-family:"Public Sans",sans-serif;font-weight:400;font-size:16px;letter-spacing:0;color:#9C948A}
.schuif input[type=range]{width:100%;margin:18px 0 10px;accent-color:var(--papier);height:44px}
.schuif .as{display:flex;justify-content:space-between;font-size:13px;color:#9C948A}
.schuif .as b{color:var(--papier)}
.schuif .status{margin-top:16px;font-size:15px;color:#B5ADA3;min-height:1.5em}
.schuif .status b{color:var(--papier)}


.uitkomsten{padding:128px 0}
.uitkomsten p.sub{margin-top:12px}
.zaken{margin-top:40px;display:grid;grid-template-columns:repeat(3,390px);column-gap:30px}
.zaak{border-radius:6px;background:#fff;padding:24px;box-shadow:inset 0 0 0 1px var(--rand)}
.zaak .waar{font-size:var(--klein);color:var(--zacht)}
.zaak .g{font-weight:900;font-size:var(--cijfer);line-height:1;margin:14px 0 14px;letter-spacing:-.03em}
.zaak .g small{font-family:"Public Sans",sans-serif;font-weight:400;font-size:16px;color:var(--zacht);letter-spacing:0}
.zaak .meter{--slop-allow: nested-cards;height:8px;background:var(--rood);border-radius:2px;position:relative;overflow:hidden;margin-bottom:12px}
.zaak .meter i{position:absolute;left:0;top:0;bottom:0;background:var(--inkt);border-radius:2px}
.zaak .meter b{display:none}
.zaak p{font-size:15px;color:var(--zacht);line-height:1.45}
.zaak.nul{background:transparent}
.legenda{margin-top:18px;font-size:13px;color:var(--zacht);display:flex;gap:18px;flex-wrap:wrap}
.legenda span:before{content:"";display:inline-block;width:14px;height:8px;border-radius:2px;background:var(--inkt);margin-right:6px;vertical-align:middle}
/* De legenda van de kaart heeft zijn eigen stippen. Zonder deze regel zet de balk hierboven,
   die van de homepage komt, er een zwart blokje voor dat niets betekent. */
.kaartdoos .legenda span:before{content:none}
.legenda span.m:before{background:var(--rood)}


.situaties{padding:96px 0; background:var(--papier2)}
.situaties p.sub{margin-top:12px}
.lijst2{margin-top:36px;display:grid;grid-template-columns:repeat(3,390px);column-gap:30px;row-gap:14px}
.sit{display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:14px; padding:18px 20px; border-radius:6px; background:#fff; box-shadow:inset 0 0 0 1px var(--rand); text-decoration:none; color:var(--inkt); font-weight:700; font-size:17px; transition:border-color .12s ease}
.sit:hover{border-color:var(--inkt)}
.sit span:last-child{font-family:Gabarito,sans-serif;font-weight:700;color:var(--zacht)}
.sit .ico{color:var(--inkt);width:48px;height:48px;stroke-width:1.4}


.bezwaar{padding:128px 0}
.bezwaar .r{display:grid;grid-template-columns:584px 584px;column-gap:62px;align-items:start}
.bezwaar p.tekst{margin-top:18px;color:var(--zacht)}
.bezwaar ul{margin-top:24px;list-style:none;display:flex;flex-direction:column;gap:12px}
.bezwaar li{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:baseline;font-size:17px}
.bezwaar li .g{font-weight:900;font-size:20px;color:var(--rood)}
.briefgroot{border-radius:6px; background:#fff; padding:32px 36px; font-size:15px; line-height:1.55; box-shadow:0 8px 24px rgba(20,18,16,.08)}
.briefgroot .kop{display:flex;justify-content:space-between;align-items:center;padding-bottom:16px;border-bottom:1px solid var(--rand);margin-bottom:18px}
.briefgroot .kop small{color:var(--zacht);font-size:13px}
.briefgroot p{color:var(--zacht);max-width:none;margin-top:12px}
.briefgroot p b{color:var(--inkt)}
.briefgroot .onderwerp{font-weight:700;color:var(--inkt)}


.vragen{padding:64px 0;border-top:1px solid var(--rand)}
.vragen .r{display:grid;grid-template-columns:384px 1fr;column-gap:62px;align-items:start}
.vragen details{border-bottom:1px solid var(--rand)}
.vragen summary{cursor:pointer;list-style:none;padding:18px 0;min-height:48px;align-items:center;font-weight:700;font-size:var(--body);display:flex;justify-content:space-between;gap:16px;text-wrap:balance}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary:after{content:"+";font-family:Gabarito,sans-serif;font-weight:700;color:var(--zacht)}
.vragen details[open] summary:after{content:"–"}
.vragen details p{padding:0 0 18px;font-size:16px;color:var(--zacht)}


.slot{padding:96px 0;background:var(--inkt);color:var(--papier)}
.slot .r{display:grid;grid-template-columns:584px 584px;column-gap:62px;align-items:center}
.slot p{margin-top:12px;color:#B5ADA3}
.slot .form{max-width:none}
.slot .knop{background:var(--papier);color:var(--inkt)}
.slot .veld{border-color:var(--papier);background:var(--inkt2);color:var(--papier)}
.slot .veld::placeholder{color:#9C948A}
.slot .klein{color:#9C948A}


footer{padding:80px 0 40px;background:var(--inkt);color:#9C948A;border-top:1px solid #332E27;font-size:15px}
footer .r{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;column-gap:40px;row-gap:28px;align-items:start}
footer .over p{color:#B5ADA3;max-width:34ch;margin-top:16px;font-size:15px}
footer h4{font-family:"Public Sans",sans-serif;font-weight:700;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--papier);margin-bottom:14px}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px}
footer a{color:#B5ADA3;text-decoration:none}
footer a:hover{color:var(--papier)}
footer .onder{grid-column:1/-1;border-top:1px solid #332E27;padding-top:22px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px;color:#9C948A}
footer .onder ul{flex-direction:row;gap:18px}
footer .onder a{color:#9C948A}


.plak{display:none}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* plattegrond */
.plattegrond{padding:128px 0;background:var(--papier2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.plattegrond .r{display:grid;grid-template-columns:584px 584px;column-gap:62px;align-items:start}
.plattegrond p.tekst{margin-top:18px;color:var(--zacht)}
.plan{width:100%;height:auto;display:block}
.plan .k{fill:#fff;stroke:var(--inkt);stroke-width:2;cursor:pointer;transition:fill .12s ease}
.plan .k:hover,.plan .k.aan{fill:#FBE9E5}
.plan .k.hal{fill:var(--papier);stroke-dasharray:6 5}
.plan text{font-family:"Public Sans",sans-serif;font-size:15px;fill:var(--inkt);pointer-events:none}
.plan text.p{font-family:Gabarito,sans-serif;font-weight:900;font-size:22px;fill:var(--rood)}
.uitleg{margin-top:20px;border-radius:6px;background:#fff;padding:20px 22px;min-height:120px;box-shadow:inset 0 0 0 1.5px var(--inkt)}
.uitleg b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:26px;letter-spacing:-.02em}
.uitleg span{color:var(--zacht);font-size:16px}
.somrij{margin-top:16px;display:flex;justify-content:space-between;font-size:15px;color:var(--zacht)}
.somrij b{color:var(--inkt)}
/* voor wie */
.voorwie{padding:96px 0}
.stemmen{margin-top:36px;display:grid;grid-template-columns:repeat(3,390px);column-gap:30px}
.stem{display:flex;flex-direction:column;gap:14px}
.stem .q{font-family:Gabarito,sans-serif;font-weight:700;font-size:26px;line-height:1.2;letter-spacing:-.02em;max-width:none}
.stem a{color:var(--rood);font-weight:700;text-decoration:none;font-size:16px}
.stem a:after{content:" →"}
/* uitspraken */
.uitspraken{padding:128px 0;background:var(--inkt);color:var(--papier)}
.uitspraken p.sub{color:#B5ADA3}
.zaken2{margin-top:40px;display:grid;grid-template-columns:repeat(3,390px);column-gap:30px}
.uitspraak{--slop-allow: redundant-border;border-radius:6px;padding:24px;background:var(--inkt2);box-shadow:inset 0 0 0 1px #332E27}
.uitspraak .waar{font-size:14px;color:#9C948A}
.uitspraak .g{font-weight:900;font-size:40px;line-height:1;margin:14px 0 10px;letter-spacing:-.03em}
.uitspraak .g small{font-family:"Public Sans",sans-serif;font-weight:400;font-size:15px;color:#9C948A;letter-spacing:0}
.uitspraak p{font-size:15px;color:#B5ADA3;line-height:1.45}
.uitspraak .bron{--slop-allow: oversized-number;margin-top:14px;font-size:13px;color:#9C948A}
.uitspraak .bron a{color:#B5ADA3}
.winst{margin-top:36px;display:grid;grid-template-columns:200px 1fr;column-gap:30px;align-items:center;border-top:1px solid #332E27;padding-top:30px}
.winst .g{font-weight:900;font-size:80px;line-height:1;letter-spacing:-.035em}
.winst p{color:#B5ADA3;max-width:44em}
.winst p small{display:block;font-size:13px;color:#9C948A;margin-top:6px}
/* losse pagina's */
.pagina{padding:96px 0 128px}
.pagina .r{display:grid;grid-template-columns:584px 584px;column-gap:62px;align-items:start}
.pagina h1{font-size:var(--h1)}
.pagina .lead{margin-top:20px;font-size:20px;color:var(--zacht)}
/* Alleen de onderkant. In de korte vorm zette deze regel ook padding-left en -right op
   nul, en juist die komen van .r; op elk scherm boven 900px stond de hele inhoud van
   zeven pagina's daardoor tegen de linkerrand. */
.blok{padding-bottom:96px}
.blok h2{margin-bottom:18px}
.blok p{color:var(--zacht);margin-bottom:14px}
.blok p b{color:var(--inkt)}
/* vet op donker */
/* .blok p b zet vet op inkt, wat klopt op de lichte pagina's. Staat het blok in een
   donkere sectie, dan werd dezelfde tekst zwart op zwart en verdween hij volledig.
   Op de huurcommissiepagina waren daardoor de cijfers 43.501, 4.163 en 25 euro
   onzichtbaar, terwijl juist die de tekst moesten dragen. */
.wet .blok p b, .blok .wet p b, .wet p b, .donker p b{color:var(--papier)}
.kaartjes{display:grid;grid-template-columns:repeat(3,390px);column-gap:30px;row-gap:30px}
.kaartje{border-radius:6px;background:#fff;padding:24px;box-shadow:inset 0 0 0 1px var(--rand)}
.kaartje h3{margin-bottom:8px}
.kaartje p{font-size:16px;color:var(--zacht)}
.gegevens{display:grid;grid-template-columns:200px 1fr;row-gap:12px;font-size:17px}
.gegevens dt{color:var(--zacht)}

/* containerqueries als laatste, zodat ze de basisregels overschrijven */
/* het dossiervoorbeeld in de sectie 'Jij hoeft niets te doen' */
.dosvoor{background:var(--papier2);border:1px solid var(--rand);border-radius:6px;padding:22px 22px 8px}
.dosvoor .dkop{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--rand);padding-bottom:14px;margin-bottom:6px}
.dosvoor .dkop small{font-size:13px;color:var(--zacht)}
.dosvoor .rail{list-style:none;margin:0;padding:0}
.dosvoor .rail li{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;padding:11px 0;border-top:1px solid var(--rand)}
.dosvoor .rail li:first-child{border-top:0}
.dosvoor .rail .bol{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--rand);display:inline-flex;align-items:center;justify-content:center;font-family:Gabarito,sans-serif;font-weight:800;font-size:12.5px;color:var(--zacht);background:#fff}
.dosvoor .rail li.klaar .bol{background:#2E7D4F;border-color:#2E7D4F;color:#fff}
.dosvoor .rail li.nu .bol{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.dosvoor .rail li.nu b{color:var(--inkt)}
.dosvoor .rail li.wij .bol{border-style:dashed;background:transparent}
.dosvoor .rail b{display:block;font-family:Gabarito,sans-serif;font-weight:700;font-size:15.5px;color:var(--zacht)}
.dosvoor .rail li.klaar b,.dosvoor .rail li.nu b{color:var(--inkt)}
.dosvoor .rail span{font-size:13.5px;color:var(--zacht)}
.dosvoor .rail .tussen{font-family:Gabarito,sans-serif;font-weight:800;font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--zacht);padding:14px 0 2px;grid-column:1/-1}

/* adressuggesties onder het veld op de site, zelfde gedrag als in de rekenmachine */
.sughuls{position:relative;display:block}
.sug{list-style:none;margin:6px 0 0;padding:0;border:1.5px solid var(--inkt);border-radius:6px;
 background:#fff;display:none;position:absolute;left:0;right:0;top:100%;z-index:30;overflow:hidden;
 box-shadow:0 18px 40px rgba(20,18,16,.14);overflow-y:auto;text-align:left;
 /* Met het toetsenbord open is er op een kleine telefoon 333 px zichtbaar. Een vaste
    300 loopt daar onderuit en de laatste suggesties zijn niet te bereiken. */
 max-height:min(300px, 40vh)}
/* Elke suggestie is een knop en ziet er dus ook zo uit: tekst links, donkere pijl rechts,
   precies zoals op de rekenpagina. Zonder pijl moest iemand klikken op iets dat er niet
   klikbaar uitzag. Raakvlak is de hele regel, 56 px hoog. */
.sug li{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 12px 12px 15px;
 cursor:pointer;font-size:16px;line-height:1.4;border-bottom:1px solid var(--rand)}
.sug li:after{content:"";margin-left:auto;flex:0 0 32px;width:32px;height:32px;border-radius:50%;
 background:#141210 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EFEBE3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center/15px 15px no-repeat}
.sug li:last-child{border-bottom:0}
.sug li:hover,.sug li.hi{background:var(--papier2)}

/* ---------- structureel: nooit tekst tegen een knop aan ----------
   Geldt voor alles wat na of voor een knop komt. Knoppen naast elkaar blijven ongemoeid.
   Met :is() en niet :where(), want :where() heeft specificiteit nul en verliest dan van
   een gewone regel als .kaart p. Dat was precies de fout die de ruimte wegat. */
:is(button, .knop, .cta, .tweede, .wis, summary) + :is(p, small, .klein, .ctavoet, .uitleg, .let, .aanname),
:is(p, small, .klein, .ctavoet, .uitleg, .let, ul, ol, dl, details, .onder, .tekenvak, .prijs,
 .bladen, .vakje, .voorwaarden, .cijfers, .res) + :is(button, .knop, .cta, .tweede){margin-top:32px}

@container site (max-width:1280px){
  .plattegrond .r,.pagina .r{grid-template-columns:1fr 1fr;column-gap:40px}
  .stemmen,.zaken2,.kaartjes{grid-template-columns:repeat(3,1fr)}
  .held .r,.bezwaar .r,.wet .r,.slot .r{grid-template-columns:1fr 1fr;column-gap:40px}
  .stappen,.zaken,.lijst2{grid-template-columns:repeat(3,1fr)}
  .strook .r.bewijs{grid-template-columns:auto 1fr;row-gap:16px}
  .strook .klein{grid-column:1/-1;text-align:left}
  .vragen .r,.film .r{grid-template-columns:1fr 1.4fr;column-gap:40px}
  .opbouw{right:0}
}
@container site (max-width:900px){
  .plattegrond .r,.pagina .r{grid-template-columns:1fr;row-gap:28px}
  .stemmen,.zaken2,.kaartjes{grid-template-columns:1fr;row-gap:24px}
  .plattegrond,.uitspraken{padding:64px 0}
  .voorwie{padding:56px 0}
  .winst{grid-template-columns:1fr;row-gap:10px}
  .winst .g{font-size:56px}
  .gegevens{grid-template-columns:1fr}
  .pagina{padding:48px 0 64px}
  .r{padding-left:20px;padding-right:20px}
  nav{height:64px}
  /* Geen uitklapmenu: de vijf links zakken naar een eigen rij onder de balk die je
     zijwaarts kunt vegen. Zonder dit was de voettekst, dertien schermen lager, de enige
     navigatie die een telefoon had. */
  /* Een balk van een regel: menu links, merk ernaast, knop rechts. De links zaten
     eerst op twee regels en aten daarmee het bovenste deel van het scherm op, en dat is
     precies de ruimte waar de belofte en de knop horen te staan. */
  /* Een dunne lijn maakt er een balk van in plaats van drie dingen die boven de tekst
     zweven. De knop is hier weg: hij stond vier keer op hetzelfde scherm en werd daar van
     geen van vieren belangrijker. */
  nav{flex-wrap:nowrap;height:60px;padding-top:0;padding-bottom:0;row-gap:0;
    align-items:center;gap:10px;position:relative;
    box-shadow:0 1px 0 var(--rand)}
  nav ul{top:60px}
  nav .merk{margin-right:auto}
  /* Het menu op de rechterrand, waar iedereen het zoekt, en het merk linksboven omdat dat
     tegelijk de weg terug naar de startpagina is. De knop ertussen blijft daarmee in het
     bereik van de duim staan. */
  nav .mnu{display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 0 0 4px;
    background:none;border:0;cursor:pointer;color:var(--inkt);font:700 14px/1 inherit;
    font-family:inherit}
  nav .mnu svg{width:20px;height:14px;stroke:currentColor;stroke-width:2;
    stroke-linecap:round;fill:none}
  nav .mnu span{letter-spacing:-.01em}
  /* De knop staat achter de lijst en kreeg daardoor de 32 pixels lucht die elke knop na een
     lijst krijgt: hij hing zestien pixels onder het midden van het logo. Het attribuut in de
     selector is er alleen om van de knopruimte-regel (twee klassen) te winnen. */
  nav .mnu[aria-controls]{margin-top:0;align-self:center}
  nav .mnu[aria-expanded="true"] span{visibility:hidden}
  nav .mnu[aria-expanded="true"]::after{content:"Sluit";font:700 14px/1 inherit;
    margin-left:-38px;width:38px;text-align:right}
  /* De knop staat in de opmaak achter de lijst met links. Daardoor pakte hij de regel die
     elke knop na een lijst tweeendertig pixels lucht geeft, en hing hij zestien pixels
     onder het logo. In een balk is de knop geen vervolg op tekst maar de buur van het merk,
     dus daar hoort die lucht niet. Alleen hier uit, overal elders blijft de regel staan. */
  /* Twee klassen, met opzet. De knopruimte-regel selecteert met :is(...) en telt daardoor
     als twee klassen; een gewone 'nav .mob' telt er maar een en verliest dus, ook al staat
     hij later in het bestand. Dit is het kortste wat wel wint. */
  nav .knop.mob{display:inline-flex;height:48px;padding:0 16px;font-size:14px;margin:0;
    align-self:center}
  nav .merk{align-self:center}
  /* Vijf links zijn samen breder dan een telefoonscherm. Ze stonden in een strook die je
     zijwaarts kon vegen, waardoor het vijfde woord midden in een letter werd afgekapt en het
     zesde onzichtbaar was. Dat leest als een fout en niemand raadt dat gebaar. Nu vallen ze
     door naar een tweede regel: alles zichtbaar, niets om te ontdekken. */
  /* Het paneel valt onder de balk uit over de volle breedte. Elke regel is een
     raakvlak van 46 pixels hoog, ruim boven de 44 die een duim nodig heeft. Staat
     javascript uit, dan blijft het menu gewoon openstaan; onbereikbaar is geen optie. */
  nav ul{position:absolute;left:-20px;right:-20px;top:64px;z-index:30;display:block;
    background:var(--papier);border-top:1px solid var(--rand);
    border-bottom:1px solid var(--rand);
    box-shadow:0 14px 28px rgba(20,18,16,.12);margin:0;padding:6px 20px 10px;font-size:16px}
  nav ul[hidden]{display:none}
  nav ul li{border-top:1px solid var(--rand)}
  nav ul li:first-child{border-top:0}
  nav ul a{display:block;padding:14px 0;white-space:nowrap;color:var(--inkt);font-weight:700}
  .held{padding:40px 0 56px}
  .held .r,.bezwaar .r,.wet .r,.vragen .r,.slot .r,.film .r{grid-template-columns:1fr;row-gap:28px}
  .held p.sub{font-size:17px}
  .stapel{padding-bottom:0}
  .opbouw{position:static;margin-top:12px}
  .strook{padding:40px 0}
  .stappen,.zaken,.lijst2{grid-template-columns:1fr;row-gap:24px}
  .strook .r.bewijs{grid-template-columns:1fr;row-gap:12px}
  .strook .groot{font-size:72px}
  .hoe,.uitkomsten,.bezwaar,.wet{padding:64px 0}
  .situaties,.film{padding:56px 0}
  .wet .g.groot{font-size:56px}
  .schuif output{font-size:48px}
  .vragen{padding:48px 0}
  .slot{padding:64px 0 96px}
  .kaart .uit{font-size:26px}
  .briefgroot{padding:22px}
  .bezwaar li{grid-template-columns:90px 1fr}
  /* 1fr houdt min-content als ondergrens vast, en de linkenrij onderin is 321 px breed.
     Daardoor werd de hele pagina 341 px op een scherm van 320. Zie de opmerking verderop
     bij de andere rasters die deze fout hadden. */
  footer .r{grid-template-columns:minmax(0,1fr);row-gap:24px}
  footer .onder ul{flex-wrap:wrap}
  footer{padding:56px 0 100px}
  .plak{display:flex;position:sticky;bottom:0;z-index:5;padding:12px 20px;background:var(--papier);box-shadow:0 -1px 0 var(--rand);justify-content:center;align-items:center;gap:16px}
  .plak .knop{flex:1;height:48px}
  .plak .klein{color:var(--zacht);white-space:nowrap}
}

@container site (max-width:900px){
  .cheld{padding:44px 0 48px}
  .cheld .r{grid-template-columns:1fr;row-gap:34px}
  .cheld h1{font-size:38px}
  .cheld p.sub{font-size:17px}
  .mailgroot{font-size:24px}
  .wiewat .r{grid-template-columns:1fr}
  .gegevens{grid-template-columns:1fr;row-gap:4px}
  .gegevens dt{margin-top:12px}
}

/* ================= pagina: hoe het werkt ================= */

/* held */
.hheld{padding:80px 0 72px}
.hheld .r{display:grid;grid-template-columns:1fr 520px;column-gap:72px;align-items:start}
.hheld h1{font-size:52px}
.hheld p.sub{margin-top:20px;font-size:20px;line-height:1.45;max-width:25em;color:var(--zacht)}
.hheld .form{margin-top:34px}

.balans{background:var(--papier2);border-radius:6px;padding:24px 24px 20px}
.balans .bkop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
 border-bottom:1px solid var(--rand);padding-bottom:14px}
.balans .bkop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px}
.balans .bkop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--zacht);font-weight:700;white-space:nowrap}
.balans ol{list-style:none;margin:0;padding:0}
.balans li{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:baseline;
 padding:13px 0;border-bottom:1px solid var(--rand)}
.balans li span{font-size:16px}
.balans li i{font-style:normal;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;
 font-weight:700;color:var(--zacht);white-space:nowrap}
.balans .som{display:grid;grid-template-columns:1fr auto;gap:14px;padding:15px 0 4px;font-size:15px;color:var(--zacht)}
.balans .som b{font-family:Gabarito,sans-serif;font-weight:800;color:var(--inkt);font-size:16px}
.balans .naar{margin:18px -24px -20px;background:var(--inkt);color:var(--papier);border-radius:0 0 6px 6px;
 padding:16px 24px;display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center}
.balans .naar b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:16px}
.balans .naar span{display:block;margin-top:3px;font-size:14px;color:#B5ADA3}
.balans .naar .ico{color:var(--oranje)}

/* de reis */
.reis{padding:104px 0;border-top:1px solid var(--rand)}
.reis .kopblok p{margin-top:14px;color:var(--zacht);font-size:18px}
.reisrail{margin-top:44px;border-top:1px solid var(--rand)}
.reisrij{display:grid;grid-template-columns:56px 1fr 400px;column-gap:40px;
 padding:38px 0;border-bottom:1px solid var(--rand);align-items:start}
.rnum{font-family:Gabarito,sans-serif;font-weight:900;font-size:40px;line-height:.9;
 color:var(--rood);letter-spacing:-.03em}
.rtekst h3{font-size:26px}
.rtekst p{margin-top:10px;color:var(--zacht);font-size:16.5px;max-width:30em}
.rdoe{display:inline-block;margin-top:16px;font-family:Gabarito,sans-serif;font-weight:800;
 font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--zacht);
 border:1px solid var(--rand);border-radius:6px;padding:7px 11px 6px;--slop-allow:redundant-border}

/* de nagebouwde schermpjes */
.mscherm{background:#fff;border-radius:6px;padding:18px;box-shadow:0 8px 24px rgba(20,18,16,.08);font-size:14px}
.mkop{display:flex;justify-content:space-between;align-items:center;
 border-bottom:1px solid var(--rand);padding-bottom:12px;margin-bottom:14px}
.mkop small{font-size:12px;color:var(--zacht)}
.mvraag{font-family:Gabarito,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.02em;line-height:1.25}
.mlabel{display:block;font-size:12.5px;color:var(--zacht);margin-bottom:6px}
.mveld{--slop-allow: nested-cards redundant-border;height:44px;border:1.5px solid var(--inkt);border-radius:6px;padding:0 12px;
 display:flex;align-items:center;gap:8px;background:#fff;font-size:15px}
.mveld.leeg{color:var(--zacht);border-color:var(--rand)}
.mveld + .mlabel{margin-top:16px}
.mveld + .mtab{margin-top:16px}
.mlijst{--slop-allow: nested-cards;margin-top:8px;border-radius:6px;box-shadow:inset 0 0 0 1px var(--rand);overflow:hidden}
.mlijst div{padding:10px 12px;border-bottom:1px solid var(--rand);color:var(--zacht);font-size:14px}
.mlijst div:last-child{border-bottom:0}
.mlijst div.hi{background:var(--papier2);color:var(--inkt);font-weight:700}
.mkeuze{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.mkeuze b{--slop-allow: nested-cards;font-weight:700;font-size:15px;border:1.5px solid var(--rand);border-radius:6px;
 min-height:48px;min-width:48px;padding:0 16px;display:inline-flex;align-items:center;justify-content:center;color:var(--zacht)}
.mkeuze b.aan{border-color:var(--inkt);background:var(--inkt);color:var(--papier)}
.mknop{--slop-allow: nested-cards;display:flex;align-items:center;justify-content:center;height:48px;border-radius:6px;
 background:var(--inkt);color:var(--papier);font-family:Gabarito,sans-serif;font-weight:800;font-size:15px}
.mknop.uit{background:var(--rand);color:var(--zacht)}
.muit{font-family:Gabarito,sans-serif;font-weight:900;font-size:22px;line-height:1.15;letter-spacing:-.025em;margin-bottom:14px}
.mtab{display:grid;grid-template-columns:1fr auto;row-gap:9px;column-gap:16px;font-size:14.5px}
.mtab span{color:var(--zacht)}
.mtab b{text-align:right;font-weight:700}
.tekenvak{--slop-allow: nested-cards;margin-top:14px;border:1.5px dashed var(--rand);border-radius:6px;
 padding:14px;display:flex;flex-direction:column;justify-content:center}
.tekenvak svg{width:100%;height:64px}
.tekenvak path{fill:none;stroke:var(--inkt);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.tekenvak i{font-style:normal;font-size:12px;color:var(--zacht);margin-top:8px}
.bestand{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;
 padding:11px 0;border-bottom:1px solid var(--rand);font-size:14px}
.bestand:last-of-type{border-bottom:0}
.bestand .vink{width:22px;height:22px;border-radius:50%;background:#2E7D4F;color:#fff;
 display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.bestand small{color:var(--zacht);font-size:12.5px}

/* vanaf hier doen wij het */
.overdracht{padding:88px 0;background:var(--inkt);color:var(--papier)}
.overdracht h2{max-width:16em}
.overdracht p.sub{margin-top:14px;color:#B5ADA3;font-size:18px}
.odrie{margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);column-gap:30px}
.od{border-top:2px solid #332E27;padding-top:20px}
.od .n{font-family:Gabarito,sans-serif;font-weight:900;font-size:32px;line-height:1;color:var(--oranje)}
.od h3{margin-top:12px;font-size:21px}
.od p{margin-top:10px;color:#B5ADA3;font-size:16px;max-width:none}

/* de acht vragen */
.acht{padding:104px 0}
.acht .kopblok p{margin-top:14px;color:var(--zacht);font-size:18px}
.vlijst{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:60px}
.vrij{display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:baseline;
 padding:20px 0;border-top:1px solid var(--rand)}
.vrij .vn{font-family:Gabarito,sans-serif;font-weight:900;font-size:17px;color:var(--rood)}
.vrij b{display:block;font-family:Gabarito,sans-serif;font-weight:700;font-size:18px;letter-spacing:-.015em}
.vrij span{display:block;margin-top:5px;font-size:15px;color:var(--zacht);line-height:1.45}
.vrij i{font-style:normal;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
 font-weight:700;color:var(--zacht);white-space:nowrap}
.vslot{margin-top:34px;padding-top:26px;border-top:2px solid var(--inkt);font-size:19px;
 font-family:Gabarito,sans-serif;font-weight:700;letter-spacing:-.015em;max-width:36em}

/* de registers */
.regsectie{padding:104px 0;background:var(--papier2);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.regsectie .r{display:grid;grid-template-columns:1fr 480px;column-gap:72px;align-items:start}
.regsectie p.tekst{margin-top:18px;color:var(--zacht);font-size:18px}
.reglijst{margin-top:32px;display:flex;flex-direction:column}
.reg{display:grid;grid-template-columns:32px 1fr;column-gap:18px;padding:20px 0;border-top:1px solid var(--rand)}
.reg .ico{width:32px;height:32px;color:var(--inkt)}
.reg b{display:block;font-family:Gabarito,sans-serif;font-weight:700;font-size:18px}
.reg span{display:block;margin-top:5px;font-size:15.5px;color:var(--zacht)}
.uitlezing{background:#fff;border-radius:6px;padding:24px;box-shadow:0 8px 24px rgba(20,18,16,.08)}
.uitlezing .waar{font-size:13.5px;color:var(--zacht);border-bottom:1px solid var(--rand);padding-bottom:14px}
.uitlezing .regels{margin-top:4px}
.uitlezing .regels div{display:flex;justify-content:space-between;gap:14px;padding:13px 0;
 border-bottom:1px solid var(--rand);color:var(--zacht);font-size:15.5px;opacity:0;animation:binnen .5s ease forwards}
.uitlezing .regels div:nth-child(1){animation-delay:.2s}
.uitlezing .regels div:nth-child(2){animation-delay:.8s}
.uitlezing .regels div:nth-child(3){animation-delay:1.4s}
.uitlezing .regels div:nth-child(4){animation-delay:2s}
.uitlezing .regels div:last-child{border-bottom:0}
.uitlezing .regels b{color:var(--inkt)}
.uitlezing .som2{margin-top:16px;padding-top:16px;border-top:2px solid var(--inkt);
 display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.uitlezing .som2 span{color:var(--zacht);font-size:15px}
.uitlezing .som2 b{font-family:Gabarito,sans-serif;font-weight:900;font-size:28px;letter-spacing:-.025em}

/* de brief */
.briefsec{padding:104px 0}
.briefsec .r{display:grid;grid-template-columns:1fr 600px;column-gap:72px;align-items:start}
.briefsec p.tekst{margin-top:18px;color:var(--zacht);font-size:18px}
.aantek{margin-top:32px;display:flex;flex-direction:column}
.aantek div{padding:18px 0;border-top:1px solid var(--rand)}
.aantek b{display:block;font-family:Gabarito,sans-serif;font-weight:700;font-size:17px}
.aantek span{display:block;margin-top:4px;font-size:15.5px;color:var(--zacht)}
.blad{background:#fff;border-radius:6px;padding:34px 38px 32px;font-size:15px;line-height:1.6;
 box-shadow:0 8px 24px rgba(20,18,16,.08)}
.blad .bhoofd{display:flex;justify-content:space-between;align-items:center;
 border-bottom:1px solid var(--rand);padding-bottom:16px;margin-bottom:20px}
.blad .bhoofd small{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--zacht);font-weight:700}
.blad .betreft{font-weight:700}
.blad p{color:var(--zacht);max-width:none;margin-top:14px}
.blad p b{color:var(--inkt)}
.blad .bijlage{margin-top:22px;padding-top:16px;border-top:1px solid var(--rand);
 display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--zacht)}
.blad .bijlage .ico{width:20px;height:20px;flex:0 0 20px}

/* het dossier */
.doss{padding:104px 0;border-top:1px solid var(--rand)}
.doss .r{display:grid;grid-template-columns:1fr 480px;column-gap:72px;align-items:start}
.doss p.tekst{margin-top:18px;color:var(--zacht);font-size:18px}
.rail2{margin-top:32px;list-style:none;padding:0}
.rail2 li{display:grid;grid-template-columns:26px 1fr;gap:14px;align-items:start;
 padding:14px 0;border-top:1px solid var(--rand)}
.rail2 .bol{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--rand);
 display:inline-flex;align-items:center;justify-content:center;font-family:Gabarito,sans-serif;
 font-weight:800;font-size:12.5px;color:var(--zacht);background:#fff}
.rail2 li.klaar .bol{background:#2E7D4F;border-color:#2E7D4F;color:#fff}
.rail2 li.nu .bol{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.rail2 li.wij .bol{border-style:dashed;background:transparent}
.rail2 b{display:block;font-family:Gabarito,sans-serif;font-weight:700;font-size:17px;color:var(--zacht)}
.rail2 li.klaar b,.rail2 li.nu b{color:var(--inkt)}
.rail2 span{display:block;margin-top:3px;font-size:14.5px;color:var(--zacht)}
.mailkaart{background:var(--papier2);border-radius:6px;padding:22px}
.mailkaart .mhoofd{display:flex;justify-content:space-between;align-items:center;
 border-bottom:1px solid var(--rand);padding-bottom:14px;margin-bottom:16px}
.mailkaart .mhoofd small{font-size:12.5px;color:var(--zacht)}
.mailkaart .van{font-size:13.5px;color:var(--zacht)}
.mailkaart .onderwerp{font-family:Gabarito,sans-serif;font-weight:700;font-size:19px;margin:6px 0 10px}
.mailkaart .body{font-size:15px;color:var(--zacht);line-height:1.55}
.mailkaart .knopje{--slop-allow: nested-cards;margin-top:20px;display:flex;align-items:center;justify-content:center;height:48px;
 border-radius:6px;background:var(--inkt);color:var(--papier);font-family:Gabarito,sans-serif;font-weight:800;font-size:15px}
.mailkaart .voet{margin-top:16px;font-size:13px;color:var(--zacht)}

/* ---------- structureel: nooit tekst tegen een knop aan ----------
   Zelfde regel als in site.css, uitgebreid met de knoppen in de nagebouwde schermpjes. */
:is(button, .knop, .cta, .tweede, .wis, summary, .mknop, .knopje, .rij) + :is(p, small, .klein, .ctavoet, .uitleg, .let, .aanname, .voet),
:is(p, small, .klein, .ctavoet, .uitleg, .let, ul, ol, dl, details, .onder, .tekenvak, .prijs,
 .bladen, .vakje, .voorwaarden, .cijfers, .res, .mtab, .mkeuze, .mveld, .mlijst, .body, .bestand)
 + :is(button, .knop, .cta, .tweede, .mknop, .knopje){margin-top:32px}

@container site (max-width:1280px){
  .hheld .r{grid-template-columns:1fr 1fr;column-gap:40px}
  .reisrij{grid-template-columns:48px 1fr 340px;column-gap:28px}
  .regsectie .r,.briefsec .r,.doss .r{grid-template-columns:1fr 1fr;column-gap:40px}
  .vlijst{column-gap:40px}
}
@container site (max-width:900px){
  .hheld{padding:36px 0 44px}
  .hheld .r{grid-template-columns:1fr;row-gap:32px}
  .hheld h1{font-size:36px}
  .hheld p.sub{font-size:17px}
  .reis,.acht,.regsectie,.briefsec,.doss{padding:56px 0}
  .overdracht{padding:56px 0}
  .reisrij{grid-template-columns:40px 1fr;row-gap:22px;padding:28px 0}
  .reisrij .mscherm{grid-column:1/-1}
  .rnum{font-size:32px}
  .rtekst h3{font-size:21px}
  .odrie{grid-template-columns:1fr;row-gap:26px}
  .vlijst{grid-template-columns:1fr;column-gap:0}
  .vslot{font-size:17px}
  .regsectie .r,.briefsec .r,.doss .r{grid-template-columns:1fr;row-gap:32px}
  .blad{padding:22px 20px}
  .blad .bhoofd{flex-wrap:wrap;gap:8px}
  .balans li span{font-size:15px}
  .balans .bkop b{font-size:16px}
  .vrij{grid-template-columns:26px 1fr;gap:12px}
  .vrij i{grid-column:2;margin-top:10px}
  .uitlezing{padding:20px}
}

/* De maten voor een smal scherm. Dit hoort NIET in een @container site-blok: `.site` is zelf
   de container, en een containerquery mag zijn eigen container niet opmaken. Stond het hier
   wel, dan bleef elke kop op de telefoon 56 px, en dat was maandenlang het geval. */
@media (max-width:900px){
  .site{--h1:36px;--h2:28px;--h3:20px;--body:17px;--cijfer:40px}
  /* Een lang woord als "Bedrijfsgegevens" moet mogen breken, anders duwt het de pagina
     breder dan het scherm en scrollt alles zijwaarts mee. */
  .pagina h1,.held h1,h1,h2{overflow-wrap:anywhere}
  /* Een 1fr-kolom houdt stilzwijgend min-content als ondergrens vast. minmax(0,1fr) laat hem
     wel krimpen, en dat is wat een telefoon nodig heeft. */
  .plattegrond .r,.pagina .r,.winst,.gegevens,.stemmen,.zaken2,.kaartjes{
    grid-template-columns:minmax(0,1fr)}
  /* De voettekst is op de telefoon de enige navigatie die er is, dus moet je hem kunnen
     raken. 44 px is het minimum waar een duim betrouwbaar op landt. */
  footer ul{gap:0}
  footer ul a{display:block;padding:12px 0}
  footer .onder{color:#9C948A}
  footer .onder ul{gap:14px}
  footer .onder ul a{padding:12px 0}
}

/* Springt iemand naar een kopje, dan hoort dat kopje niet tegen de bovenrand te plakken. */
[id]{scroll-margin-top:24px}

/* ===== hieronder door bouw.py, niet met de hand aanpassen ===== */
/* ---------- contactpagina ---------- */
.cheld{padding:80px 0 72px}
.cheld .r{display:grid;grid-template-columns:1fr 520px;column-gap:72px;align-items:start}
.cheld h1{font-size:52px}
.cheld p.sub{margin-top:20px;font-size:20px;line-height:1.45;max-width:24em;color:var(--zacht)}
.postbus{margin-top:34px;padding-top:26px;border-top:2px solid var(--inkt)}
.mailgroot{display:inline-block;font-family:Gabarito,sans-serif;font-weight:800;font-size:31px;
 letter-spacing:.005em;color:var(--inkt);text-decoration:none;line-height:1.2;word-break:break-word}
.mailgroot:hover{color:var(--rood)}

.inbox{background:var(--papier2);border-radius:6px;padding:22px 22px 18px}
.inbox .ikop{display:flex;justify-content:space-between;align-items:center;
 border-bottom:1px solid var(--rand);padding-bottom:14px;margin-bottom:4px}
.inbox .ikop small{font-size:13px;color:var(--zacht)}
.ibericht{padding:16px 0;border-bottom:1px solid var(--rand)}
.ibericht.nieuw .ivan{color:var(--inkt);font-weight:700}
.stip{width:8px;height:8px;border-radius:50%;background:var(--rood);display:inline-block;margin-right:8px;vertical-align:middle}
.ivan{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;color:var(--zacht)}
.itijd{white-space:nowrap}
.iover{font-family:Gabarito,sans-serif;font-weight:700;font-size:17px;margin:5px 0 3px}
.ivoor{font-size:14.5px;color:var(--zacht);line-height:1.45}
.ivoet{font-size:13px;color:var(--zacht);margin-top:16px;line-height:1.5;max-width:none}

.wiewat{padding:72px 0;border-top:1px solid var(--rand)}
.wiewat .r{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rand);
 border-radius:6px;overflow:hidden}
.wblok{background:var(--papier);padding:30px 28px 32px}
.wlabel{display:inline-block;font-family:Gabarito,sans-serif;font-weight:800;font-size:12px;
 letter-spacing:.08em;text-transform:uppercase;color:var(--zacht);margin-bottom:12px}
.wblok h3{font-size:22px;margin-bottom:10px}
.wblok p{font-size:15.5px;color:var(--zacht);line-height:1.5;max-width:none}
.wlink{display:inline-block;margin-top:16px;font-size:15px;font-weight:700;color:var(--inkt);
 text-decoration:none;word-break:break-word}
.wlink:after{content:" →";color:var(--rood)}
.wlink:hover{color:var(--rood)}

.cvoet{padding:0 0 80px}
.gegevens{display:grid;grid-template-columns:200px 1fr;row-gap:14px;column-gap:28px;
 border-top:1px solid var(--rand);padding-top:28px}
.gegevens dt{color:var(--zacht);font-size:15.5px}
.gegevens dd{font-size:15.5px;max-width:40em}
.gegevens dd a{color:var(--inkt);font-weight:700}

@container site (max-width:900px){
  .cheld{padding:44px 0 48px}
  .cheld .r{grid-template-columns:1fr;row-gap:34px}
  .cheld h1{font-size:38px}
  .cheld p.sub{font-size:17px}
  .mailgroot{font-size:24px}
  .wiewat .r{grid-template-columns:1fr}
  .gegevens{grid-template-columns:1fr;row-gap:4px}
  .gegevens dt{margin-top:12px}
}

/* ==========================================================================
   De drie pagina's van 7 september: uitkomsten als kaart, vragen per moment,
   en de rekenschuif op no cure no pay.
   ========================================================================== */

/* ---- uitkomsten: de kaart ---- */
.kaartblok{margin:0 0 56px}
.kaartlead{color:var(--zacht);max-width:62ch;margin:0 0 22px}
.kaartdoos{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;padding:14px}
.kaartkop{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;
  margin:0 0 10px;padding:0 4px;flex-wrap:wrap}
.kaartkop b{font-family:Gabarito,sans-serif;font-weight:900;font-size:17px}
.kaartkop span{color:var(--zacht);font-size:12px}
.nl{width:100%;height:auto;display:block;cursor:crosshair;touch-action:manipulation}
/* Was #E4DFD3 op een papier van #EFEBE3: 1,06 op 1, dus het land was niet te zien.
   Donkerder mag hier ruim, want het is een vlak en geen tekst. */
.nl .gem{fill:#DFD7C6;stroke:#C7BEAB;stroke-width:.8;stroke-linejoin:round}
.nl .pro{fill:none;stroke:#CFC7B6;stroke-width:1.4;stroke-linejoin:round}
.nl .st{fill:#B5281E;fill-opacity:.5}
.nl .st.laag{fill:#6E675E;fill-opacity:.28}
.nl .ring{fill:none;stroke:#141210;stroke-width:3}
/* De maat staat in gebruikerseenheden van de svg, en die is 1000 breed. Op een groot
   scherm is de kaart 560 pixels, dus factor 0,56: 20 eenheden worden 11 pixels. Op een
   telefoon is de factor 0,25 en staat er verderop 40. */
.nl .lab{font:600 20px "Public Sans",sans-serif;fill:#3B352E;paint-order:stroke;
  stroke:#EFEBE3;stroke-width:5px;stroke-linejoin:round}
.kaartuitleg{color:var(--zacht);font-size:12.5px;margin:8px 4px 0;text-align:center}
.legenda{display:flex;gap:16px;align-items:center;color:var(--zacht);font-size:12px;
  margin:10px 4px 0;flex-wrap:wrap}
.legenda i{border-radius:50%;background:var(--rood);opacity:.55;display:inline-block;
  margin-right:5px;vertical-align:-1px;width:9px;height:9px}
.legenda i.grijs{background:var(--zacht);opacity:.35}
.kaartdoos{position:relative}
/* Het kaartje dat de muis volgt. Alleen op een aanwijsapparaat: op een telefoon bestaat
   zweven niet en zou dit blijven plakken na een tik. */
.zweef{position:absolute;z-index:5;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--inkt);color:var(--papier);border-radius:10px;padding:10px 12px;
  box-shadow:0 10px 26px rgba(20,18,16,.35);min-width:168px}
.zweef.aan{opacity:1}
.zweef b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:19px;
  line-height:1}
.zweef .pl{font-size:11.5px;opacity:.6;margin:3px 0 8px}
.zweef dl{display:grid;grid-template-columns:1fr auto;gap:4px 10px;margin:0;font-size:12.5px}
.zweef dt{opacity:.72;white-space:nowrap}
.zweef dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.zweef dd.rood{color:#F08C82}
@media (hover:none){.zweef{display:none}}
.gebied{background:var(--inkt);color:var(--papier);border-radius:14px;padding:18px 18px 20px;
  margin-top:14px}
.gebiedleeg{opacity:.6;font-size:14px}
.gebied .gpc{font-family:Gabarito,sans-serif;font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-.02em}
.gebied .gpl{font-size:13.5px;opacity:.6;margin:4px 0 14px}
.gebied dl{display:grid;grid-template-columns:1fr auto;gap:9px 14px;margin:0;font-size:14.5px}
.gebied dt{opacity:.75}
.gebied dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.gebied dd.rood{color:#F08C82}
.kaartkopje{font-size:19px;margin:34px 0 12px}
.kaartkopje.groot{font-size:26px;margin-top:52px}
.steden{list-style:none;margin:0;padding:0;max-width:620px}
.steden li{display:flex;align-items:center;gap:14px;padding:11px 0;
  border-top:1px solid var(--rand);font-size:15px;cursor:pointer}
.steden li:first-child{border-top:0}
.steden .naam{flex:1;font-weight:700}
.steden .bar{flex:0 0 110px;height:6px;background:var(--rand);border-radius:3px;overflow:hidden}
.steden .bar i{display:block;height:100%;background:var(--inkt);border-radius:3px}
.steden .n{flex:0 0 52px;text-align:right;font-variant-numeric:tabular-nums;color:var(--zacht);
  font-size:14px}
.kaartvoet{margin-top:20px;max-width:66ch;font-size:13px}
.vbn{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.vb{background:var(--kaart);border:1px solid var(--rand);border-radius:12px;padding:16px}
.vbkop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.vbplek{font-family:Gabarito,sans-serif;font-weight:900;font-size:19px}
.vbbedrag{font-family:Gabarito,sans-serif;font-weight:900;font-size:24px;color:var(--rood);
  white-space:nowrap}
.vb.nul .vbbedrag{color:var(--zacht);font-size:18px}
.vbmeta{color:var(--zacht);font-size:12.5px;margin-top:3px}
.vblet{color:var(--zacht);font-size:12.5px;line-height:1.5;margin-top:10px;
  border-top:1px solid var(--rand);padding-top:9px}

/* ---- vragen per moment ---- */
.momenten{max-width:760px}
.moment{position:relative;padding-left:36px}
.moment + .moment{margin-top:40px}
/* De lijn loopt door tot de volgende bol en niet verder; bij de laatste stopt hij netjes. */
.moment::before{content:"";position:absolute;left:11px;top:30px;bottom:-40px;width:2px;
  background:var(--rand)}
.moment:last-child::before{bottom:10px}
.moment .bol{position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;
  background:var(--inkt);color:var(--papier);font:700 13px/24px "Public Sans",sans-serif;
  text-align:center}
.moment h2{font-size:23px;margin:0 0 3px}
.moment .wanneer{color:var(--zacht);font-size:13px;margin:0 0 8px}
.vraag{border-bottom:1px solid var(--rand)}
.vraag:last-of-type{border-bottom:0}
.vraag summary{list-style:none;cursor:pointer;padding:15px 32px 15px 0;font-weight:700;
  font-size:17px;line-height:1.4;position:relative}
.vraag summary::-webkit-details-marker{display:none}
.vraag summary::after{content:"";position:absolute;right:5px;top:24px;width:13px;height:2px;
  background:var(--zacht)}
.vraag summary::before{content:"";position:absolute;right:11px;top:18px;width:2px;height:14px;
  background:var(--zacht)}
.vraag[open] summary::before{opacity:0}
.vraag p{margin:-2px 0 17px;color:var(--zacht);line-height:1.6}

/* ---- no cure no pay: de schuif ---- */
.rekenblok{max-width:620px}
.schuifkaart{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;
  padding:20px 18px}
.schuifkaart label{display:block;font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--zacht);margin-bottom:8px}
.schuifkaart output{font-family:Gabarito,sans-serif;font-weight:900;font-size:38px;
  letter-spacing:-.02em;display:block;line-height:1}
.schuifkaart .permaand{color:var(--zacht);font-size:13px;margin-top:4px}
.rekenblok input[type=range]{width:100%;-webkit-appearance:none;appearance:none;
  background:none;margin:16px 0 2px}
.rekenblok input[type=range]::-webkit-slider-runnable-track{height:6px;background:var(--rand);
  border-radius:3px}
.rekenblok input[type=range]::-moz-range-track{height:6px;background:var(--rand);
  border-radius:3px}
.rekenblok input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;
  height:30px;border-radius:50%;background:var(--inkt);margin-top:-12px;
  border:3px solid var(--kaart);box-shadow:0 2px 7px rgba(20,18,16,.3);cursor:grab}
.rekenblok input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;
  background:var(--inkt);border:3px solid var(--kaart);cursor:grab}
.jouwkaart{background:#2F6B4F;color:#fff;border-radius:14px;padding:22px 18px;margin-top:14px}
.jouwkaart .jlabel{font-weight:700;font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  opacity:.8}
.jouwkaart .jbedrag{font-family:Gabarito,sans-serif;font-weight:900;font-size:54px;line-height:1;
  letter-spacing:-.03em;margin:7px 0 0}
.jouwkaart .jtekst{margin:10px 0 0;font-size:15px;line-height:1.5;opacity:.92}
.verdeel{margin-top:18px}
.verdeel .vbalk{height:14px;border-radius:7px;overflow:hidden;display:flex;
  background:var(--rand)}
.verdeel .vbalk i{display:block}
.verdeel .jij{background:#2F6B4F}
.verdeel .ons{background:var(--inkt)}
.verdeel .vuitleg{display:flex;justify-content:space-between;margin-top:9px;font-size:13.5px;
  gap:12px}
.verdeel .vuitleg .j{color:#2F6B4F;font-weight:600}
.verdeel .vuitleg .o{color:var(--zacht)}
.rekenkop{font-size:20px;margin:38px 0 12px}
.jaren{list-style:none;margin:0;padding:0}
.jaren li{display:flex;align-items:baseline;gap:14px;padding:13px 0;
  border-top:1px solid var(--rand);font-size:15px}
.jaren li:first-child{border-top:0}
.jaren .jr{flex:0 0 72px;font-weight:700;font-size:12px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--zacht)}
.jaren .bd{flex:1;font-weight:700;font-variant-numeric:tabular-nums}
.jaren .bd.zacht{font-weight:400;font-size:14px;line-height:1.5}
.jaren .op{flex:0 0 auto;color:var(--zacht);font-size:13px}
.rustkaart{background:var(--kaart);border:1px solid var(--rand);border-radius:14px;
  padding:20px 18px;margin-top:20px}
.rustkaart h2{font-size:22px;margin:0 0 6px}
.rustkaart .nul{font-family:Gabarito,sans-serif;font-weight:900;font-size:50px;line-height:1;
  letter-spacing:-.03em;margin:6px 0 10px}
.rustkaart p{margin:0;color:var(--zacht);line-height:1.55}
.klein{font-size:13.5px;line-height:1.6;max-width:62ch}

@container site (max-width:900px){
  .vbn{grid-template-columns:1fr}
  /* De tijdlijn duwde elke vraag 32 px naar binnen terwijl de kop en het formulier op de
     paginarand stonden: twee linkerranden op een scherm van 375. Op een telefoon dus geen
     inspringing meer. Het nummer staat boven de kop als klein kenmerk, de lijn vervalt. */
  .moment{padding-left:0}
  .moment::before{display:none}
  .moment .bol{position:static;display:inline-flex;align-items:center;justify-content:center;
    width:auto;height:22px;min-width:22px;padding:0 8px;border-radius:11px;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
  .moment + .moment{margin-top:36px;padding-top:28px;border-top:1px solid var(--rand)}
  .kaartkopje.groot{font-size:22px;margin-top:40px}
  .moment h2{font-size:20px}
  .vraag summary{font-size:16px}
  .steden .bar{flex:0 0 76px}
  .jouwkaart .jbedrag{font-size:46px}
  .schuifkaart output{font-size:34px}
  /* Kaart van 250 pixels, factor 0,25: 40 eenheden komen uit op tien pixels. */
  .nl .lab{font-size:40px;stroke-width:9px}
  .legenda{font-size:12.5px}
}

/* ---------- pagina: huurcommissie ---------- */
/* .hcstaven, .hckaart, .hcgroot en .hcna staan hier en niet bij de pagina die ze bedacht, want
   /steden, /huurcommissie-uitspraken en de stadspagina's gebruiken ze inmiddels ook. Weghalen
   breekt dus vier pagina's tegelijk. */

/* De staafjes in een donkere sectie. .balken bestond al, maar die is voor een lichte ondergrond:
   zijn balk is var(--inkt) en dat is precies de achtergrond hier. */
.hcstaven{background:var(--inkt2);border-radius:6px;padding:24px 24px 20px;
  box-shadow:inset 0 0 0 1px #332E27}
.hckop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:16px;margin-bottom:6px;border-bottom:1px solid #332E27}
.hckop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;color:var(--papier)}
.hckop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:#9C948A;
  font-weight:700;white-space:nowrap}
.hcstaaf{display:grid;grid-template-columns:150px 1fr 62px;align-items:center;column-gap:14px;
  padding:11px 0;font-size:14.5px;color:#B5ADA3}
.hcstaaf i{display:block;height:9px;border-radius:3px;background:var(--oranje);
  transform-origin:left;animation:groei .9s cubic-bezier(.2,.8,.3,1) both}
.hcstaaf:nth-of-type(3) i{animation-delay:.08s}
.hcstaaf:nth-of-type(4) i{animation-delay:.16s}
.hcstaaf:nth-of-type(5) i{animation-delay:.24s}
.hcstaaf:nth-of-type(6) i{animation-delay:.32s}
.hcstaaf b{text-align:right;color:var(--papier);font-variant-numeric:tabular-nums;
  font-weight:700}
.hcvoet{margin-top:14px;padding-top:14px;border-top:1px solid #332E27;font-size:12.5px;
  line-height:1.5;color:#9C948A}

/* Het cijfer en zijn bijschrift liepen als een lopende zin door elkaar heen en braken midden in
   een woordgroep af. Het bijschrift hoort onder het getal, en met een eigen regelafstand: .g.groot
   staat op line-height 1 en drie regels bijschrift plakten daardoor op elkaar. */
.wet .g.groot.hcgroot small{display:block;margin-top:10px;max-width:20em;line-height:1.45}

/* De reis eindigt met een scheidingslijn, dus de kaartsectie hoeft er niet nog eens 104 pixels
   onder te zetten. */
.hckaartsec{padding-top:56px}

/* De kaart naast zijn eigen uitleg. Op /uitkomsten staat hij in een smalle tekstkolom; hier moet
   hij zelf zijn breedte begrenzen, anders wordt de svg 1230 px breed. */
.hckaart{margin-top:44px;display:grid;grid-template-columns:minmax(0,560px) 1fr;
  column-gap:62px;align-items:start}
.hckaart .kaartblok{margin:0}
.hckaart .kaartkopje{margin-top:30px}
.hckaart .gebied{margin-top:0}

/* De laatste kaart van de reis: dezelfde vorm als .uitlezing, maar met een tijdlijn erin. Heette
   eerst .jouwkaart, maar die klasse bestond al met witte tekst op donker; de tekst werd daardoor
   wit op wit. Eigen naam, en de kleur staat er nu expliciet bij. */
.hcna{background:#fff;border-radius:6px;padding:24px;
  box-shadow:0 8px 24px rgba(20,18,16,.08);color:var(--inkt)}
.hcna .waar{font-size:13.5px;color:var(--zacht);border-bottom:1px solid var(--rand);
  padding-bottom:14px;margin-bottom:4px}

/* De regel onder een paneel die zegt waar het getal vandaan komt. Klein, maar hij moet er staan:
   een percentage zonder herkomst is een bewering. */
.hcbij{margin-top:16px;padding-top:14px;border-top:1px solid var(--rand);font-size:13px;
  line-height:1.5;color:var(--zacht)}
.hcbij a{color:var(--inkt);font-weight:700}

/* De strandtabel heeft dezelfde vorm als de uitkomsttabel, maar niet dezelfde kleur. Rood is op
   deze site de kleur van wat je wint; een gestrand verzoek is dat niet. Drie klassen in de
   kiezer, want .ustabel .uit i staat in een module die later in site.css wordt geschreven en
   wint anders met dezelfde specificiteit. */
.ustabel.hcneutraal .uit i{background:var(--inkt)}

/* De uitkomsttabel linkt per rij naar het blok eronder. De link is de kop zelf en niet een los
   pijltje erachter, want dan is de hele kop het raakvlak. */
.ustabel .naam b a{color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--rand)}
.ustabel .naam b a:hover{border-bottom-color:var(--inkt)}

/* De vier redenen staan in een kolom van .sttwee, en .usstap zet daar twee kolommen naast elkaar
   in. Dat laat drie woorden per regel over, dus binnen .sttwee altijd een kolom. Twee klassen in
   de kiezer, zodat het niet uitmaakt welke module later in site.css wordt geschreven. */
.sttwee .usstap{grid-template-columns:1fr;row-gap:20px;margin-top:24px}

/* ---- de zeven onderwerpen, elk met een eigen anker ----
   Blokken en geen doorlopende tekst, want de tabel erboven linkt per rij naar het blok van dat
   onderwerp, en dan moet een lezer meteen zien waar hij is aangekomen. */
.hcond{margin-top:46px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px;row-gap:24px}
.hcondblok{background:var(--papier2);border-radius:6px;padding:24px 24px 22px;
  scroll-margin-top:24px}
.hcondblok .kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--rand)}
.hcondblok h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;line-height:1.2}
.hcondblok .kop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--zacht);white-space:nowrap}
.hcondblok > p{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--zacht)}
.hcondblok .usfeiten{margin-top:16px}
.hcnaar{margin-top:16px;padding-top:14px;border-top:1px solid var(--rand);font-size:15px}
.hcnaar a{color:var(--inkt);font-weight:700}

/* ---- de wegwijzer ----
   Vragen onder elkaar in een kader, met het antwoord onderin datzelfde kader. Twee kaders naast
   elkaar zou van een antwoord een dashboard maken, en dit is maar een antwoord. */
/* De vragen links, het antwoord rechts, en dat antwoord staat er ook al voordat er iets is
   gekozen. Een leeg vak met "maak een keuze" is precies wat de rekentools van de concurrentie
   doen, en daar ziet een bezoeker niets tot hij zeven velden heeft ingevuld. */
.hcweg{margin-top:40px;border:1px solid var(--rand);border-radius:6px;padding:28px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;
  align-items:start}
.hcvraag + .hcvraag{margin-top:24px;padding-top:22px;border-top:1px solid var(--rand)}
.hcvraag > b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  line-height:1.25}
.hckeuzes{margin-top:14px;display:flex;flex-wrap:wrap;gap:10px}
/* 48 pixels hoog, want daaronder landt een duim niet betrouwbaar. */
.hckeuzes button{min-height:48px;padding:11px 18px;border:1.5px solid var(--rand);
  border-radius:6px;background:#fff;color:var(--inkt);font-family:inherit;font-size:15.5px;
  font-weight:700;line-height:1.3;cursor:pointer;text-align:left}
.hckeuzes button:hover{border-color:var(--inkt)}
.hckeuzes button:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.hckeuzes button[aria-pressed="true"]{background:var(--inkt);color:var(--papier);
  border-color:var(--inkt)}
.hcuit{padding:24px;background:var(--papier2);border-radius:6px}
.hcuit .kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--rand)}
.hcuit .kop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:20px;line-height:1.2}
.hcuit .kop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  color:var(--zacht);white-space:nowrap}
.hcuit p{margin-top:14px;font-size:15.5px;line-height:1.55;color:var(--zacht)}
.hcuit .hcwanneer{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  color:var(--inkt);line-height:1.35}
.hcuit .usfeiten{margin-top:18px}
.hcuit .hcsterk{margin-top:16px;padding-top:14px;border-top:1px solid var(--rand)}
.hcknoprij{margin-top:20px}

/* Twee klassen in de kiezer, want .sttwee komt uit een module die later in site.css wordt
   geschreven; met een enkele klasse wint zijn 1fr 1fr van deze regel. */
/* Geen eigen lijn erboven: de laatste rij van de reis sluit al met een lijn af, en twee lijnen
   veertig pixels uit elkaar leest als een fout in plaats van als een scheiding. */
.sttwee.hczitting{margin-top:44px;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  align-items:start}
.sttwee.hcterm{align-items:start;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.sttwee.hcredenen{align-items:start}

/* Op een groot scherm staat de plakknop uit, dus tussen de kop en de voettekst was er vijf
   schermen lang niets te klikken. */
.hcknop{margin-top:44px;padding-top:32px;border-top:1px solid var(--rand);display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.hcknop p{margin:0;font-family:Gabarito,sans-serif;font-weight:800;font-size:22px;
  line-height:1.2;max-width:20em}

/* De uitleg onder de tien plaatsen. Twee lijsten met een ander getal voor dezelfde stad is
   precies waar iemand die natelt over valt, dus staat hier waarom ze verschillen. */
.hcnb{margin-top:18px;padding-top:14px;border-top:1px solid var(--rand)}

.hcbronsec{border-top:1px solid var(--rand)}
.hcdatum{margin-top:20px;padding-top:14px;border-top:1px solid var(--rand);font-size:14px;
  color:var(--zacht)}

@container site (max-width: 1100px){
  .hckaart{grid-template-columns:1fr;row-gap:32px}
  .hcstaaf{grid-template-columns:120px 1fr 56px;column-gap:10px;font-size:13.5px}
  /* Twee kolommen met onderwerpen laten hier nog drie woorden per regel over. */
  .hcond{grid-template-columns:1fr;row-gap:18px}
  .sttwee.hczitting,.sttwee.hcterm{grid-template-columns:1fr;row-gap:28px}
  /* Twee kolommen in de wegwijzer laten van een keuzeknop nog twee woorden per regel over. */
  .hcweg{grid-template-columns:1fr;row-gap:26px}
}
@container site (max-width: 480px){
  /* Het nummer hield 40 pixels bezet naast een tekstkolom van 212: 25 tekens per regel. Onder de
     480 gaat het nummer boven de kop staan en krijgt de tekst de volle breedte. */
  .reisrij{grid-template-columns:1fr;row-gap:14px}
  .reisrij .rnum{font-size:26px;line-height:1}
}
@container site (max-width: 380px){
  /* Vier regels kop duwden de knop naar 757 op een vouw van 568. */
  .hheld h1{font-size:31px}
  .hheld p.sub{font-size:16px}
}
@container site (max-width: 720px){
  .hcknop{margin-top:32px;padding-top:24px;gap:18px}
  .hcknop p{font-size:19px}
  .hcknop .knop{width:100%}
  /* site.css geeft alleen .reisrij .mscherm de volle breedte. Elke andere illustratie bleef
     daardoor in de kolom van de tekst hangen en werd zestig pixels breed. */
  .reisrij > :last-child{grid-column:1/-1}
  /* Op een telefoon is een staafdiagram met een label ernaast onleesbaar smal. Label boven, balk
     en getal eronder. */
  .hcstaven{padding:20px 18px 18px}
  .hcstaaf{grid-template-columns:1fr auto;column-gap:12px;row-gap:7px;padding:12px 0}
  .hcstaaf span{grid-column:1}
  .hcstaaf b{grid-column:2;grid-row:1}
  .hcstaaf i{grid-column:1/-1;grid-row:2}

  .hcond{margin-top:28px}
  .hcondblok{padding:20px 18px 18px}
  .hcweg{margin-top:26px;padding:20px 18px 18px;grid-template-columns:1fr;row-gap:24px}
  .hcvraag > b{font-size:17px}
  /* Naast elkaar bleef er van een keuze als "De afrekening van de servicekosten" twee woorden per
     regel over. Onder elkaar dus, elk over de volle breedte. */
  .hckeuzes{flex-direction:column;gap:8px}
  .hckeuzes button{width:100%}
  .hcuit{padding:20px 18px 18px}
  .hcuit .kop b{font-size:18px}
  .hcknoprij .knop{width:100%}
  .sttwee.hczitting{margin-top:30px}
  .hcdatum{margin-top:18px}
}

/* ---------- pagina: huurpunten ---------- */

/* De schuivenrekenaar staat naast de kop, niet eronder. Dat is het hele punt van deze pagina:
   de scherpste concurrent vraagt veertig velden voordat je iets ziet, en hier staat er al een
   antwoord voordat je iets hebt aangeraakt. Donker vlak op licht papier, zodat hij ook op een
   schermafdruk meteen als het gereedschap leest en niet als nog een kaartje. */
.hpheld .r{align-items:start}
/* Drie blokken in twee kolommen: kop linksboven, rekenaar rechts over de volle hoogte, en
   het adresveld eronder links. Op een telefoon valt dat vanzelf terug op kop, rekenaar,
   adresveld, en dat is precies de volgorde die deze pagina nodig heeft. */
.hpheld .hpkop{grid-column:1;grid-row:1}
.hpheld .hsblok{grid-column:2;grid-row:1/span 2}
.hpheld .hpnaast{grid-column:1;grid-row:2;margin-top:34px}

/* De drie antwoorden onder het adresveld. Zelfde vorm als .hcsnel op /huurcommissie, maar
   met een eigen naam: die pagina kan zijn regels wijzigen zonder deze mee te slepen. */
.hpsnel{margin-top:28px;display:grid;gap:0;border-top:1px solid var(--rand)}
/* 204 en niet 170: bij 170 brak "Wat geen buitenruimte doet" af op het woord "doet",
   terwijl de twee regels erboven wel op een regel pasten. Dat langste label meet 191
   pixels, dus dit is de kolom die alle drie heel houdt. */
.hpsnel > div{display:grid;grid-template-columns:204px 1fr;gap:6px 18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rand)}
.hpsnel dt{color:var(--zacht);font-size:14.5px}
.hpsnel dd{margin:0;font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  line-height:1.15}
.hpsnel dd span{display:block;margin-top:3px;font-family:"Public Sans",sans-serif;
  font-weight:400;font-size:14px;line-height:1.4;color:var(--zacht)}
.hsblok{background:var(--inkt);color:var(--papier);border-radius:6px;padding:26px 26px 24px}
.hsuit{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:end}
.hsgetal b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:58px;
  line-height:.95;letter-spacing:-.035em}
.hsgetal.rechts{text-align:right}
.hsgetal small{display:block;margin-top:8px;font-size:13.5px;line-height:1.3;color:#9C948A}
/* Het bedrag is langer dan het puntenaantal, dus het krijgt zijn eigen maat. Zonder dit brak
   "€ 1.228" op een tweede regel en sprong de hele kaart een halve regel omhoog. */
.hsgetal.rechts b{font-size:40px;white-space:nowrap}

/* De band met de twee grenzen erin. De streepjes staan op 143 en 187 van 220, dus op vaste
   plekken; die twee getallen zijn de wet en veranderen niet mee met de schuif. */
.hsbalk{position:relative;margin-top:22px;height:10px;border-radius:3px;background:#332E27;
  overflow:hidden}
.hsbalk i{display:block;height:100%;background:var(--oranje);border-radius:3px;
  transition:width .12s ease}
.hsbalk u{position:absolute;top:0;bottom:0;width:2px;background:var(--papier);opacity:.55}
.hsbalk u.s143{left:65%}
.hsbalk u.s187{left:85%}
/* De labels staan onder hun eigen streepje en niet op gelijke afstanden. Op gelijke
   afstanden lijkt 143 in het midden te liggen, en dat is precies de verkeerde indruk. */
.hsas{position:relative;height:16px;margin-top:6px;font-size:12px;color:#9C948A}
.hsas span{position:absolute;top:0}
.hsas span:nth-child(1){left:0}
.hsas span:nth-child(2){left:65%;transform:translateX(-50%)}
.hsas span:nth-child(3){left:85%;transform:translateX(-50%)}
.hsband{margin-top:12px;font-size:14.5px;line-height:1.4;color:#B5ADA3;min-height:2.8em}
.hsband b{color:var(--papier)}

.hsregel{margin-top:14px}
.hsregel label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:13.5px;color:#9C948A}
.hsregel label b{font-family:Gabarito,sans-serif;font-weight:800;font-size:16px;
  color:var(--papier);white-space:nowrap}
/* 44 pixels hoog, want een schuif die je met een duim moet raken is anders een gok. */
.hsregel input[type=range]{width:100%;height:44px;margin:0;accent-color:var(--oranje);
  cursor:pointer}
.hsregel input[type=range]:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}

.hskeuze{margin-top:12px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hskeuze > div{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.hskeuze span{grid-column:1/-1;font-size:13.5px;color:#9C948A}
.hskeuze button{min-height:44px;border:1px solid #332E27;background:transparent;
  color:#B5ADA3;border-radius:5px;font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer}
.hskeuze button.aan{background:var(--papier);color:var(--inkt);border-color:var(--papier)}
.hskeuze button:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
/* Nooit tekst tegen een knop: de knop houdt zelf zijn ruimte vast, waar hij ook staat. */
.hsknop{margin-top:22px;width:100%;background:var(--papier);color:var(--inkt)}

/* De omgekeerde vraag, in de donkere sectie. Rechts het veld en het antwoord, links het
   waarom, zodat de sectie leest als een vraag met een antwoord ernaast. */
.hsom .r{align-items:start}
.hsom2{background:var(--inkt2);border-radius:6px;padding:28px;
  box-shadow:inset 0 0 0 1px #332E27}
.hsom2 label{display:block;font-size:13.5px;letter-spacing:.04em;text-transform:uppercase;
  font-weight:700;color:#9C948A}
/* Het bedrag is het enige op deze pagina dat de bezoeker zelf zet, en het is de hele vraag
   van deze sectie. Als tekst op een dun lijntje zag niemand dat je eraan kon draaien, dus
   het staat nu in een omrand veld met een min- en een plusknop van 60 pixels ernaast. Twee
   manieren, want intikken gaat sneller en tikken op een knop gaat met een duim. */
.hsveld{margin-top:12px;display:flex;align-items:stretch;gap:10px}
.hsinvoer{flex:1;min-width:0;display:flex;align-items:center;gap:8px;padding:0 14px;
  border:1px solid #4A4239;border-radius:6px;background:var(--inkt)}
.hsinvoer span{font-family:Gabarito,sans-serif;font-weight:900;font-size:26px;color:#9C948A}
.hsveld input{flex:1;min-width:0;height:60px;background:transparent;border:0;color:var(--papier);
  font-family:Gabarito,sans-serif;font-weight:900;font-size:36px;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.hsveld input:focus{outline:0}
.hsinvoer:focus-within{border-color:var(--oranje)}
/* De eigen pijltjes van de browser zijn een paar pixels groot en met een duim niet te
   raken. Ze gaan weg; de twee knoppen hiernaast doen dat werk wel. */
.hsveld input::-webkit-outer-spin-button,
.hsveld input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.hsveld input[type=number]{-moz-appearance:textfield;appearance:textfield}
.hsstap{flex:0 0 auto;width:60px;min-height:60px;padding:0;border:1px solid #4A4239;
  border-radius:6px;background:var(--inkt);color:var(--papier);font-family:Gabarito,sans-serif;
  font-weight:800;font-size:26px;line-height:1;cursor:pointer}
.hsstap:hover{background:#2A2620;border-color:#6E6558}
.hsstap:active{background:var(--papier);color:var(--inkt);border-color:var(--papier)}
.hsstap:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
.hsantwoord{margin-top:26px;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.hsantwoord b{font-family:Gabarito,sans-serif;font-weight:900;font-size:64px;line-height:1;
  letter-spacing:-.035em;color:var(--papier)}
.hsantwoord small{font-size:15px;color:#9C948A;max-width:14em;line-height:1.35}
.hsduiding{margin-top:18px;font-size:15px;line-height:1.5;color:#B5ADA3;min-height:4.5em}
.hsduiding b{color:var(--papier)}
.hsknop2{margin-top:22px;width:100%;background:var(--papier);color:var(--inkt)}

/* De elemententabel. Drie vondsten bovenaan, dan het zoekveld, dan de regels. Geen <table>:
   op een telefoon wordt een tabel van vier kolommen smaller dan zijn eigen getallen en gaat
   hij horizontaal scrollen. */
.heltabel{padding-top:96px}
.hedrie{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hevondst{background:var(--inkt);color:var(--papier);border-radius:6px;padding:22px 22px 20px}
.hevondst b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  line-height:1.2}
.hevondst p{margin-top:10px;font-size:15px;line-height:1.5;color:#B5ADA3;max-width:none}
.hezoek{margin-top:44px;max-width:520px}
.hezoek label{display:block;font-size:13.5px;color:var(--zacht);margin-bottom:8px}
.hezoek input{width:100%;height:52px;padding:0 16px;border:1px solid var(--rand);border-radius:6px;
  background:#fff;font-family:inherit;font-size:17px;color:var(--inkt)}
.hezoek input:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.hetabel{margin-top:28px;border-top:1px solid var(--rand)}
.hekop{padding:26px 0 12px;display:grid;grid-template-columns:1fr auto;gap:6px 18px;
  align-items:baseline;border-bottom:1px solid var(--rand)}
.hekop h3{font-size:20px}
.hekop span{font-size:14px;color:var(--zacht);text-align:right}
.herij{display:grid;grid-template-columns:1fr 92px;column-gap:18px;row-gap:4px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rand)}
.herij b{font-size:16.5px;font-weight:700}
.herij i{font-style:normal;font-family:Gabarito,sans-serif;font-weight:900;font-size:22px;
  letter-spacing:-.02em;text-align:right;white-space:nowrap}
.herij i.op{color:var(--inkt)}
.herij i.af{color:var(--rood)}
.herij i.nul{color:var(--zacht)}
.herij span{grid-column:1/2;font-size:14.5px;color:var(--zacht);line-height:1.4}
/* display:grid slaat de standaardregel van de browser voor [hidden] plat, dus het
   zoekveld verborg niets. */
.herij[hidden],.hekop[hidden]{display:none}
.hegeen{margin-top:24px;color:var(--zacht)}
.hevoet{margin-top:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.hevoet h3{margin-bottom:12px}
/* Zonder deze regel liepen de twee alinea's in dit blok tegen elkaar aan: p.tekst krijgt
   zijn ruimte elders per sectie, en deze sectie stond niet in dat rijtje. */
.hevoet p.tekst{margin-top:18px;color:var(--zacht)}
.hevoet p.tekst:first-of-type{margin-top:0}
.hevoet .knop{margin-top:24px}

/* De registersectie. Donker, want dit is het blok dat de pagina van uitleg naar cijfers tilt
   en dat is precies waar iemand naar kijkt als hij op een schermafdruk drukt. */
.hreg .r{align-items:start}
.hregetallen{margin-top:32px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  border-top:1px solid #332E27;padding-top:24px}
.hregetallen b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:34px;
  line-height:1;letter-spacing:-.03em}
.hregetallen span{display:block;margin-top:8px;font-size:14px;line-height:1.35;color:#9C948A}
.hreg p.bron{margin-top:26px;font-size:13.5px;line-height:1.5;color:#9C948A}
.hreg p.bron a{color:var(--papier)}
/* start, niet stretch: de kaart met drie regels werd anders even hoog gerekt als de kaart
   met vijf staven ernaast, en dan staat er een half scherm zwart onder drie getallen. */
.hregrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.hrkaart{background:var(--inkt2);border-radius:6px;padding:22px;
  box-shadow:inset 0 0 0 1px #332E27}
.hrkaart.breed{grid-column:1/-1}
.hrkaart .waar{font-size:13px;letter-spacing:.05em;text-transform:uppercase;font-weight:700;
  color:#9C948A;border-bottom:1px solid #332E27;padding-bottom:12px}
.hrkaart .regels div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;
  border-bottom:1px solid #332E27;font-size:15px;color:#B5ADA3}
.hrkaart .regels div:last-child{border-bottom:0}
.hrkaart .regels b{color:var(--papier)}
.hestaven{margin-top:6px}
.hestaaf{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:9px 0}
.hestaaf span{font-size:15px;color:#B5ADA3}
.hestaaf b{font-size:15px;color:var(--papier)}
.hestaaf i{grid-column:1/-1;height:6px;border-radius:2px;background:var(--oranje);display:block}

/* De drie stappen onderaan staan op een zwart vlak, en daar viel een link terug op het
   blauw van de browser. Elders in een donkere sectie is een link papierwit met een streep
   eronder; hier stond die regel nergens. */
.overdracht a{color:var(--papier);text-decoration:underline;text-underline-offset:3px}

/* De kamersectie. Twee kolommen: het waarom links, bijlage II rechts. */
.hkamer{padding:96px 0;background:var(--papier2)}
.hkamer .r{display:grid;grid-template-columns:1fr 1fr;column-gap:62px;align-items:start}
.hkamer p.tekst{margin-top:18px}
.hkamer .knop{margin-top:28px}
.hkamer .kopblok.hkkop h3{font-size:19px}
/* Bijlage II loopt tot boven de duizend euro. Bij 150 pixels stond "€ 1.138,85" met zijn
   staart over de rand van het kaartje heen. Dezelfde ondergrens als de grote tabel, zodat
   het bedrag op elke schermbreedte naast het puntenaantal blijft passen. */
.hptabel.kort{margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(min(212px,100%),1fr))}

/* De tabel per vijf punten. Een grid van kaartjes en geen <table>, om dezelfde reden als
   hierboven: een tabel van drie kolommen wordt op een telefoon smaller dan zijn getallen. */
.hptabelsec{padding-top:96px}
/* Een kaartje moet zijn eigen langste inhoud aankunnen: "195 punten" naast "€ 1.221,21".
   Bij 190 pixels paste dat op een haar na, en dan ziet een bedrag er geklemd uit ook al
   valt het er nog net in. */
.hptabel{margin-top:40px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(212px,100%),1fr));gap:12px}
/* Flex met omslag in plaats van twee vaste kolommen. Past het bedrag niet meer naast het
   puntenaantal, dan zakt het naar zijn eigen regel; in een grid liep het de rand uit. */
.hprij{border:1px solid var(--rand);border-radius:6px;padding:14px 16px 13px;
  background:var(--papier2);display:flex;flex-wrap:wrap;justify-content:space-between;
  column-gap:12px;row-gap:4px;align-items:baseline}
.hprij .hpp{white-space:nowrap;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;color:var(--inkt)}
.hprij .hpp:after{content:" punten";font-family:"Public Sans",sans-serif;font-weight:400;
  font-size:13px;color:var(--zacht)}
.hprij b{font-family:Gabarito,sans-serif;font-weight:900;font-size:19px;letter-spacing:-.02em;
  white-space:nowrap}
/* Boven de 186 punten staat er geen bedrag. Een lege regel houdt de kaart even hoog als
   zijn buren, zodat "geen maximum" op dezelfde hoogte staat als "sociaal" ernaast. */
.hprij b:empty:before{content:"\00a0"}
/* Volle breedte via width en niet via flex-basis: in een kolom slaat een basis van 100%
   op de hoogte, en dan wipt het bandje naast de kaart in een tweede kolom. */
.hprij i{width:100%;flex:0 0 auto;font-style:normal;font-size:11.5px;letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--zacht)}
.hprij.midden{background:#fff}
.hprij.vrij{background:var(--inkt);border-color:var(--inkt);color:var(--papier)}
.hprij.vrij .hpp{color:var(--papier)}
.hprij.vrij .hpp:after{color:#9C948A}
.hprij.vrij b{color:var(--papier)}
.hprij.vrij i{color:#9C948A}

@container site (max-width: 1100px){
  .hsgetal b{font-size:46px}
  .hsgetal.rechts b{font-size:32px}
  .hedrie{grid-template-columns:1fr;gap:14px}
  .hevoet{grid-template-columns:1fr;gap:28px}
  .hkamer .r{grid-template-columns:1fr;row-gap:36px}
  .hregrid{grid-template-columns:1fr}
  .hrkaart.breed{grid-column:auto}
}
@container site (max-width: 720px){
  /* Een kolom: de plaatsing hierboven zou de drie blokken anders op vaste rijen vastzetten
     en een gat laten vallen. */
  .hpheld .hpkop,.hpheld .hsblok,.hpheld .hpnaast{grid-column:auto;grid-row:auto}
  .hpheld .hpnaast{margin-top:0}
  .hpsnel > div{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .hpsnel{margin-top:22px}
  .hpsnel dt{font-size:13.5px}
  .hpsnel dd{font-size:17px}
  .hpsnel dd span{font-size:13px}
  /* De rekenaar staat op een telefoon direct onder de kop, dus hij mag niet vier schermen
     hoog worden. Kleinere cijfers, minder lucht tussen de schuiven. */
  .hsblok{padding:20px 18px 18px}
  .hsgetal b{font-size:40px}
  .hsgetal.rechts b{font-size:27px}
  .hsgetal small{font-size:12.5px}
  .hsregel{margin-top:8px}
  .hskeuze{grid-template-columns:1fr;gap:8px}
  .hsantwoord b{font-size:48px}
  .hsom2{padding:20px 18px}
  /* Kleiner mag, maar de knop en het veld blijven boven de 44 pixels die een duim nodig
     heeft, anders is de plusknop een gok. */
  .hsveld input{font-size:32px;height:52px}
  .hsstap{width:52px;min-height:52px;font-size:24px}
  .hsinvoer{padding:0 12px}
  .heltabel{padding-top:64px}
  .hptabelsec{padding-top:64px}
  .hkamer{padding:64px 0}
  .hezoek{margin-top:32px}
  .hekop{grid-template-columns:1fr;padding:22px 0 10px}
  .hekop span{text-align:left}
  /* Twee kaartjes naast elkaar, bedrag onder het puntenaantal: vijfentwintig volle regels
     onder elkaar maakten de pagina op een telefoon vierduizend pixels langer. */
  .hptabel{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  /* Op twee kaartjes naast elkaar past een bedrag niet meer naast het puntenaantal, dus
     alles onder elkaar. Met flex is dat een kolom, niet een kolomtelling. */
  .hprij{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;
    padding:12px 13px 11px;row-gap:2px}
  .hprij b{font-size:17px}
  /* Op twee kolommen staat een kaartje zonder bedrag nooit naast een kaartje met een
     bedrag, dus daar hoeft die lege regel niet en laat hij alleen een gat achter. */
  .hprij b:empty:before{content:none}
  .hregetallen{grid-template-columns:1fr;gap:14px;padding-top:20px}
  .hregetallen b{font-size:30px}
  .hregetallen > div{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:baseline}
  .hregetallen span{margin-top:0}
}
@container site (max-width: 480px){
  .hsuit{grid-template-columns:1fr;gap:10px}
  .hsgetal.rechts{text-align:left}
  .herij{grid-template-columns:1fr auto}
  .herij i{font-size:20px}
}
@container site (max-width: 380px){
  /* Vier regels kop duwden de knop naar 757 op een vouw van 568. */
  .hheld h1{font-size:31px}
  .hheld p.sub{font-size:16px}
}

/* ---------- pagina: steden ---------- */
/* Het antwoord op zijn vraag, boven het adresveld. Zelfde vorm als .hcsnel op /huurcommissie,
   maar met een eigen naam, want de derde regel is hier langer en breekt anders af. */
.stsnel{margin-top:28px;display:grid;gap:0;border-top:1px solid var(--rand)}
.stsnel > div{display:grid;grid-template-columns:150px 1fr;gap:6px 18px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--rand)}
.stsnel dt{color:var(--zacht);font-size:14.5px}
.stsnel dd{margin:0;font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  line-height:1.15}
.stsnel dd span{display:block;margin-top:3px;font-family:"Public Sans",sans-serif;
  font-weight:400;font-size:14px;line-height:1.4;color:var(--zacht)}

/* De zes grootste naast het adresveld. .balans li is een grid van 1fr auto, dus de naam links
   en het aantal rechts; het aantal krijgt cijfers van gelijke breedte zodat de kolom klopt. */
.stbalans i{font-variant-numeric:tabular-nums}

/* De volledige lijst. Drie kolommen op een breed scherm, want eenendertig plaatsen onder elkaar
   is een sectie van twaalfhonderd pixels waar niets in te zien valt. De lijst leest per rij van
   links naar rechts; het aantal staat erbij, dus de volgorde blijft afleesbaar. */
.stplaatsen{list-style:none;margin:32px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:56px}
.stplaatsen li{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:baseline;
  padding:12px 0;border-bottom:1px solid var(--rand)}
.stplaatsen .naam{font-weight:700;font-size:16px}
.stplaatsen .n{font-variant-numeric:tabular-nums;color:var(--zacht);font-size:14.5px}

/* De uitleg in twee kolommen: wat landelijk is naast wat per plaats verschilt. Naast elkaar,
   want het verschil tussen die twee is precies het punt van de sectie. */
.sttwee{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;column-gap:62px}
.sttwee h3{font-size:20px}
.sttwee p{margin-top:14px;color:var(--zacht);max-width:38em}

/* Op een groot scherm staat de plakknop uit, dus tussen de kop en de voettekst was er vier
   schermen lang niets te klikken. Deze staat er waar hij weet wat er per plaats verschilt. */
.stknop{margin-top:44px;padding-top:32px;border-top:1px solid var(--rand);display:flex;
  align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.stknop p{margin:0;font-family:Gabarito,sans-serif;font-weight:800;font-size:22px;
  line-height:1.2;max-width:20em}

/* De kaartsectie eindigt met een voettekst, dus de lijst eronder hoeft er niet nog eens
   104 pixels tussen te zetten. */
.stlijstsec{padding-top:64px}

@container site (max-width: 1100px){
  /* Drie kolommen van 210 pixels laten "Capelle aan den IJssel" over vier regels breken. */
  .stplaatsen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:40px}
  .sttwee{grid-template-columns:1fr;row-gap:28px}
}
@container site (max-width: 720px){
  .stplaatsen{grid-template-columns:1fr;column-gap:0}
  .stplaatsen li{padding:11px 0}
  .stsnel{margin-top:22px}
  .stsnel > div{grid-template-columns:1fr;gap:2px;padding:9px 0}
  .stsnel dt{font-size:13.5px}
  .stsnel dd{font-size:17px}
  .stsnel dd span{font-size:13px}
  .stknop{margin-top:32px;padding-top:24px;gap:18px}
  .stknop p{font-size:19px}
  /* Een knop van 148 pixels naast een kop van 19 pixels leest als een voetnoot. */
  .stknop .knop{width:100%}
  .stlijstsec{padding-top:8px}
  .sttwee{margin-top:28px}
}

/* ---------- pagina: een stad ---------- */
/* De voetregel onder de postcodelijst eindigt op een link naar /steden. Zonder deze regel
   erft die link de standaardkleur van de browser, en dat is het enige blauw op de hele site. */
.sdterug a{color:var(--inkt);font-weight:700}

/* Dezelfde reden, een sectie lager: de kolom die per stad uitlegt wat de WOZ-waarde doet
   eindigt op een link naar /huurpunten. Zonder deze regel kleurt die link browserblauw,
   het enige blauw op de hele site. Op /steden speelde dit niet, want daar staat in dezelfde
   kolom geen link. */
.sdwoz a{color:var(--inkt);font-weight:700}

/* Op de stadspagina staat het adresveld naast een kader met vier postcodegebieden in plaats
   van zes plaatsnamen. Vier regels maken het kader korter dan het formulier ernaast, en dan
   staat de slotregel van het kader op een eiland. Dit trekt hem tegen de lijst aan. */
.stbalans + .som{padding-top:13px;border-top:1px solid var(--rand)}

/* De kaart van een stad. De klassen .kaartdoos, .nl, .gem, .pro, .st, .zweef en .gebied komen
   van de landelijke kaart; alleen deze twee dingen moesten mee met de uitsnede.

   EEN, DE LIJNDIKTE. De opmaak van de landelijke kaart zet 0,8 eenheid neer voor een gemeente
   in een venster van 1000 breed. Het venster van een stad is er tachtig, en dan is diezelfde
   0,8 geen haarlijn meer maar een balk van tien pixels die de halve stad afdekt.
   non-scaling-stroke laat de browser de lijn in schermpixels tekenen in plaats van in
   venstereenheden, en dan klopt hij bij elke uitsnede vanzelf. */
.sdkaart .gem,.sdkaart .pro,.sdkaart .ring{vector-effect:non-scaling-stroke}

/* TWEE, DE HOOGTE. De svg is breedte 100% en hoogte auto, dus de verhouding van de viewBox
   bepaalt hoe hoog het blok wordt. Op een breed scherm mag dat, maar boven de 1100 pixels klapt
   .hckaart naar een kolom en werd de kaart bijna zo hoog als het scherm. */
.sdkaartsec .kaartdoos{max-width:640px;margin-inline:auto}

/* De vier andere steden onderaan. Een rij kaartjes, niet een opsomming: een opsomming onder een
   pagina met vijf secties leest als een voetnoot en wordt niet aangeklikt. */
.sdandere{list-style:none;margin:34px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.sdandere a{display:block;height:100%;padding:16px 18px;border:1px solid var(--rand);
  border-radius:12px;text-decoration:none;color:var(--inkt);background:var(--kaart);
  transition:border-color .12s,transform .12s}
.sdandere a:hover{border-color:var(--inkt);transform:translateY(-2px)}
.sdandere b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:19px}
.sdandere span{display:block;margin-top:4px;color:var(--zacht);font-size:13.5px;line-height:1.4}

/* Sinds 5 oktober 2026: de afloop per route. Vier kaartjes met een groot getal; dezelfde rand,
   kleur en hoek als de stadskaartjes onderaan, zodat het blok bij de pagina hoort. */
.sdafloop{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(230px,100%),1fr));gap:14px}
.sdafloop li{padding:20px 20px 18px;border:1px solid var(--rand);border-radius:12px;
  background:var(--kaart);display:flex;flex-direction:column;gap:8px}
.sdafloop h3{font-size:16px;line-height:1.3;margin:0}
.sdafloop h3 a{color:var(--inkt);text-decoration:none;border-bottom:1px solid var(--rand)}
.sdafloop h3 a:hover{border-bottom-color:var(--inkt)}
.sdafloop .sdpct{font-family:Gabarito,sans-serif;font-weight:900;font-size:44px;line-height:1;
  letter-spacing:-.03em;margin:6px 0 0;color:var(--inkt)}
.sdafloop p{margin:0;font-size:15px;line-height:1.45}
.sdafloop p.klein{font-size:13.5px;margin-top:auto;padding-top:6px}
.sdverhuursec h3{font-size:19px;margin:0 0 6px}
.sdcorp{margin-top:14px;grid-template-columns:1fr}
.sdalle{margin-top:22px;line-height:1.7}

@container site (max-width: 720px){
  /* De voetregel is op een telefoon de laatste tekst voor de vragen; 13 pixels leest daar te
     klein, want het is hier geen bijschrift maar een uitleg van de hele lijst erboven. */
  .sdterug{font-size:14px}

  /* Op een telefoon staat er geen tweede kolom naast de kaart, dus mag hij de volle breedte
     hebben; de max-width van 640 zou hem dan onnodig smal houden. */
  .sdkaartsec .kaartdoos{max-width:none}

  /* Een kaartje per regel: op 320 pixels breed passen er geen twee naast elkaar zonder dat
     "Rotterdam" over twee regels breekt. */
  .sdandere{grid-template-columns:1fr;margin-top:26px}
  .sdafloop{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .sdafloop .sdpct{font-size:38px}
  .sdandere a{padding:14px 16px}
}

/* ---------- pagina: huurcommissie uitspraken ---------- */
/* Deze pagina heeft in de lopende tekst meer links dan de andere: naar huurpunten, naar steden
   en naar de kaartbron. Zonder deze regel erven die de standaardkleur van de browser, en dat is
   het enige blauw op de hele site. Een klasse op de omhullende kolom in plaats van een stijl per
   link, zodat een nieuwe link in dezelfde alinea vanzelf goed staat. De knop moet er wel buiten
   blijven: die is een a-element met lichte tekst op een zwarte vlak, en deze regel maakte hem
   zwart op zwart, dus onleesbaar. */
.uslink a:not(.knop){color:var(--inkt);font-weight:700}

/* ---- de postcodezoeker ----
   Het veld is met opzet groot en apart: dit is het enige op de pagina waar een bezoeker iets
   moet doen, en hij doet het met een duim. Vier cijfers, geen knop, geen wachttijd. */
.uszoek{margin-top:32px}
.uszoek label{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:20px;
  line-height:1.2}
.uszoekveld{margin-top:14px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
/* Cijfers in Gabarito met ruime letterafstand, zodat vier cijfers ook op armlengte te lezen
   zijn. 64 pixels hoog omdat een duim daar betrouwbaar op landt. */
.uszoekveld input{width:184px;height:64px;border:1.5px solid var(--inkt);border-radius:6px;
  background:#fff;color:var(--inkt);font-family:Gabarito,sans-serif;font-weight:900;
  font-size:30px;letter-spacing:.16em;text-align:center;text-indent:.16em;
  font-variant-numeric:tabular-nums}
.uszoekveld input::placeholder{color:var(--rand)}
.uszoekveld input:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.uszoekveld .bij{margin:0;font-size:15px;line-height:1.4;color:var(--zacht);max-width:19em}
.uszoek .usmee{margin-top:14px;font-size:15px;color:var(--zacht)}
.uszoek .usmee a{color:var(--inkt);font-weight:700}

/* De vier grootste plaatsen onder de zoeker. Geen kader eromheen: er staat rechts al een
   kader, en twee kaders naast elkaar maken van een antwoord een dashboard. */
.usplaatsen{list-style:none;margin:28px 0 0;padding:22px 0 0;border-top:1px solid var(--rand);
  display:flex;flex-wrap:wrap;gap:10px 34px}
.usplaatsen li{display:flex;align-items:baseline;gap:9px}
.usplaatsen span{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px}
.usplaatsen i{font-style:normal;font-size:13px;letter-spacing:.05em;text-transform:uppercase;
  font-weight:700;color:var(--zacht);font-variant-numeric:tabular-nums}

/* ---- het antwoordpaneel ----
   Staat er ook als er nog niets is ingetikt: dan met het landelijke beeld. Een leeg kader met
   "vul iets in" is precies wat het portaal doet en waarom niemand daar iets vindt. */
.usuit{background:var(--papier2);border-radius:6px;padding:24px 24px 22px}
.usuit .kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--rand)}
.usuit .kop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;line-height:1.2}
.usuit .kop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);font-weight:700;white-space:nowrap}
.usgroot{padding:18px 0 2px;font-family:Gabarito,sans-serif;font-weight:900;font-size:44px;
  line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.usgroot span{display:block;margin-top:9px;font-family:"Public Sans",sans-serif;font-weight:400;
  font-size:15px;line-height:1.4;letter-spacing:0;color:var(--zacht);max-width:22em}
.usbalken{list-style:none;margin:16px 0 0;padding:0}
.usbalken li{display:grid;grid-template-columns:132px minmax(0,1fr) 52px;align-items:center;
  column-gap:12px;padding:6px 0;font-size:14.5px;color:var(--zacht)}
.usbalken i{display:block;height:8px;border-radius:3px;background:var(--rood);
  transform-origin:left}
.usbalken b{text-align:right;color:var(--inkt);font-weight:700;font-variant-numeric:tabular-nums}
.usfeiten{margin-top:16px;padding-top:14px;border-top:1px solid var(--rand);display:grid;
  grid-template-columns:minmax(0,1fr) auto;row-gap:9px;column-gap:18px;font-size:15px}
.usfeiten dt{color:var(--zacht)}
.usfeiten dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.usleeg{padding:20px 0 6px}
.usleeg b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  line-height:1.25}
.usleeg p{margin-top:10px;font-size:15px;line-height:1.5;color:var(--zacht);max-width:none}

/* Het paneel naast de kaart krijgt dezelfde opmaak, want het toont hetzelfde antwoord. .gebied
   is elders op de site een donker blokje met lichte tekst; dat moet hier helemaal terug, want
   anders staat er lichte tekst op een lichte ondergrond. De regels voor dl en dt zijn er ook
   bij: .gebied dl weegt zwaarder dan .usfeiten en zou onze kolommen overschrijven. En de rode
   waarde uit kaart.js is een lichtrood dat bedoeld was voor een zwarte achtergrond. */
.gebied.usuit{background:var(--papier2);color:var(--inkt);border-radius:6px;
  padding:24px 24px 22px;margin-top:0}
.gebied.usuit .usfeiten{grid-template-columns:minmax(0,1fr) auto;gap:9px 18px;font-size:15px}
.gebied.usuit .usfeiten dt{opacity:1;color:var(--zacht)}
.gebied.usuit dd.rood{color:var(--rood)}

/* ---- de uitkomst per onderwerp ----
   Een tabel in raster in plaats van een table-element, want op een telefoon moet elke rij een
   blokje worden en dat kan een tabel niet zonder de betekenis van de kolommen te verliezen.
   Daarom staat bij elke waarde een label in de html; op een breed scherm is dat verborgen. */
.ustabel{margin-top:36px;border-top:1px solid var(--rand)}
.ustabel .rij{display:grid;
  grid-template-columns:minmax(0,1.25fr) 92px 132px minmax(170px,1fr);
  align-items:center;column-gap:24px;padding:16px 0;border-bottom:1px solid var(--rand)}
.ustabel .kop{padding:11px 0;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--zacht)}
.ustabel .naam b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17.5px;
  line-height:1.2}
.ustabel .naam span{display:block;margin-top:4px;font-size:13.5px;color:var(--zacht)}
.ustabel .n b,.ustabel .wie b{font-weight:700;font-variant-numeric:tabular-nums}
.ustabel .wie b{font-weight:400;color:var(--zacht);font-family:"Public Sans",sans-serif;
  font-size:15px}
.ustabel .uit{display:grid;grid-template-columns:minmax(0,1fr) 52px;align-items:center;
  column-gap:12px}
.ustabel .uit i{display:block;height:9px;border-radius:3px;background:var(--rood)}
.ustabel .uit b{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.ustabel .lbl{display:none}

/* De kanttekening bij dat percentage. Staat in beeld naast de tabel en niet onderaan als
   voetnoot, want zonder deze zin belooft het percentage meer dan het waarmaakt. */
.uslet{margin-top:30px;padding:22px 24px;background:var(--papier2);border-radius:6px;
  border-left:3px solid var(--inkt);max-width:62em}
.uslet b{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px}
.uslet p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--zacht);max-width:none}

/* ---- hoe zaken stranden ---- */
.usstrand{margin-top:38px}
.usstrand .som{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:32px;
  align-items:center;padding-bottom:28px;border-bottom:1px solid var(--rand)}
.usstrand .som b{font-family:Gabarito,sans-serif;font-weight:900;font-size:76px;line-height:1;
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.usstrand .som span{font-size:20px;line-height:1.35;max-width:26em}
.usstrand ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));column-gap:32px}
.usstrand li{padding:24px 0 0}
.usstrand li b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:32px;
  line-height:1;letter-spacing:-.03em;color:var(--rood);font-variant-numeric:tabular-nums}
.usstrand li span{display:block;margin-top:8px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:16.5px;line-height:1.25}
.usstrand li p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--zacht);max-width:none}

/* Het aandeel gestrande zaken per jaar. */
.usdeel{list-style:none;margin:22px 0 0;padding:0}
.usdeel li{display:grid;grid-template-columns:52px minmax(0,1fr) 56px;align-items:center;
  column-gap:14px;padding:6px 0;font-size:15px}
.usdeel .jr{font-family:Gabarito,sans-serif;font-weight:800}
.usdeel .baan{display:block;height:10px;border-radius:3px;background:var(--rand)}
.usdeel .baan i{display:block;height:100%;border-radius:3px;background:var(--rood)}
.usdeel b{text-align:right;font-variant-numeric:tabular-nums}

/* ---- de groei per jaar ----
   Een staaf per jaar op de grootste geschaald, met daarbinnen het deel gebreken en het deel
   servicekosten. De rest van de staaf blijft de achtergrondkleur, dus samen is het altijd
   honderd procent van dat jaar. */
.usjaar{list-style:none;margin:36px 0 0;padding:0}
.usjaar li{display:grid;grid-template-columns:64px minmax(0,1fr) 84px;align-items:center;
  column-gap:18px;padding:9px 0}
.usjaar .jr{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px}
.usjaar .baan{display:block}
.usjaar .bar{display:flex;height:16px;border-radius:3px;overflow:hidden;background:var(--rand)}
.usjaar .bar i{display:block;height:100%}
.usjaar .bar .a{background:var(--inkt)}
.usjaar .bar .b{background:var(--rood)}
.usjaar b{text-align:right;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  font-variant-numeric:tabular-nums}
.uslegenda{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:14.5px;
  color:var(--zacht)}
.uslegenda span{display:flex;align-items:center;gap:9px}
.uslegenda i{display:block;width:14px;height:10px;border-radius:2px}
.uslegenda .a{background:var(--inkt)}
.uslegenda .b{background:var(--rood)}
.uslegenda .c{background:var(--rand)}

/* ---- zelfstandige woning tegenover kamer ---- */
.usstelsels{margin-top:38px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:32px}
.usstelsel{background:var(--papier2);border-radius:6px;padding:24px 24px 22px}
.usstelsel .kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:14px;border-bottom:1px solid var(--rand)}
.usstelsel .kop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px}
.usstelsel .kop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:var(--zacht);white-space:nowrap}
.usstelsel > p{margin-top:14px;font-size:15.5px;line-height:1.5;color:var(--zacht);
  max-width:none}
.usstelsel ul{list-style:none;margin:16px 0 0;padding:0}
.usstelsel li{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;
  padding:8px 0;border-top:1px solid var(--rand);font-size:15.5px}
.usstelsel li b{font-weight:700;font-variant-numeric:tabular-nums}
.usstelsel .med{margin-top:16px;padding-top:14px;border-top:1px solid var(--rand);display:flex;
  justify-content:space-between;gap:16px;align-items:baseline;font-size:15px;color:var(--zacht)}
.usstelsel .med b{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  color:var(--inkt)}
/* De aanzet naar de rekenmachine staat hier binnen een .sttwee-kolom, en .sttwee p zet elke
   alinea op de zachte grijstint. Op de andere pagina's staat deze zin in de inktkleur, dus
   zetten wij hem hier terug. */
.sttwee .stknop p{color:var(--inkt)}
.usna{margin-top:28px;font-size:16px;line-height:1.55;color:var(--zacht);max-width:60em}

/* ---- de verantwoording ---- */
.usbronsec{border-top:1px solid var(--rand)}
.usbron{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  column-gap:62px;align-items:start}
.usbron dl{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);row-gap:0;
  column-gap:20px;border-top:1px solid var(--rand)}
.usbron dt{padding:13px 0;font-size:14.5px;color:var(--zacht);border-bottom:1px solid var(--rand)}
.usbron dd{margin:0;padding:13px 0;font-size:15.5px;line-height:1.45;
  border-bottom:1px solid var(--rand)}
.usnb h3{font-size:19px}
.usnb h3 + p{margin-top:10px}
.usnb p{font-size:15.5px;line-height:1.6;color:var(--zacht);max-width:none}
.usnb h3:not(:first-child){margin-top:24px}

/* De zes stappen om zelf een uitspraak op te zoeken. Een genummerde lijst met een eigen nummer,
   want de standaard lijstnummers van de browser staan buiten de tekstkolom en breken de
   uitlijning met de kopblokken erboven. Twee kolommen op een breed scherm, want zes stappen
   onder elkaar maken een kolom van bijna twee schermen hoog. */
.usstap{list-style:none;counter-reset:usnr;margin:40px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;column-gap:62px;row-gap:30px}
.usstap li{counter-increment:usnr;display:grid;grid-template-columns:32px 1fr;column-gap:14px;
  align-items:start}
.usstap li::before{content:counter(usnr);font-family:Gabarito,sans-serif;font-weight:900;
  font-size:21px;line-height:1.15;color:var(--rood);font-variant-numeric:tabular-nums}
.usstap b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:18px;
  line-height:1.25}
.usstap p{margin-top:7px;color:var(--zacht);font-size:16px;line-height:1.5}

@container site (max-width:1280px){
  /* De vier kolommen met stranding worden op een tablet twee. Vier kolommen van 150 pixels
     laten van "geen inhoudelijke uitspraak" vier regels over. */
  .usstrand ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:8px}
}
@container site (max-width:1100px){
  /* Twee kolommen naast elkaar laten in de rechterkolom nog maar een woord of drie per regel
     over zodra de zijkolom van de kaart hierboven ook al is ingeklapt. */
  .usstap{grid-template-columns:1fr;row-gap:24px}
  .usbron{grid-template-columns:1fr;row-gap:32px}
  .usstelsels{grid-template-columns:1fr;row-gap:20px}
}
@container site (max-width:900px){
  /* De plaatsnamen op de kaart staan in eenheden van de viewBox, niet in schermpixels, dus
     hun grootte hangt af van hoe breed de kaart wordt getekend. site.css zet ze onder de 900
     op 40 eenheden, en de reden die daar staat klopt ook: op een telefoon is de kaart 250
     pixels breed en dan is 40 precies tien pixels. Op een tablet gaat dat mis. Daar is de
     kolomindeling van .hckaart al bij 1100 ingeklapt, dus de kaart is dan bijna 800 pixels
     breed en komen diezelfde 40 eenheden uit op tweeendertig pixels: namen die over elkaar
     heen vallen. Tussen 720 en 900 houden wij daarom de gewone maat aan. Deze regel staat op
     .usdataset en raakt dus alleen deze pagina; /huurcommissie en /uitkomsten houden wat zij
     hadden. */
  .usdataset .nl .lab{font-size:20px;stroke-width:5px}
  /* Het grote getal boven de stranding kruipt anders tegen zijn eigen zin aan. */
  .usstrand .som{grid-template-columns:1fr;row-gap:12px}
  .usstrand .som b{font-size:56px}
  .usstrand .som span{font-size:18px}
}
@container site (max-width:720px){
  /* Hieronder is de kaart wel echt smal en is de maat uit site.css de juiste. */
  .usdataset .nl .lab{font-size:40px;stroke-width:9px}

  /* De zoeker op een telefoon: het veld op de volle breedte, de uitleg eronder. Naast elkaar
     bleef er voor die uitleg twee woorden per regel over. */
  .uszoek{margin-top:24px}
  .uszoek label{font-size:18px}
  .uszoekveld{gap:12px}
  .uszoekveld input{width:100%;height:60px;font-size:27px}
  .uszoekveld .bij{max-width:none;font-size:14.5px}
  .usplaatsen{margin-top:22px;padding-top:18px;gap:8px 22px}
  .usplaatsen span{font-size:16px}
  .usplaatsen i{font-size:12px}

  .usuit,.gebied.usuit{padding:20px 18px 18px}
  .usgroot{font-size:38px}
  /* 132 pixels voor de naam liet voor de staaf zelf nog vijftig pixels over, en dan lijkt
     elke staaf even lang. Onder elkaar dus: naam boven, staaf en getal eronder. */
  .usbalken li{grid-template-columns:minmax(0,1fr) auto;row-gap:7px;padding:8px 0}
  .usbalken span{grid-column:1;grid-row:1}
  .usbalken b{grid-column:2;grid-row:1}
  .usbalken i{grid-column:1 / -1;grid-row:2}
  .usfeiten{font-size:14.5px}

  /* Elke tabelrij wordt een blokje met labels erbij, anders lopen vier kolommen op 390 pixels
     in elkaar over en staat een percentage naast het verkeerde onderwerp. */
  .ustabel{margin-top:26px}
  .ustabel .kop{display:none}
  .ustabel .rij{grid-template-columns:minmax(0,1fr);row-gap:8px;padding:18px 0}
  .ustabel .lbl{display:block;font-size:13.5px;color:var(--zacht)}
  .ustabel .n,.ustabel .wie{display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:16px;align-items:baseline}
  .ustabel .uit{grid-template-columns:minmax(0,1fr) 52px;row-gap:6px}
  .ustabel .uit .lbl{grid-column:1 / -1}
  .ustabel .naam b{font-size:17px}

  .uslet{margin-top:24px;padding:18px 18px 18px 16px}
  .usstrand{margin-top:28px}
  .usstrand ul{grid-template-columns:1fr;row-gap:4px}
  .usstrand li{padding-top:20px}
  .usstrand li b{font-size:28px}

  .usjaar{margin-top:26px}
  .usjaar li{grid-template-columns:48px minmax(0,1fr) 62px;column-gap:12px;padding:7px 0}
  .usjaar .jr{font-size:15.5px}
  .usjaar b{font-size:15.5px}
  .usdeel li{grid-template-columns:46px minmax(0,1fr) 52px;column-gap:11px;font-size:14.5px}

  .usstelsels{margin-top:26px}
  .usstelsel{padding:20px 18px 18px}
  .usna{margin-top:22px;font-size:15.5px}

  .usbron{margin-top:26px;row-gap:26px}
  /* Twee kolommen in een begrippenlijst laten op 390 pixels een waarde van drie woorden per
     regel over. Onder elkaar leest hij als een lijst en past hij wel. */
  .usbron dl{grid-template-columns:1fr;row-gap:0}
  .usbron dt{padding:12px 0 0;border-bottom:0}
  .usbron dd{padding:4px 0 12px}

  /* Op een telefoon staat het nummer dicht op de kop, anders houdt het 32 pixels bezet naast
     een tekstkolom die er zelf al te weinig heeft. */
  .usstap{margin-top:28px;row-gap:20px}
  .usstap li{grid-template-columns:26px 1fr;column-gap:11px}
  .usstap li::before{font-size:18px}
  .usstap b{font-size:17px}
  .usstap p{font-size:15.5px}
}

/* ---------- pagina: wet betaalbare huur ---------- */
/* Deze pagina heeft in de lopende tekst links naar huurpunten, huurcommissie en de stadspagina's.
   Zonder deze regel erven die de standaardkleur van de browser, en dat is het enige blauw op de
   hele site. Een klasse op de omhullende kolom in plaats van een stijl per link, zodat een nieuwe
   link in dezelfde alinea vanzelf goed staat. */
.wbhlink a{color:var(--inkt);font-weight:700}

/* Dezelfde reden, maar dan in de vragenlijst: de antwoorden staan in .vragen details p en die
   heeft in site.css geen linkkleur. */
.wbhvragen details p a{color:var(--inkt);font-weight:700}

/* De vijf regels in het donkere paneel. Ze zitten in .hcstaven, dus op var(--inkt2), en daarom
   staat hier expliciet een lichte kleur op beide kolommen. Zonder die kleur erft de rechterhelft
   var(--inkt) uit de basisstijl van vet gezette tekst en valt zwart op zwart weg. */
.wbhrij{display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:baseline;
  padding:13px 0;border-top:1px solid #332E27}
.wbhrij:first-of-type{border-top:0}
.wbhrij span{color:#9C948A;font-size:14.5px}
.wbhrij b{color:var(--papier);font-family:Gabarito,sans-serif;font-weight:800;font-size:15.5px;
  text-align:right;line-height:1.3}

/* De opmaak van de drie banden stond hier. Die kaarten staan sinds 8 september 2026 op
   /middenhuur, dus hun klassen zijn hier weggehaald in plaats van blijven staan; ongebruikte
   opmaak in site.css is opmaak die een volgende keer per ongeluk wordt hergebruikt. */

/* De tweede kop binnen dezelfde sectie. .kopblok heeft in site.css geen marge naar boven, want
   hij staat daar altijd bovenaan; hier staat er een tabel voor. */
.wbhjaarkop{margin-top:56px}
.wbhjaarkop h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:24px;line-height:1.15}

/* De grens per jaargang. Regels en geen tabel met randen: een tabel van drie kolommen moet op een
   telefoon horizontaal scrollen, en horizontaal scrollen in een pagina is altijd een fout. */
.wbhjaren{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--rand)}
/* De jaarkolom is 158 pixels breed en niet krapper: "2024, op of na 1 juli" is de langste en die
   moet in twee regels passen, niet in drie. */
.wbhjaren li{display:grid;grid-template-columns:158px 1fr 1fr;column-gap:20px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--rand)}
.wbhjjaar{font-family:Gabarito,sans-serif;font-weight:800;font-size:16.5px;
  font-variant-numeric:tabular-nums}
.wbhjgrens,.wbhjsoc{display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums;
  font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;line-height:1.15}
.wbhjgrens{color:var(--rood)}
.wbhjgrens i,.wbhjsoc i{font-style:normal;font-family:'Public Sans',sans-serif;font-weight:400;
  font-size:13px;color:var(--zacht);letter-spacing:.01em}
/* "viel samen met de grens ernaast" is geen bedrag en mag dus niet in cijferopmaak staan, anders
   leest het als een waarde in dezelfde kolom. */
.wbhjsoc.leeg{font-family:'Public Sans',sans-serif;font-weight:400;font-size:14.5px;
  color:var(--zacht);font-variant-numeric:normal}
/* De sprong van 1 juli 2024 is het hele punt van deze tabel, dus die regel krijgt een merkteken
   in plaats van alleen een plek in de rij. */
.wbhjaren li.wbhsprong{background:var(--papier2);box-shadow:inset 3px 0 0 var(--rood)}
.wbhjaren li.wbhsprong .wbhjjaar,.wbhjaren li.wbhsprong .wbhjgrens,
.wbhjaren li.wbhsprong .wbhjsoc{padding-left:14px}
.wbhjaren li.wbhsprong .wbhjjaar{padding-left:14px}

/* De check van drie vragen. Een lichte doos met een rand in plaats van de donkere doos van de
   rekenaar: die twee staan op dezelfde pagina, en twee zwarte blokken achter elkaar laten de
   pagina in twee helften uiteenvallen. */
.wbhcheck{margin-top:36px;border:1px solid var(--rand);border-radius:8px;background:var(--papier2);
  padding:26px 26px 24px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
.wbhvelden{display:flex;flex-direction:column;gap:22px}
.wbhveld label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:15px;font-weight:700;line-height:1.3}
.wbhveld label b{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;color:var(--rood);
  font-variant-numeric:tabular-nums}
.wbhveld select{margin-top:9px;width:100%;min-height:48px;border:1px solid var(--rand);
  border-radius:6px;background:var(--papier);color:var(--inkt);font:inherit;font-size:16px;
  padding:0 12px}
.wbhveld select:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
.wbhveld input[type=range]{margin-top:9px;width:100%;height:44px;accent-color:var(--rood)}
.wbhveld input[type=range]:focus-visible{outline:3px solid var(--oranje);outline-offset:2px}
/* .hsveld komt uit huurpuntenp en staat daar op een zwarte achtergrond: de doos en de twee knoppen
   hebben daar background:var(--inkt) en een lichte letter. Hier staat het veld op papier, dus
   allebei moeten om. Zonder de achtergrondregel op .hsstap bleef de min- en de plusknop een zwart
   vierkant met een zwart teken erin; dat was op het eerste scherm meteen te zien en het is dezelfde
   fout die op deze site vaker is gemaakt. Vandaar ook de hover en de ingedrukte stand, want die
   erven anders het donkere paar van huurpunten. */
.wbhveld .hsveld{margin-top:9px}
.wbhveld .hsstap{background:var(--papier);border-color:var(--rand);color:var(--inkt)}
.wbhveld .hsstap:hover{background:var(--papier2);border-color:var(--zacht)}
.wbhveld .hsstap:active{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.wbhveld .hsinvoer{border-color:var(--rand);background:var(--papier);color:var(--inkt)}
.wbhveld .hsinvoer input{color:var(--inkt)}
.wbhveld .hsinvoer span{color:var(--zacht)}
.wbhhint{display:block;margin-top:8px;font-size:13.5px;line-height:1.45;color:var(--zacht)}

/* Het antwoord. Staat in dezelfde doos en niet eronder, zodat het meteen naast de vragen te lezen
   is zonder te scrollen. */
.wbhuit{border-left:3px solid var(--rood);padding:2px 0 2px 20px;min-height:120px}
.wbhuit b.wbhkop{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:23px;
  line-height:1.15;letter-spacing:-.01em}
.wbhuit p{margin-top:11px;font-size:16px;line-height:1.5;color:var(--zacht);max-width:44em}
.wbhuit dl{margin-top:16px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:7px;
  font-size:14.5px;align-items:baseline}
.wbhuit dt{color:var(--zacht)}
.wbhuit dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.wbhuit .knop{margin-top:20px}
/* Een uitkomst waarbij de puntenroute niet de weg is krijgt een neutrale streep in plaats van de
   rode. Rood is op deze site het accent en niet een alarm, maar twee uitkomsten met dezelfde
   streep lezen als hetzelfde antwoord, en dat zijn ze niet. */
.wbhuit.wbhmisschien{border-left-color:var(--rand)}

/* Het blok over artikel 208e lid 2 staat onder de routes en niet ertussen: het is geen route maar
   de reden dat een oude woning er soms alsnog een heeft. */
.wbhdoorbraak{margin-top:34px;max-width:78ch}

/* De drie toelichtingen onder de check. Dezelfde vorm als het zijpaneel bij een stap, want het is
   hetzelfde soort tekst: waarom deze vraag er staat, met de grondslag erbij. */
.wbhwaarom{margin-top:26px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.wbhnoot{background:var(--papier2);border-radius:6px;padding:18px 20px;color:var(--zacht);
  font-size:15px;line-height:1.5}
.wbhnoot b{display:block;margin-bottom:6px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:15.5px;color:var(--inkt)}
/* In de check staat .wbhnoot naast een lichte doos, dus daar mag hij niet dezelfde vulling
   houden als die doos; anders lopen de twee vlakken in elkaar over. */
.wbhwaarom .wbhnoot{background:transparent;border:1px solid var(--rand)}

/* De rekenaar van huurpunten in een tweekolomsvorm. .hsblok brengt zijn eigen zwarte doos mee, dus
   hier staat alleen waar hij komt te staan. */
.wbhreken{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.wbhrekentekst h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:21px;line-height:1.2}
.wbhposten{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
/* De hele regel zit in een span en niet los naast het vetgedrukte woord. Zonder die span zijn de
   b en de tekst erna twee losse vakken in dezelfde flexregel, en dan zet de gap van elf pixels een
   gat tussen "WOZ-waarde" en de komma erachter, en breekt het vetgedrukte woord op een smal scherm
   in zijn eigen kolom af. Dat stond er eerst en het was op een telefoon meteen te zien. */
.wbhposten li{display:flex;align-items:baseline;gap:11px;font-size:16px;line-height:1.45;
  color:var(--zacht)}
.wbhposten li::before{content:"";width:7px;height:7px;border-radius:100px;flex:0 0 auto;
  background:var(--rood);transform:translateY(-2px)}
.wbhposten li > span{flex:1;min-width:0}
.wbhposten b{color:var(--inkt)}
.wbhrekentekst .tekst{margin-top:18px}
/* De tekstkolom liep hier eerder een halve schermhoogte eerder af dan het zwarte blok ernaast, en
   dan staat er op een breed scherm een leeg vlak van vierhonderd pixels naast de rekenaar. Deze
   toelichting vult dat en zegt tegelijk het enige wat een bezoeker bij een schuif moet weten. */
.wbhrekennoot{margin-top:22px}

/* De grondslagen uit het register. Een lijst met een staaf per regel: de staaf laat de verhouding
   zien zonder dat er een percentage bij hoeft, en een percentage over uitkomsten hoort hier niet,
   want dit is een telling van onderwerpen en niet van resultaten. */
.wbhkopje{margin-top:44px;font-family:Gabarito,sans-serif;font-weight:800;font-size:22px;
  line-height:1.2}
.wbhkopje2{margin-top:56px}
.wbhartikelen{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--rand)}
.wbhartikelen li{display:grid;grid-template-columns:1fr 200px 92px;column-gap:24px;
  align-items:center;padding:16px 0;border-bottom:1px solid var(--rand)}
.wbhanaam b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  line-height:1.2}
.wbhanaam i{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--zacht);
  letter-spacing:.02em}
.wbhanaam p{margin-top:6px;font-size:14.5px;line-height:1.45;color:var(--zacht);max-width:52ch}
.wbhabaan{display:block;height:10px;border-radius:100px;background:var(--papier2)}
.wbhabaan i{display:block;height:100%;border-radius:100px;background:var(--rood)}
.wbhan{font-family:Gabarito,sans-serif;font-weight:900;font-size:21px;text-align:right;
  font-variant-numeric:tabular-nums}
/* De restregel telt geen onderwerp maar een verzameling, dus die staat er zachter in; anders
   leest hij als een negende onderwerp. */
.wbharest .wbhanaam b,.wbharest .wbhan{color:var(--zacht)}
.wbharest .wbhabaan i{background:var(--zacht)}
.wbhbronregel{margin-top:20px}

/* De steekproef. Drie getallen naast elkaar, en daaronder de alinea met de methode. Die alinea
   staat er in de gewone tekstmaat en niet als voetnoot: hij hoort bij het cijfer en niet eronder. */
.wbhmarkt{margin-top:24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.wbhmkaart{padding:22px 26px;border-left:1px solid var(--rand)}
.wbhmkaart:first-child{padding-left:0;border-left:0}
.wbhmkaart b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:34px;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rood)}
.wbhmkaart span{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--zacht)}
.wbhmethode{margin-top:22px;font-size:15.5px;color:var(--zacht);max-width:76ch}

/* De twee hoeken: kamers en tijdelijke contracten. */
.wbhdrieblok{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.wbhdrieblok h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:20px;line-height:1.2}
.wbhdrieblok p{margin-top:11px;font-size:16px;line-height:1.5;color:var(--zacht)}
.wbhdrieblok .wbhna{font-size:14.5px}
.wbhdrieblok a{color:var(--inkt);font-weight:700}

/* Wat er verandert. Een tijdlijn met de datum links, want bij dit onderwerp is de datum het
   belangrijkste veld: hij zegt of iets al geldt of nog moet komen. */
.wbhnieuws{list-style:none;margin:32px 0 0;padding:0;border-top:1px solid var(--rand)}
.wbhnieuws li{display:grid;grid-template-columns:186px 1fr;column-gap:26px;padding:20px 0;
  border-bottom:1px solid var(--rand)}
.wbhndatum{font-family:Gabarito,sans-serif;font-weight:800;font-size:15.5px;color:var(--rood);
  line-height:1.3}
.wbhnieuws b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:18px;
  line-height:1.25}
.wbhnieuws p{margin-top:8px;font-size:16px;line-height:1.5;color:var(--zacht);max-width:62ch}
.wbhnieuwsvoet{margin-top:22px;max-width:76ch}

/* De routes die openblijven. Een genummerde lijst met een eigen nummer, want de standaard
   lijstnummers van de browser staan buiten de tekstkolom en breken de uitlijning met de kopblokken
   erboven. Een kolom en niet twee: deze drie horen als volgorde gelezen te worden, van de
   scherpste route naar de ruimste. */
.wbhroute{list-style:none;counter-reset:wbhnr;margin:40px 0 0;padding:0;display:grid;row-gap:26px}
.wbhroute li{counter-increment:wbhnr;display:grid;grid-template-columns:32px 1fr;column-gap:14px;
  align-items:start}
.wbhroute li::before{content:counter(wbhnr);font-family:Gabarito,sans-serif;font-weight:900;
  font-size:21px;line-height:1.15;color:var(--rood);font-variant-numeric:tabular-nums}
.wbhroute b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:18px;
  line-height:1.25}
.wbhroute p{margin-top:7px;color:var(--zacht);font-size:16px;line-height:1.5;max-width:44em}

/* De bronnen. Twee kolommen, want het zijn korte blokken en een enkele kolom zou een halve meter
   lege ruimte rechts overlaten aan het eind van de pagina. */
.wbhbronnen{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:22px 32px}
.wbhbronnen li{border-top:1px solid var(--rand);padding-top:16px}
.wbhbronnen b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  line-height:1.2}
.wbhbronnen i{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--zacht)}
.wbhbronnen p{margin-top:8px;font-size:15px;line-height:1.45;color:var(--zacht)}
.wbhbronnen a{display:inline-block;margin-top:9px;font-size:14px;color:var(--inkt);
  font-weight:700;word-break:break-word}

@container site (max-width: 1100px){
  /* De drie getallen van de steekproef en de drie hoeken eronder gaan onder elkaar. */
  .wbhmarkt{grid-template-columns:1fr}
  .wbhmkaart{padding:20px 0;border-left:0;border-top:1px solid var(--rand)}
  .wbhmkaart:first-child{padding-top:20px;border-top:0}
  .wbhdrieblok,.wbhwaarom{grid-template-columns:1fr}
  .wbhbronnen{grid-template-columns:1fr}
}
@container site (max-width: 900px){
  /* De check en de rekenaar staan hier naast een kolom die zelf al te smal is geworden. Onder
     elkaar, met het antwoord onder de vragen in plaats van ernaast. */
  .wbhcheck,.wbhreken{grid-template-columns:1fr;gap:24px}
  .wbhuit{border-left:0;border-top:3px solid var(--rood);padding:18px 0 0}
  /* De staaf in de grondslagenlijst valt hier weg: naast een naam en een aantal blijft er in een
     kolom van 200 pixels geen leesbare staaf over, en het aantal draagt het verhaal al. */
  .wbhartikelen li{grid-template-columns:1fr 92px}
  .wbhabaan{display:none}
  /* De datum boven de kop in plaats van ernaast. */
  .wbhnieuws li{grid-template-columns:1fr;row-gap:7px}
}
@container site (max-width: 720px){
  /* Op een telefoon staat het nummer dicht op de kop, anders houdt het 32 pixels bezet naast een
     tekstkolom die er zelf al te weinig heeft. */
  .wbhroute{margin-top:28px;row-gap:22px}
  .wbhroute li{grid-template-columns:26px 1fr;column-gap:11px}
  .wbhroute li::before{font-size:18px}
  .wbhroute b{font-size:17px}
  .wbhroute p{font-size:15.5px}
  /* De rechterhelft van een regel in het donkere paneel is op een telefoon te lang voor een regel
     naast het label. Onder elkaar, met het label als bovenregel. */
  .wbhrij{grid-template-columns:1fr;row-gap:3px}
  .wbhrij b{text-align:left}
  .wbhnoot{padding:16px 18px;font-size:14.5px}
  .wbhcheck{padding:20px 18px 18px}
  /* Twee kolommen laten voor een grondslag als "art. 7:247 BW jo. art. 3 lid 2 Uhw" nog drie
     woorden per regel over. Het label boven de waarde, met wat lucht tussen de paren. */
  .wbhuit dl{grid-template-columns:1fr;row-gap:0}
  .wbhuit dt{margin-top:12px}
  .wbhuit dt:first-child{margin-top:0}
  .wbhuit dd{margin-top:2px}
  /* Drie kolommen met een bedrag erin passen niet op 390 pixels; dan breekt "1.157,95" af. Het
     jaar boven de twee bedragen, en de twee bedragen naast elkaar. */
  .wbhjaren li{grid-template-columns:1fr 1fr;column-gap:14px;row-gap:6px}
  .wbhjjaar{grid-column:1/-1}
  .wbhjaren li.wbhsprong{padding-left:0}
  .wbhjgrens,.wbhjsoc{font-size:16px}
  .wbhjaarkop h3{font-size:21px}
  .wbhmkaart b{font-size:29px}
  .wbhartikelen li{grid-template-columns:1fr 76px;column-gap:14px}
  .wbhan{font-size:18px}
  .wbhanaam b{font-size:16px}
  .wbhkopje{font-size:20px}
  .wbhnieuws b{font-size:17px}
  .wbhnieuws p{font-size:15.5px}
  .wbhdrieblok p,.wbhposten li{font-size:15.5px}
}

/* ---------- pagina: afrekening servicekosten ---------- */
/* Deze pagina heeft in de lopende tekst veel links: naar huurpunten, naar de Huurcommissie,
   naar de uitspraken en naar de wet betaalbare huur. Zonder deze regel erven die de
   standaardkleur van de browser, en dat is het enige blauw op de hele site. Een klasse op de
   omhullende kolom in plaats van een stijl per link, zodat een nieuwe link in dezelfde alinea
   vanzelf goed staat. De knop moet er wel buiten blijven: die is een a-element met lichte tekst
   op een zwart vlak, en deze regel maakte hem zwart op zwart, dus onleesbaar. */
.skl a:not(.knop){color:var(--inkt);font-weight:700}

/* ---- het formulier naast de brief ----
   De heldensectie is hier geen tekst met een plaatje ernaast maar een werkbank: links de
   vragen, rechts wat eruit komt. Op een breed scherm mag de rechterkolom daarom ruimer zijn dan
   de 520 pixels die .hheld standaard geeft, want er staat een brief in en geen formuliertje. */
.skhero .r{grid-template-columns:minmax(0,1fr) minmax(0,560px)}
.skhero h1{font-size:48px}
.skhero p.sub{max-width:30em}
.skform{margin-top:30px;display:flex;flex-direction:column;gap:16px;max-width:640px}
.skpaar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:16px}
.skvak{display:block}
.skvak > span{display:block;margin-bottom:7px;font-size:14.5px;font-weight:700;
  color:var(--zacht)}
.skvak .veld{width:100%}
/* Een select is geen tekstveld: zonder deze regel erft hij de systeemhoogte van de browser en
   staat hij naast een invoerveld van 52 pixels een kop kleiner. */
select.veld{line-height:normal;padding-right:12px}
.skvink{border:0;padding:0;margin:2px 0 0}
.skvink legend{padding:0;margin-bottom:10px;font-size:14.5px;font-weight:700;color:var(--zacht)}
.skvink label{display:flex;align-items:flex-start;gap:11px;padding:7px 0;font-size:16px;
  line-height:1.35;cursor:pointer}
/* Het vakje zelf op 20 pixels met wat lucht eromheen, zodat het raakvlak van de regel als
   geheel ruim boven de 44 pixels uitkomt en een duim er zonder mikken op landt. */
.skvink input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:var(--rood)}

/* ---- de brief zelf ----
   Hetzelfde kader als het antwoordpaneel op de uitsprakenpagina, zodat de site er overal
   hetzelfde uitziet als er een antwoord in beeld komt. */
.skbrief{background:var(--papier2);border-radius:6px;padding:24px 24px 22px}
.skbrief .kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:16px;border-bottom:1px solid var(--rand)}
.skbrief .kop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;line-height:1.2}
.skbrief .kop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);font-weight:700;white-space:nowrap}
.skstand{margin-top:16px;display:grid;grid-template-columns:minmax(0,1fr) auto;row-gap:9px;
  column-gap:18px;font-size:15px}
.skstand dt{color:var(--zacht)}
.skstand dd{margin:0;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.skbrieflabel{display:block;margin-top:18px;padding-top:16px;border-top:1px solid var(--rand);
  font-size:14.5px;font-weight:700;color:var(--zacht)}
/* Een brief hoort er als een brief uit te zien, dus een vaste letterbreedte en ruime
   regelafstand. Verticaal wel kunnen groeien, want de tekst wordt langer zodra er vinkjes bij
   komen, en dan hoort er geen tweede schuifbalk in het kader te verschijnen. */
#skbrieftekst{margin-top:10px;width:100%;min-height:340px;resize:vertical;
  border:1.5px solid var(--rand);border-radius:6px;background:#fff;color:var(--inkt);
  padding:16px 16px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:14px;line-height:1.65}
#skbrieftekst:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
/* Knopruimte: de knop krijgt zijn eigen lucht in de regel zelf, zodat er nooit tekst tegenaan
   komt te staan als er later iets bij wordt gezet. */
.skknoppen{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
.sklink{color:var(--inkt);font-weight:700;font-size:15px}
.skmelding{margin-top:12px;min-height:20px;font-size:14.5px;color:var(--rood)}
.skvoet{margin-top:14px;padding-top:14px;border-top:1px solid var(--rand);font-size:14px;
  line-height:1.5;color:var(--zacht);max-width:none}

/* ---- de zes situaties ----
   De opzet van het Juridisch Loket: niet uitleggen maar sorteren. Drie naast elkaar, elk met
   het aantal zaken uit ons eigen register eronder, want dat is wat hij niet heeft. */
.skkies{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.skkaart{display:flex;flex-direction:column;gap:9px;padding:22px 22px 20px;
  background:var(--papier2);border-radius:6px;text-decoration:none;color:var(--inkt);
  border:1px solid transparent;transition:border-color .12s ease}
.skkaart:hover{border-color:var(--inkt)}
.skkaart:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.skkaart b{font-family:Gabarito,sans-serif;font-weight:800;font-size:18px;line-height:1.2}
.skkaart p{margin:0;font-size:15.5px;line-height:1.45;color:var(--zacht);max-width:none}
.skkaart span{margin-top:auto;padding-top:9px;font-size:13px;letter-spacing:.04em;
  font-weight:700;color:var(--rood);font-variant-numeric:tabular-nums}

/* ---- de uitkomstverdeling ----
   Naam en uitleg links, staaf in het midden, aantal en aandeel rechts. Geen table-element, want
   op een telefoon moet elke rij een blokje worden en dat kan een tabel niet zonder de betekenis
   van de kolommen kwijt te raken. */
.skuit{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rand)}
.skuit li{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(120px,1fr) 118px;
  align-items:center;column-gap:26px;padding:16px 0;border-bottom:1px solid var(--rand)}
.skuit .naam b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17.5px;
  line-height:1.2}
.skuit .naam span{display:block;margin-top:5px;font-size:14.5px;line-height:1.45;
  color:var(--zacht)}
.skuit .baan{display:block;height:10px;border-radius:3px;background:var(--rand)}
.skuit .baan i{display:block;height:100%;border-radius:3px;background:var(--rood)}
.skuit .n{text-align:right}
.skuit .n b{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;
  font-variant-numeric:tabular-nums}
.skuit .n span{display:block;margin-top:3px;font-size:13.5px;color:var(--zacht);
  font-variant-numeric:tabular-nums}

/* ---- de groei per jaar ---- */
.skjaar{list-style:none;margin:22px 0 0;padding:0}
.skjaar li{display:grid;grid-template-columns:56px minmax(0,1fr) 62px;align-items:center;
  column-gap:14px;padding:7px 0;font-size:15px}
.skjaar .jr{font-family:Gabarito,sans-serif;font-weight:800}
.skjaar .baan{display:block;height:12px;border-radius:3px;background:var(--rand)}
.skjaar .baan i{display:block;height:100%;border-radius:3px;background:var(--rood)}
.skjaar b{text-align:right;font-variant-numeric:tabular-nums}
/* Het lopende jaar is nog niet compleet, dus die staaf krijgt een lichtere vulling. Zonder dat
   leest een halve staaf als een daling die er niet is. */
.skjaar .loopt .baan i{background:repeating-linear-gradient(135deg,var(--rood),var(--rood) 4px,
  var(--papier2) 4px,var(--papier2) 8px)}
.skna{margin-top:30px}

/* ---- de drie stappen in de donkere sectie ---- */
.skstappen{background:var(--inkt2);border-radius:6px;padding:24px 24px 22px}
.skstappen .kop{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding-bottom:16px;border-bottom:1px solid #3A342D}
.skstappen .kop b{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px}
.skstappen .kop small{font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  font-weight:700;color:#B5ADA3;white-space:nowrap}
.skstappen ol{list-style:none;counter-reset:sknr;margin:6px 0 0;padding:0}
.skstappen li{counter-increment:sknr;display:grid;grid-template-columns:30px minmax(0,1fr);
  column-gap:14px;align-items:start;padding:16px 0;border-bottom:1px solid #3A342D}
.skstappen li::before{content:counter(sknr);font-family:Gabarito,sans-serif;font-weight:900;
  font-size:20px;line-height:1.2;color:var(--oranje);font-variant-numeric:tabular-nums}
.skstappen b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  line-height:1.25}
.skstappen p{margin-top:7px;font-size:15.5px;line-height:1.5;color:#B5ADA3;max-width:none}
.skstappen .voet{padding-top:16px;font-size:13.5px;line-height:1.5;color:#8E877D}

/* ---- de drie termijnen ---- */
.sktermijn{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rand)}
.sktermijn li{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);column-gap:40px;
  align-items:start;padding:22px 0;border-bottom:1px solid var(--rand)}
.sktermijn .tk b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:26px;
  line-height:1.1;letter-spacing:-.025em}
.sktermijn .tk span{display:block;margin-top:6px;font-size:13.5px;letter-spacing:.04em;
  font-weight:700;color:var(--rood)}
.sktermijn p{margin:0;font-size:16.5px;line-height:1.55;color:var(--zacht);max-width:none}

/* ---- de tien manieren ----
   Een genummerde lijst met een eigen nummer, want de standaard lijstnummers van de browser
   staan buiten de tekstkolom en breken de uitlijning met de kopblokken erboven. */
.skpost{list-style:none;counter-reset:skp;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));column-gap:56px;row-gap:26px}
/* align-content erbij: zonder dat rekt de browser de twee automatische rijen van elke li op
   tot de hoogte van de hoogste li in dezelfde rasterrij, en dan zweeft de alinea van de korte
   kolom los onder haar eigen kop. */
.skpost li{counter-increment:skp;display:grid;grid-template-columns:32px minmax(0,1fr);
  column-gap:14px;align-items:start;align-content:start}
.skpost li::before{content:counter(skp);font-family:Gabarito,sans-serif;font-weight:900;
  font-size:21px;line-height:1.15;color:var(--rood);font-variant-numeric:tabular-nums}
.skpost b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:18px;
  line-height:1.25;grid-column:2}
.skpost p{margin-top:7px;grid-column:2;font-size:16px;line-height:1.5;color:var(--zacht);
  max-width:none}
.skallin{margin-top:36px;padding:22px 24px;background:var(--papier2);border-radius:6px;
  border-left:3px solid var(--inkt);max-width:62em}
.skallin b{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px}
.skallin p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--zacht);max-width:none}

/* ---- de verantwoording ---- */
.skbronsec{border-top:1px solid var(--rand)}
.skbron{margin-top:36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  column-gap:62px;align-items:start}
.skbron dl{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);row-gap:0;
  column-gap:20px;border-top:1px solid var(--rand)}
.skbron dt{padding:13px 0;font-size:14.5px;color:var(--zacht);
  border-bottom:1px solid var(--rand)}
.skbron dd{margin:0;padding:13px 0;font-size:15.5px;line-height:1.45;
  border-bottom:1px solid var(--rand)}
.sknb h3{font-size:19px}
.sknb h3 + p{margin-top:10px}
.sknb p{font-size:15.5px;line-height:1.6;color:var(--zacht);max-width:none}
.sknb h3:not(:first-child){margin-top:24px}
/* Twee alineas onder dezelfde kop plakten aan elkaar vast tot een blok van acht regels. */
.sknb p + p{margin-top:12px}

@container site (max-width:1280px){
  /* Drie situatiekaarten naast elkaar laten op een tablet nog twee woorden per regel over. */
  .skkies{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@container site (max-width:1100px){
  /* De heldensectie klapt hier al in bij .hheld, dus de brief staat vanaf hier onder het
     formulier en mag de volle breedte hebben. */
  .skhero .r{grid-template-columns:1fr}
  .skpost{grid-template-columns:1fr;row-gap:22px}
  .skbron{grid-template-columns:1fr;row-gap:32px}
  .sktermijn li{grid-template-columns:1fr;row-gap:10px}
}
@container site (max-width:900px){
  .skhero h1{font-size:38px}
  /* Twee velden naast elkaar houden onder de negenhonderd geen leesbare labels over. */
  .skpaar{grid-template-columns:1fr}
  /* Het aandeel rechts van de staaf botst hier op het aantal, dus de staaf verdwijnt en het
     getal blijft. Een staaf die te kort is om te vergelijken zegt minder dan niets. */
  .skuit li{grid-template-columns:minmax(0,1fr) 104px;column-gap:18px}
  .skuit .baan{display:none}
}
@container site (max-width:720px){
  .skhero h1{font-size:33px}
  .skhero p.sub{font-size:18px}
  .skform{margin-top:24px;gap:14px}
  .skvink label{padding:9px 0;font-size:15.5px}

  .skkies{margin-top:26px;grid-template-columns:1fr;gap:12px}
  .skkaart{padding:20px 18px 18px}
  .skkaart b{font-size:17px}

  .skbrief{padding:20px 18px 18px}
  .skstand{grid-template-columns:1fr;row-gap:0;font-size:14.5px}
  .skstand dt{padding-top:10px}
  .skstand dd{text-align:left;padding-bottom:2px}
  /* Een brief van tachtig tekens breed past niet op 390 pixels, dus de letter wordt kleiner en
     het vak korter. Wie hem toch groter wil, kan het vak zelf uittrekken. */
  #skbrieftekst{min-height:300px;font-size:12.5px;padding:14px 13px;line-height:1.6}
  .skknoppen .knop{width:100%}

  /* Elke rij wordt een blokje: naam boven, aantal eronder. Twee kolommen op 390 pixels zetten
     het aantal naast de verkeerde naam. */
  .skuit{margin-top:26px}
  .skuit li{grid-template-columns:1fr;row-gap:8px;padding:16px 0}
  .skuit .n{text-align:left;display:flex;align-items:baseline;gap:12px}
  .skuit .n span{margin-top:0}

  .skjaar li{grid-template-columns:50px minmax(0,1fr) 56px;column-gap:11px;font-size:14.5px}

  .skstappen{padding:20px 18px 18px}
  .skstappen li{grid-template-columns:26px minmax(0,1fr);column-gap:11px;padding:14px 0}
  .skstappen li::before{font-size:18px}

  .sktermijn{margin-top:26px}
  .sktermijn li{padding:18px 0}
  .sktermijn .tk b{font-size:23px}
  .sktermijn p{font-size:15.5px}

  .skpost{margin-top:26px;row-gap:20px}
  .skpost li{grid-template-columns:26px minmax(0,1fr);column-gap:11px}
  .skpost li::before{font-size:18px}
  .skpost b{font-size:17px}
  .skpost p{font-size:15.5px}
  .skallin{margin-top:26px;padding:18px 18px 18px 16px}

  .skbron{margin-top:26px;row-gap:26px}
  /* Twee kolommen in een begrippenlijst laten op 390 pixels een waarde van drie woorden per
     regel over. Onder elkaar leest hij als een lijst en past hij wel. */
  .skbron dl{grid-template-columns:1fr;row-gap:0}
  .skbron dt{padding:12px 0 0;border-bottom:0}
  .skbron dd{padding:4px 0 12px}
}

/* ---------- pagina: middenhuur ---------- */
/* In de lopende tekst staan links naar huurpunten, wet betaalbare huur, huurcommissie, steden en
   servicekosten. Zonder deze regel erven die de standaardkleur van de browser, en dat is het enige
   blauw op de hele site. Een klasse op de omhullende alinea in plaats van een stijl per link,
   zodat een nieuwe link in dezelfde alinea vanzelf goed staat. */
.mhlink a{color:var(--inkt);font-weight:700}
/* Dezelfde reden in de tekstkolom naast de rekenaar: daar staat een link naar huurpunten in
   een gewone alinea, en zonder deze regel is dat het enige blauw op de pagina. */
.mhrekentekst a{color:var(--inkt);font-weight:700}
/* Dezelfde reden, maar dan in de vragenlijst: de antwoorden staan in .vragen details p en die
   heeft in site.css geen linkkleur. */
.mhvragen details p a{color:var(--inkt);font-weight:700}

/* De drie banden. Drie gelijke kolommen met een lijn ertussen in plaats van drie omkaderde
   blokken: de kaders zouden de derde band, die juist geen maximum kent, hetzelfde gewicht geven
   als een bedrag. */
.mhdrie{margin-top:40px;display:grid;grid-template-columns:1fr 1fr 1fr;column-gap:0;
  border-top:1px solid var(--rand)}
.mhkaart{padding:26px 32px 4px;border-left:1px solid var(--rand)}
.mhkaart:first-child{padding-left:0;border-left:0}
.mhpunt{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);font-weight:700}
.mhkaart b{display:block;margin-top:9px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:21px;line-height:1.15}
/* Tabelcijfers, zodat de bedragen onder elkaar dezelfde tekenbreedte houden en de komma's
   uitlijnen wanneer het oog van de ene kolom naar de volgende gaat. */
.mhbedrag{display:block;margin-top:12px;font-family:Gabarito,sans-serif;font-weight:900;
  font-size:30px;line-height:1;letter-spacing:-.03em;font-style:normal;
  font-variant-numeric:tabular-nums;color:var(--rood)}
/* De derde band noemt geen bedrag maar een woord. In cijferopmaak zou "geen maximum" als een
   bedrag gaan lezen dat er niet is, dus die krijgt de gewone tekstmaat en de zachte kleur. */
.mhvrij .mhbedrag{font-size:19px;line-height:1.2;letter-spacing:0;color:var(--zacht);
  font-variant-numeric:normal}
.mhkaart p{margin-top:14px;color:var(--zacht);font-size:15.5px;line-height:1.5}

/* De tabel van de hele band. Een raster van vakjes en geen tabel met randen: drieënveertig rijen
   onder elkaar is een halve meter scrollen, en een tabel van twee kolommen moet op een telefoon
   horizontaal schuiven. Dit raster zakt van vijf kolommen naar twee zonder dat er iets afbreekt.
   De minimale kolombreedte is 132 pixels, want daar past "1.228,07" met het euroteken nog in
   zonder af te breken. */
.mhtabel{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));
  gap:1px;background:var(--rand);border:1px solid var(--rand);border-radius:6px;overflow:hidden}
.mhvak{background:var(--papier);padding:13px 14px}
.mhvak span{display:block;font-size:12.5px;color:var(--zacht);letter-spacing:.03em;
  font-variant-numeric:tabular-nums}
.mhvak b{display:block;margin-top:4px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:16.5px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}

/* De twee ankerregels om de band heen. Ze staan apart en niet als eerste en laatste vakje in het
   raster, want 143 en 187 horen niet bij de band; zij markeren waar hij begint en ophoudt. */
.mhankers{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.mhanker{padding:18px 26px;border-left:1px solid var(--rand)}
.mhanker:first-child{padding-left:0;border-left:0}
.mhanker span{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);font-weight:700}
.mhanker b{display:block;margin-top:7px;font-family:Gabarito,sans-serif;font-weight:900;
  font-size:24px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  white-space:nowrap}
.mhanker i{display:block;margin-top:7px;font-style:normal;font-size:14px;line-height:1.4;
  color:var(--zacht)}
.mhtabelvoet{margin-top:22px}

/* De rekenaar van huurpunten in een tweekolomsvorm. .hsblok brengt zijn eigen zwarte doos mee, dus
   hier staat alleen waar hij komt te staan. */
.mhreken{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.mhrekentekst h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:21px;line-height:1.2}
.mhposten{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
/* De hele regel zit in een span en niet los naast het vetgedrukte woord. Zonder die span zijn de b
   en de tekst erna twee losse vakken in dezelfde flexregel, en dan zet de gap van elf pixels een
   gat tussen "WOZ-waarde" en de komma erachter, en breekt het vetgedrukte woord op een smal scherm
   in zijn eigen kolom af. */
.mhposten li{display:flex;align-items:baseline;gap:11px;font-size:16px;line-height:1.45;
  color:var(--zacht)}
.mhposten li::before{content:"";width:7px;height:7px;border-radius:100px;flex:0 0 auto;
  background:var(--rood);transform:translateY(-2px)}
.mhposten li > span{flex:1;min-width:0}
.mhposten b{color:var(--inkt)}
.mhrekentekst .tekst{margin-top:18px}
.mhnoot{background:var(--papier2);border-radius:6px;padding:18px 20px;color:var(--zacht);
  font-size:15px;line-height:1.5}
.mhnoot b{display:block;margin-bottom:6px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:15.5px;color:var(--inkt)}
/* De tekstkolom liep hier eerder een halve schermhoogte eerder af dan het zwarte blok ernaast, en
   dan staat er op een breed scherm een leeg vlak naast de rekenaar. Deze toelichting vult dat en
   zegt tegelijk het enige wat een bezoeker bij een schuif moet weten. */
.mhrekennoot{margin-top:22px}

/* De sectie over de datum. Een leeskolom en geen volle breedte: dit is de enige sectie op de
   pagina die uit lopende tekst bestaat, en een regel van 1.168 pixels leest niet. */
.mhdatumtekst{margin-top:30px;max-width:78ch}
.mhdatumtekst p.tekst{margin-top:16px;font-size:17.5px;line-height:1.55;color:var(--zacht)}
.mhdatumtekst p.tekst:first-child{margin-top:0}
.mhdatumtekst b{color:var(--inkt)}

/* De steekproef. Drie getallen naast elkaar, daaronder de verdeling per stad, en daaronder de
   alinea met de methode. Die alinea staat er in de gewone tekstmaat en niet als voetnoot: hij
   hoort bij het cijfer en niet eronder. */
.mhmarkt{margin-top:24px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.mhmkaart{padding:22px 26px;border-left:1px solid var(--rand)}
.mhmkaart:first-child{padding-left:0;border-left:0}
.mhmkaart b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:34px;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rood)}
.mhmkaart span{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--zacht)}
.mhna{margin-top:24px;max-width:76ch}
.mhsteden{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--rand)}
.mhsteden li{display:grid;grid-template-columns:150px 200px 1fr;column-gap:24px;
  align-items:center;padding:14px 0;border-bottom:1px solid var(--rand)}
.mhsnaam{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px}
.mhsbaan{display:block;height:10px;border-radius:100px;background:var(--papier2)}
.mhsbaan i{display:block;height:100%;border-radius:100px;background:var(--rood)}
.mhsn{font-size:15px;color:var(--zacht);line-height:1.4}
.mhsn b{font-family:Gabarito,sans-serif;font-weight:900;font-size:19px;color:var(--inkt);
  font-variant-numeric:tabular-nums}
.mhmethode{margin-top:24px;font-size:15.5px;color:var(--zacht);max-width:76ch}

/* De twee routes. Twee kolommen, want ze horen naast elkaar gelezen te worden: dat is precies de
   keuze die een bezoeker hier maakt. */
.mhroutes{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--rand)}
.mhroute{padding:28px 32px 4px;border-left:1px solid var(--rand)}
.mhroute:first-child{padding-left:0;border-left:0}
.mhrwet{display:block;font-size:12px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--zacht);font-weight:700}
.mhrkop b{display:block;margin-top:9px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:21px;line-height:1.15}
.mhrtotaal{display:block;margin-top:10px;font-family:Gabarito,sans-serif;font-weight:900;
  font-size:26px;line-height:1;letter-spacing:-.02em;font-style:normal;
  font-variant-numeric:tabular-nums;color:var(--rood)}
.mhruit{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--zacht);max-width:44ch}
.mhuitkomsten{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--rand)}
.mhuitkomsten li{display:grid;grid-template-columns:1fr 92px 62px;column-gap:16px;
  align-items:center;padding:11px 0;border-bottom:1px solid var(--rand)}
.mhunaam{font-size:15px;line-height:1.35}
.mhubaan{display:block;height:9px;border-radius:100px;background:var(--papier2)}
.mhubaan i{display:block;height:100%;border-radius:100px;background:var(--rood)}
.mhun{font-family:Gabarito,sans-serif;font-weight:800;font-size:16px;text-align:right;
  font-variant-numeric:tabular-nums}
/* De groei per jaar als staafjes met een vaste hoogte eronder. Een vaste hoogte en geen
   aspect-ratio, want anders wordt de rij op een smal scherm zo laag dat de staafjes verdwijnen. */
.mhjaren{margin-top:22px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;column-gap:8px;
  align-items:end;height:118px}
.mhjaar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;text-align:center}
.mhjaar i{display:block;width:100%;background:var(--rood);border-radius:3px 3px 0 0;order:3}
.mhjaar b{order:1;font-family:Gabarito,sans-serif;font-weight:800;font-size:13px;
  font-variant-numeric:tabular-nums;line-height:1.2}
.mhjaar span{order:4;margin-top:7px;font-size:12px;color:var(--zacht);
  font-variant-numeric:tabular-nums}
.mhjvoet{margin-top:14px;font-size:13px;line-height:1.5;color:var(--zacht);max-width:44ch}
.mhbronregel{margin-top:26px}

/* De vijf regels in het donkere paneel. Ze zitten in .hcstaven, dus op var(--inkt2), en daarom
   staat hier expliciet een lichte kleur op beide kolommen. Zonder die kleur erft de rechterhelft
   var(--inkt) uit de basisstijl van vet gezette tekst en valt zwart op zwart weg. */
.mhprij{display:grid;grid-template-columns:1fr auto;column-gap:18px;align-items:baseline;
  padding:13px 0;border-top:1px solid #332E27}
.mhprij:first-of-type{border-top:0}
.mhprij span{color:#9C948A;font-size:14.5px}
.mhprij b{color:var(--papier);font-family:Gabarito,sans-serif;font-weight:800;font-size:15.5px;
  text-align:right;line-height:1.3}

/* De drie korte antwoorden: huurverhoging, toewijzing en huurtoeslag. */
.mhkort{margin-top:36px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:28px}
.mhkort h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:20px;line-height:1.2}
.mhkort p{margin-top:11px;font-size:16px;line-height:1.5;color:var(--zacht)}
.mhkort a{color:var(--inkt);font-weight:700}

/* De bronnen. Twee kolommen, want het zijn korte blokken en een enkele kolom zou een halve meter
   lege ruimte rechts overlaten aan het eind van de pagina. */
.mhbronnen{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:22px 32px}
.mhbronnen li{border-top:1px solid var(--rand);padding-top:16px}
.mhbronnen b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  line-height:1.2}
.mhbronnen i{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--zacht)}
.mhbronnen p{margin-top:8px;font-size:15px;line-height:1.45;color:var(--zacht)}
.mhbronnen a{display:inline-block;margin-top:9px;font-size:14px;color:var(--inkt);
  font-weight:700;word-break:break-word}
.mhbijgewerkt{margin-top:28px}

@container site (max-width: 1100px){
  /* Drie kolommen naast elkaar laten in de smalste kolom nog maar twee woorden per regel over
     zodra de bandnaam en het bedrag er allebei in moeten. Onder de 1100 gaan ze onder elkaar, met
     een lijn boven elke band in plaats van ernaast. */
  .mhdrie{grid-template-columns:1fr;row-gap:0}
  .mhkaart{padding:22px 0 18px;border-left:0;border-top:1px solid var(--rand)}
  .mhkaart:first-child{padding-top:22px;border-top:0}
  .mhbedrag{font-size:26px}
  /* Hetzelfde voor de drie getallen van de steekproef, de twee routes en de drie korte
     antwoorden. */
  .mhmarkt{grid-template-columns:1fr}
  .mhmkaart{padding:20px 0;border-left:0;border-top:1px solid var(--rand)}
  .mhmkaart:first-child{padding-top:20px;border-top:0}
  .mhroutes{grid-template-columns:1fr}
  .mhroute{padding:24px 0 18px;border-left:0;border-top:1px solid var(--rand)}
  .mhroute:first-child{padding-top:0;border-top:0}
  .mhkort{grid-template-columns:1fr}
  .mhbronnen{grid-template-columns:1fr}
}
@container site (max-width: 900px){
  /* De rekenaar staat hier naast een kolom die zelf al te smal is geworden. Onder elkaar. */
  .mhreken{grid-template-columns:1fr;gap:24px}
  /* De staaf in de stedenlijst valt weg: naast een naam en een zin blijft er in een kolom van
     200 pixels geen leesbare staaf over, en de zin draagt het verhaal al. */
  .mhsteden li{grid-template-columns:120px 1fr;column-gap:18px}
  .mhsbaan{display:none}
}
@container site (max-width: 720px){
  /* Twee kolommen met een bedrag van acht tekens passen niet op 390 pixels. Het raster zakt naar
     twee kolommen en de ankers gaan onder elkaar. */
  .mhtabel{grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
  .mhvak{padding:11px 12px}
  .mhvak b{font-size:15.5px}
  .mhankers{grid-template-columns:1fr}
  .mhanker{padding:16px 0;border-left:0;border-top:1px solid var(--rand)}
  .mhanker:first-child{padding-top:0;border-top:0}
  .mhanker b{font-size:21px}
  .mhkaart b{font-size:19px}
  .mhbedrag{font-size:24px}
  .mhkaart p{font-size:15px}
  .mhmkaart b{font-size:29px}
  .mhdatumtekst p.tekst{font-size:16.5px}
  /* De rechterhelft van een regel in het donkere paneel is op een telefoon te lang voor een regel
     naast het label. Onder elkaar, met het label als bovenregel. */
  .mhprij{grid-template-columns:1fr;row-gap:3px}
  .mhprij b{text-align:left}
  /* Drie kolommen in de uitkomstenlijst worden hier twee: de staaf gaat eruit, want naast een
     omschrijving van vier woorden blijft er niets van over. */
  .mhuitkomsten li{grid-template-columns:1fr 62px;column-gap:14px}
  .mhubaan{display:none}
  .mhjaren{height:96px;column-gap:5px}
  .mhjaar b{font-size:11.5px}
  .mhjaar span{font-size:11px}
  .mhsteden li{grid-template-columns:1fr;row-gap:4px}
  .mhsnaam{font-size:16px}
  .mhkort p,.mhposten li{font-size:15.5px}
  .mhnoot{padding:16px 18px;font-size:14.5px}
}

/* ---------- /huurverhoging ----------
   Alleen wat deze pagina echt nodig heeft. De held, de bewijsstrook, de vragen en de knoppen
   komen uit de bestaande stijl; hieronder staan de blokken die er nog niet waren. */

/* De drie maxima naast elkaar. Een raster van drie en geen tabel: er staan per segment vijf
   dingen onder elkaar (naam, band, percentage, datum, formule) en die passen niet in een rij. */
.hvmax{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.hvmkaart{padding:26px 30px;border-left:1px solid var(--rand);display:flex;
  flex-direction:column}
.hvmkaart:first-child{padding-left:0;border-left:0}
.hvmnaam{font-family:Gabarito,sans-serif;font-weight:800;font-size:19px;line-height:1.15}
.hvmpunt{display:block;margin-top:4px;font-size:13.5px;color:var(--zacht)}
/* Het percentage is het antwoord waarvoor iemand hier komt, dus het is het grootste ding in de
   kaart. Tabelcijfers, want de drie percentages horen onder elkaar uit te lijnen. */
.hvmpct{display:block;margin-top:14px;font-family:Gabarito,sans-serif;font-weight:900;
  font-size:44px;line-height:1;letter-spacing:-.03em;color:var(--rood);
  font-variant-numeric:tabular-nums}
.hvmwanneer{display:block;margin-top:10px;font-size:15px;line-height:1.4;color:var(--inkt);
  font-weight:700}
.hvmkaart p{margin-top:12px;font-size:15px;line-height:1.5;color:var(--zacht)}
.hvmlet{margin-top:10px}
/* De vindplaats staat onderaan de kaart en niet in een voetnoot: wie het percentage overneemt
   hoort in dezelfde oogopslag te zien waar het staat. margin-top:auto duwt hem naar de onderkant
   zodat de drie bronregels op een lijn liggen, ook als de tekst erboven verschilt van lengte. */
.hvmbron{display:block;margin-top:auto;padding-top:16px;font-size:12.5px;line-height:1.45;
  color:var(--zacht)}

/* De inkomensbanden. Drie kolommen met een vaste eerste kolom, zodat "Eenpersoons" en
   "Meerpersoons" onder elkaar uitlijnen en het oog de twee groepen ziet. */
.hvinkomen{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rand)}
.hvinkomen li{display:grid;grid-template-columns:150px 1fr auto;column-gap:24px;
  align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rand)}
.hvihuis{font-size:14.5px;color:var(--zacht)}
.hviband{font-size:16px;line-height:1.4}
.hvibedrag{font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.hvna{margin-top:22px;max-width:76ch}

/* De rekenaar in een tweekolomsvorm. .hsblok brengt zijn eigen zwarte doos mee, dus hier staat
   alleen waar hij komt te staan. */
.hvreken{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start}
.hvrekentekst h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:21px;line-height:1.2}
.hvposten{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
/* De hele regel zit in een span en niet los naast het vetgedrukte woord. Zonder die span zijn de
   b en de tekst erna twee losse vakken in dezelfde flexregel, en dan zet de gap van elf pixels
   een gat tussen "WOZ-waarde" en de komma erachter. */
.hvposten li{display:flex;align-items:baseline;gap:11px;font-size:16px;line-height:1.45;
  color:var(--zacht)}
.hvposten li::before{content:"";width:7px;height:7px;border-radius:100px;flex:0 0 auto;
  background:var(--rood);transform:translateY(-2px)}
.hvposten li > span{flex:1;min-width:0}
.hvposten b{color:var(--inkt)}
.hvrekentekst .tekst{margin-top:18px}
.hvnoot{background:var(--papier2);border-radius:6px;padding:18px 20px;color:var(--zacht);
  font-size:15px;line-height:1.5}
.hvnoot b{display:block;margin-bottom:6px;font-family:Gabarito,sans-serif;font-weight:800;
  font-size:15.5px;color:var(--inkt)}
.hvrekennoot{margin-top:22px}

/* De drie getallen van de bezwaarroute. Het derde getal is de kern van de sectie en krijgt
   daarom dezelfde rode nadruk als een percentage hierboven. */
.hvtel{margin-top:36px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.hvtkaart{padding:24px 28px;border-left:1px solid var(--rand)}
.hvtkaart:first-child{padding-left:0;border-left:0}
.hvtkaart b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:38px;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rood)}
.hvtkaart span{display:block;margin-top:11px;font-size:15px;line-height:1.45;color:var(--zacht)}
.hvbronregel{margin-top:26px;max-width:76ch}
.hvbronregel a{color:var(--inkt);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid var(--rand)}
.hvbronregel a:hover{border-bottom-color:var(--inkt)}

/* De zes gronden. Twee kolommen, want het zijn korte blokken en een enkele kolom zou een halve
   meter lege ruimte rechts overlaten. Het nummer staat in een eigen kolom zodat de tekst van
   alle zes op dezelfde lijn begint. */
.hvgronden{list-style:none;margin:36px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:0 44px}
.hvgronden li{display:grid;grid-template-columns:34px 1fr;gap:16px;align-items:baseline;
  padding:20px 0;border-top:1px solid var(--rand)}
.hvgn{font-family:Gabarito,sans-serif;font-weight:900;font-size:17px;color:var(--rood);
  font-variant-numeric:tabular-nums}
.hvgronden b{display:block;font-family:Gabarito,sans-serif;font-weight:700;font-size:18px;
  line-height:1.2;letter-spacing:-.015em}
.hvgronden span{display:block;margin-top:5px;font-size:15px;color:var(--zacht);line-height:1.45}

/* De tweede route. Tekst links, cijfers en jaren rechts. */
.hvbeding{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.hvbtekst .tekst{margin-top:0;font-size:17px;line-height:1.55;color:var(--zacht);max-width:52ch}
.hvbtekst .tekst + .tekst{margin-top:16px}
.hvbtekst .hvnoot{margin-top:22px}
.hvbcijfers{display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.hvbkaart{padding:20px 24px;border-left:1px solid var(--rand)}
.hvbkaart:first-child{padding-left:0;border-left:0}
.hvbkaart b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:32px;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--rood)}
.hvbkaart span{display:block;margin-top:10px;font-size:14.5px;line-height:1.45;
  color:var(--zacht)}
/* De groei per jaar als staafjes met een vaste hoogte. Een vaste hoogte en geen aspect-ratio,
   want anders wordt de rij op een smal scherm zo laag dat de staafjes verdwijnen. */
.hvjaren{margin-top:26px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;column-gap:8px;
  align-items:end;height:124px}
.hvjaar{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;
  height:100%;text-align:center}
.hvjaar i{display:block;width:100%;background:var(--rood);border-radius:3px 3px 0 0;order:3}
.hvjaar b{order:1;font-family:Gabarito,sans-serif;font-weight:800;font-size:13px;
  font-variant-numeric:tabular-nums;line-height:1.2}
.hvjaar span{order:4;margin-top:7px;font-size:12px;color:var(--zacht);
  font-variant-numeric:tabular-nums}
.hvjvoet{margin-top:14px;font-size:13px;line-height:1.5;color:var(--zacht);max-width:48ch}

/* De vier routes. Naam en artikel links, staaf in het midden, het aantal rechts. De staaf loopt
   op het aandeel, maar het getal ernaast is het aantal, want dat is wat er geteld is. */
.hvroutes{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--rand)}
.hvroutes li{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr) 130px;
  column-gap:28px;
  align-items:center;padding:16px 0;border-bottom:1px solid var(--rand)}
.hvrnaam b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  line-height:1.2}
.hvrnaam span{display:block;margin-top:4px;font-size:13px;color:var(--zacht)}
.hvrbaan{display:block;height:10px;border-radius:100px;background:var(--papier2)}
.hvrbaan i{display:block;height:100%;border-radius:100px;background:var(--rood)}
.hvrn{font-family:Gabarito,sans-serif;font-weight:800;font-size:16px;text-align:right;
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* De twee stukken lopende tekst op de pagina. Een leeskolom en geen volle breedte, want een
   regel van 1.168 pixels leest niet. De h3 hoort bij dezelfde kolom. */
.hvuitleg{margin-top:30px;max-width:78ch}
.hvuitleg h3{font-family:Gabarito,sans-serif;font-weight:800;font-size:20px;line-height:1.2}
.hvuitleg p.tekst{margin-top:16px;font-size:17.5px;line-height:1.55;color:var(--zacht)}
.hvuitleg p.tekst:first-child{margin-top:0}

/* Zonder deze drie regels krijgen de verwijzingen de standaardkleur van de browser: blauw en
   onderstreept, terwijl elke andere link op de site inkt of rood is. De regel voor de vragen
   staat op .vragen zelf, want een details-antwoord heeft geen eigen klasse om aan te haken. */
.hvuitleg a,.hvrekentekst a,.hvlet a{color:var(--inkt);font-weight:700}
.vragen details p a{color:var(--inkt);font-weight:700}

/* De bronnen. Twee kolommen, want het zijn korte blokken en een enkele kolom zou een halve meter
   lege ruimte rechts overlaten aan het eind van de pagina. */
.hvbronnen{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;
  gap:22px 32px}
.hvbronnen li{border-top:1px solid var(--rand);padding-top:16px}
.hvbronnen b{display:block;font-family:Gabarito,sans-serif;font-weight:800;font-size:17px;
  line-height:1.2}
.hvbronnen i{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--zacht)}
.hvbronnen p{margin-top:8px;font-size:15px;line-height:1.45;color:var(--zacht)}
.hvbronnen a{display:inline-block;margin-top:9px;font-size:14px;color:var(--inkt);
  font-weight:700;word-break:break-word}
.hvbijgewerkt{margin-top:28px}
/* Zonder deze regel kreeg de verwijzing in de heldtekst de standaardkleur van de browser: blauw
   en onderstreept, terwijl elke andere link op de site inkt of rood is. */
.hvlink a{color:var(--inkt);font-weight:700}

@container site (max-width: 1100px){
  /* Drie kolommen naast elkaar laten in de smalste kolom nog maar twee woorden per regel over
     zodra de segmentnaam en het percentage er allebei in moeten. Onder de 1100 gaan ze onder
     elkaar, met een lijn boven elk blok in plaats van ernaast. */
  .hvmax{grid-template-columns:1fr}
  .hvmkaart{padding:22px 0 20px;border-left:0;border-top:1px solid var(--rand)}
  .hvmkaart:first-child{padding-top:22px;border-top:0}
  .hvmpct{font-size:36px}
  .hvmbron{margin-top:14px}
  /* Hetzelfde voor de drie getallen van de bezwaarroute en de bronnen. */
  .hvtel{grid-template-columns:1fr}
  .hvtkaart{padding:20px 0;border-left:0;border-top:1px solid var(--rand)}
  .hvtkaart:first-child{padding-top:20px;border-top:0}
  .hvgronden{grid-template-columns:1fr;gap:0}
  .hvbronnen{grid-template-columns:1fr}
}
@container site (max-width: 900px){
  /* De rekenaar en de tweede route staan hier naast een kolom die zelf al te smal is geworden. */
  .hvreken{grid-template-columns:1fr;gap:24px}
  .hvbeding{grid-template-columns:1fr;gap:28px}
  .hvbtekst .tekst{max-width:none}
  /* De staaf in de routelijst wordt smaller voordat hij helemaal verdwijnt. */
  .hvroutes li{grid-template-columns:1fr 120px 120px;column-gap:20px}
}
@container site (max-width: 720px){
  .hvmpct{font-size:32px}
  .hvtkaart b{font-size:32px}
  .hvbcijfers{grid-template-columns:1fr}
  .hvbkaart{padding:18px 0;border-left:0;border-top:1px solid var(--rand)}
  .hvbkaart:first-child{padding-top:0;border-top:0}
  .hvjaren{height:104px;column-gap:5px}
  .hvjaar b{font-size:11.5px}
  .hvjaar span{font-size:11px}
  /* Drie kolommen in de inkomenslijst worden twee: het huishouden gaat als bovenregel boven de
     band staan, want naast een band van dertig tekens blijft er geen kolom van 150 pixels over. */
  .hvinkomen li{grid-template-columns:1fr auto;column-gap:16px;row-gap:3px}
  .hvihuis{grid-column:1 / -1}
  /* De staaf in de routelijst valt hier weg: naast een naam, een artikel en een aantal blijft er
     op 390 pixels geen leesbare staaf over, en het aantal draagt het verhaal al. */
  .hvroutes li{grid-template-columns:1fr auto;column-gap:16px}
  .hvrbaan{display:none}
  .hvposten li,.hvgronden span{font-size:15.5px}
  .hvnoot{padding:16px 18px;font-size:14.5px}
  .hvbtekst .tekst{font-size:16.5px}
}

/* 24-9: op 320 px mocht het label niet afbreken en schoof de pagina 3 px opzij */
.hcondblok .kop small{white-space:normal;text-align:right}

/* pagina: gebreken (nieuw) */
.gbdrie{margin-top:22px;display:flex;flex-direction:column;gap:10px;max-width:34em}
.gbdrie li{display:grid;grid-template-columns:22px 1fr;column-gap:12px;font-size:18px;line-height:1.45;color:var(--zacht)}
.gbdrie li b{color:var(--inkt)}
.gbdrie .ico{width:20px;height:20px;margin-top:3px;color:var(--rood)}
.gbvraag{margin-top:34px;font-family:Gabarito,sans-serif;font-weight:800;font-size:20px;color:var(--inkt)}
.gbsub{margin-top:4px;font-size:15.5px;color:var(--zacht)}
.gbkeus{margin-top:14px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:560px}
.gbkeus a{display:flex;align-items:center;justify-content:center;text-align:center;min-height:52px;padding:8px 12px;
  border:1.5px solid var(--inkt);border-radius:6px;background:#fff;color:var(--inkt);font-weight:700;font-size:16px;
  line-height:1.2;text-decoration:none}
.gbkeus a:focus-visible{outline:3px solid var(--rood);outline-offset:2px}
.gbkeus a:active{background:var(--papier)}
@media (hover:hover){.gbkeus a:hover{background:var(--inkt);color:var(--papier)}}
.gbna{margin-top:20px;font-size:15.5px;font-weight:700;color:var(--inkt)}
.gbdatum{margin-top:8px;font-size:13.5px;color:var(--zacht)}
.gbstaven{margin-top:6px;display:flex;flex-direction:column}
.gbstaaf{display:grid;grid-template-columns:128px 1fr 68px;align-items:center;column-gap:12px;padding:12px 0;
  border-bottom:1px solid var(--rand);font-size:15px;color:var(--zacht)}
.gbstaaf:last-child{border-bottom:0}
.gbstaaf span{white-space:nowrap}
.gbstaaf em{display:block;height:10px;border-radius:3px;background:var(--papier)}
.gbstaaf i{display:block;height:10px;border-radius:3px;background:var(--rood)}
.gbstaaf.vol i{background:var(--inkt)}
.gbstaaf b{text-align:right;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.gbwet h3{margin-top:34px;font-size:22px;color:var(--papier)}
.gbwet p.tekst + p.tekst{margin-top:14px}
.gblijst{display:flex;flex-direction:column}
.gblijst li{display:grid;grid-template-columns:22px 1fr;column-gap:12px;padding:12px 0;border-bottom:1px solid #332E27;
  font-size:15.5px;line-height:1.45;color:#D9D2C7}
.gblijst li:last-child{border-bottom:0}
.gblijst li:before{content:"\2713";color:var(--oranje);font-weight:700}
.gblijst li b{color:var(--papier)}
.gbrij2{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid #332E27;
  font-size:15px;color:#B5ADA3}
.gbrij2:last-child{border-bottom:0}
.gbrij2 b{color:var(--papier);text-align:right}
.gbknop{margin-top:34px}
.gbtwee{margin-top:44px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
.gbbron{margin-top:28px;font-size:13.5px;color:var(--zacht);max-width:52em;line-height:1.9}
.gbbron a{color:var(--inkt);font-weight:700;padding:6px 0}
.gbkort{padding:72px 0;border-top:1px solid var(--rand)}
.gbkort .kopblok p a{color:var(--inkt);font-weight:700}
.gbvoorbeeld{margin-top:28px;max-width:44em;font-size:17px;line-height:1.55;color:var(--zacht)}
.gbvoorbeeld b{color:var(--inkt)}
#hoeveel .hcond{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:24px}
.vragen details p a{color:var(--inkt);font-weight:700}
.hheld .som2 b,#luchten .regels span,#lekkage .regels b,#register .regels b,#stappen .regels b{white-space:nowrap}
.slot select.veld{cursor:pointer}

@container site (max-width:1100px){
  #hoeveel .hcond{grid-template-columns:1fr}
}
@container site (max-width:900px){
  .gbtwee{grid-template-columns:1fr;row-gap:28px}
  .gbkort{padding:56px 0}
}
@container site (max-width:480px){
  .gbdrie li{font-size:16.5px}
  .gbkeus{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gbstaaf{grid-template-columns:92px 1fr 62px;column-gap:10px;font-size:14px}
  .gbrij2{flex-direction:column;gap:2px}
  .gbrij2 b{text-align:left}
  .hheld .som2 b{font-size:24px}
  #luchten .som2{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- het korte antwoord onder de kop (7 oktober 2026) ----------
   Een vraag, een antwoord van twee zinnen en een cijfer met bron. Licht vlak met een rand,
   zodat het leest als een samenvatting en niet als een tweede kop. */
.antw{padding:48px 0 8px}
.antwkaart{max-width:820px;border:1px solid var(--rand);border-radius:10px;background:var(--papier2);
  padding:26px 28px 24px;display:flex;flex-direction:column;gap:12px}
.antwkaart h2{font-size:var(--h3);line-height:1.2;text-wrap:balance}
.antwtekst{font-size:var(--body);line-height:1.55}
.antwcijfer{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;padding-top:12px;
  border-top:1px solid var(--rand);font-size:16px;line-height:1.45;color:var(--zacht)}
.antwcijfer b{font-family:Gabarito,sans-serif;font-weight:900;font-size:30px;line-height:1;
  letter-spacing:-.03em;color:var(--inkt);font-variant-numeric:tabular-nums;white-space:nowrap}
.antwcijfer span{flex:1 1 240px}
.antwbron{font-size:13.5px;line-height:1.5;color:var(--zacht)}
.antwbron a{color:var(--inkt);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid var(--rand);white-space:nowrap}
.antwbron a:hover{border-bottom-color:var(--inkt)}
@container site (max-width:900px){
  .antw{padding:32px 0 4px}
  .antwkaart{padding:20px 18px 18px}
  .antwcijfer b{font-size:26px}
}

/* ---------- /huurcommissie-cijfers (7 oktober 2026) ---------- */
.cftabelrol{margin-top:32px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.cftabel{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.cftabel th,.cftabel td{padding:14px 12px;border-bottom:1px solid var(--rand);text-align:right;
  vertical-align:baseline;white-space:nowrap}
.cftabel thead th{font-size:13.5px;font-weight:700;color:var(--zacht);border-bottom:1.5px solid var(--inkt)}
.cftabel th:first-child,.cftabel td:first-child{text-align:left;padding-left:0;white-space:normal}
.cftabel tbody th{font-weight:700}
.cftabel tbody th a{color:var(--inkt);text-decoration:none;border-bottom:1.5px solid var(--rand)}
.cftabel tbody th a:hover{border-bottom-color:var(--inkt)}
.cftabel tbody th small{display:block;margin-top:3px;font-weight:400;font-size:13px;color:var(--zacht)}
.cftabel td b{font-family:Gabarito,sans-serif;font-weight:900;font-size:22px;letter-spacing:-.02em}
.cftwee{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:56px;align-items:start}
.cftwee h3{margin-top:32px}
.cftop{list-style:none;margin:18px 0 0;padding:0;counter-reset:cf}
.cftop li{display:flex;justify-content:space-between;gap:16px;padding:14px 0;
  border-bottom:1px solid var(--rand);font-size:16.5px}
.cftop li span{font-weight:700}
.cftop li a{color:var(--inkt);text-decoration:none;border-bottom:1.5px solid var(--rand)}
.cftop li i{font-style:normal;color:var(--zacht);font-variant-numeric:tabular-nums}
.cfjaren{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;max-width:720px}
.cfjaren li{display:grid;grid-template-columns:56px 1fr 80px;gap:14px;align-items:center;font-size:16px}
.cfjaren li i{display:block;height:14px;border-radius:3px;background:var(--rand);position:relative}
.cfjaren li i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:3px;background:var(--inkt)}
.cfjaren li b{text-align:right;font-variant-numeric:tabular-nums}
.cfsnel{max-width:720px;margin-top:36px}
.cfdown{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column}
.cfdown li{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--rand)}
.cfdown a{font-weight:700;color:var(--inkt);text-decoration:none;border-bottom:1.5px solid var(--rood)}
.cfdown span{color:var(--zacht);font-size:15.5px}
@container site (max-width:900px){
  .cftwee{grid-template-columns:1fr;gap:8px}
  .cftabel{font-size:15px}
  .cftabel th,.cftabel td{padding:12px 8px}
  .cftabel td b{font-size:19px}
  .cfjaren li{grid-template-columns:44px 1fr 64px;gap:10px}
}

/* ---------- wat wij doen, op hoe-het-werkt ---------- */
.wijkant{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.wijkant li{display:flex;align-items:baseline;gap:11px;font-size:16.5px;line-height:1.4}
.wijkant li::before{content:"";width:7px;height:7px;border-radius:100px;flex:0 0 auto;
  background:var(--rood);transform:translateY(-2px)}

/* ---------- de twee uitkomsten op no-cure-no-pay ---------- */
.ncnp{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));gap:16px}
.ncnp .uit{border:1px solid var(--rand);border-radius:10px;padding:22px 22px 24px;
  background:var(--papier2);display:flex;flex-direction:column;gap:12px}
.ncnp .uit.stil{background:var(--inkt);color:var(--papier);border-color:var(--inkt)}
.ncnp .uit h2{font-size:22px;line-height:1.15}
.ncnp .uit ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ncnp .uit li{display:flex;gap:11px;align-items:baseline;font-size:16px;line-height:1.45}
.ncnp .uit li::before{content:"";width:7px;height:7px;border-radius:100px;flex:0 0 auto;
  background:var(--rood);transform:translateY(-2px)}
.ncnp .uit.stil li::before{background:var(--oranje)}
.ncnp .nul{font-family:Gabarito,sans-serif;font-weight:900;font-size:48px;line-height:1;
  letter-spacing:-.04em}
.ncnpna{margin-top:26px;max-width:62ch}

/* ---------- de 395 nagerekende huuradvertenties, op de homepage ----------
   Een eigen sectie en geen kaartje in een rij: dit is de enige telling op de pagina die over
   de markt gaat in plaats van over ons, en hij moet als bewijs te lezen zijn. De getallen
   staan tabulair, want ze horen onder elkaar uit te lijnen. */
.nagerekend{padding:96px 0;border-top:1px solid var(--rand)}
.nagerekend p.tekst{margin-top:18px;font-size:19px;line-height:1.5;color:var(--zacht);
  max-width:46em}
.nasteden{list-style:none;margin:36px 0 0;padding:26px 0 0;border-top:1px solid var(--rand);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:32px}
.nasteden b{display:block;font-family:Gabarito,sans-serif;font-weight:900;font-size:40px;
  line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.nasteden span{display:block;margin-top:9px;font-size:16px;line-height:1.4;color:var(--zacht)}
/* Zonder deze regel kreeg de verwijzing onder een bronregel de standaardkleur van de
   browser: blauw en onderstreept, terwijl elke andere link op de site inkt of rood is. */
.nabron{margin-top:26px;font-size:13.5px;line-height:1.5;color:var(--zacht)}
.nabron a{color:var(--inkt);font-weight:700;text-decoration:none;
  border-bottom:1.5px solid var(--rand)}
.nabron a:hover{border-bottom-color:var(--inkt)}

/* ---------- het register, doorgeteld ----------
   Bewust een lichte sectie en niet in de donkere strook erboven: .usstrand tekent zijn
   getallen in rood op papier, en rood op inkt is niet te lezen. */
.doorgeteld{padding:96px 0;background:var(--papier2);border-top:1px solid var(--rand);
  border-bottom:1px solid var(--rand)}
.doorgeteld p.tekst{margin-top:18px;font-size:19px;line-height:1.5;color:var(--zacht);
  max-width:46em}
.doorgeteld .nabron{margin-top:32px}

/* ---------- waar de zaken vandaan komen ----------
   De plaatsenlijst komt van de uitsprakenpagina (.usplaatsen), zodat dezelfde telling er
   overal hetzelfde uitziet. Hier zijn de namen wel links, dus krijgen ze een onderlijn. */
.gebiedsec{padding:96px 0}
.gebiedsec p.tekst{margin-top:18px;font-size:19px;line-height:1.5;color:var(--zacht);
  max-width:46em}
.gebiedsec .usplaatsen a{color:var(--inkt);text-decoration:none;
  border-bottom:1.5px solid var(--rand)}
.gebiedsec .usplaatsen a:hover{border-bottom-color:var(--inkt)}

/* De zes situaties staan in twee rijen van drie. .stemmen kende alleen een kolomafstand,
   want er stonden er precies drie; zonder rijafstand plakken de twee rijen op elkaar. */
.voorwie .stemmen{row-gap:40px}
.stem .klein{color:var(--zacht)}
/* De zes zinnen zijn een, twee of drie regels lang. Zonder dit stond de link van elke
   kolom op een andere hoogte en zag de rij er scheef uit; nu zakken ze naar dezelfde
   onderkant. Op een telefoon staat elke keuze alleen en doet deze regel niets. */
.voorwie .stem a{margin-top:auto}

@container site (max-width:900px){
  .nagerekend,.doorgeteld,.gebiedsec{padding:56px 0}
  .nasteden{grid-template-columns:1fr;row-gap:24px;margin-top:28px;padding-top:22px}
  .nasteden b{font-size:34px}
  /* Boven staat .voorwie .stemmen met twee klassen, dus die wint van de smalle regel in
     site.css met één klasse. Hier zetten we hem daarom zelf terug. */
  .voorwie .stemmen{row-gap:26px}
}
/* ===== einde blok van bouw.py ===== */