/* Woonbesluit — opmaak */
:root{
/* De twee breedtes van het hoofdtraject. Een formulier of een vraag leest
   smal; een lijst met een totaal ernaast mag breder. Meer maten dan deze twee
   is willekeur, en vier losse getallen door elkaar - wat het was - leest als
   toeval in plaats van als keuze. */
/* Twee kleuren uit ontwerp K die nog geen naam hadden. --goed (#287a05) lijkt
   erop maar is niet hetzelfde; het spoor hoort de kleur van het ontwerp te
   dragen en niet iets dat er ongeveer op lijkt. */
--spoor-af:#2e8c06;
--spoor-lijn:#9dc2b8;
--traj-smal:900px;
--traj-breed:1200px;
/* ===================================================================
   TWEE PALETTEN, EN ZE RAKEN ELKAAR NOOIT.

   MERK  identiteit: kopbalk, actieve tab, primaire knop (--knop), selectie.
         Komt NOOIT voor in een grafiek, een tabelcel of achter een
         uitkomst. Een organisatie mag deze drie overschrijven.
   DATA  betekenis: bespaart, kost, let op, fout, subsidie.
         Bij elke organisatie identiek, anders kun je twee adviezen
         niet naast elkaar leggen.

   Waarom die scheiding: in de oude opmaak was groen tegelijk het merk
   en het teken "dit is goed". Daardoor betekende groen niets meer --
   een winnende variant lichtte groen op in een scherm dat al groen was.
   Diezelfde fout met rood zou erger zijn: rood is overal de kleur van
   een fout, en een merk dat rood is kan geen fout meer tonen.
   =================================================================== */

/* ---- MERK: 60-30-10 ----------------------------------------------
   10% accent (lime): logo-vlak, voortgang, selectie; de primaire knop in
       dezelfde tint, donkerder (--knop, hieronder).
   30% structuur (deep teal): kopbalk, tabbalk, antwoordpaneel.
   60% canvas (alabaster): de pagina zelf.
   Lime is licht: wit erop leest niet (2,85:1). Een pictogram óp lime (het
   vinkje in een bolletje, het logo) is daarom charcoal (--merk-op, 5,2:1);
   tekst staat nooit op lime maar op --knop, in wit (besluit Z4). Lime is
   nooit een tekstkleur op wit -- daarvoor is --merk-diep. Een organisatie
   overschrijft alleen dit blok; met terracotta (#b0492f) als merk en als
   knop, en wit als --merk-op, werkt alles nog. ---- */
--merk:#38b000;          /* lime: vlakken, strepen, voortgang */
--merk-op:#1d2a2b;       /* tekst en pictogram óp --merk */
--merk-diep:#0f3d3e;     /* deep teal: kopbalk, panelen, koppen, actieve tekst */
--merk-licht:#4fd11a;    /* hover en focusrand, nooit tekst */
--merk-tint:#e2ece9;     /* soft sage: invoervakken, geselecteerde rij */
--merk-zacht:#c9ddd6;    /* randen op merk-tint */
/* ---- DE KNOP (besluit Z4, 28-09-2026) ----------------------------
   "Ik wil liefst overal wit op lime. Zwart op lime vind ik echt niet mooi."
   Wit op lime (#38b000) is 2,85:1 en haalt de 4,5:1 van WCAG niet. Dezelfde
   tint, donkerder (#2b8700), haalt 4,6:1 met wit. Elk vlak met tekst erop
   (een knop, een nummer, een label) is daarom --knop met witte tekst; lime
   zelf blijft voor accenten en selectie zonder tekst: een vinkje in een
   bolletje, een streep, een voortgangsbalk. test/opmaak.js rekent het na. */
--knop:#2b8700;          /* vlak van een knop of label met tekst */
--knop-op:#ffffff;       /* tekst en pictogram op --knop, 4,6:1 */
--knop-hover:#237000;    /* de knop onder de muis, 6,2:1 met wit */
/* W5: de kleur van de stichting waarlangs je kwam (js/via.js zet hem, na viaKleur()). */
--via-k1:#2b8700;--via-k1op:#ffffff;

/* ---- DATA (vast, bij elke organisatie gelijk) ---- */
--goed:#287a05;        --goed-tint:#eaf7df;      --goed-rand:#a9e08a;   /* 5,4:1 op wit; op teal: --goed-op-diep */
--goed-op-diep:#b6f082;                                              /* geld op het teal paneel, 9:1 */
--op-diep:#c5d8d6;                                                   /* bijschrift op het teal paneel, 7,4:1 */
--let-tekst:#5a3400;                                                 /* tekst in een let-op-vlak, 8,6:1 op --let-tint */
--kosten:#4b5d5e;      --kosten-tint:#e8eeee;
--let:#8a4b00;         --let-tint:#fbeddc;       --let-rand:#e6c08a;   /* oranjebruin, geen amber: amber naast lime leest als familie */
--fout:#a3122a;        --fout-tint:#fbe9ec;      --fout-rand:#f0aab5;
--subsidie:#5b4fd0;    --subsidie-tint:#eeedfe;  --subsidie-rand:#cecbf6;
--info:#1f5f7a;        --info-tint:#e3eff3;      --info-rand:#b5d4f4;
--stroom:#3a9fd8;      --gas:#f2b134;                                /* alleen in de energiegrafieken */

/* ---- NEUTRAAL (charcoal slate als inkt) ---- */
--papier:#f8f9fa;--vlak:#ffffff;
--gray-900:#1d2a2b;--gray-700:#3d4b4c;--gray-500:#63736f;--gray-300:#c9d9d4;--gray-100:#eef3f1;
/* Een invulveld is wit met een rand van minstens 3:1 op wit (WCAG 1.4.11);
   grijs is voor wat je niet kunt invullen. test/opmaak.js rekent het na. */
--veld:#ffffff;--veldrand:#728480;
--radius:14px;--radius-l:18px;--r-s:10px;--r-m:14px;--r-l:18px;--r-xl:24px;--r-rond:999px;
--schaduw-kaart:0 1px 2px rgba(15,61,62,.06);--schaduw-paneel:0 10px 30px rgba(15,61,62,.18);--schaduw-balk:0 -10px 30px rgba(15,61,62,.22);
--raakvlak:44px;
/* Tekstmaat (GT 7, besluit G10): lopende tekst 17 px met regelafstand 1,5;
   tekst in een kader (.note) 16; toelichting 14; niets onder 13. Het papier
   (@media print) heeft zijn eigen maten. test/opmaak.js telt na. */
--t-lopend:17px;--t-kader:16px;--t-toel:14px;--t-min:13px;--t-regel:1.5;

/* De oude namen (--green-700 en broertjes) stonden hier als vangnet zodat
   er niets zou breken tijdens de overgang. Dat vangnet is een valkuil
   gebleken: --green-700 wees naar het MERK, maar op een paar plekken werd
   het gebruikt om "dit is goed" te betekenen. Zo kwam de subsidie in de
   merkkleur op het scherm, mét een minteken, alsof je geld kwijt was.

   Ze zijn nu weg en elke plek staat expliciet op merk, data of neutraal.
   test/opmaak.js weigert de oude namen, zodat ze niet terugkruipen. */
}

/* ---- pictogrammen ---- */
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-.16em}
.ico.groot{width:1.6em;height:1.6em}
.notitie-ico{float:left;margin:1px 9px 0 0;width:18px;height:18px}
/* Het pictogram per maatregel (ontwerp "pictogrammen maatregelen"). Het staat
   altijd naast de naam en is versiering, dus aria-hidden. Een vlak van 44 met
   een pictogram van 25; in een regel van het woonplan en op de telefoon 40 met
   23. Niet gekozen: teal op sage. Gekozen: wit op teal, en het pictogram blijft
   open (gevuld wordt een warmtepomp een blokje). */
.mvlak{width:44px;height:44px;flex:none;border-radius:12px;background:var(--merk-tint);color:var(--merk-diep);
  display:inline-flex;align-items:center;justify-content:center}
.mvlak .ico{width:25px;height:25px}
.mvlak.aan{background:var(--merk-diep);color:#fff}
.mvlak.klein{width:40px;height:40px;border-radius:11px}
.mvlak.klein .ico{width:23px;height:23px}
@media(max-width:760px){.mvlak{width:40px;height:40px;border-radius:11px}.mvlak .ico{width:23px;height:23px}}
.rank-card .naam{display:flex;align-items:center;gap:9px}
.rank-card .naam .ico{opacity:.9}
.wizfoot button{display:inline-flex;align-items:center;gap:8px;justify-content:center}
*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--papier);color:var(--gray-900);margin:0;font-size:var(--t-lopend);line-height:var(--t-regel);text-wrap:pretty}
/* Getallen op één lijn en strak; grote koppen en bedragen krijgen .groot. */
.tn,.value,.kpi .value,.bedrag{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.groot{font-weight:800;letter-spacing:-.035em;line-height:.98}
header.app{background:var(--merk-diep);color:#fff;padding:0 22px;min-height:60px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.merkblok{display:flex;align-items:center;gap:10px;min-width:0}
/* Het logo: een lime vlak met het huis erin, charcoal omdat wit op lime niet leest. */
.merkblok .logo{width:30px;height:30px;border-radius:9px;background:var(--merk);color:var(--merk-op);display:inline-flex;align-items:center;justify-content:center;flex:none}
.merkblok .logo .ico{width:18px;height:18px;stroke-width:1.8}
header.app h1{font-size:18px;margin:0;font-weight:800;letter-spacing:-.01em}
header.app p{margin:0;font-size:var(--t-toel);color:rgba(255,255,255,.72)}

/* De kopbalk hierboven, de voetregel en main staan nog op de losse pagina's
   (over, privacy, cookies, 404). De tool zelf heeft ze sinds W8 (stap 2)
   niet meer; het menu en de tabbalk van de oude tool zijn weg. */
main{max-width:1180px;margin:0 auto;padding:20px 24px 60px}
.card{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:16px 22px;margin-bottom:14px;box-shadow:var(--schaduw-kaart)}
.card h2{font-size:16px;margin:0 0 4px;color:var(--gray-900);font-weight:800;letter-spacing:-.01em}
.card h3{font-size:14px;margin:16px 0 8px;color:var(--merk-diep);font-weight:800}
.card .sub{font-size:var(--t-toel);color:var(--gray-700);margin:0 0 14px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px 16px}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field.breed{grid-column:1/-1}
.field.wizknopveld{align-self:end}
.field.wizknopveld .small-btn{min-height:48px;font-size:15px}
/* Labels: 13px, gewoon gezet. Kapitalen met letterspatiëring lezen slecht
   voor de doelgroep van 40-50+. */
.field label{font-size:13px;color:var(--gray-700);font-weight:600;text-transform:none;letter-spacing:0}
.field .hint,.hint{font-size:var(--t-toel);color:var(--gray-500)}
input[type=number],input[type=text],select{max-width:100%;padding:8px 11px;border:2px solid var(--veldrand);border-radius:var(--r-s);font-size:14px;background:var(--veld);color:var(--gray-900);font-family:inherit;min-height:40px}
input[type=number]:disabled,input[type=text]:disabled,select:disabled{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-700)}
/* ---- FOCUS: één regel voor de hele site (ontwerp v1.22, punt v2) ----
   Wie met Tab door de tool loopt moet altijd kunnen zien waar hij is. Dat
   was hiervoor per element geregeld en dus op een paar plekken vergeten.
   Nu staat het één keer, met dezelfde maat overal: 3 px in de donkere
   merkkleur, 3 px van het element af. Op een teal ondergrond leest die
   kleur niet, dus daar wordt het lime.

   :focus-visible tekent de ring alleen bij toetsenbord- of
   schermlezergebruik, niet bij een muisklik. Browsers die dat niet kennen
   krijgen de ring via de :focus-regel erboven; die wordt daarna weer
   weggehaald voor browsers die het wél kennen (:focus:not(:focus-visible)).

   Deze regel mag nergens ongedaan worden gemaakt: outline:none zonder
   vervanging is verboden, en een toets bewaakt dat. */
:focus{outline:3px solid var(--merk-diep);outline-offset:3px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:3px solid var(--merk-diep);outline-offset:3px}
/* Invoervelden: 2 px, anders valt de ring over de eigen rand heen. */
input:focus-visible,select:focus-visible,textarea:focus-visible{outline-offset:2px}
input:focus,select:focus{background:var(--vlak)}
/* Op een teal vlak is de donkere ring onzichtbaar; daar lime. */
header.app :focus-visible,.antwoord :focus-visible,.wizfoot .rechts :focus-visible,.wizhead :focus-visible{outline-color:var(--merk-licht)}
.toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.toggle-row input[type=checkbox]{width:18px;height:18px;flex:none;accent-color:var(--merk-diep)}
input[type=checkbox],input[type=radio]{accent-color:var(--merk-diep)}
.toggle-row .name{font-weight:700;font-size:15px;color:var(--gray-900)}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:7px 8px;text-align:left;border-bottom:1px solid var(--gray-300);vertical-align:top}
th{font-size:13px;font-weight:600;color:var(--gray-500);white-space:nowrap}
.tbl-wrap{overflow-x:auto}
.tbl-wrap input,.tbl-wrap select{width:100%;font-size:13px;padding:5px 6px;min-width:65px;min-height:36px}
td.vol{font-weight:600;white-space:nowrap}
td.vol.hand{color:var(--info)}
.small-btn{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-s);padding:0 12px;min-height:36px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;color:var(--gray-900);display:inline-flex;align-items:center;gap:7px}
.small-btn:hover{background:var(--gray-100)}
.small-btn.danger{color:var(--fout)}
.small-btn.primary{background:var(--knop);color:var(--knop-op);border-color:var(--knop);font-weight:800}
.small-btn.primary:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
.varkeuze{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 4px}
.varkeuze select{min-width:240px}
/* Meldingen. Een fout heeft altijd rand én pictogram (versierNotities zet
   het pictogram erbij); "let op" is oranjebruin, geen amber. */
.note{background:var(--info-tint);border-left:4px solid var(--info);border-radius:0 var(--r-m) var(--r-m) 0;padding:12px 14px;font-size:var(--t-kader);line-height:var(--t-regel);color:var(--gray-900);margin-bottom:14px}
.note .notitie-ico{color:var(--info)}
.note.warn{background:var(--let-tint);border:1px solid var(--let-rand);border-radius:var(--r-m);color:var(--gray-900)}
.note.warn .notitie-ico,.note.warn b{color:var(--let)}
.note.ok{background:var(--goed-tint);border:1px solid var(--goed-rand);border-radius:var(--r-m);color:var(--gray-900)}
.note.ok .notitie-ico{color:var(--goed)}
.note.fout{background:var(--fout-tint);border:1px solid var(--fout-rand);border-radius:var(--r-m);color:var(--gray-900)}
.note.fout .notitie-ico{color:var(--fout)}
.kpi{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-m);padding:10px 16px;min-width:145px;flex:1}
.kpi .label{font-size:13px;color:var(--gray-500);font-weight:600;text-transform:none}
.kpi .value{font-size:22px;font-weight:800;color:var(--gray-900);margin-top:2px}
.kpi.winst{background:var(--goed-tint);border-color:var(--goed-rand)}
.kpi.winst .value,.kpi.winst .label{color:var(--goed)}
.kpi.subsidie .value,.kpi.subsidie .label{color:var(--subsidie)}
/* De ranglijst: rijen, geen goud/zilver/brons. De linkerrand draagt de
   terugverdientijd (snel = goed, middel = let, traag = fout). */
.rank-card{background:var(--vlak);border:1px solid var(--gray-300);border-left:5px solid var(--gray-300);border-radius:var(--r-m);
  padding:11px 16px;display:grid;grid-template-columns:36px 1fr minmax(90px,150px) auto 24px;gap:13px;align-items:center;min-height:64px;cursor:pointer}
.rank-card:hover{background:var(--merk-tint)}
.rank-card .nr{width:36px;height:36px;border-radius:50%;background:var(--merk-diep);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:17px;font-weight:800}
.rank-card .naam{font-size:15px;font-weight:700;margin:0;color:var(--gray-900)}
.rank-card .naam .ico{width:20px;height:20px;color:var(--merk-diep)}
.rank-card .onder{font-size:var(--t-toel);color:var(--gray-700);margin-top:2px}
.rank-card .onder b{color:var(--goed)}
.rank-card .spoor{height:12px;background:var(--gray-100);border-radius:6px;overflow:hidden}
.rank-card .spoor i{display:block;height:100%;border-radius:6px}
.rank-card .tvt{font-size:13.5px;font-weight:800;text-align:right;white-space:nowrap}
.rank-card .pijl{color:var(--gray-500)}
.rank-card.snel{border-left-color:var(--goed)}.rank-card.snel .tvt{color:var(--goed)}.rank-card.snel .spoor i{background:var(--goed)}
.rank-card.middel{border-left-color:var(--let)}.rank-card.middel .tvt{color:var(--let)}.rank-card.middel .spoor i{background:var(--let)}
.rank-card.traag{border-left-color:var(--fout)}.rank-card.traag .tvt{color:var(--fout)}.rank-card.traag .spoor i{background:var(--fout)}
.result-block{border:1px solid var(--gray-300);border-radius:var(--radius);margin-bottom:14px;background:#fff;overflow:hidden}
.result-head{padding:14px 18px;background:var(--gray-100);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;cursor:pointer}
.result-head .t{font-size:14.5px;font-weight:700;color:var(--gray-900)}
.result-head .m{font-size:var(--t-min);color:var(--gray-700)}
.result-body{padding:16px 18px;display:none}
.result-body.open{display:block}
.breakdown{font-size:var(--t-min)}
.breakdown .line{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dotted var(--gray-300)}
.breakdown .line.tot{font-weight:700;border-bottom:none;border-top:2px solid var(--gray-300);margin-top:4px;padding-top:8px}
.breakdown .line.subline{border-bottom:none;padding:2px 0 2px 14px;color:var(--gray-500);font-size:var(--t-min)}
.breakdown .line span:last-child{font-variant-numeric:tabular-nums}
.varianten td.win{background:var(--goed-tint);color:var(--goed);font-weight:600}
.barrow{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:var(--t-min)}
.barrow .lab{width:210px;flex:none;text-align:right;color:var(--gray-700)}
.barrow .track{flex:1;background:var(--gray-100);border-radius:4px;height:20px;overflow:hidden}
.barrow .fill{height:100%;border-radius:4px}
.barrow .val{width:70px;flex:none;font-variant-numeric:tabular-nums;color:var(--gray-700)}
.scenario-tbl td.best{background:var(--goed-tint);color:var(--goed);font-weight:600}
.batcurve .barrow .lab{width:130px}
.roomchips{display:flex;flex-wrap:wrap;gap:8px}
.roomchip{border:1px solid var(--gray-300);border-radius:20px;padding:6px 12px;font-size:var(--t-min);cursor:pointer;background:#fff;user-select:none}
.roomchip.on{background:var(--merk-diep);color:#fff;border-color:var(--merk-diep)}
.legenda{font-size:var(--t-min)}
.footer-note{font-size:var(--t-min);color:var(--gray-500);margin:24px 0;text-align:center}
/* Vraagt het besturingssysteem om minder beweging, dan zetten we alle
   overgangen en animaties praktisch uit. Niet op nul: een duur van 0,01 ms
   laat de 'einde'-gebeurtenissen wel vallen, zodat scripts die daarop
   wachten niet blijven hangen. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* Skiplink: onzichtbaar tot hij met Tab de focus krijgt; dan bovenaan in beeld. */
.skiplink{position:absolute;left:-9999px;top:8px;z-index:200;background:var(--merk-diep);color:#fff;padding:9px 14px;border-radius:9px;font-size:14px;font-weight:700;text-decoration:none}
.skiplink:focus{left:8px}

/* ============ RESPONSIVE ============ */
@media (max-width:1024px){
  main{padding:16px 16px 60px}
  header.app{padding:14px 16px}
}
@media (max-width:760px){
  header.app{padding:0 14px;min-height:56px}
  header.app h1{font-size:16px}
  header.app p{display:none}
  main{padding:14px 12px 60px}
  .card{padding:14px 14px;margin-bottom:12px;border-radius:var(--r-m)}
  .grid{grid-template-columns:1fr;gap:12px}
  input[type=number],input[type=text],select{min-height:44px;font-size:16px}  /* 16px voorkomt inzoomen op iOS */
  .kpi{min-width:calc(50% - 4px);padding:10px 12px}
  .kpi .value{font-size:19px}
  .rank-card{grid-template-columns:32px 1fr auto;min-height:72px;gap:10px}
  .rank-card .spoor,.rank-card .pijl{display:none}
  .result-head{padding:12px 14px}
  .result-head>div:last-child{text-align:left!important}
  .result-body{padding:13px 14px}
  .breakdown .line{flex-direction:column;gap:1px;padding:7px 0}
  .breakdown .line span:last-child{font-weight:600}
  .breakdown .line.subline{padding-left:10px}
  .barrow{flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .barrow .lab{width:100%;text-align:left;font-weight:600}
  .barrow .track{flex:1 1 60%;height:16px}
  .barrow .val{width:auto;flex:0 0 auto}
  .batcurve .barrow .lab{width:100%}
  .barrow .val.marg{flex-basis:100%;padding-left:2px}
  .varkeuze select{min-width:0;width:100%}
  .roomchip{padding:9px 13px;font-size:13px}
  .small-btn{min-height:38px;padding:8px 12px}
  .toggle-row input[type=checkbox]{width:22px;height:22px}
  /* brede tabellen: eerste kolom vastzetten zodat je weet waar je bent */
  .tbl-wrap{-webkit-overflow-scrolling:touch;position:relative}
  .tbl-wrap::after{content:'→ sleep opzij voor meer kolommen';display:block;font-size:13px;color:var(--gray-500);padding:4px 2px 0}
  .tbl-wrap table{min-width:640px}
  .tbl-wrap th:first-child,.tbl-wrap td:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 var(--gray-300)}
  /* Een kaartjestabel scrollt niet: hij is al één kolom breed. De vaste
     eerste kolom, de minimumbreedte en het sleep-bijschrift horen daar
     dus niet bij. */
  .tbl-wrap table.kaartjes{min-width:0}
  .tbl-wrap:has(table.kaartjes){overflow-x:visible}
  .tbl-wrap:has(table.kaartjes)::after{content:none}
  .tbl-wrap table.kaartjes td:first-child{position:static;box-shadow:none;background:none}
  .tbl-wrap table.kaartjes input,.tbl-wrap table.kaartjes select{min-width:0}
  .tbl-wrap input,.tbl-wrap select{min-height:36px;font-size:15px}
  .footer-note{padding:0 14px}
}
@media (max-width:420px){
  .kpi{min-width:100%}
  .card h2{font-size:14.5px}
}
/* muis- of touchbediening: grotere raakvlakken waar het kan */
/* ---- aanraakbediening, ongeacht schermbreedte ------------------
   De energiecoach werkt op een tablet van 768 tot 1024 px. Dat is geen
   smal scherm, dus alle regels die aan een max-width hingen sloegen daar
   over: kleine knoppen, invoervelden van 30 px hoog. Deze regels kijken
   naar het invoerapparaat in plaats van naar de breedte. */
@media (hover:none){
  .result-head{min-height:54px}
  input[type=number],input[type=text],select{min-height:44px;font-size:16px}
  .small-btn{min-height:42px;padding:9px 14px}
  .chip,.roomchip{min-height:42px;padding-top:9px;padding-bottom:9px}
  .toggle-row input[type=checkbox]{width:22px;height:22px}
  .wizkeuze{padding:15px 16px}
  .wizfoot button{min-height:46px}
  .tbl-wrap input,.tbl-wrap select{min-height:40px;font-size:15px}
}


/* ---- telefoon -------------------------------------------------
   Onder 640 px stond hier tot W8 (stap 2) de tabbalk van de oude tool,
   onderaan, naar de duim. Die is weg; deze regels gelden nog voor de losse
   pagina's, die zo blijven zoals ze waren. */
@media (max-width:640px){
  main{padding-bottom:92px}
  .footer-note{margin-bottom:8px}
  header.app{padding:0 14px}
}

/* ---- woninggegevens opgehaald ---- */
.adresuitkomst{background:var(--goed-tint);border:1px solid var(--goed-rand);border-radius:var(--radius);padding:12px 14px;font-size:13px}
.adresuitkomst b{color:var(--goed)}
.adresuitkomst .gevonden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px 14px;margin:8px 0}
.adresuitkomst .gevonden span{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dotted var(--goed-rand);padding:2px 0}
.adresuitkomst .gevonden span em{font-style:normal;color:var(--gray-700)}
.adresuitkomst .bron{font-size:13px;color:var(--gray-500);margin-top:6px}
.adresuitkomst.bezig{background:var(--gray-100);border-color:var(--gray-300)}

/* ---- uitlegtekeningen ---- */
.tekening{width:100%;height:auto;display:block;max-width:520px;margin:0 auto}
.tekenkaart{background:var(--gray-100);border:1px solid var(--gray-300);border-radius:var(--radius-l);padding:16px 14px 12px;margin-bottom:14px}
.tekenkaart .bij{font-size:var(--t-min);color:var(--gray-700);text-align:center;margin:10px 0 0}
.bouwdeel .nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;
  border-radius:50%;background:var(--merk-diep);color:#fff;font-size:var(--t-min);font-weight:700;flex:none}
.bouwdeel .kop{display:flex;align-items:center;gap:8px}

/* ---- de zes bouwdelen bij isolatie ---- */
.bouwdeel{display:flex;flex-direction:column;gap:5px;padding:13px;border:1px solid var(--gray-300);
  border-radius:var(--radius);background:var(--gray-100)}
.bouwdeel .ico{color:var(--merk-diep)}
.bouwdeel b{font-size:13.5px;color:var(--gray-900)}
.bouwdeel span{font-size:var(--t-min);color:var(--gray-700);line-height:1.4}

/* ---- modelkaarten in de catalogus ---- */
.modelnaam{flex:1 1 220px;font-weight:600;font-size:14px;border:1px solid transparent;background:transparent;padding:5px 7px}
.modelnaam:hover{border-color:var(--gray-300);background:#fff}
.veld{display:flex;flex-direction:column;gap:3px}
.veld.breed{grid-column:1/-1}
.veld label{font-size:var(--t-min);color:var(--gray-700);font-weight:500}
.veld .eenheid{color:var(--gray-500);font-weight:400}
.veld .hint{font-size:var(--t-toel)}
.vinkje{display:flex;align-items:center;gap:6px;font-size:var(--t-min);white-space:nowrap;cursor:pointer}
.vinkje input{width:17px;height:17px}
.reeks{display:flex;gap:6px}
.reeks span{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.reeks em{font-style:normal;font-size:var(--t-min);color:var(--gray-500);text-align:center}
.reeks input{width:100%;text-align:center;padding:5px 3px}
@media (max-width:760px){
  .modelnaam{flex:1 1 100%;font-size:15px;border-color:var(--gray-300);background:#fff}
  .veld.breed{grid-column:1/-1}
}

/* ---- catalogus: koppen, filters en ingeklapte kaarten ---- */
.telling{margin-left:auto;font-size:var(--t-min);font-weight:400;color:var(--gray-500)}
.pijl{color:var(--gray-500);flex:none;font-size:var(--t-min)}
.pijl.open{color:var(--merk-diep)}
@media (max-width:760px){
  .telling{margin-left:0;width:100%}
}

/* ================= de catalogus als vergelijker =================
   Doelen als kaarten, sortering als pillen, en elke maatregel een rij met
   de vraag uit de code eronder. (Het tabblad zelf en zijn vergelijkbalk
   zijn weg sinds W8, stap 2; renderMaatregelen() wordt nog aangeroepen.) */
.doelen{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.doel{background:var(--vlak);border:2px solid var(--gray-300);border-radius:16px;padding:12px 12px 10px;font-family:inherit;cursor:pointer;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:96px;color:var(--gray-900)}
.doel .ico{width:26px;height:26px;color:var(--gray-500);stroke-width:1.5}
.doel .naam{font-size:14.5px;font-weight:800;line-height:1.2}
.doel .sub{font-size:var(--t-toel);color:var(--gray-700);line-height:1.3}
.doel:hover{border-color:var(--merk-zacht)}
.doel.actief{background:var(--merk-tint);border-color:var(--merk)}
.doel.actief .ico{color:var(--merk-diep)}.doel.actief .naam{color:var(--merk-diep)}
.pil{min-height:var(--raakvlak);padding:0 15px;border:1px solid var(--gray-300);border-radius:var(--r-rond);background:var(--vlak);color:var(--gray-900);font-family:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.pil.actief{background:var(--merk-diep);color:#fff;border-color:var(--merk-diep);font-weight:800}
.maatregelrij{background:var(--vlak);border:1px solid var(--gray-300);border-left:5px solid var(--gray-300);border-radius:var(--r-m);padding:0;overflow:hidden}
.maatregelrij.aan{background:var(--goed-tint);border-color:var(--merk);border-left-color:var(--gray-300)}
.maatregelrij.snel{border-left-color:var(--goed)}.maatregelrij.middel{border-left-color:var(--let)}.maatregelrij.traag{border-left-color:var(--fout)}
.maatregelrij .rij{display:grid;grid-template-columns:32px 30px 1fr auto;gap:13px;align-items:center;padding:11px 16px;min-height:70px}
.maatregelrij .vink{width:30px;height:30px;border-radius:9px;border:2px solid var(--gray-300);background:var(--vlak);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex:none}
.maatregelrij .vink input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.maatregelrij .vink .ico{width:19px;height:19px;stroke-width:2.6;color:var(--merk-op);opacity:0}
.maatregelrij.aan .vink{background:var(--merk);border-color:var(--merk)}
.maatregelrij.aan .vink .ico{opacity:1}
.maatregelrij .rij>.ico{width:27px;height:27px;color:var(--merk-diep);stroke-width:1.4}
.maatregelrij .naam{font-size:15.5px;font-weight:700;line-height:1.25;background:none;border:none;padding:0;font-family:inherit;text-align:left;cursor:pointer;color:var(--gray-900);display:block}
.maatregelrij .vraag{font-size:13px;color:var(--gray-700);line-height:1.35;margin-top:2px}
.maatregelrij .cijfers{text-align:right;white-space:nowrap}
.maatregelrij .cijfers .maand{font-size:19px;font-weight:800;color:var(--goed)}
.maatregelrij .cijfers .rest{font-size:var(--t-min);color:var(--gray-500)}
.maatregelrij .cijfers .nog{font-size:var(--t-min);color:var(--gray-500);white-space:normal;max-width:150px}
.maatregelrij .instellingen{display:none;border-top:1px solid var(--gray-300);padding:12px 16px 14px;background:var(--vlak)}
.maatregelrij.aan.open .instellingen{display:block}
.maatregelrij .instelknop{font-size:var(--t-min);color:var(--merk-diep);background:none;border:none;padding:4px 0 0;cursor:pointer;font-family:inherit;font-weight:600;display:inline-flex;align-items:center;gap:5px}
.maatregelrij .instelknop .ico{width:14px;height:14px}
/* ---- de coachaanvraag (ontwerp v4, sectie 17) -----------------------
   Het vinkje voor de toestemming, in het traject (gFormulier). De kaart op
   het oude resultatentabblad is weg sinds W8 (stap 2). */
.coachakkoord{display:flex;gap:12px;align-items:center;margin-top:14px;min-height:44px;
                          font-size:14px;line-height:1.45;cursor:pointer}
/* PC 119: een vinkje van 28 px, en de hele regel is het raakvlak. */
.coachakkoord input{width:28px;height:28px;flex:none;margin:0}
.coachakkoord[hidden]{display:none}
/* D23: voor wie je een coach vraagt. */
.gvoorwie{border:0;margin:22px 0 0;padding:0;min-width:0}
.gvoorwie legend{padding:0;margin:0 0 8px;font-weight:700}
.gkeus{display:flex;gap:12px;align-items:center;min-height:44px;font-size:15px;cursor:pointer}
.gkeus input{width:24px;height:24px;flex:none;margin:0}

/* ---- het isolatieplan als kaarten (ontwerp 1.24) --------------------
   De tabel had acht kolommen: op een telefoon zag je "Bouwdeel" en
   "Doen?" en moest je per rij zijwaarts scrollen naar het bedrag. En je
   moest aanvinken vóórdat er een prijs verscheen, terwijl aanvinken juist
   de keuze is die je wilt maken. Nu per bouwdeel een groepje met de twee
   manieren eronder, het bedrag altijd zichtbaar, en de instellingen
   (m2, materiaal) uitklapbaar zodat het scherm rustig blijft. */
.isogroep{border:1px solid var(--gray-300);border-radius:var(--r-m);overflow:hidden;background:var(--vlak)}
.isogroep>.groepkop{padding:11px 16px 10px;background:var(--gray-100);border-bottom:1px solid var(--gray-300)}
.isogroep>.groepkop b{font-size:15px;font-weight:800;display:block;line-height:1.25}
.isogroep>.groepkop span{font-size:var(--t-min);color:var(--gray-700);line-height:1.35;display:block;margin-top:2px}
.isogroep.heeft-aan{border-color:var(--merk);box-shadow:inset 0 0 0 1px var(--merk)}
.isokaart{border-top:1px solid var(--gray-300)}
.isokaart:first-of-type{border-top:0}
.isokaart.aan{background:var(--goed-tint)}
.isokaart .rij{display:grid;grid-template-columns:30px 27px 1fr auto;gap:13px;align-items:center;padding:11px 16px;min-height:66px}
.isokaart .vink{width:30px;height:30px;border-radius:9px;border:2px solid var(--gray-300);background:var(--vlak);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;position:relative;flex:none}
.isokaart .vink input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;width:100%;height:100%}
.isokaart .vink .ico{width:19px;height:19px;stroke-width:2.6;color:var(--merk-op);opacity:0;pointer-events:none}
.isokaart.aan .vink{background:var(--merk);border-color:var(--merk)}
.isokaart.aan .vink .ico{opacity:1}
.isokaart .rij>.ico{width:27px;height:27px;color:var(--merk-diep);stroke-width:1.4}
.isokaart .naam{font-size:15.5px;font-weight:700;line-height:1.25;display:block;color:var(--gray-900)}
.isokaart .wat{font-size:13px;color:var(--gray-700);line-height:1.35;margin-top:2px}
.isokaart .cijfers{text-align:right;white-space:nowrap}
.isokaart .cijfers .netto{font-size:19px;font-weight:800;color:var(--merk-diep)}
.isokaart .cijfers .rest{font-size:var(--t-min);color:var(--gray-500);white-space:normal;max-width:170px;margin-left:auto}
.isokaart:not(.aan) .cijfers .netto{color:var(--gray-500);font-weight:700}
.isokaart .instelknop{font-size:var(--t-min);color:var(--merk-diep);background:none;border:none;padding:6px 0 0;cursor:pointer;font-family:inherit;font-weight:600;display:inline-flex;align-items:center;gap:5px;min-height:32px}
.isokaart .instelknop .ico{width:14px;height:14px}
.isokaart .instellingen{display:none;border-top:1px solid var(--gray-300);padding:13px 16px 15px;background:var(--vlak)}
.isokaart.open .instellingen{display:block}
.isovelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px}
.isovelden .field label{display:block;font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:4px}
.isovelden .field input[type=number]{width:100%}
.isovelden .field select{width:100%}
.isoherkomst{margin-top:6px;display:block}
.isoopbouw{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
.isoopbouw .post{background:var(--gray-100);border-radius:var(--r-s);padding:7px 11px;font-size:var(--t-min);line-height:1.3;color:var(--gray-700)}
.isoopbouw .post b{display:block;font-size:14px;color:var(--gray-900);font-weight:800}
.isoopbouw .post.subs b{color:var(--goed)}
.isoof{display:flex;align-items:center;gap:10px;padding:0 16px;margin:0;background:var(--vlak)}
.isoof span{font-size:var(--t-min);font-weight:800;color:var(--gray-500);text-transform:uppercase;letter-spacing:.06em}
.isoof i{flex:1;height:1px;background:var(--gray-300);display:block}
@media(max-width:640px){
 .isokaart .rij{grid-template-columns:30px 1fr;row-gap:6px;padding:12px 13px}
 .isokaart .rij>.ico{display:none}
 .isokaart .cijfers{grid-column:1/-1;text-align:left}
 .isokaart .cijfers .rest{margin-left:0}
 .isoof{padding:0 13px}
 /* Dezelfde regel als in de vragenlijst: wat je aanraakt is 44 px. */
 .isokaart .vink{width:44px;height:44px;border-radius:12px}
 .isokaart .vink .ico{width:24px;height:24px}
 .isokaart .rij{grid-template-columns:44px 1fr}
 .isokaart .instelknop{min-height:44px}
 .isokaart .instellingen .small-btn{min-height:44px}
}
.pastniet{margin-top:14px}
.pastniet .maatregelrij{opacity:.65;border-style:dashed;background:transparent}
.pastniet .maatregelrij .vink{background:var(--gray-100);border-color:var(--gray-300);cursor:not-allowed}
.pastniet .reden{color:var(--let);font-size:var(--t-toel)}
.pastniet .kop{background:var(--let-tint);border:1px solid var(--let-rand);border-radius:var(--r-m);padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--gray-900);margin-bottom:9px}
.pastniet .kop .ico{width:22px;height:22px;color:var(--let);flex:none}
.knop{min-height:var(--raakvlak);padding:0 22px;border:none;border-radius:12px;font-family:inherit;font-size:16px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none}
@media (max-width:760px){
  .doelen{grid-template-columns:1fr 1fr;gap:8px}
  .doel{flex-direction:row;align-items:center;min-height:48px;padding:8px 12px;gap:9px}
  .doel .ico{width:21px;height:21px}
  .doel .sub{display:none}
  .doel .naam{font-size:14px;font-weight:700}
  .maatregelrij .rij{grid-template-columns:30px 1fr auto;gap:11px;padding:11px 13px}
  .maatregelrij .rij>.ico{display:none}
  .maatregelrij .cijfers .maand{font-size:17px}
  .knop{padding:0 16px;font-size:15px}
}

/* ================= wizard =================
   Ontwerp september 2026: een teal kopbalk, links een hoofdstukrail met
   voortgang en status per hoofdstuk, rechts één vraag groot met de uitleg
   ernaast en de aanname als knop. Op een telefoon wordt de rail een balk
   bovenin en staan de knoppen vast onderaan, binnen duimbereik. */
/* De achtergrond staat stil zolang de vragenlijst open is. Zonder dit
   scrollt de pagina eronder mee als je in de kaart scrollt. */
body.wizopen{overflow:hidden}
/* Een leeg vak moet er leeg uitzien: de plaatshouder lichter en schuin, zodat
   hij nooit voor een ingevuld getal door kan gaan. */
.wz-gasvak::placeholder{color:var(--gray-500,#63736f);font-style:italic;opacity:1}
.wz-gasschat b{font-weight:700}
.wizkruis{background:rgba(255,255,255,.12) !important;border:none;color:#fff;width:44px;min-width:44px;padding:0 !important;display:inline-flex;align-items:center;justify-content:center}
.wizkruis:hover{background:rgba(255,255,255,.24) !important}
#wizOverlay{position:fixed;inset:0;background:rgba(15,61,62,.55);backdrop-filter:blur(3px);z-index:100;display:none;align-items:center;justify-content:center;padding:16px;overflow-y:auto}
#wizOverlay.open{display:flex}
/* ---------- tv2: het traject ís de pagina ----------
   Het hoofdtraject staat niet als venster boven de tabbladen maar als de
   pagina zelf. Die tabbladen zijn sinds W8 (stap 2) weg; het traject rekent
   met VELD (v3velden.js). Een overlay nodigt uit om weggeklikt te worden;
   een pagina niet. */
body.tv2{background:var(--papier)}
/* wizopen zette de pagina op slot omdat er een venster overheen lag. Nu de
   pagina zelf het traject is, sluit die regel de bezoeker op in het bovenste
   scherm. */
body.tv2.wizopen{overflow:auto}
body.tv2 #wizOverlay{position:static;inset:auto;display:block;background:none;backdrop-filter:none;
  padding:0;overflow:visible;z-index:auto}
/* De minimumhoogte hoort op één plek. Stond hij hier én op .voordeur, dan kon
   de kaart hoger worden dan zijn inhoud en bleef er een strook wit onder de
   voet staan. */
body.tv2 .wizcard{max-width:none;width:100%;height:auto;max-height:none;border-radius:0;
  box-shadow:none;overflow:visible;display:flex;flex-direction:column}
/* De schermen van het traject brengen hun eigen breedte mee; op een pagina
   hoeven ze niet ook nog eens in een kaart te passen.

   En de voet hoort onderaan de pagina, niet onderaan de inhoud: bij een kort
   scherm bleef er anders een strook wit onder de voet staan, alsof de site
   daar ophoudt en er nog iets had moeten komen. Een kolom met de voet op
   margin-top:auto duwt hem naar beneden zonder hem vast te zetten -- bij een
   lang scherm scrollt hij gewoon mee. */
body.tv2 .voordeur{height:auto;overflow:visible;min-height:100svh;
  display:flex;flex-direction:column}
body.tv2 .voordeur>.kvoet{margin-top:auto}
body.tv2 .vdmain{max-width:var(--traj-breed);margin:0 auto;width:100%}
.wizcard{position:relative;background:var(--papier);border-radius:var(--r-xl);width:100%;max-width:1040px;box-shadow:0 18px 50px rgba(0,0,0,.28);overflow:hidden;display:flex;flex-direction:column;height:calc(100vh - 32px);max-height:960px}
.wizhead{background:var(--merk-diep);color:#fff;padding:0 22px;min-height:58px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex:none}
.wizhead .merkblok b{font-size:17px;font-weight:800}
.wizhead .rechts{display:flex;align-items:center;gap:14px;font-size:13px;opacity:.9}
.wizhead .rechts .slot{display:inline-flex;align-items:center;gap:7px}
.wizhead .stap{font-size:13px;color:rgba(255,255,255,.85);display:flex;justify-content:space-between;gap:10px;align-items:center}
.wizhead button,.wizhead .stap button{background:rgba(255,255,255,.14);border:none;color:#fff;border-radius:9px;min-height:40px;padding:0 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.wizhead button:hover{background:rgba(255,255,255,.24)}
.wizlichaam{display:grid;grid-template-columns:300px minmax(0,1fr);flex:1;min-height:0}
/* De rail (ontwerp L, onderdeel A): per hoofdstuk een balk en "x van y", en
   per vraag een toestand met pictogram én tekst. Nooit alleen kleur. */
.wizrail{background:var(--vlak);border-right:1px solid var(--gray-300);display:flex;flex-direction:column;gap:4px;overflow-y:auto;padding:14px 12px}
.wizrail .kop{padding:0 8px 8px;font-size:13px;color:var(--gray-700)}
.wizrail .kop b{color:var(--gray-900)}
.hgroep{border-radius:12px;border:1px solid transparent}
.hgroep.hier{border-color:var(--merk-zacht)}
.hkop{width:100%;min-height:52px;border:none;background:none;font:inherit;color:inherit;cursor:pointer;display:grid;
  grid-template-columns:22px minmax(0,1fr) 18px;gap:8px;align-items:center;padding:6px 8px;text-align:left;border-radius:12px}
.hkop:hover{background:var(--gray-100)}
.hst{display:inline-flex;align-items:center;justify-content:center;color:var(--merk-diep)}
.hst .ico{width:20px;height:20px}
.hgroep.af .hst{color:var(--goed)}
.hrond{width:16px;height:16px;border:2px solid var(--gray-500);border-radius:50%;display:inline-block;box-sizing:border-box;flex:none}
.hrond.half{border-color:var(--merk-diep);background:linear-gradient(90deg,var(--merk-diep) 50%,transparent 50%)}
.hmid{min-width:0;display:block}
.hmid b{display:block;font-size:14px;font-weight:800;overflow-wrap:anywhere}
.hbalkrij{display:flex;align-items:center;gap:8px;margin-top:4px}
.hbalk{flex:1;display:block;height:5px;background:var(--gray-100);border-radius:3px;overflow:hidden}
.hbalk i{display:block;height:100%;background:var(--merk-diep)}
.htel{font-size:13px;font-weight:700;color:var(--gray-700);white-space:nowrap}
.hchev{width:18px;height:18px;color:var(--gray-500);transform:rotate(90deg);transition:transform .15s}
.hkop[aria-expanded="true"] .hchev{transform:rotate(-90deg)}
.hvragen{list-style:none;margin:0;padding:0 6px 6px}
.hvraag{width:100%;min-height:44px;border:none;border-radius:9px;background:transparent;font:inherit;color:inherit;cursor:pointer;
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:7px;align-items:start;padding:6px 7px;text-align:left}
.hvraag:hover{background:var(--gray-100)}
.hvraag.hier,.hvraag.hier:hover{background:var(--merk-tint)}
.hvst{display:inline-flex;justify-content:center;margin-top:1px}
.hvst .ico{width:18px;height:18px}
.hvst .hrond{width:15px;height:15px;margin-top:1px}
.hvv{display:block;font-size:13px;font-weight:600;line-height:1.25;color:var(--gray-900)}
.hvraag.hier .hvv{font-weight:800}
.hvs{display:block;font-size:13px;line-height:1.3;margin-top:1px;overflow-wrap:anywhere}
.hvraag.register .hvst,.hvraag.register .hvs,.hvraag.hier .hvst,.hvraag.hier .hvs{color:var(--merk-diep)}
.hvraag.beantwoord .hvst,.hvraag.beantwoord .hvs{color:var(--goed)}
.hvraag.aanname .hvst,.hvraag.aanname .hvs{color:var(--let)}
.hvraag.open .hvs{color:var(--gray-500)}
.hlegenda{margin-top:10px;padding:10px 8px 0;border-top:1px solid var(--gray-100);display:grid;gap:4px;font-size:13px;color:var(--gray-700)}
.hlegenda span{display:grid;grid-template-columns:20px 1fr;gap:7px;align-items:center}
.hlegenda .ico{width:16px;height:16px;justify-self:center}
.hlegenda .hrond{width:14px;height:14px;justify-self:center}
.hlegenda .register .ico,.hlegenda .hier .ico{color:var(--merk-diep)}
.hlegenda .beantwoord .ico{color:var(--goed)}
.hlegenda .aanname .ico{color:var(--let)}
.wizrail .voet{margin-top:auto;padding:14px 8px 0;border-top:1px solid var(--gray-100)}
.wizrail .voet button{background:var(--merk-tint);border:none;border-radius:10px;width:100%;min-height:46px;font-size:13.5px;font-weight:700;font-family:inherit;color:var(--merk-diep);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.wizrail .voet button:hover{background:var(--merk-zacht)}
/* Telefoon: een strook met het hoofdstuk en de voortgang, die het blad opent. */
.wizstrook{display:none;flex:none;width:100%;border:none;border-bottom:1px solid var(--gray-300);background:var(--vlak);font:inherit;color:inherit;
  min-height:56px;padding:6px 14px;grid-template-columns:22px minmax(0,1fr) auto 20px;gap:9px;align-items:center;text-align:left;cursor:pointer}
.wizstrook .hmid b{font-size:13.5px}
.wizstrook .hbalk{margin-top:4px}
.wizstrook .htel{font-weight:600}
.wizblad{position:fixed;inset:0;z-index:70;background:rgba(15,40,40,.42);display:flex;flex-direction:column;justify-content:flex-end}
.wizbladvak{background:var(--vlak);border-radius:18px 18px 0 0;max-height:80%;display:flex;flex-direction:column}
.wizbladkop{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 4px 18px}
.wizbladkop b{display:block;font-size:16px;font-weight:800}
.wizbladkop span{font-size:13px;color:var(--gray-700)}
.wizbladsluit{width:44px;height:44px;border:none;background:var(--gray-100);border-radius:12px;color:var(--merk-diep);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.wizbladsluit .ico{width:22px;height:22px}
.wizbladlijst{flex:1;min-height:0;overflow-y:auto;padding:6px 10px 16px;display:flex;flex-direction:column;gap:4px}
.wizbladlijst .hvv{font-size:13.5px}
.wizbladlijst .hvs{font-size:13px}
.wizfoot .kort{display:none}
.wizbody{padding:26px 30px;overflow-y:auto;flex:1;display:flex;flex-direction:column;min-height:0}
.wizbody .hoofdstuknaam{font-size:14px;font-weight:700;color:var(--merk-diep)}
.wizbody h3{margin:8px 0 0;font-size:32px;color:var(--gray-900);line-height:1.05;display:flex;align-items:flex-start;gap:12px;font-weight:800;letter-spacing:-.03em;text-wrap:pretty}
.wizbody h3 .ico{width:32px;height:32px;stroke-width:1.4;color:var(--merk-diep);flex:none;margin-top:2px}
.wizbody .uitleg{background:var(--info-tint);border-left:4px solid var(--info);border-radius:0 12px 12px 0;padding:14px 18px;margin:16px 0 0;display:flex;gap:12px;font-size:var(--t-lopend);line-height:1.5;color:var(--gray-900)}
.wizbody .uitleg .ico{width:22px;height:22px;color:var(--info);flex:none;margin-top:2px}
.wizbody #wizVeld{margin-top:20px}
.wizbody .grid{gap:14px 16px}
.wizbody label{font-size:13px;color:var(--gray-700);font-weight:600}
.wizbody input[type=number],.wizbody input[type=text],.wizbody select{font-size:16px;padding:10px 12px;min-height:48px}
.wizbody .tekenkaart{margin-top:16px;background:var(--vlak)}
.wizfoot{margin-top:auto;padding:20px 0 0;border-top:1px solid var(--gray-300);display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.wizfoot .rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
.wizfoot button{border-radius:12px;font-size:15px;font-weight:600;padding:0 18px;min-height:56px;cursor:pointer;border:1px solid var(--gray-300);background:transparent;color:var(--gray-700);font-family:inherit}
.wizfoot button.pri{background:var(--knop);border-color:var(--knop);color:var(--knop-op);font-weight:800;font-size:17px;padding:0 26px}
.wizfoot button.pri:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
/* "Ik weet het niet" met de aanname erin: overslaan is een geïnformeerde
   keuze en geen gat. Nooit wegstoppen achter een link. */
.wizfoot button.link{background:var(--merk-tint);border:1px dashed var(--gray-300);color:var(--merk-diep);font-size:14.5px;font-weight:400;text-align:left;line-height:1.25;padding:6px 16px}
.wizfoot button.link small{display:block;font-size:13px;color:var(--gray-500)}
.wizkeuzes{display:flex;flex-direction:column;gap:10px}
.wizkeuze{border:2px solid var(--gray-300);border-radius:var(--r-l);padding:14px 18px;min-height:62px;cursor:pointer;background:var(--vlak);display:flex;gap:14px;align-items:center;text-align:left;font-size:17px;width:100%;font-family:inherit;color:var(--gray-900)}
.wizkeuze:hover{border-color:var(--merk-zacht);background:var(--gray-100)}
.wizkeuze.on{border-color:var(--merk);background:var(--goed-tint)}
.wizkeuze .bol{width:26px;height:26px;border-radius:50%;border:2px solid var(--gray-300);background:var(--vlak);flex:none;display:inline-flex;align-items:center;justify-content:center}
.wizkeuze .bol .ico{width:14px;height:14px;stroke-width:2.8;color:var(--merk-op);opacity:0}
.wizkeuze.on .bol{background:var(--merk);border-color:var(--merk)}
.wizkeuze.on .bol .ico{opacity:1}
.wizkeuze .kt{font-weight:700;color:var(--gray-900);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.wizkeuze .tijd{font-weight:400;font-size:13px;color:var(--gray-500);background:var(--gray-100);
  border-radius:20px;padding:2px 9px}
.wizkeuze .ku{font-size:14px;color:var(--gray-700);display:block;margin-top:2px;font-weight:400}
.wiztabel{width:100%;font-size:13px}
.wiztabel input,.wiztabel select{width:100%;font-size:13px;padding:6px 7px}
.wizhint{font-size:var(--t-toel);color:var(--gray-500);margin-top:6px}
/* UX 74: een link in lopende tekst is merkkleur met onderstreping, niet browserblauw. */
.wizhint a,.hint a,.trajonder a,.trajvoet a{color:var(--merk-diep);text-decoration:underline;text-underline-offset:3px}
.wizhint a:hover,.hint a:hover,.trajonder a:hover,.trajvoet a:hover{color:var(--gray-900)}
.wizhint .ico{color:var(--gray-500)}
.wizsam{font-size:14px;margin-top:16px}
.wizsam .r{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dotted var(--gray-300)}
.wizsam .r b{color:var(--merk-diep);text-align:right}
/* ---- de vraagsoorten van ontwerp L: registers, kamers, toestellen, export ---- */
#wizVeld>*+*{margin-top:14px}
.wizkeuzes.klein{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.wiznoot{display:flex;gap:9px;align-items:flex-start;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:12px;
  padding:10px 13px;font-size:var(--t-toel);line-height:1.45;color:var(--let-tekst);margin-top:14px}
#wizVeld>.wiznoot:first-child{margin-top:0}
.wiznoot .ico{width:20px;height:20px;color:var(--let);flex:none}
.wizmelding{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;border-radius:12px;padding:11px 14px;font-size:var(--t-toel);line-height:1.45}
.wizmelding>span{flex:1;min-width:200px}
.wizmelding>.ico{width:20px;height:20px;flex:none}
.wizmelding.tint{background:var(--merk-tint)}
.wizmelding.tint>.ico{color:var(--merk-diep)}
.wizmelding.fout{background:var(--fout-tint);border:1px solid var(--fout-rand)}
.wizmelding.fout>.ico{color:var(--fout)}
.wizmelding.let{background:var(--let-tint);border:1px solid var(--let-rand)}
.wizmelding.let>.ico{color:var(--let)}
#wizInvoerMelding{margin-top:12px}
.wizchip{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--merk-diep);
  background:var(--merk-tint);border-radius:999px;padding:3px 10px;width:max-content;max-width:100%}
.wizchip .ico{width:15px;height:15px;flex:none}
.wizchip.schat{background:transparent;border:1px dashed currentColor}
.wizknop2{align-self:flex-start;min-height:44px;padding:0 14px;border:1px solid var(--merk-diep);border-radius:11px;background:var(--vlak);
  color:var(--merk-diep);font:inherit;font-size:14px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wizknop2 .ico{width:18px;height:18px}
.wizknop2.streep{border-style:dashed}
.wizknop2.fout{border-color:var(--fout);color:var(--fout)}
.wizknop{min-height:44px;padding:0 16px;border:none;border-radius:11px;background:var(--merk-diep);color:#fff;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.wizlijstkop{font-size:15px;font-weight:800;color:var(--gray-900)}
.wizlees{font-size:var(--t-toel);color:var(--gray-700);line-height:1.5;max-width:64ch;margin:0}
.wizbronregel{font-size:var(--t-toel);color:var(--gray-500);margin:0}
.wizbronzin{display:flex;gap:9px;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45;margin:0}
.wizbronzin .ico{width:19px;height:19px;color:var(--merk-diep);flex:none}
.wizbronzin b{color:var(--gray-900)}
/* registerkaart */
.wizreg{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px}
.wizregkop{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.wizregkop b{font-size:26px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.wizreg p{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.5}
/* C: inhoud en vermogen */
.wizinhoud{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.wizinhoudkaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.wizinhoudkaart .kop{font-size:13px;font-weight:700;color:var(--gray-700);display:flex;gap:6px;align-items:center}
.wizinhoudkaart .kop .ico{width:18px;height:18px}
.wizinhoudkaart .groot{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.wizinhoudkaart .onder{font-size:var(--t-toel);color:var(--gray-700);line-height:1.4}
.wizinhoudkaart .wizchip{margin-top:4px;font-size:13px;padding:2px 9px}
.wizinhoudkaart.donker{background:var(--merk-diep);border-color:var(--merk-diep);color:#fff}
.wizinhoudkaart.donker .kop,.wizinhoudkaart.donker .onder{color:#fff}
.wizinhoudkaart.donker .groot{color:var(--goed-op-diep)}
.wizinhoudkaart.donker .wizchip.schat{color:#fff;border-color:var(--goed-op-diep)}
.wizkws{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:4px 16px}
.wizkw{display:grid;grid-template-columns:minmax(0,1fr) 80px 64px;gap:10px;align-items:center;padding:7px 0;font-size:13.5px}
.wizkw+.wizkw{border-top:1px solid var(--gray-100)}
.wizkwbalk{display:block;height:8px;background:var(--gray-100);border-radius:4px;overflow:hidden}
.wizkwbalk i{display:block;height:100%;background:var(--merk-diep)}
.wizkw b{text-align:right}
.wizinhoudpas{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:14px;font-weight:700}
.wizinhoudpas input{width:120px}
.wizinhoudpas .wizhint{flex-basis:100%;margin:0}
/* D: de dakvlakken */
.wizdakken{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.wizdak{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:9px}
.wizdakkop{display:flex;align-items:center;gap:12px}
.wizdakletter{width:52px;height:52px;border-radius:50%;border:2px solid var(--merk-diep);display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;color:var(--merk-diep);flex:none}
.wizdakkop b{display:block;font-size:16px;font-weight:800}
.wizdakkop small{display:block;font-size:13px;color:var(--gray-700)}
.wizdakzon{font-size:13px;color:var(--gray-700);display:flex;gap:6px;align-items:center}
.wizdakzon .ico{width:17px;height:17px}
.wizdakvraag{font-size:13px;font-weight:700;color:var(--gray-700)}
.wizrichting{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.wizrichting button{min-height:44px;border:2px solid var(--gray-300);border-radius:10px;background:var(--vlak);color:var(--merk-diep);font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.wizrichting button.on{background:var(--merk-diep);border-color:var(--merk-diep);color:#fff}
.wizplat{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center}
.wizplat>.ico{width:36px;height:36px;color:var(--merk-diep);flex:none}
.wizplat b{font-size:20px;font-weight:800}
.wizplat p{margin:2px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.wizmulti{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.wizmulti button{min-height:48px;padding:0 12px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;color:var(--gray-900);
  font-size:14px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;text-align:left}
.wizmulti button.on{border-color:var(--merk-diep);background:var(--merk-tint)}
.wizmulti .vak{width:20px;height:20px;border:2px solid var(--merk-diep);border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--vlak)}
.wizmulti button.on .vak{background:var(--merk-diep)}
.wizmulti .vak .ico{width:13px;height:13px;color:#fff;stroke-width:2.8}
/* Een uitleg onder een tegel ("haalt de rest weg", ontwerp L). */
.wizmulti .wmsub{display:block;font-size:13px;font-weight:600;color:var(--gray-700)}
/* E: het label */
.wizlabels{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}
.wizlabelkaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:12px 14px;display:flex;gap:12px;align-items:center}
.wizlabelkaart>span:last-child{min-width:0;display:flex;flex-direction:column}
.wizlabelkaart b{font-size:14px;font-weight:800}
.wizlabelkaart small{font-size:13px;color:var(--gray-700);line-height:1.35}
.wizlabelkaart .wizchip{margin-top:4px;font-size:13px;padding:1px 8px}
.wizlabelkaart .wizchip.schat{color:var(--let);background:var(--let-tint);border:none}
.wizletter{width:50px;height:50px;border-radius:10px;font-size:22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box}
.wizletter.officieel{background:var(--merk-diep);color:#fff;border:2px solid var(--merk-diep)}
.wizletter.aanname{background:var(--vlak);color:var(--merk-diep);border:2px dashed var(--merk-diep)}
/* F: de toestellen */
.wizniv{display:inline-flex;gap:4px;flex-wrap:wrap;background:var(--gray-100);border-radius:14px;padding:4px}
.wizniv button{min-height:44px;padding:0 12px;border:none;border-radius:10px;background:transparent;color:var(--gray-700);font:inherit;font-size:13.5px;font-weight:800;
  cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.wizniv button .ico{width:18px;height:18px}
.wizniv button.on{background:var(--vlak);color:var(--merk-diep);box-shadow:0 1px 4px rgba(15,61,62,.2)}
.wizniv.klein{padding:3px;gap:3px;border-radius:12px}
.wizniv.klein button{padding:0 11px;font-size:13px}
.wizschat{background:var(--vlak);border:1px dashed var(--merk-diep);border-radius:14px;padding:14px 16px;display:flex;gap:10px}
.wizschat>.ico{width:22px;height:22px;color:var(--let);flex:none}
.wizschat b{font-size:15px;font-weight:800}
.wizschat p{margin:2px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.5}
.wizcrumbs{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wizcrumbs>span{font-size:13px;color:var(--gray-700)}
.wizcrumb{min-height:44px;padding:0 12px;border:1px solid var(--merk-diep);border-radius:999px;background:var(--merk-tint);color:var(--merk-diep);font:inherit;
  font-size:13.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.wizcrumb .ico{width:16px;height:16px}
.wizlijst{display:flex;flex-direction:column;gap:7px}
.wizitem{min-height:54px;padding:8px 13px;border:2px solid var(--gray-300);border-radius:13px;background:var(--vlak);font:inherit;color:var(--gray-900);cursor:pointer;
  display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;text-align:left}
.wizitem:hover{border-color:var(--merk-zacht)}
.wizitem.on{border-color:var(--merk-diep);background:var(--merk-tint)}
.wizitem>.ico{width:20px;height:20px;color:var(--merk-diep)}
.wizitem .wt{min-width:0}
.wizitem .wt b{display:block;font-size:15px;font-weight:800}
.wizitem .wt small{display:block;font-size:13px;color:var(--gray-700)}
.wizbron{font-size:13px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap}
.wizbron.fab{color:var(--subsidie);background:var(--subsidie-tint)}
.wizbron.ind{color:var(--let);background:var(--let-tint)}
.wizvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.wizveld{display:flex;flex-direction:column;gap:5px;font-size:13.5px;font-weight:700;color:var(--gray-900)}
.wizmet{display:flex;align-items:center;gap:8px}
.wizmet input{flex:1;min-width:0}
.wizmet .eenh{font-size:13.5px;color:var(--gray-700);font-weight:400}
.wizmerken{display:flex;gap:6px;flex-wrap:wrap}
.wizmerken button{min-height:44px;padding:0 12px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);font:inherit;font-size:13.5px;font-weight:700;color:var(--gray-900);cursor:pointer}
.wizmerken button.on{border-color:var(--merk-diep);background:var(--merk-tint)}
.wizaircokaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:9px}
.wizaircokop{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.wizaircokop>b{font-size:16px;font-weight:800;display:flex;gap:7px;align-items:center}
.wizaircokop>b .ico{width:20px;height:20px;color:var(--merk-diep)}
.wizaircoschat{margin:0;font-size:var(--t-toel);color:var(--gray-700);display:flex;gap:6px;line-height:1.45}
.wizaircoschat .ico{width:17px;height:17px;color:var(--let);flex:none}
/* G: de kamertabel; op iPad en telefoon wordt elke kamer een kaart */
.wizkamerkop{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.wizkamerkop .tn{font-size:13px;color:var(--gray-700)}
.wizkamers{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;overflow:hidden}
.wizkamer{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.1fr) minmax(0,1.1fr) 76px 80px 44px;gap:8px;padding:5px 12px;align-items:center}
.wizkamer+.wizkamer{border-top:1px solid var(--gray-100)}
.wizkamer.kop{padding:9px 12px;font-size:13px;font-weight:800;color:var(--gray-500)}
.wizkamer label{display:block;margin:0;min-width:0}
.wizkamer label>span{display:none}
.wizbody .wizkamer input,.wizbody .wizkamer select{width:100%;min-width:0;min-height:44px;font-size:14px;padding:0 10px}
.wizkamer label.naam input{font-weight:700}
.wizkamer input[type=number]{text-align:right}
.wizweg{width:44px;height:44px;border:none;background:var(--gray-100);border-radius:10px;color:var(--merk-diep);cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.wizweg .ico{width:20px;height:20px}
@media (max-width:1024px){
  .wizkamers{background:none;border:none;border-radius:0;overflow:visible;display:flex;flex-direction:column;gap:8px}
  .wizkamer.kop{display:none}
  .wizkamer,.wizkamer+.wizkamer{position:relative;background:var(--vlak);border:1px solid var(--gray-300);border-radius:13px;padding:9px 10px;grid-template-columns:1fr 1fr;gap:7px}
  .wizkamer label.naam{grid-column:1/-1;padding-right:52px}
  .wizkamer label>span{display:block;font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:2px}
  .wizkamer label.naam>span{display:none}
  .wizbody .wizkamer label.naam input{font-size:15px;font-weight:800}
  .wizweg{position:absolute;top:9px;right:10px}
}
/* I: de export */
.wizupload{min-height:120px;border:2px dashed var(--merk-diep);border-radius:16px;background:var(--vlak);color:var(--merk-diep);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;text-align:center}
.wizupload .ico{width:34px;height:34px}
.wizupload b{font-size:16px;font-weight:800}
.wizupload span{font-size:13px;color:var(--gray-700)}
.wizverborgen{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.wizverborgen:focus-visible+label{outline:3px solid var(--merk-diep);outline-offset:3px}
.wizexport{background:var(--goed-tint);border-radius:14px;padding:13px 16px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.wizexport>.ico{width:24px;height:24px;color:var(--goed);flex:none}
.wizexport>div{flex:1;min-width:200px}
.wizexport b{display:block;font-size:15px;font-weight:800}
.wizexport .tn{display:block;font-size:13px;color:var(--gray-700)}
.wizstappen{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:12px 16px;display:flex;flex-direction:column;gap:6px;
  font-size:13.5px;line-height:1.45;color:var(--gray-700)}
.wizstappen>b{color:var(--gray-900);font-weight:800}
/* ---- de voordeur: het budget is de eerste vraag --------------------
   Links de vraag en de schuif, rechts het antwoord voor een voorbeeldhuis
   dat live meebeweegt. Geen huis-illustratie: die trok de aandacht weg van
   het resultaat. */
.voordeur{display:flex;flex-direction:column;height:100%;min-height:0;overflow-y:auto}
.voordeur .vdkop{padding:0 32px;min-height:64px;display:flex;justify-content:space-between;align-items:center;flex:none}
.voordeur .vdkop .merkblok b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.voordeur .vdkop .links{display:flex;gap:18px;font-size:14px;color:var(--gray-700)}
.voordeur .vdkop .links button,.voordeur .vdkop .links a{background:none;border:none;font:inherit;color:inherit;cursor:pointer;padding:0;min-height:44px;text-decoration:none;display:inline-flex;align-items:center}
.voordeur .vdkop .links button:hover,.voordeur .vdkop .links a:hover{color:var(--merk-diep);text-decoration:underline}
.vdmain{padding:8px clamp(16px,4vw,32px) 28px;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(20px,3vw,36px);align-items:start}
.vdpil{display:inline-flex;align-items:center;gap:8px;background:var(--merk-tint);border:1px solid var(--gray-300);border-radius:var(--r-rond);padding:6px 14px 6px 8px;font-size:14px;font-weight:600;color:var(--gray-700)}
.vdpil .vinkbol{width:22px;height:22px;border-radius:50%;background:var(--goed);color:#fff;display:inline-flex;align-items:center;justify-content:center;flex:none}
.vdpil .vinkbol .ico{width:14px;height:14px;stroke-width:2.4}
.vdlinks h2{font-size:44px;margin:16px 0 0;color:var(--gray-900);line-height:.98}
.vdlinks p.onder{font-size:18px;line-height:1.45;color:var(--gray-700);margin:14px 0 0;max-width:36ch}
.vdlinks .budgetkaart{margin:20px 0 0}
.vdlinks .wizkeuzes{margin-top:16px}
.vdlinks .wizkeuze{padding:12px 16px;min-height:58px}
.vdlinks .wizkeuze .kt{font-size:16px}
.vdlinks .wizkeuze.hoofd{background:var(--knop);border-color:var(--knop);color:var(--knop-op)}
.vdlinks .wizkeuze.hoofd .kt,.vdlinks .wizkeuze.hoofd .ku,.vdlinks .wizkeuze.hoofd>.ico{color:var(--knop-op)}
.vdlinks .wizkeuze.hoofd .tijd{background:rgba(0,0,0,.08);color:var(--knop-op)}
.vdlinks .wizkeuze.hoofd:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
.vdlinks .wizhint{margin-top:14px}
/* "Wat gaan we doen" — de tool is complex, dus dat hoort op de voordeur
   te staan en niet pas te blijken. */
/* ---------- het hoofdtraject (ontwerp A) ----------
   De kop is hier een vraag en geen kreet, en een vraag is langer. Op 44px
   liep "Hoeveel kun of wil je uitgeven aan het verduurzamen van je woning?"
   over vier regels en duwt hij de schuif van het scherm. */
.traject .vdlinks h2{font-size:32px;line-height:1.12;max-width:20ch}
.traject .vdlinks p.onder{font-size:var(--t-lopend);max-width:46ch}
.traject .budgetkaart{margin-top:22px}
.trajknoppen{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:18px}
.trajknop{background:var(--knop);color:var(--knop-op);border:2px solid var(--knop);border-radius:var(--r-l);
  padding:0 26px;min-height:54px;font:inherit;font-size:17px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px}
.trajknop:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
.trajknop .ico{width:18px;height:18px}
.trajlink{background:none;border:none;font:inherit;font-size:15px;color:var(--gray-700);cursor:pointer;
  padding:0;min-height:44px;text-decoration:underline}
.trajlink:hover{color:var(--merk-diep)}
/* De uitzondering staat onder de knop en vervangt hem niet: de gewone weg
   blijft de gewone weg, ook als je hem niet neemt. */
.trajuitz{margin-top:16px;border:2px dashed var(--gray-300);border-radius:var(--r-l);padding:16px 20px 18px;background:var(--vlak)}
.trajuitz h3{margin:0;font-size:19px;letter-spacing:-.01em}
.trajuitz p{margin:8px 0 0;font-size:var(--t-lopend);line-height:var(--t-regel);color:var(--gray-700)}
.trajuitz .wizkeuzes{margin-top:14px}
.trajuitz .wizkeuze{min-height:54px;padding:12px 16px}
/* Stap 2 tot en met 5 staan in één kolom: er is geen antwoordpaneel meer
   omdat het antwoord pas na stap 3 bestaat. */
/* Eén maatvoering voor het hele traject in plaats van vier losse getallen.
   De schermen verschillen in inhoud, niet in hoe breed ze mogen worden: een
   formulier leest smal, een lijst met een totaal ernaast breed. Meer maten dan
   deze twee is willekeur.

   clamp in plaats van een vaste breedte: op een telefoon vult hij de ruimte,
   op een breed scherm houdt hij op met groeien waar een regel te lang wordt om
   te lezen. */
.trajmain{padding:10px clamp(16px,4vw,32px) 32px;max-width:var(--traj-smal);margin:0 auto;width:100%}
.trajvraag{font-size:30px;line-height:1.14;margin:10px 0 0;letter-spacing:-.02em;max-width:22ch}
/* Een kop van meer dan een regel of acht woorden is geen kreet meer maar een
   zin, en een zin leest beter iets kleiner en iets breder. */
.trajvraag.lang{font-size:25px;max-width:34ch}
.trajonder{font-size:var(--t-lopend);line-height:1.5;color:var(--gray-700);margin:12px 0 0;max-width:62ch}
/* Stap 2 (ontwerp L, onderdeel B): "Jouw keuze" bovenaan, met een kruisje per
   regel; daaronder alles wat er nog meer is, per groep, als kaarten met +.
   Elke kaart draagt het pictogram van de maatregel; gekozen is het vlak teal
   en het pictogram wit (ontwerp "pictogrammen maatregelen"). */
.trajs2kop{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.trajs2kop>div:first-child{flex:1;min-width:220px}
.trajs2teller{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:8px 16px;text-align:right}
.trajs2teller b{display:block;font-size:26px;font-weight:800;line-height:1.1}
.trajs2teller span{font-size:13px;color:var(--gray-500)}
#trajGekozen{margin-top:10px}
.trajkeuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.trajkeuze{background:var(--vlak);border:2px solid var(--merk-diep);border-radius:15px;padding:12px 10px 12px 13px;
  display:grid;grid-template-columns:auto minmax(0,1fr) 44px;gap:12px;align-items:start;min-height:84px}
.trajkeuze b,.trajerbij b{display:block;font-size:15px;font-weight:800;line-height:1.25}
.trajkeuze .prijs{display:block;font-size:13px;color:var(--merk-diep);font-weight:700;margin-top:3px}
.trajkeuze .geen{display:flex;gap:4px;font-size:13px;color:var(--let);margin-top:3px;line-height:1.35}
.trajkeuze .geen .ico{width:15px;height:15px;flex:none;margin-top:1px}
.trajkeuzeweg{width:44px;height:44px;border:none;background:var(--gray-100);border-radius:11px;color:var(--merk-diep);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.trajkeuzeweg .ico{width:20px;height:20px}
.trajmeerkop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-top:1px solid var(--gray-300);padding-top:14px;margin-top:22px}
.trajmeerkop .trajkopje{margin:0}
.trajmeerkop .tn{font-size:13px;color:var(--gray-700)}
.trajgroep{margin-top:14px}
.trajgroepkop{font-size:13px;font-weight:800;color:var(--gray-700);margin-bottom:6px;display:flex;gap:6px;align-items:center}
.trajgroepkop .ico{width:17px;height:17px}
.trajerbijs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:9px}
.trajerbij{min-height:84px;padding:12px 10px 12px 13px;border:2px solid var(--gray-300);border-radius:15px;background:var(--vlak);font:inherit;
  color:var(--gray-900);cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) 36px;gap:12px;align-items:start;text-align:left}
.trajerbij:hover{border-color:var(--merk-zacht)}
.trajerbij .tn{display:block;font-size:13px;color:var(--gray-700);margin-top:3px}
.trajerbij .plus{width:36px;height:36px;border-radius:10px;background:var(--merk-tint);color:var(--merk-diep);
  display:inline-flex;align-items:center;justify-content:center}
.trajerbij .plus .ico{width:20px;height:20px}
.trajhulp{font-size:15px;color:var(--gray-700)}
/* De knop waarmee je verder gaat staat op elk stapscherm op dezelfde plek:
   rechtsboven, in de spoorbalk, naast de stap waar je bent.

   Hij stond eerst vast onderaan het venster. Dat hield hem wel op één plek,
   maar hij lag daarmee over de laatste regels van elk scherm dat te lang was
   om in één keer te zien -- juist de schermen waar je moet scrollen. Boven
   heeft niemand er last van, en omdat de spoorbalk meeplakt blijft hij
   bereikbaar hoe ver je ook naar beneden bent.

   De balk zelf is geen kader meer maar een rijtje: de knop uiterst rechts, de
   toelichting ("6 dingen gaan mee naar stap 4") ervoor. */
.trajactie{margin:0;display:flex;align-items:center;gap:12px;flex-direction:row-reverse}
/* De plek zelf houdt zijn hoogte, wat voor knop er ook in komt te staan. De
   knop van de vragenlijst is een andere dan die van de stapschermen; zonder
   deze hoogte werd de spoorbalk halverwege stap 3 vier pixels lager en
   verschoof alles eronder mee. */
.kactie{flex:none;display:flex;align-items:center;justify-content:flex-end;gap:12px;
  min-height:56px}
.kactie .trajhulp{font-size:13.5px;color:var(--gray-700);text-align:right;max-width:34ch}
.kactie .trajknop,.kactie .pri{min-height:44px;white-space:nowrap}
/* De knop uit de vragenlijst staat nu buiten .wizfoot, dus die opmaak pakt hem
   niet meer. Hier krijgt hij hem alsnog, in dezelfde maat als de verderknop
   van de stapschermen. */
.kactie .rechts{display:flex;align-items:center;gap:10px}
/* PC 34 en 44: Verder en Volgende staan ook onderaan het scherm, waar Tab na je antwoord uitkomt. */
.kverderonderblok{margin-top:24px;justify-content:flex-end}
.wizbody .kverderonderblok{margin-top:auto;padding-top:20px}
.kverderonder{min-height:44px}
.kverderonder[aria-disabled="true"],#trajVerder3[aria-disabled="true"]{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-700);cursor:default}
/* UX 54: de reden staat bij de knop; op een telefoon past hij alleen onderaan. */
.kactie .trajhulp.nodig,.kverderonderblok .trajhulp.nodig{font-weight:700;color:var(--gray-900)}
.kverderonderblok .trajhulp{font-size:15px;color:var(--gray-700)}
.kactie .rechts button{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  border-radius:12px;font-family:inherit;font-size:17px;font-weight:800;padding:0 26px;
  min-height:44px;cursor:pointer;background:var(--knop);border:1px solid var(--knop);
  color:var(--knop-op)}
.kactie .rechts button:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
/* In de vragenlijst gaat de hele rij mee naar boven: Vorige, "Ik weet het
   niet" en Volgende. Daar zijn het geen drie losse knoppen meer maar een rijtje
   in de balk, dus het kader, de streep en de ruimte eromheen vervallen. Blijft
   hij onverhoopt staan waar hij stond (geen spoor, dus geen plek), dan is het
   nog steeds een gewone rij onder de vraag. */
body.tv2 .wizfoot{position:static;padding:12px 0 0;background:none;box-shadow:none;
  border-top:1px solid var(--gray-300)}
/* Met body.tv2 ervoor, anders wint de regel hierboven op de padding en staat
   de rij in de balk zeven pixels lager dan op de stapschermen. */
body.tv2 .kactie .wizfoot{margin:0;padding:0;border:none;background:none;box-shadow:none;
  display:flex;align-items:center;gap:9px;flex-wrap:nowrap}
.kactie .wizfoot>button{min-height:44px;padding:0 14px;font-size:14px;white-space:nowrap}
.kactie .wizfoot>button.link{background:none;border:1px solid var(--gray-300);
  border-style:dashed;color:var(--merk-diep);font-weight:600}
.kactie .wizfoot .rechts{margin-left:0}
/* De aanname stond als kleine regel op de knop "Ik weet het niet". In de balk
   past die niet, en hij hoort ook niet op een knop: het is informatie over het
   antwoord, niet over de handeling. Dus staat hij nu onder de vraag, waar je
   toch al kijkt. */
.wizaanname{display:flex;align-items:flex-start;gap:9px;margin:16px 0 0;
  font-size:var(--t-toel);line-height:1.5;color:var(--gray-700)}
.wizaanname .ico{width:17px;height:17px;flex:none;margin-top:2px;color:var(--merk-diep)}
.wizaanname b{font-weight:700;color:var(--gray-900)}
/* Onder 860px is er naast het spoor geen ruimte meer voor een zin erbij; de
   knop zelf blijft staan, want die is de weg vooruit. */
@media(max-width:860px){
  .kactie .trajhulp{display:none}
  /* Drie opschriften naast het spoor passen hier niet meer. "Vorige" wordt
     zijn pijl -- de betekenis zit in het pictogram en de naam blijft voor de
     schermlezer staan. De andere twee houden hun woorden, want daar zit de
     betekenis wél in de tekst. */
  .kactie .wizfoot>#wizTerug{padding:0 12px;gap:0}
  .kactie .wizfoot>#wizTerug span.t{display:none}
  .kactie .wizfoot{gap:7px}
  .kactie .wizfoot>button{padding:0 11px;font-size:13.5px}
}
/* Op een telefoon passen vijf bedragen alleen naast elkaar als ze niet mogen
   afbreken; "€ 18.000" over twee regels leest als twee bedragen. */
@media(max-width:620px){
  .haltes.vast span,.haltes.vast .halte{font-size:13px;white-space:nowrap}
  .bedragzelf{gap:9px}
  .bedragveld input{width:calc(8ch + 48px)}
}
.trajkopje{font-size:17px;margin:26px 0 0;letter-spacing:-.01em}
.trajadres{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-top:12px}
.trajadres .field{display:flex;flex-direction:column;gap:5px;min-width:150px}
.trajadres label{font-size:14px;color:var(--gray-700)}
.trajadres input,.trajadres select{font:inherit;font-size:16px;border:2px solid var(--veldrand);
  border-radius:var(--r-m);padding:0 14px;min-height:50px;background:var(--veld);color:var(--gray-900)}
.trajadres input:focus,.trajadres select:focus{border-color:var(--merk)}
.trajknop.klein{min-height:50px;font-size:16px;padding:0 20px}
.trajadresuit{margin-top:12px}
.trajadresuit:empty{margin-top:0}
.trajwoning{margin-top:12px}
/* TP2 1a: wat er gevonden is, staat in "Dit vonden we over je huis"; hier alleen het adres en de bron. */
#trajAdresUit .adresuitkomst .gevonden{display:none}
/* De twee wegen. Een letter in plaats van een nummer, want 3a en 3b zijn geen
   volgorde maar een keuze. */
.trajwegen{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:12px;margin-top:12px}
.trajweg{position:relative;text-align:left;background:var(--vlak);border:2px solid var(--gray-300);
  border-radius:var(--r-l);padding:16px 18px;cursor:pointer;font:inherit;color:var(--gray-900);
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"let kop" "let uitleg" "let tijd" "let gek";gap:2px 14px}
.trajweg:hover{border-color:var(--merk-zacht);background:var(--gray-100)}
.trajweg.on{border-color:var(--merk);background:var(--goed-tint)}
.trajweg .wletter{grid-area:let;width:38px;height:38px;border-radius:50%;background:var(--merk-tint);
  color:var(--merk-diep);display:inline-flex;align-items:center;justify-content:center;
  font-size:17px;font-weight:800;align-self:start}
.trajweg.on .wletter{background:var(--knop);color:var(--knop-op)}
.trajweg .wvink{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--gray-300);background:var(--vlak);display:inline-flex;align-items:center;justify-content:center}
.trajweg .wvink .ico{width:13px;height:13px;stroke-width:2.8;color:var(--merk-op);opacity:0}
.trajweg.on .wvink{background:var(--merk);border-color:var(--merk)}
.trajweg.on .wvink .ico{opacity:1}
.trajweg .wkop{grid-area:kop;font-weight:700;font-size:16px;padding-right:28px}
.trajweg .wuitleg{grid-area:uitleg;font-size:14px;color:var(--gray-700);line-height:1.4;margin-top:3px}
.trajweg .wtijd{grid-area:tijd;font-size:13px;color:var(--gray-500);background:var(--gray-100);
  border-radius:var(--r-rond);padding:3px 10px;justify-self:start;margin-top:8px}
/* Gekozen in woorden, niet alleen met kleur (H #106). */
.trajweg .wgekozen{grid-area:gek;display:none;font-size:13px;font-weight:700;color:var(--merk-diep);margin-top:6px}
.trajweg.on .wgekozen{display:block}
.trajwegzin{margin:10px 0 0;font-size:var(--t-toel);font-weight:600;color:var(--merk-diep);min-height:1.4em}
.trajwegzin.fout{color:var(--fout)}
.trajnooitvast{display:flex;gap:9px;align-items:flex-start;margin:14px 0 0;font-size:var(--t-toel);
  color:var(--gray-700);line-height:1.45;max-width:72ch}
.trajnooitvast .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--merk-diep)}
/* ---------- stap 4 en 5: de lijst met een totaal ernaast ---------- */
.trajmain.breed{max-width:var(--traj-breed);display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,330px);gap:clamp(18px,3vw,30px);align-items:start}
.trajmain.breed .trajzijkant{position:sticky;top:12px}
/* De regel is één rij met vier kolommen: vinkje, tekening, tekst, geld. Bij
   een uitgevinkte regel blijft alles staan en zakt alleen de nadruk weg -
   weghalen wat je net uitzette leest als een fout. */
.trajregel{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto auto auto;gap:14px;align-items:center;
  background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);padding:12px 16px}
.trajregel.aan{border-color:var(--merk);background:var(--goed-tint)}
.trajregel:not(.aan){opacity:.72}
.trajregel .rvink{width:26px;height:26px;border-radius:50%;border:2px solid var(--gray-300);
  background:var(--vlak);display:inline-flex;align-items:center;justify-content:center;flex:none;
  cursor:pointer;padding:0}
/* Het rondje is 26 px, het raakvlak 44 px: op de telefoon miste je hem
   (controle A7, 25 september). Het vlak eromheen is onzichtbaar. */
.trajregel .rvink .ico{width:14px;height:14px;stroke-width:2.8;color:var(--merk-op);opacity:0}
.trajregel.aan .rvink{background:var(--merk);border-color:var(--merk)}
.trajregel.aan .rvink .ico{opacity:1}
/* In stap 4 kies je hier; wat meegaat krijgt het gekozen vlak: wit op teal. */
.trajregel.aan button.rvink+.mvlak{background:var(--merk-diep);color:#fff}
.trajregel .rvink.vast{cursor:default}
.trajregel .rvink.blok{border-style:dashed}
.trajregel .rvink.blok .ico{opacity:.55;color:var(--gray-700)}
.trajregel .rnaam{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Ook in het woonplan: daar stond de herkomst als losse tekst in de kop van
   de regel, even groot als de naam (controle A7). Sinds 1.76 zonder
   kapitalen: "door jou" en "wij stellen voor" (HERKOMST_WOORD). */
.trajregel .rherkomst,.wpregel .rherkomst{font-size:13px;font-weight:700;
  background:var(--gray-100);color:var(--gray-700);border-radius:var(--r-rond);padding:2px 9px}
.trajregel .rherkomst.eigen,.wpregel .rherkomst.eigen{background:var(--knop);color:var(--knop-op)}
.trajregel .rstatus,.wpregel .rstatus{font-size:13px;font-weight:700;background:var(--let-tint,#fdf0e3);color:#8a5a20;
  border-radius:var(--r-rond);padding:2px 9px}
.trajregel .rreden{font-size:13.5px;color:var(--gray-700);line-height:1.4;margin-top:3px}
.trajregel .rcijfers{text-align:right;white-space:nowrap}
.trajregel .rmaand{font-size:15px;font-weight:800;color:var(--merk-diep)}
.trajregel .rmaand small{font-size:13px;font-weight:600;color:var(--gray-700)}
.trajregel .rtvt{font-size:13px;color:var(--gray-500)}
.trajregel .rprijs{text-align:right;white-space:nowrap;min-width:84px;grid-column:-2}
.trajregel .rbedrag{font-size:16px;font-weight:800}
/* De prijsbron (rPrijsbron) kan lang zijn: "richtprijs · 2026.1 · laagste
   van 3 aanbieders € 3.480". Hij breekt af, het bedrag erboven niet. */
.trajregel .rbron{font-size:13px;color:var(--gray-500);white-space:normal;max-width:11em;margin-left:auto}
.trajregel.kanniet{border-style:dashed;opacity:1;background:var(--vlak)}
/* Wat wij niet voorstellen omdat het zich te laat terugverdient. Dichtgeklapt,
   want het is geen advies; wel vindbaar, want het bestaat. */
.trajtelang .trajregel.telang{border-style:dashed;background:var(--vlak);margin-bottom:9px}
/* A1: de manier van kijken uit stap 1, boven de lijst van stap 4. */
.trajmodus{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;font-size:var(--t-toel);line-height:1.45;
  color:var(--gray-900);background:var(--merk-tint);border-radius:var(--r-m);padding:9px 12px}
.trajmodus .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--merk-diep)}
/* Het voorbeeldhuis (tool.html#voorbeeld) boven de lijst van stap 4. */
.trajvoorbeeld .trajknop{margin-top:10px}
/* E2: bij welke regel je offerte hoort. */
.ekoppel{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--merk-tint);border-radius:var(--r-m);
  padding:9px 12px;margin:10px 0 0;font-size:14px}
.ekoppel>span:not(.rico){flex:1;display:flex;flex-direction:column}
.ekoppel .trajlink{min-height:44px}
.trajbedragen{display:flex;flex-direction:column;gap:4px;margin-top:16px;font-size:14px}
.trajbedragen>div{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.trajbedragen>div.uit{border-top:1px solid rgba(255,255,255,.28);margin-top:5px;padding-top:7px;font-size:15.5px}
.trajbedragen b{font-weight:800}
.trajcombi{margin-top:16px;border-top:1px solid rgba(255,255,255,.28);padding-top:12px;
  font-size:var(--t-toel);line-height:1.45;opacity:.85}
/* stap 5 */
.trajbewaard{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--gray-700);
  background:var(--gray-100);border-radius:var(--r-rond);padding:4px 12px}
.trajbewaard .ico{width:15px;height:15px}
.bedragkaart.groot{background:var(--goed);border-radius:20px;padding:18px 24px;min-width:200px;
  transform:rotate(-2deg);box-shadow:0 16px 34px rgba(0,0,0,.18);color:#fff}
.bedragkaart.groot .label{font-size:13px;font-weight:600;opacity:.9}
.bedragkaart.groot .value{font-size:56px;font-weight:800;letter-spacing:-.04em;line-height:.92;margin-top:2px}
.bedragkaart.groot .per{font-size:15px;font-weight:600}
/* ---------- ontwerp O: hoe je betaalt (1.68) ----------
   Een keuze of toestand is nooit alleen een kleur: een gekozen knop krijgt
   een vinkje, een gekozen kaart een vol rondje, een melding een pictogram en
   een zin. Toeleggen staat in inkt op grijs, nooit in rood. */
.trajregel .rsub{font-size:13px;font-weight:700;color:var(--subsidie);white-space:nowrap;text-align:right;min-width:104px}
.trajregel .rgrens{display:flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--let);margin-top:3px}
.trajregel .rgrens .ico{width:15px;height:15px;flex:none}
.fingrens{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--vlak);border:1px solid var(--gray-300);
  border-radius:var(--r-m);padding:9px 12px 9px 16px;margin-top:16px}
.fingrens>.ico{width:21px;height:21px;flex:none;color:var(--merk-diep)}
.fingrens p{flex:1;min-width:200px;margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.35}
.fingrens p b{color:var(--gray-900)}
.fingrensknoppen{display:flex;gap:6px;flex-wrap:wrap}
.finknop{min-height:44px;padding:0 13px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);
  color:var(--gray-900);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.finknop.groot{min-height:48px;padding:0 16px;font-size:14.5px}
.finknop[aria-pressed="true"]{border-color:var(--merk);background:var(--merk-tint)}
.finknop[aria-pressed="true"]::before{content:"✓";content:"✓"/"";margin-right:6px;font-weight:800}
.finleeg{display:flex;gap:9px;align-items:flex-start;margin-top:8px;font-size:13px;line-height:1.45;opacity:.9}
.finleeg .ico{width:19px;height:19px;flex:none}
.finmeldingen{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.finmeldingen:empty{display:none}
.finmelding{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--info-rand);background:var(--info-tint);
  border-radius:13px;padding:10px 14px}
.finmelding .ico{width:21px;height:21px;flex:none;color:var(--info)}
.finmelding p{margin:0;font-size:var(--t-toel);line-height:1.4}
.finmelding.let{background:var(--let-tint);border-color:var(--let-rand)}
.finmelding.let .ico{color:var(--let)}
.finmelding.goed{background:var(--goed-tint);border-color:var(--goed-rand)}
.finmelding.goed .ico{color:var(--goed)}
.finveld{display:block}
.finveld small{display:block;font-size:13px;color:var(--gray-500);margin-top:4px}
.finwijzig{min-height:44px;padding:0 14px;border:1px solid var(--gray-300);border-radius:11px;background:var(--vlak);
  color:var(--merk-diep);font:inherit;font-size:14px;font-weight:700;cursor:pointer;white-space:nowrap}
/* Mijn woonplan: eerder gedaan en je rapporten */
.wpsectie{font-size:13px;font-weight:800;color:var(--gray-500);margin:18px 0 8px;text-transform:uppercase;letter-spacing:.04em}
.wpbetaal{background:var(--vlak);border:1px solid var(--gray-300);border-radius:13px;padding:12px 16px;display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;gap:14px;align-items:center;margin-bottom:8px}
.wpbetaal>.ico{width:26px;height:26px;color:var(--merk-diep)}
.wpbetaalnaam{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.wpbetaal b{font-size:15px;font-weight:800}
.wpbetaal .rherkomst{font-size:13px;font-weight:700;
  background:var(--gray-100);color:var(--gray-700);border-radius:var(--r-rond);padding:2px 9px}
.wpbetaal .rherkomst.eigen{background:var(--knop);color:var(--knop-op)}
.wpbetaaldetail{font-size:13px;color:var(--gray-700)}
.wpbetaal .rbron{font-size:13px;color:var(--gray-500)}
/* I3 en Je rapporten: Bekijk naast Download, met het merkje ervoor. */
.irapacties{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.irapacties .abadge{margin-top:0}
/* het rapport: Subsidie en leningen */
.iraptabelgeld{border-collapse:collapse;font-size:13px;width:100%}
.iraptabelgeld th{text-align:right;color:var(--gray-500);font-size:13px;padding:5px 0;border-bottom:2px solid var(--gray-900)}
.iraptabelgeld th:first-child,.iraptabelgeld td:first-child{text-align:left}
.iraptabelgeld td{text-align:right;padding:6px 0;border-bottom:1px solid var(--gray-100);vertical-align:top}
.iraptabelgeld td small{display:block;font-size:13px;color:var(--gray-500)}
.iraptabelgeld .sub{color:var(--subsidie)}
.iraptabelgeld tfoot td{font-weight:800;border-bottom:none}
.irapfin{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:10px 0}
.irapfin h3{font-size:14px;font-weight:800;margin:0 0 6px}
.irapfinrijen>div{display:flex;justify-content:space-between;gap:10px;font-size:13px;padding:3px 0;border-bottom:1px solid var(--gray-100)}
.irapfinrijen span{color:var(--gray-700)}
.irapfinrijen b{font-weight:700}
.irapfintekst p{font-size:13px;line-height:1.55;margin:0 0 7px}
.irapfintekst p.stil{color:var(--gray-700)}
@media(max-width:760px){
  .trajregel .rsub{grid-column:2;text-align:left;min-width:0}
  .trajlijst:not(.alles) .trajregel.na4{display:none}
  /* Op de telefoon in stap 4 alleen naam, maand en prijs (ontwerp O); de
     reden staat in stap 5 en in het woonplan. Waarschuwingen blijven staan. */
  #trajLijst .trajregel .rwaarom{display:none}
  .irapfin{grid-template-columns:minmax(0,1fr)}
  .wpbetaal{grid-template-columns:28px minmax(0,1fr)}
  .wpbetaal>button,.wpbetaal>.irapacties{grid-column:1 / -1;width:100%}
  .wpbetaal>.irapacties>button{flex:1}
}
.trajuitgangen{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.trajknop.stil{background:var(--vlak);color:var(--gray-900);border-color:var(--gray-300)}
.trajknop.stil:hover{background:var(--gray-100);border-color:var(--merk-zacht)}
.trajvoet{font-size:var(--t-toel);color:var(--gray-500);margin:12px 0 0;max-width:72ch}
/* ---------- het woonplan (ontwerp B) ---------- */
.wpfilters{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.wpfilter{background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-rond);
  padding:7px 16px;font:inherit;font-size:14px;font-weight:600;color:var(--gray-700);cursor:pointer;min-height:40px}
.wpfilter:hover{border-color:var(--merk-zacht)}
.wpfilter.on{background:var(--knop);border-color:var(--knop);color:var(--knop-op)}
.wpregel{background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);overflow:hidden}
.wpregel.open{border-color:var(--merk)}
.wprij{display:grid;grid-template-columns:auto 1fr auto auto auto;gap:14px;align-items:center;padding:12px 16px}
.wpregel .rnaam{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.wpregel .rreden{font-size:13.5px;color:var(--gray-700);line-height:1.4;margin-top:3px}
.wpregel .rcijfers{text-align:right;white-space:nowrap}
.wpregel .rmaand{font-size:15px;font-weight:800;color:var(--merk-diep)}
.wpregel .rmaand small{font-size:13px;font-weight:600;color:var(--gray-700)}
.wpregel .rtvt{font-size:13px;color:var(--gray-500)}
.wpregel .rprijs{text-align:right;white-space:nowrap;min-width:84px}
.wpregel .rbedrag{font-size:16px;font-weight:800}
.wpregel .rbron{font-size:13px;color:var(--gray-500)}
.wpklap{width:34px;height:34px;border-radius:50%;border:2px solid var(--gray-300);background:var(--vlak);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;flex:none}
.wpklap .ico{width:15px;height:15px;color:var(--gray-700)}
.wpklap:hover{border-color:var(--merk-zacht)}
.wpbron{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
  background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-m);padding:11px 14px}
.wpbron.gekozen{border-color:var(--merk);background:var(--goed-tint)}
.wpbron.leeg{opacity:.62}
.wpbron .bico{width:30px;height:30px;border-radius:9px;background:var(--merk-tint);flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--merk-diep)}
.wpbron .bico .ico{width:16px;height:16px}
.wpbron .blabel{font-size:14.5px;font-weight:700}
.wpbron .blabel small{display:block;font-size:13px;font-weight:400;color:var(--gray-700);margin-top:2px}
.wpbron .bbedrag{font-size:16px;font-weight:800;white-space:nowrap}
.wpbron .bveld{font:inherit;font-size:16px;font-weight:700;border:2px solid var(--gray-300);
  border-radius:var(--r-m);padding:0 12px;min-height:44px;width:120px;text-align:right;background:var(--vlak)}
.wpbron .bveld:focus{border-color:var(--merk)}
/* B4: drie uitgangen naast elkaar */
.wpuitgangen{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:14px;margin-top:22px}
.wpuitgang{background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);
  padding:20px 22px;display:flex;flex-direction:column}
.wpuitgang .uico{width:42px;height:42px;border-radius:12px;background:var(--merk-tint);
  display:inline-flex;align-items:center;justify-content:center;color:var(--merk-diep)}
.wpuitgang .uico .ico{width:22px;height:22px}
.wpuitgang h3{margin:12px 0 0;font-size:18px;letter-spacing:-.01em}
.wpuitgang p{margin:8px 0 0;font-size:var(--t-lopend);line-height:var(--t-regel);color:var(--gray-700)}
.wpuitgang ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;flex:1}
.wpuitgang li{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-toel);color:var(--gray-700)}
.wpuitgang li .ico{width:15px;height:15px;flex:none;margin-top:3px;color:var(--merk-diep)}
.wpuitgang .trajknop{margin-top:16px;width:100%;justify-content:center}
.wpprijsrijen{display:flex;flex-direction:column;gap:6px;margin-top:12px}
.wpprijsrij{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:center;
  background:var(--gray-100);border-radius:var(--r-m);padding:8px 14px;font-size:14.5px}
.wpprijsrij .was{text-decoration:line-through;color:var(--gray-500)}
.wpprijsrij .nu{font-weight:800}
.wpprijsrij .ico{width:14px;height:14px;color:var(--gray-500)}
/* ---------- K: de omhulling ----------
   Vier breekpunten, en ze liggen waar de inhoud knelt en niet bij
   apparaatnamen: op 1180 past het spoor niet meer naast de navigatie, op 860
   niet meer naast de woonplanknop, op 620 past de navigatie zelf niet meer. */
.kcoach{display:flex;align-items:center;gap:11px;background:var(--merk-diep);color:#fff;
  padding:9px clamp(16px,4vw,32px);font-size:14px}
.kcoach .ico{width:18px;height:18px;flex:none}
.kcoach span{flex:1}
.kcoach button{background:rgba(255,255,255,.16);border:none;color:#fff;border-radius:var(--r-rond);
  min-height:44px;padding:0 14px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
/* X4: de coachstand. Zelfde strook, met de weg terug naar het dossier. */
.kcoachstand a{color:#fff;display:inline-flex;align-items:center;justify-content:center;min-height:44px;flex:none}
.kcoachstand .kcsterug{min-width:44px;margin-left:-12px}
.kcoachstand .kcsknop{background:rgba(255,255,255,.16);border-radius:var(--r-rond);padding:0 14px;font-size:13px;font-weight:700;text-decoration:none}
.kcoachstand button.kcsknop{color:#fff;border:none;min-height:44px;cursor:pointer;font-family:inherit;flex:none}
.kcoachstand{flex-wrap:wrap}
.kcoachstand > span{min-width:180px}
.kcoachstand .kcsstand{display:block;font-style:normal;font-size:13px;opacity:.85}
.wpcoachdoor{display:flex;gap:10px;align-items:flex-start;margin:10px 0 4px;padding:10px 13px;border-radius:var(--r-rond);
  background:var(--merk-tint);font-size:14px;line-height:1.5}
.wpcoachdoor .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--merk-diep)}
.wpcoachdoor p{margin:0}
/* K: wat Stop wel en niet doet, in de pagina (1.76). */
.kcoachstop{background:var(--merk-tint);border-bottom:1px solid var(--merk-zacht);padding:12px clamp(16px,4vw,32px);
  font-size:14px;line-height:1.5;color:var(--gray-900)}
.kcoachstop p{margin:0 0 6px}
.kcoachstop .trajknoppen{margin-top:8px}
/* L8: de subsidies konden niet worden opgehaald. */
.ksubsidie{display:flex;align-items:center;gap:11px;background:var(--let-tint);color:var(--let-tekst);
  border-bottom:1px solid var(--let-rand);padding:9px clamp(16px,4vw,32px);font-size:var(--t-toel);font-weight:700}
.ksubsidie .ico{width:18px;height:18px;flex:none;color:var(--let)}
.ktop{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:7px clamp(16px,4vw,32px);background:var(--gray-100);font-size:13px;color:var(--gray-700)}
.ktop .kterug{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none;min-height:36px}
.ktop .kterug:hover{color:var(--merk-diep);text-decoration:underline}
.ktop .kterug .ico{width:14px;height:14px}
.kbalk{padding:0 clamp(16px,4vw,32px);gap:18px;border-bottom:1px solid var(--gray-300)}
.kmerk{background:none;border:none;font:inherit;cursor:pointer;padding:0;display:flex;
  align-items:center;gap:10px;min-height:44px}
.kmerk b{font-size:20px;font-weight:800;letter-spacing:-.01em}
.knav{display:flex;gap:6px;margin-left:auto}
.knav button{background:none;border:none;font:inherit;font-size:14.5px;color:var(--gray-700);
  cursor:pointer;padding:0 12px;min-height:44px;border-radius:var(--r-m)}
.knav button:hover{background:var(--gray-100);color:var(--merk-diep)}
.kplan{display:inline-flex;align-items:center;gap:8px;background:var(--knop);color:var(--knop-op);
  border:none;border-radius:var(--r-rond);min-height:44px;padding:0 16px;font:inherit;
  font-size:14.5px;font-weight:700;cursor:pointer}
.kplan:hover{background:var(--knop-hover)}
.kplan .ico{width:17px;height:17px}
/* De teller staat er altijd, ook op nul. Verscheen hij pas zodra er regels
   waren, dan werd de knop op dat moment breder en verschoof alles ernaast --
   precies op het moment dat de bezoeker ergens anders naar kijkt. Leeg is hij
   onzichtbaar maar houdt hij zijn plek. */
.kplan .kteller{background:rgba(0,0,0,.18);border-radius:var(--r-rond);padding:1px 8px;
  font-size:13px;min-width:24px;text-align:center}
.kplan .kteller.leeg{visibility:hidden}
/* Zelfde reden: de bovenste regel houdt zijn hoogte, ook als er geen context
   te melden valt. */
.ktop{min-height:36px}
.ktop .kcontext:empty{display:inline-block;min-height:1em}
.kham{display:none;background:none;border:none;cursor:pointer;min-height:44px;min-width:44px;
  align-items:center;justify-content:center;color:var(--gray-900)}
.kham .ico{width:22px;height:22px}
/* Het spoor: alleen de vijf stappen van de hoofdweg. Gezette stappen zijn
   klikbaar, de volgende niet -- vooruitspringen levert een leeg scherm op.

   Drie toestanden, elk met een eigen bol: gezet is gevuld met een vinkje, de
   huidige is wit met een lime rand, en wat nog komt is leeg met een zachte
   rand. Het verschil zit in de bol en niet in de tekstkleur alleen, zodat het
   ook leesbaar is voor wie kleur slecht onderscheidt. */
.kspoorrij{display:flex;align-items:center;gap:16px;background:var(--merk-tint);
  border-bottom:1px solid var(--merk-zacht);position:sticky;top:0;z-index:40;
  padding-right:clamp(16px,4vw,32px)}
.kspoor{display:flex;list-style:none;margin:0;padding:0 0 0 clamp(16px,4vw,32px);gap:8px;
  min-height:52px;align-items:center;flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:none}
.kspoor::-webkit-scrollbar{display:none}
.kspoor li{flex:none;display:flex;align-items:center;gap:8px}
.kspoor button,.kspoor>li>span{display:inline-flex;align-items:center;gap:8px;background:none;
  border:none;font:inherit;font-size:13px;padding:0 4px;min-height:44px;white-space:nowrap}
.kspoor button{cursor:pointer}
.kspoor .knr{width:22px;height:22px;border-radius:50%;flex:none;border:2px solid var(--spoor-lijn);
  background:transparent;color:var(--gray-500);display:inline-flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:800}
.kspoor .knr .ico{width:13px;height:13px;stroke-width:3}
.kspoor .gezet .knr{background:var(--spoor-af);border-color:var(--spoor-af);color:#fff}
.kspoor .gezet .klabel{color:var(--gray-900);font-weight:600}
.kspoor .nu .knr{background:#fff;border-color:var(--merk);color:var(--merk-diep)}
.kspoor .nu .klabel{color:var(--merk-diep);font-weight:800}
.kspoor .later .klabel{color:var(--gray-500);font-weight:500}
/* Bereikbaar zonder dat je er al was (H #240): een link, onderstreept. */
.kspoor .kan .klabel{color:var(--merk-diep);font-weight:600;text-decoration:underline}
.kspoor .kpijl{width:16px;height:16px;color:var(--spoor-lijn);flex:none}
.kspoor button:hover .klabel{text-decoration:underline}
/* De terugweg van een zijpad. Oranje, want het is geen stap maar een uitstapje
   waar je uit terug moet kunnen. */
.kterugweg{display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--let-tint,#fdf0e3);border-bottom:1px solid #e6c08a;
  padding:9px clamp(16px,4vw,32px);font-size:14px}
.kterugweg .ico{width:16px;height:16px;flex:none;color:#8a5a20}
.kterugweg span{flex:1}
.kterugweg button{background:#8a5a20;border:none;color:#fff;border-radius:var(--r-m);
  min-height:38px;padding:0 15px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.kmenu{display:none;flex-direction:column;gap:4px;padding:14px clamp(16px,4vw,32px);
  background:var(--vlak);border-bottom:1px solid var(--gray-300)}
.kmenu[hidden]{display:none}
.kmenu>b{font-size:13px;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.kmenu button,.kmenu a{background:none;border:none;font:inherit;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:var(--r-m);min-height:48px;color:var(--gray-900);text-decoration:none}
.kmenu button:hover,.kmenu a:hover{background:var(--gray-100)}
.kmenu span{display:block;font-weight:700;font-size:15.5px}
.kmenu small{display:block;font-size:13px;color:var(--gray-700)}
/* De voet draagt de beloftes en waar de bedragen op rusten. Op elk scherm.

   Drie blokken, en dus drie kolommen. Met auto-fit maakte de browser er op een
   breed scherm vier van: drie gevuld, één leeg, en al het wit aan de rechter-
   kant. Nu staan er expliciet drie die op 900px naar twee gaan en op 620px
   naar één -- en de inhoud houdt in het midden op met groeien, zodat een breed
   scherm geen leeswoestijn wordt. */
.kvoet{margin-top:40px;background:var(--merk-diep);color:#fff;
  padding:clamp(24px,4vw,36px) clamp(16px,4vw,32px)}
.kvoetbinnen{max-width:var(--traj-breed);margin:0 auto;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.kvoet b{display:block;font-size:15px;margin-bottom:12px}
.kvoet ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.kvoet li{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-toel);opacity:.9;line-height:1.45}
.kvoet li .ico{width:15px;height:15px;flex:none;margin-top:3px;color:var(--goed-op-diep)}
/* Term en waarde onder elkaar in plaats van naast elkaar: de waarden zijn
   ongelijk lang ("september 2026" naast "ISDE, zoals die nu geldt") en in twee
   kolommen gaat de ene regel wel en de andere niet afbreken. */
.kvoet dl{margin:0;display:flex;flex-direction:column;gap:11px;font-size:14px}
.kvoet dt{opacity:.7;font-size:13px}
.kvoet dd{margin:0;font-weight:600;line-height:1.35}
.kvoet a{display:inline-block;color:#fff;font-size:14px;opacity:.9;padding:6px 0;text-decoration:underline}
.kvoet a:hover{opacity:1}
.kversie{background:none;border:none;color:#fff;opacity:.9;font:inherit;font-size:14px;
  cursor:pointer;padding:6px 0;text-decoration:underline;display:inline-block}
.kversie:hover{opacity:1}
.kvoetvak .kwis{display:block;min-height:44px}
.kvoetregel{max-width:var(--traj-breed);margin:clamp(20px,3vw,30px) auto 0;
  border-top:1px solid rgba(255,255,255,.2);padding-top:16px;
  font-size:var(--t-toel);opacity:.75;line-height:1.5}
@media(max-width:900px){
  .kvoetbinnen{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .kvoetbinnen{grid-template-columns:1fr;gap:22px}
}
/* K3: het woonplan als lade. Een overlay, geen route: sluiten brengt je terug
   op exact dezelfde plek en scrollpositie. */
.klade{position:fixed;inset:0;background:rgba(15,61,62,.5);z-index:200;display:flex;
  justify-content:flex-end}
.kladepaneel{background:var(--papier);width:min(100%,420px);height:100%;overflow-y:auto;
  padding:clamp(18px,3vw,26px);display:flex;flex-direction:column;gap:14px;box-shadow:-10px 0 40px rgba(0,0,0,.25)}
.kladekop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.kladekop b{font-size:19px}
.kladekop span{display:block;font-size:13.5px;color:var(--gray-700);margin-top:2px}
.kladesluit{background:none;border:none;cursor:pointer;min-height:44px;min-width:44px;color:var(--gray-700)}
.kladesluit .ico{width:20px;height:20px}
.kladecijfers{background:var(--merk-diep);color:#fff;border-radius:var(--r-l);padding:16px 18px}
.kladecijfers b{display:block;font-size:34px;font-weight:800;line-height:1.05;color:var(--goed-op-diep,#b6f082)}
.kladecijfers span{font-size:13.5px;opacity:.85}
.kladelijst{display:flex;flex-direction:column;gap:7px}
.kladeregel{display:grid;grid-template-columns:1fr auto;gap:4px 12px;background:var(--vlak);
  border:1px solid var(--gray-300);border-radius:var(--r-m);padding:10px 14px}
.kladeregel span{font-size:14.5px;font-weight:600}
.kladeregel b{font-size:15px;text-align:right}
.kladeregel small{grid-column:1/-1;font-size:13px;color:var(--gray-500)}
.kladehint{font-size:var(--t-toel);color:var(--gray-700);line-height:1.5;margin:0}
/* 1180: het spoor past niet meer naast de navigatie. */
@media(max-width:1180px){
  .kspoor{padding-top:8px;padding-bottom:8px}
  .kspoor button,.kspoor span{font-size:13px;padding:4px 8px}
}
/* 860: de navigatie past niet meer naast de woonplanknop. */
@media(max-width:860px){
  .knav{display:none}
  .kham{display:inline-flex}
  .kmenu:not([hidden]){display:flex}
  .kplan .klabel{display:none}
  .kbalk{gap:12px}
  .kplan{margin-left:auto}
}
/* 620: alles wat niet de kern is, gaat weg. Wat nooit wegvalt: het merk, de
   weg naar je woonplan, en de weg terug. */
@media(max-width:620px){
  .ktop .kcontext{display:none}
  .kspoor .nu span,.kspoor button{font-size:13px}
  .kmerk b{font-size:17px}
  .kvoet{gap:20px}
}
/* K: het adres in de kopbalk, als tekst. Krimpt eerst (basis 0), duwt nooit iets weg. */
.kadres{flex:1 1 0;min-width:0;max-width:30ch;overflow:hidden;display:inline-flex;align-items:center;gap:6px;
  font-size:13.5px;font-weight:700;color:var(--gray-700)}
.kadres .ico{width:16px;height:16px;flex:none}
.kadres span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:620px){.kadres{display:none}}
/* ---------- I: het adviesrapport ---------- */
.imoment{display:inline-flex;align-items:center;background:var(--gray-100);border-radius:var(--r-rond);
  padding:4px 13px;font-size:13px;color:var(--gray-700);margin-top:10px}
.idelen{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.ideel{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;text-align:left;
  background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);padding:13px 17px;
  font:inherit;color:var(--gray-900);cursor:pointer}
.ideel:hover{border-color:var(--merk-zacht)}
.ideel.aan{border-color:var(--merk);background:var(--goed-tint)}
.ideel.vast{cursor:default}
.ideel .dvink{width:26px;height:26px;border-radius:50%;border:2px solid var(--gray-300);background:var(--vlak);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.ideel .dvink .ico{width:14px;height:14px;stroke-width:2.6;color:var(--merk-op);opacity:0}
.ideel.aan .dvink{background:var(--merk);border-color:var(--merk)}
.ideel.aan .dvink .ico{opacity:1}
.ideel b{display:block;font-size:15px}
.ideel span{display:block;font-size:13px;color:var(--gray-700);margin-top:2px}
.ideel .dbadge{font-size:13px;font-weight:700;color:var(--gray-700);background:var(--gray-100);
  border-radius:var(--r-rond);padding:3px 10px;white-space:nowrap}
.irapportbalk{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,32px);background:var(--merk-diep);color:#fff}
.irapportbalk b{font-size:16px}
.irapportbalk span{display:block;font-size:13px;opacity:.8}
.irapportbalk .trajknop.stil{background:rgba(255,255,255,.14);border-color:transparent;color:#fff}
/* Hoe hard de cijfers zijn hoort bovenaan, niet in een voetnoot: wie dit naast
   een offerte legt moet weten wat hij vergelijkt. */
.iaanname{display:flex;gap:12px;align-items:flex-start;margin-top:18px;background:var(--let-tint,#fdf0e3);
  border:1px solid #e6c08a;border-radius:var(--r-l);padding:14px 18px;font-size:14px;line-height:1.5}
.iaanname .ico{width:20px;height:20px;flex:none;margin-top:2px;color:#8a5a20}
.irapport{margin-top:18px;background:var(--vlak);border:1px solid var(--gray-300);
  border-radius:var(--r-l);padding:clamp(16px,3vw,28px);overflow-x:auto}
.irapport table{width:100%;border-collapse:collapse}
/* Het vel zelf, naar ontwerp I2. Een blad van 820px breed op een grijze
   ondergrond: het ziet eruit als wat er straks uit de printer komt, want dat
   is het ook -- dezelfde opbouw wordt bij het afdrukken in #rapportVel gezet. */
.irap{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:20px;
  font-size:13.5px;color:var(--gray-900)}
.irapkop{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  flex-wrap:wrap;border-bottom:3px solid var(--merk-diep);padding-bottom:16px}
.irapmerk{font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gray-500)}
.irapkop h1{font-size:27px;font-weight:800;letter-spacing:-.028em;line-height:1.1;margin:5px 0 0}
.irapwie{text-align:right;font-size:13px;color:var(--gray-700);line-height:1.6}
.irapkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.irapkpi>div{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-m);
  padding:13px 15px}
.irapkpi>div.goed{background:var(--goed-tint);border-color:var(--goed-rand)}
.irapkpi b{display:block;font-size:22px;font-weight:800}
.irapkpi>div.goed b{color:var(--goed)}
.irapkpi span{display:block;font-size:13px;color:var(--gray-700);line-height:1.3;margin-top:2px}
.irap h2{font-size:15px;font-weight:800;margin:0 0 9px}
.irap h3{font-size:13.5px;font-weight:800;margin:0 0 7px}
.iraptabel{border:1px solid var(--gray-300);border-radius:var(--r-m);overflow:hidden;container-type:inline-size}
/* PC 47: kolommen die mogen krimpen en een tekst die mag afbreken; anders knipt overflow:hidden het af. */
.iraprij{display:grid;grid-template-columns:26px minmax(0,1.7fr) minmax(0,1fr) minmax(0,.9fr) minmax(0,.9fr);gap:12px;
  padding:11px 16px;border-top:1px solid var(--gray-300);align-items:baseline;overflow-wrap:anywhere}
.iraprij.kop{padding:9px 16px;background:var(--gray-100);border-top:none;
  border-bottom:1px solid var(--gray-300);font-size:13px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;color:var(--gray-500)}
.iraprij.tot{border-top:2px solid var(--merk-diep);background:var(--gray-100)}
.irnr{font-size:13px;font-weight:800;color:var(--gray-500)}
.irnaam b{display:block;font-size:13.5px;font-weight:700}
.irnaam b .ico{width:20px;height:20px;color:var(--merk-diep);vertical-align:-5px;margin-right:8px}
.irnaam small{display:block;font-size:13px;color:var(--gray-500);margin-top:2px}
.irnaam em{display:block;font-size:13px;color:var(--let-tekst);font-style:normal;
  margin-top:3px;line-height:1.4}
.irprijs b{display:block;font-size:14px;font-weight:800}
.irprijs small{display:block;font-size:13px;color:var(--gray-500)}
.irmaand{font-size:13.5px;font-weight:800;color:var(--goed)}
.irtvt{font-size:13px;color:var(--gray-700)}
.irapafg{border:1px dashed var(--gray-300);border-radius:var(--r-m);padding:12px 16px;
  display:flex;flex-direction:column;gap:9px}
.irapafg>div{display:flex;justify-content:space-between;gap:14px;align-items:baseline;font-size:13px}
.irapafg .tn{color:var(--gray-500);white-space:nowrap}
.irapafg b .ico{width:20px;height:20px;color:var(--merk-diep);vertical-align:-5px;margin-right:8px}
.irapbasis{border-radius:var(--r-m);padding:14px 16px}
.irapbasis{background:var(--gray-100);border:1px solid var(--gray-300)}
.irapbasis p{margin:0;font-size:13px;line-height:1.6;color:var(--gray-700)}
/* De onderdelen uit Adviesrapport.dc.html. Zelfde maatvoering als de rest van
   het vel: kop van 15px, bijschrift van 11.5px, kaders met dezelfde ronding. */
.irapvak{display:flex;flex-direction:column;gap:9px}
.irapbij{margin:0;font-size:13px;color:var(--gray-500);line-height:1.5}
.irapklein{display:block;font-size:13px;font-weight:700;color:var(--gray-500)}
.iraprolblok{background:var(--goed-tint);border:1px solid var(--goed-rand);border-radius:var(--r-m);
  padding:13px 16px}
.iraprolblok b{display:block;font-size:13.5px;color:var(--goed)}
.iraprolblok span{display:block;font-size:13px;color:var(--gray-700);line-height:1.6;margin-top:3px}
.iraprekening{margin:0;font-size:13px;color:var(--gray-900)}
/* De kop boven een groep maatregelen. Hij staat in hetzelfde raster als de
   regels eronder, zodat de kolommen niet verspringen. */
.iraprij.groepkop{background:var(--merk-tint);border-top:none;
  border-bottom:1px solid var(--gray-300);padding:8px 16px}
.iraprij.groepkop b{font-size:13.5px}
.iraprij.groepkop small{font-size:13px;color:var(--gray-700)}
.iraptabel.zelf .iraprij.groepkop{background:var(--goed-tint)}
.iraptabel+.iraptabel{margin-top:10px}
.irapletop{background:var(--let-tint);border:1px solid var(--let-rand);border-radius:var(--r-m);
  padding:11px 15px;font-size:13px;line-height:1.6;color:var(--gray-700)}
.irapletop b{color:var(--let-tekst)}
.irapdelen{display:flex;flex-direction:column;gap:8px}
.irapdelen>div{display:grid;grid-template-columns:150px 1fr;gap:14px;align-items:baseline}
.irapdelen b{font-size:13px;color:var(--merk-diep)}
.irapdelen span{font-size:13px;color:var(--gray-700);line-height:1.6}
.irapalles{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px}
.irapalles>div{display:grid;grid-template-columns:20px 1fr;gap:9px;align-items:baseline}
.irapalles>div>span:first-child{font-size:13px;font-weight:800;color:var(--gray-500)}
.irapalles b{display:block;font-size:13px}
.irapalles small{display:block;font-size:13px;color:var(--gray-500);line-height:1.4}
@media(max-width:860px){
  .irapdelen>div{grid-template-columns:1fr;gap:2px}
  .irapalles{grid-template-columns:1fr}
}
.irapvoet{border-top:1px solid var(--gray-300);padding-top:12px;font-size:13px;
  color:var(--gray-500);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:860px){
  .irapkpi{grid-template-columns:1fr 1fr}
  .irapkop h1{font-size:22px}
  .irapwie{text-align:left}
  /* Vijf kolommen passen niet op een telefoon. Dan onder elkaar, met het
     bedrag en de maandwinst als eigen regel -- niet weglaten, want dat zijn
     juist de getallen waarvoor iemand dit blad meeneemt. */
  .iraprij{grid-template-columns:26px minmax(0,1fr);gap:4px 12px}
  .iraprij.kop{display:none}
  .iraprij>span:nth-child(3),.iraprij>span:nth-child(4),.iraprij>span:nth-child(5){
    grid-column:2}
  .irmaand::after{content:" per maand";font-weight:400;font-size:13px;color:var(--gray-500)}
  .irtvt::before{content:"terug in ";color:var(--gray-500)}
  .irtvt.zin::before{content:none}
  .irtvt.leeg{display:none}
}
/* PC 47: bij 150% zoom is het scherm breed, maar het blad smal: dezelfde indeling op de breedte van het blad. */
@container (max-width:640px){
  .iraprij{grid-template-columns:26px minmax(0,1fr);gap:4px 12px}
  .iraprij.kop{display:none}
  .iraprij>span:nth-child(3),.iraprij>span:nth-child(4),.iraprij>span:nth-child(5){grid-column:2}
  .irmaand::after{content:" per maand";font-weight:400;font-size:13px;color:var(--gray-500)}
  .irtvt::before{content:"terug in ";color:var(--gray-500)}
  .irtvt.zin::before{content:none}
  .irtvt.leeg{display:none}
}
/* ---------- F: terugkomen ---------- */
.fterugkeer{margin-top:22px;background:var(--vlak);border:1px solid var(--gray-300);
  border-radius:var(--r-l);padding:18px 22px}
.fterugkeer .fkop{display:flex;gap:10px;align-items:center}
.fterugkeer .fkop .ico{width:19px;height:19px;color:var(--merk-diep);flex:none}
.fterugkeer .fkop b{font-size:16px}
.fterugkeer p{margin:8px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.5;max-width:70ch}
.fgelukt{display:flex;gap:9px;align-items:flex-start;margin-top:12px;background:var(--goed-tint);
  border:1px solid var(--merk);border-radius:var(--r-m);padding:11px 14px;font-size:13.5px;line-height:1.5}
.fgelukt .ico{width:16px;height:16px;flex:none;margin-top:3px;color:var(--merk-diep)}
/* TP1 5: je link, om te kopiëren. */
.flinkvak{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.flinkvak[hidden]{display:none}
.flinkvak label{font-size:14px;color:var(--gray-700)}
.flinkvak input{font:inherit;font-size:16px;border:2px solid var(--veldrand);border-radius:var(--r-m);padding:10px 12px;min-height:48px;
  background:var(--papier);color:var(--gray-900);width:100%;box-sizing:border-box}
.fterugkeer .flinkvak p{margin:0;font-size:var(--t-toel)}
.fknoppen{margin-top:12px;gap:10px}
.wpuitkop{font-size:17px;margin:26px 0 10px}
/* F: de bewaarde versie weggooien, met de bevestiging in de pagina. */
.fweg{margin-top:14px}
.fweg .trajlink{min-height:44px}
.fweg.open{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:14px 18px}
.fweg.open p{margin:0 0 10px;font-size:var(--t-toel);line-height:1.5;color:var(--gray-900);max-width:70ch}
.fweg .field{max-width:360px}
.fbadge{display:inline-flex;align-items:center;gap:8px;background:var(--goed-tint);border:1px solid var(--merk);
  border-radius:var(--r-rond);padding:5px 14px;font-size:13px;font-weight:700;color:var(--merk-diep)}
.fbadge .ico{width:15px;height:15px}
.fbadge.stuk{background:var(--gray-100);border-color:var(--gray-300);color:var(--gray-700)}
.fadressen{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.fadres{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;
  background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);padding:13px 17px}
.fadres.dit{border-color:var(--merk);background:var(--goed-tint)}
.fadres .aico{width:36px;height:36px;border-radius:11px;background:var(--merk-tint);flex:none;
  display:inline-flex;align-items:center;justify-content:center;color:var(--merk-diep)}
.fadres .aico .ico{width:19px;height:19px}
.fadres b{display:block;font-size:15.5px}
.fadres span{display:block;font-size:13px;color:var(--gray-700);margin-top:2px}
.fadres .abadge{font-size:13px;font-weight:800;background:var(--knop);color:var(--knop-op);
  border-radius:var(--r-rond);padding:3px 10px;white-space:nowrap}
.fadres .abadge.stil{background:var(--gray-100);color:var(--gray-700)}
/* ---------- G: hulp vragen ---------- */
/* ---------- 3a: dit vullen we voor je in (ontwerp A, route 3a) ----------
   Een lijst met per regel de waarde, waar hij vandaan komt en "Wijzig". Groen
   is uit de registers of van jou, oranjebruin is een aanname: dezelfde kleuren
   als het ontwerp, met altijd het woord erbij. */
.aanlijst{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;overflow:hidden;margin-top:16px}
.aanrij{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:14px;align-items:center;
  padding:9px 18px;border-top:1px solid var(--gray-100)}
.aanrij:first-child{border-top:0}
.aanrij .awat{font-size:14.5px}
.aanrij .awaarde{font-size:14.5px;font-weight:800;color:var(--merk-diep);text-align:right}
.aanrij .abron{font-size:13px;font-weight:700;border-radius:var(--r-rond);padding:4px 10px;white-space:nowrap;
  background:var(--let-tint);color:var(--let)}
.aanrij .abron.register,.aanrij .abron.jij{background:var(--goed-tint);color:var(--goed)}
.aanrij .awijzig{font:inherit;font-size:13.5px;font-weight:700;color:var(--goed);background:none;border:0;
  padding:0 4px;min-height:44px;cursor:pointer}
.aanrij .awijzig:hover{text-decoration:underline}
.aanlet{display:flex;gap:11px;align-items:flex-start;margin-top:14px}
.aanlet .ico{width:20px;height:20px;flex:none}
.aanknoppen{flex-direction:column;align-items:stretch;margin-top:14px}
/* W4: je antwoorden naast het label */
.w4blok{background:var(--vlak);border:2px solid var(--goed-rand);border-radius:18px;padding:16px 18px;margin-top:14px;display:flex;flex-direction:column;gap:10px}
.w4blok.let{border-color:var(--let-rand)}.w4blok:not(.let):not(.goed){border-color:var(--gray-300)}
.w4blok:not(.let):not(.goed) .w4kop>.ico{color:var(--gray-500)}
.w4kop{display:flex;gap:10px;align-items:flex-start}
.w4kop>.ico{width:24px;height:24px;flex:none;color:var(--goed)}
.w4blok.let .w4kop>.ico{color:var(--let)}
.w4kop b{display:block;font-size:17px;font-weight:800}
.w4kop span{display:block;font-size:14.5px;color:var(--gray-700);margin-top:3px}
.w4balk{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) auto;gap:12px;align-items:center;font-size:14px}
.w4spoor{height:14px;background:var(--gray-100);border-radius:7px;overflow:hidden}
.w4spoor span{display:block;height:100%;border-radius:7px}
.w4spoor .reg{background:var(--info)}.w4spoor .jij{background:var(--merk)}
.w4blok small{font-size:13px;color:var(--gray-500)}
.w4vraag{font-size:14.5px;font-weight:800}
.w4knoppen{display:flex;gap:8px;flex-wrap:wrap}
.w4knop{min-height:46px;padding:0 15px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;font-size:14.5px;font-weight:700;
  color:var(--gray-900);cursor:pointer;display:inline-flex;gap:6px;align-items:center;align-self:flex-start}
.w4knop .ico{width:19px;height:19px}
.w4nog{display:flex;gap:8px;margin:0;background:var(--gray-100);border-radius:12px;padding:10px 14px;font-size:var(--t-toel)}
.w4nog .ico{width:19px;height:19px;flex:none}
.w4kort{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:13px 16px;margin-top:14px;font-size:14.5px}
.w4kort>.ico{width:21px;height:21px;flex:none;color:var(--gray-500)}
.w4kort>span{flex:1;min-width:200px}
@media (max-width:640px){
  .w4balk{grid-template-columns:minmax(0,1fr) auto}
  .w4balk .w4spoor{grid-column:1/-1;grid-row:2}
  .aanrij{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:2px 10px;padding:8px 14px}
  .aanrij .awaarde{overflow-wrap:anywhere}
  .aanrij .abron{justify-self:start}
  .aanrij .awijzig{justify-self:end}
}
/* Wat de coach niet kan, met een blokteken: dat is geen kleine lettertjes maar
   de kern van de afspraak. */
.gnietkan{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.gnietkan li{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.gnietkan .ico{width:16px;height:16px;flex:none;margin-top:3px;color:#8a5a20}
.gstappen{display:flex;flex-direction:column;gap:11px;margin-top:18px;
  border-top:1px solid rgba(255,255,255,.28);padding-top:14px}
.gstap{display:flex;gap:11px;align-items:flex-start}
.gstap .snr{width:24px;height:24px;border-radius:50%;background:var(--knop);color:var(--knop-op);
  display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none}
.gstap b{display:block;font-size:14px}
.gstap span{display:block;font-size:13px;opacity:.82;line-height:1.45;margin-top:2px}
.gnummer{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:16px;
  background:var(--merk-tint);border-radius:var(--r-l);padding:14px 20px;font-size:14px}
.gnummer b{font-size:22px;font-weight:800;color:var(--merk-diep)}
.gnummer span{color:var(--gray-700);font-size:13px}
.gbehoud{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.gbehoud li{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-lopend);color:var(--gray-700);line-height:1.5}
.gbehoud .ico{width:16px;height:16px;flex:none;margin-top:4px;color:var(--merk-diep)}
/* ---------- E: zelf toevoegen ---------- */
.esoorten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;margin-top:18px}
.esoort{text-align:left;background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);
  padding:20px 22px;cursor:pointer;font:inherit;color:var(--gray-900);display:flex;flex-direction:column;gap:4px}
.esoort:hover{border-color:var(--merk);background:var(--goed-tint)}
.esoort .sico{width:42px;height:42px;border-radius:12px;background:var(--merk-tint);
  display:inline-flex;align-items:center;justify-content:center;color:var(--merk-diep);margin-bottom:6px}
.esoort .sico .ico{width:22px;height:22px}
.esoort .skop{font-weight:800;font-size:18px;letter-spacing:-.01em}
.esoort .stekst{font-size:14px;color:var(--gray-700);line-height:1.45}
.esoort ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.esoort li{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-toel);color:var(--gray-700)}
.esoort li .ico{width:15px;height:15px;flex:none;margin-top:3px;color:var(--merk-diep)}
.esoort .sbron{margin-top:12px;border-top:1px solid var(--gray-300);padding-top:10px;font-size:13px;color:var(--gray-700)}
.evondstregel{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-top:12px;
  background:var(--gray-100);border-radius:var(--r-m);padding:10px 14px}
.evondstregel .rnaam{font-weight:700;font-size:15px}
.evondstregel .rbedrag{font-weight:800;font-size:15px}
.eform{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));gap:14px;margin-top:18px}
.eform .field{display:flex;flex-direction:column;gap:5px}
.eform label{font-size:14px;font-weight:700}
.eform label .hint{font-weight:400}
.eform input{font:inherit;font-size:16px;border:2px solid var(--veldrand);border-radius:var(--r-m);
  padding:0 14px;min-height:52px;background:var(--veld);color:var(--gray-900)}
.eform input:focus{border-color:var(--merk)}
.eform .hint{font-size:var(--t-toel);color:var(--gray-700);line-height:1.4}
.evoorbeeld{background:rgba(255,255,255,.1);border-radius:var(--r-l);padding:14px 16px;margin-top:14px}
.evoorbeeld .vnaam{font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* De herkomst zonder kapitalen, zoals op de regel (1.76). */
.evoorbeeld .vherkomst{font-size:13px;font-weight:800;
  background:var(--knop);color:var(--knop-op);border-radius:var(--r-rond);padding:2px 9px}
.evoorbeeld .vvariant{font-size:13px;opacity:.8;margin-top:2px}
.evoorbeeld .vprijs{font-size:24px;font-weight:800;margin-top:8px}
.evoorbeeld .vbron{font-size:13px;opacity:.75}
.evoorbeeld .vrendement{font-size:13.5px;opacity:.9;margin-top:6px}
/* Een eigen regel staat bovenaan en is herkenbaar. Een eigen schatting krijgt
   een gestippeld kader: hij telt mee in wat je uitgeeft, maar er zit geen
   kental achter, dus beloven we niets over de opbrengst. */
.wpregel.eigen{border-color:var(--merk-zacht,var(--gray-300))}
.wpregel.eigen .rico{background:var(--merk);color:var(--merk-op)}
.wpregel.schatting{border-style:dashed}
/* ---------- C: het uitgebreide overzicht ---------- */
.codelen{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:18px}
/* Een onderdeel dat hier niet kan wordt gedempt, niet verborgen: weglaten
   suggereert dat de tool de mogelijkheid niet kent. De reden staat er altijd
   bij, in woorden. */
.codeel{position:relative;text-align:left;background:var(--vlak);border:2px solid var(--gray-300);
  border-radius:var(--r-l);padding:16px 18px;cursor:pointer;font:inherit;color:var(--gray-900);
  display:flex;flex-direction:column;gap:3px;min-height:158px}
.codeel:hover{border-color:var(--merk-zacht);background:var(--gray-100)}
.codeel.inplan{border-color:var(--merk);background:var(--goed-tint)}
.codeel.kanniet{opacity:.6;cursor:default;border-style:dashed;background:none}
.codeel.kanniet:hover{border-color:var(--gray-300);background:none}
.codeel .dico{margin-bottom:6px}
.codeel .dplan{position:absolute;top:14px;right:14px;font-size:13px;font-weight:800;text-transform:uppercase;
  letter-spacing:.03em;background:var(--knop);color:var(--knop-op);border-radius:var(--r-rond);padding:2px 9px}
.codeel .dnaam{font-weight:700;font-size:16px;line-height:1.2;padding-right:20px}
.codeel .dwat{font-size:13.5px;color:var(--gray-700);line-height:1.4}
.codeel .dvanaf{font-size:16px;font-weight:800;color:var(--merk-diep);margin-top:auto;padding-top:9px}
.codeel .dreden{font-size:13px;color:var(--gray-700);line-height:1.4;margin-top:auto;padding-top:9px;font-style:italic}
.codeel .dtelling{font-size:13px;color:var(--gray-500)}
.conu{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;margin-top:14px;background:var(--gray-100);
  border-radius:var(--r-l);padding:12px 18px;font-size:14px}
.conu b{font-size:14px}
.conu span{color:var(--gray-700)}
/* De vraag die vooraan hoort: staat het toestel er wel of niet? Hij stond
   verstopt in de merkenkiezer en daarnaast nog eens als losse vraag verderop
   in de lijst. Nu staat hij een keer, bovenaan het paneel. */
.apperbij{border:1px solid var(--gray-300);border-radius:var(--r-m);background:var(--papier);
  padding:13px 15px;margin-bottom:14px}
.apperbijvraag{display:block;font-weight:700;font-size:15px;margin-bottom:9px}
.apperbijkeuze{display:flex;gap:9px;flex-wrap:wrap}
.apperbijknop{font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:var(--vlak);
  border:1px solid var(--gray-300);border-radius:var(--r-rond);padding:9px 16px;min-height:42px;
  color:var(--gray-900)}
.apperbijknop:hover{border-color:var(--merk-diep)}
.apperbijknop.aan{background:var(--knop);color:var(--knop-op);border-color:var(--knop)}
.apperbijhint{font-size:var(--t-toel);color:var(--gray-700);line-height:1.45;margin:10px 0 0}
/* Staat het er niet, dan is "hoe nauwkeurig" een vraag zonder onderwerp. */
.appgeen{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--gray-300);
  border-radius:var(--r-m);background:var(--vlak);padding:13px 15px;font-size:14px;
  line-height:1.45;color:var(--gray-700)}
.appgeen .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--merk-diep)}

/* C3: geen apart scherm, een melding boven dezelfde lijst. */
.comelding{display:flex;gap:13px;align-items:center;margin-top:16px;background:var(--goed-tint);
  border:2px solid var(--merk);border-radius:var(--r-l);padding:14px 18px}
.comelding .mico{width:30px;height:30px;border-radius:50%;background:var(--merk);color:var(--merk-op);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.comelding .mico .ico{width:16px;height:16px;stroke-width:2.6}
.comelding .mtekst{flex:1;display:flex;flex-direction:column;gap:2px;font-size:14px}
.comelding .mtekst span{font-size:13px;color:var(--gray-700)}
.comelding .mverschil{font-weight:700;color:var(--merk-diep);display:inline-flex;align-items:center;gap:6px}
.comelding .mverschil .ico{width:13px;height:13px}
@media(max-width:760px){
  .codelen{grid-template-columns:1fr}
  .codeel{min-height:0}
  .comelding{flex-wrap:wrap}
}
.wpeffect{font-size:var(--t-toel);color:var(--gray-700);line-height:1.5;margin:0}
@media(max-width:980px){
  .trajmain.breed{grid-template-columns:1fr}
  .trajmain.breed .trajzijkant{position:static}
}
@media(max-width:760px){
  .wprij{grid-template-columns:1fr auto auto;gap:10px}
  .wpregel .rico{display:none}
  .wpregel .rcijfers{grid-column:1;text-align:left}
  .wpbron{grid-template-columns:auto 1fr}
  .wpbron .bbedrag,.wpbron .bveld{grid-column:2;justify-self:start;width:100%}
}
@media(max-width:760px){
  .trajregel{grid-template-columns:auto 1fr auto;gap:10px}
  .trajregel .rico{display:none}
  .trajregel .rcijfers{grid-column:2;text-align:left}
  .trajregel .rprijs{grid-row:1;grid-column:3}
  /* Een smallere prijsbron, zodat de naam en de uitleg ernaast ruimte houden. */
  .trajregel .rbron{max-width:7.5em}
  .bedragkaart.groot{transform:none;min-width:0;width:100%}
  .trajuitgangen .trajknop{width:100%;justify-content:center}
}
.trajterug{background:none;border:none;font:inherit;font-size:15px;color:var(--gray-700);cursor:pointer;
  padding:0;min-height:44px;margin-top:20px;display:inline-flex;align-items:center;gap:7px}
.trajterug:hover{color:var(--merk-diep);text-decoration:underline}
.trajterug .ico{width:16px;height:16px}
@media(max-width:760px){
  .trajmain{padding:8px 16px 28px}
  .trajvraag{font-size:24px;max-width:none}
  .trajkeuzes,.trajerbijs{grid-template-columns:1fr}
  .trajkeuze,.trajerbij{min-height:64px;padding:9px 9px 9px 11px;gap:11px;align-items:center;border-radius:14px}
  .trajknoppen{gap:12px}
  .trajknop{width:100%;justify-content:center}
}
.antwoord .naantwoord{margin-top:18px;border-top:1px solid rgba(255,255,255,.28);padding-top:12px;
  font-size:13.5px;opacity:.78}
.antwoord .zin small{display:block;font-size:13.5px;opacity:.72;margin-top:6px}
.antwoord{background:var(--merk-diep);color:#fff;border-radius:var(--r-xl);padding:22px 26px 24px;box-shadow:var(--schaduw-paneel);position:relative;overflow:hidden}
.antwoord .kop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.antwoord .kop b{font-size:14px;font-weight:600;opacity:.85}
.antwoord .kop span{font-size:13px;opacity:.65}
.antwoord .hoofd{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-top:16px}
/* De gekantelde bedragkaart: opzettelijk. Het maakt van een cijfer een
   ding dat op tafel ligt. */
.antwoord .bedragkaart{background:var(--goed);border-radius:20px;padding:16px 20px;min-width:180px;transform:rotate(-2deg);box-shadow:0 16px 34px rgba(0,0,0,.34)}
.antwoord .bedragkaart .label{font-size:13px;font-weight:600;opacity:.9}
.antwoord .bedragkaart .value{font-size:58px;font-weight:800;letter-spacing:-.04em;line-height:.92;margin-top:2px}
.antwoord .bedragkaart .per{font-size:15px;font-weight:600}
.antwoord .zin{font-size:var(--t-lopend);line-height:var(--t-regel);opacity:.94}
.antwoord .zin small{display:block;font-size:14px;opacity:.75;margin-top:8px}
.antwoord .stappen{display:flex;flex-direction:column;gap:7px;margin-top:18px}
.antwoord .stap{display:flex;align-items:center;gap:12px;border-radius:12px;padding:9px 14px;background:rgba(255,255,255,.1)}
.antwoord .stap .nr{width:28px;height:28px;border-radius:50%;background:var(--knop);color:var(--knop-op);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;flex:none}
.antwoord .stap .naam{flex:1;font-size:15px;font-weight:600}
.antwoord .stap .bedrag{font-size:16px;font-weight:800;color:var(--goed-op-diep);min-width:64px;text-align:right}
.antwoord .stap.buiten{background:transparent;border:1px dashed rgba(255,255,255,.35);opacity:.65}
.antwoord .stap.buiten .nr{background:rgba(255,255,255,.25);color:#fff}
.antwoord .stap.buiten .bedrag{color:#fff;font-weight:600;font-size:13px}
.mini{display:grid;grid-template-columns:52px minmax(0,1fr);gap:6px 12px;align-items:center;
  margin-top:18px;font-size:13px;font-weight:700}
.mini .balkrij{display:flex;align-items:center;gap:10px}
.mini .balk{display:flex;height:28px;border-radius:8px;overflow:hidden;width:76%}
.mini .balk i{display:block;height:100%}
.mini .balk .stroom{background:var(--stroom)}.mini .balk .gas{background:var(--gas)}.mini .balk .brandstof{background:rgba(255,255,255,.45)}
.mini .straks{display:flex;height:28px;width:76%}
.mini .straks .balk{width:auto;flex:none}
.mini .staart{flex:1;margin-left:5px;border-radius:8px;background:var(--goed);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;min-width:44px}
.mini .bedrag{font-size:16px;font-weight:800}
.antwoord .bezig{font-size:15px;opacity:.85;padding:30px 0;text-align:center}
@media (max-width:900px){
  .vdmain{grid-template-columns:1fr;gap:22px;padding:8px 22px 24px}
  .vdlinks h2{font-size:34px}
  .voordeur .vdkop{padding:0 22px}
  .voordeur .vdkop .links{display:none}
}
@media (max-width:640px){
  .vdmain{padding:6px 16px 24px}
  .vdlinks h2{font-size:30px}
  .vdlinks p.onder{font-size:var(--t-lopend)}
  .antwoord{border-radius:var(--r-l);padding:16px}
  .antwoord .hoofd{grid-template-columns:1fr}
  .antwoord .bedragkaart{transform:none;min-width:0}
  .antwoord .bedragkaart .value{font-size:40px}
}

/* iPad staand: de rail blijft, smaller (ontwerp L: 236 px). */
@media (max-width:1024px){
  .wizlichaam{grid-template-columns:236px minmax(0,1fr)}
  .wizbody{padding:22px 24px}
  .wizbody h3{font-size:28px}
}
@media (max-width:640px){
  #wizOverlay{padding:0}
  .wizcard{border-radius:0;height:100vh;max-height:none}
  .wizhead{padding:0 14px;min-height:54px}
  .wizhead .rechts .slot{display:none}
  .wizlichaam{display:flex;flex-direction:column}
  /* De rail wordt een strook boven de vraag; tikken opent hem als blad. */
  .wizrail{display:none}
  .wizstrook{display:grid}
  /* Ruimte onder de inhoud voor de vaste knopbalk; hij dekte de laatste
     tabelrijen af (UX-rapport, punt 10). */
  .wizbody{padding:16px 16px 190px}
  .wizbody h3{font-size:23px}
  .wizbody .uitleg{font-size:var(--t-lopend);padding:12px 14px}
  .wizfoot{position:absolute;left:0;right:0;bottom:0;background:var(--vlak);border-top:1px solid var(--gray-300);padding:12px 16px 18px;margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px}
  .wizfoot button.pri{grid-column:1/-1;width:100%;order:-1}
  .wizfoot button{min-height:48px;font-size:14.5px}
  .wizfoot button.link{font-size:13.5px}
  .wizfoot .rechts{grid-column:1/-1;order:-1;margin:0}
  .wizfoot .rechts button{width:100%}
  .wizfoot .lang{display:none}
  .wizfoot .kort{display:inline}
  /* In de spoorbalk van het traject staan ze in de volgorde van het ontwerp:
     Vorige, "Weet ik niet", Volgende. */
  body.tv2 .kactie .wizfoot .rechts{order:0;width:auto}
  body.tv2 .kactie .wizfoot .rechts button{width:auto}
  .wizinhoudkaart .groot{font-size:28px}
}

/* ================= het antwoord: budgetschuif, kopzin, waterval, stappen, totalen
   Ontwerp september 2026. De schuif heeft vier tot zes haltes die uit de
   ranglijst komen; sleep en alles op het scherm rekent mee. ================= */
.budgetkaart{padding:16px 22px 14px}
.budget{position:relative;height:96px;margin:4px 22px 0}
.budget .spoor{position:absolute;left:0;right:0;top:62px;height:10px;border-radius:5px;background:var(--gray-300)}
.budget .gevuld{position:absolute;left:0;top:62px;height:10px;border-radius:5px;background:var(--merk);width:0}
/* De bolletjes staan op hun ECHTE bedrag, niet netjes verdeeld. Daardoor
   zie je of de volgende stap vlak naast je budget ligt of nog ver weg —
   dat is de vraag van iemand die een bedrag in zijn hoofd heeft. */
.budget .stippen{position:absolute;left:0;right:0;top:58px;height:18px}
.budget .stippen span{position:absolute;width:18px;height:18px;border-radius:50%;background:var(--vlak);border:3px solid var(--gray-300);transform:translateX(-50%);transition:border-color .15s ease}
.budget .stippen span.gehad{border-color:var(--merk)}
/* Het eerstvolgende bolletje krijgt nadruk: hier kan nog iets bij. */
.budget .stippen span.volgend{border-color:var(--merk-diep);border-style:dashed;width:20px;height:20px;top:-1px;box-shadow:0 0 0 4px var(--merk-tint)}
.haltes{position:relative;min-height:20px;display:block;margin:6px 8px 0}
.haltes .nu{font-size:var(--t-min);color:var(--gray-700);font-weight:600}
.haltes .volgend{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:var(--t-min);color:var(--merk-diep);background:var(--merk-tint);border-radius:var(--r-rond);padding:2px 9px}
/* De voordeur houdt vaste bedragen onder de schuif: daar zijn het er vier
   en staan ze wél netjes verdeeld. */
.haltes.vast{display:flex;justify-content:space-between;color:var(--gray-500)}
.haltes.vast span{position:static;transform:none;background:none;padding:0;color:inherit;flex:1;text-align:center}
.haltes.vast span:first-child{text-align:left}.haltes.vast span:last-child{text-align:right}
/* PC 33: de bedragen onder de schuif zijn knoppen (raakvlak 44 px), zonder dat ze eruitzien als knoppen. */
.haltes.vast .halte{flex:1;min-height:44px;padding:0 2px;border:0;background:none;color:inherit;font:inherit;cursor:pointer;
  text-align:center;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.haltes.vast .halte:first-child{text-align:left}.haltes.vast .halte:last-child{text-align:right}
.haltes.vast .halte:hover,.haltes.vast .halte:focus-visible{color:var(--merk-diep);text-decoration-color:currentColor}
@media (max-width:760px){
  /* Op een telefoon botst het zwevende label met de regel eronder. */
  .haltes .volgend{position:static;transform:none;display:inline-block;margin-top:4px}
}
.budget .greep{position:absolute;top:44px;width:44px;height:44px;border-radius:50%;background:var(--vlak);border:4px solid var(--merk);box-shadow:0 4px 14px rgba(0,0,0,.18);transform:translateX(-50%);left:0;transition:left .15s ease}
.budget .waarde{position:absolute;top:0;transform:translateX(-50%);background:var(--merk-diep);color:#fff;border-radius:12px;padding:6px 14px;font-size:22px;font-weight:800;letter-spacing:-.03em;white-space:nowrap;left:0;transition:left .15s ease}
.budget .waarde small{display:block;font-size:var(--t-min);font-weight:600;opacity:.8;letter-spacing:0}
.budget input[type=range]{position:absolute;left:-22px;right:-22px;top:40px;width:calc(100% + 44px);height:56px;opacity:0;cursor:pointer;margin:0;min-height:0;padding:0;background:none}
.budget input[type=range]:focus-visible{opacity:1;accent-color:var(--merk-diep)}
/* De startknop van stap 1, onder het bedrag. Hij staat waar je net gekeken
   hebt; de knop rechtsboven staat waar hij op elk scherm staat. */
.trajstart{margin-top:22px}
.trajknop.groot{min-height:58px;font-size:18px;font-weight:800;padding:0 30px}
.bedragzelf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.bedragzelf label{font-size:14.5px;color:var(--gray-700)}
/* Het euroteken staat in het veld en niet ervoor.
   Eerst had het vak eromheen de rand en het veld erbinnen geen; dat leverde
   bij het typen twee kaders op -- de groene rand van het vak en daarbinnen de
   focusring die de browser om het veld zelf zet. Nu draagt het veld de rand,
   net als elk ander invoerveld in de tool, en zweeft het teken erin. */
.bedragveld{position:relative;display:inline-flex;align-items:center}
.bedragveld .teken{position:absolute;left:13px;font-size:17px;font-weight:700;
  color:var(--gray-700);pointer-events:none}
.bedragveld input{font:inherit;font-size:18px;font-weight:700;font-variant-numeric:tabular-nums;
  border:2px solid var(--veldrand);border-radius:var(--r-m);background:var(--veld);
  color:var(--gray-900);width:calc(9ch + 48px);padding:0 13px 0 31px;min-height:48px}
.bedragveld input:focus{border-color:var(--merk)}
/* Een bedrag dat niet kan: de melding onder het veld (C18). */
.bedragfout{flex-basis:100%;margin:0}
.bedragfout[hidden]{display:none}
.budgetvoet{margin:10px 0 0;border-top:1px solid var(--gray-300);padding-top:10px;font-size:var(--t-toel);color:var(--gray-700)}
.kopzin{font-size:32px;margin:14px 0 10px;color:var(--gray-900);min-height:1.1em}
.stapkaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:14px 16px 12px;display:flex;flex-direction:column;gap:7px;min-height:168px;text-align:left;font-family:inherit;cursor:pointer;color:var(--gray-900)}
.stapkaart:hover{border-color:var(--merk-zacht)}
.stapkaart .bovenrij{display:flex;justify-content:space-between;align-items:center}
.stapkaart .nr{width:36px;height:36px;border-radius:50%;background:var(--merk-diep);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:18px;font-weight:800}
.stapkaart .bovenrij .ico{width:26px;height:26px;color:var(--merk-diep);stroke-width:1.4}
.stapkaart .naam{font-size:15.5px;font-weight:700;line-height:1.2}
.stapkaart .kort{font-size:13px;color:var(--gray-700);line-height:1.4;flex:1}
.stapkaart .onder{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--gray-300);padding-top:8px}
.stapkaart .maand{font-size:20px;font-weight:800;color:var(--goed)}
.stapkaart .maand small{font-size:var(--t-min);font-weight:600}
.stapkaart .netto{font-size:var(--t-min);color:var(--kosten);font-weight:600}
.stapkaart.buiten{background:transparent;border:2px dashed var(--gray-300);opacity:.75}
.stapkaart.buiten .nr{background:var(--gray-500)}
.stapkaart.buiten .maand{color:var(--gray-500)}
.totalen{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1.6fr;gap:10px;margin:0 0 22px}
.totalen .kpi{min-width:0;padding:10px 14px}
.totalen .kpi .value{font-size:20px}
.totalen .kpi .hint{font-size:var(--t-toel)}
.totalen .volgende{border-radius:var(--r-m);padding:10px 14px;display:flex;gap:10px;align-items:center;font-size:13px;line-height:1.35;color:var(--gray-900);background:var(--info-tint);border:1px solid var(--info-rand)}
.totalen .volgende .ico{width:22px;height:22px;color:var(--info);flex:none}
.totalen .volgende b.goed{color:var(--goed)}
.totalen .volgende.laatste{background:var(--let-tint);border-color:var(--let-rand)}
.totalen .volgende.laatste .ico{color:var(--let)}
@media (max-width:760px){
  .budget{margin:4px 14px 0}
  .kopzin{font-size:26px}
  .stapkaart{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap}
  .stapkaart .bovenrij{order:0}
  .stapkaart .naam{flex:1;order:1}
  .stapkaart .kort{order:3;flex-basis:100%}
  .stapkaart .onder{order:2;border:none;padding:0;flex-direction:column;align-items:flex-end;gap:0}
  .totalen{grid-template-columns:1fr 1fr}
  .totalen .volgende{grid-column:1/-1}
}

/* ---- plan: selectie, profielbalken, kasstroom ---- */
.planchip{border:2px solid var(--gray-300);border-radius:10px;padding:9px 13px;font-size:13px;cursor:pointer;background:#fff;user-select:none;display:flex;gap:9px;align-items:center}
.planchip.on{border-color:var(--merk);background:var(--merk-tint)}
.planchip input{width:16px;height:16px;margin:0;flex:none}
.planchip .pn{font-weight:600;color:var(--merk-diep)}
.planchip .pb{color:var(--gray-700);font-size:var(--t-min)}
.staaf{display:flex;height:26px;border-radius:6px;overflow:hidden;background:var(--gray-100);border:1px solid var(--gray-300)}
.staaf i{display:block;height:100%}
.cashwrap{overflow-x:auto}
.cashwrap svg{display:block;min-width:520px}
.planvergelijk{font-size:var(--t-min);width:100%}
.planvergelijk td,.planvergelijk th{padding:5px 8px}
.planvergelijk td:last-child,.planvergelijk th:last-child{text-align:right;font-variant-numeric:tabular-nums}

.vergelijk{margin:6px 0 18px}
.vergelijk .titel{font-size:13px;font-weight:600;color:var(--merk-diep);margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.vergelijk .titel .delta{font-weight:600}
.vergelijk .delta.op{color:var(--let)}
.vergelijk .delta.af{color:var(--goed)}
.vgrij{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:10px;align-items:center;margin-bottom:6px;font-size:var(--t-min)}
.vgrij .lab{color:var(--gray-700);text-align:right}
.vgrij .cijfer{font-variant-numeric:tabular-nums;color:var(--gray-900);white-space:nowrap;text-align:right}
.vgspoor{background:var(--gray-100);border:1px solid var(--gray-300);border-radius:5px;height:24px;overflow:hidden}
.vgstaaf{display:flex;height:100%}
.vgstaaf i{display:block;height:100%}
.vglegenda{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0 84px;font-size:var(--t-min);color:var(--gray-700)}
.vglegenda .dot{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
details.kasstroom{border:1px solid var(--gray-300);border-radius:var(--radius);padding:0;margin-top:20px;background:var(--gray-100)}
details.kasstroom>summary{cursor:pointer;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--merk-diep);list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}
details.kasstroom>summary::-webkit-details-marker{display:none}
details.kasstroom>summary .pijl{color:var(--gray-500);font-weight:400;font-size:var(--t-min)}
details.kasstroom[open]>summary{border-bottom:1px solid var(--gray-300)}
details.kasstroom .inhoud{padding:14px 16px 16px;background:#fff;border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:600px){.vgrij{grid-template-columns:60px 1fr;gap:6px}.vgrij .cijfer{grid-column:2;text-align:right}.vglegenda{margin-left:0}}

/* ---- bouwstempel onderaan ---- */
.versiepaneel{max-width:1180px;margin:0 auto 40px;padding:16px 20px;background:#fff;border:1px solid var(--gray-300);border-radius:var(--radius);font-size:var(--t-min)}
.versiepaneel h3{margin:0 0 4px;font-size:14px;color:var(--merk-diep)}
.versiepaneel table{margin-top:10px}
.versiepaneel td:last-child,.versiepaneel th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.versiepaneel code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t-min);background:var(--gray-100);padding:1px 5px;border-radius:4px}

/* ---- de voetregel en de losse pagina's over, privacy en cookies ---- */
.footer-note a{color:inherit}
.juridisch h2{font-size:15px;color:var(--merk-diep);margin:20px 0 6px}
.juridisch p{margin:0 0 10px}
.juridisch ul{margin:0 0 10px;padding-left:20px}
.juridisch li{margin-bottom:4px}
.juridisch code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--t-min);background:var(--gray-100);padding:1px 5px;border-radius:4px}
/* ================= WAT HANGT ER AL IN JE HUIS? (ontwerp v1.22, punt v3)
   Links de toestellen met hun status, rechts één paneel met drie niveaus.
   Onder 900 px wordt het één kolom: de lijst boven, het detail eronder. */
.apppaneel{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);border:1px solid var(--gray-300);border-radius:var(--r-l);overflow:hidden;background:var(--papier)}
.applijst{padding:16px 18px;border-right:1px solid var(--merk-zacht);display:flex;flex-direction:column;gap:8px;min-width:0}
.appkaart{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;text-align:left;padding:12px 15px;border-radius:14px;cursor:pointer;font-family:inherit;font-size:inherit;background:var(--vlak);color:var(--gray-900);border:1px solid var(--merk-zacht);min-height:var(--raakvlak)}
.appkaart:hover{border-color:var(--merk-diep)}
.appkaart .naam{font-size:15.5px;font-weight:800;display:flex;align-items:center;gap:8px}
.appkaart .naam .ico{width:18px;height:18px;flex:none;color:var(--merk-diep)}
.appkaart .regel{grid-column:1/-1;font-size:13px;color:var(--gray-500)}
.appkaart.aan{background:var(--merk-diep);color:#fff;border:2px solid var(--merk-diep);padding:11px 14px}
.appkaart.aan .regel{color:#c5d8d6}
.appkaart.aan .naam .ico{color:#fff}
.apptag{font-size:var(--t-min);font-weight:800;padding:3px 9px;border-radius:var(--r-rond);border:1px solid;white-space:nowrap}
.apptag.goed{background:var(--goed-tint);color:var(--goed);border-color:var(--goed-rand)}
.apptag.let{background:var(--let-tint);color:var(--let);border-color:var(--let-rand)}
.apptag.neutraal{background:var(--kosten-tint);color:var(--kosten);border-color:var(--gray-300)}
.apptag.merk{background:var(--merk-tint);color:var(--merk-diep);border-color:var(--merk-zacht)}
.appkaart.aan .apptag{background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.3)}
.appvoetnoot{margin:6px 0 0;border-top:1px solid var(--merk-tint);padding-top:10px}
.appdetail{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.appkop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.appkop h3{font-size:clamp(20px,2.4vw,25px);font-weight:800;letter-spacing:-.025em;margin:0}
.appkop p{font-size:var(--t-toel);color:var(--gray-500);margin:3px 0 0}
.appnu{text-align:right;flex:none;background:var(--merk-tint);border:1px solid var(--merk-zacht);border-radius:12px;padding:8px 14px}
.appnu span{display:block;font-size:var(--t-min);color:var(--gray-500)}
.appnu b{display:block;font-size:17px;font-weight:800}
.appniveaus{display:flex;flex-direction:column;gap:10px}
.appblok{border-radius:15px;border:1px solid var(--merk-zacht);background:var(--vlak);padding:12px 15px}
.appblok.aan{border:2px solid var(--merk-diep);background:var(--merk-tint);padding:11px 14px}
.appniveau{width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:12px;align-items:center;background:none;border:none;padding:0;cursor:pointer;font-family:inherit;font-size:inherit;text-align:left;min-height:40px;color:var(--gray-900)}
.appniveau .bol{width:22px;height:22px;border-radius:50%;border:2px solid var(--gray-300);background:var(--vlak);display:inline-block;flex:none}
.appblok.aan .appniveau .bol{border:6px solid var(--merk-diep);background:var(--merk-diep)}
.appniveau b{display:block;font-size:15.5px;font-weight:800}
.appniveau small{display:block;font-size:13px;color:var(--gray-500);margin-top:1px}
.appniveau .merk{font-size:var(--t-min);font-weight:700;color:var(--gray-500);white-space:nowrap}
.appblok.aan .appniveau .merk{color:var(--goed)}
.appblokinhoud{margin-top:11px;padding-top:11px;border-top:1px solid var(--merk-zacht);font-size:13.5px;line-height:1.45;color:var(--gray-700)}
.appbron{font-size:var(--t-min);color:var(--gray-500);margin-top:5px}
/* De drie stappen van de modelkeuze: merk, model, bouwjaar. Elke stap krijgt
   een eigen kopje zodat zichtbaar is waar je bent, en verschijnt pas als de
   vorige gezet is. */
.appstap{margin-bottom:14px}
.appstap:last-of-type{margin-bottom:0}
.appstapkop{display:block;font-size:var(--t-min);font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--gray-500);margin-bottom:7px}
.appmerken{display:flex;flex-wrap:wrap;gap:7px}
.appmerk{padding:9px 14px;border-radius:999px;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;
  background:var(--vlak);border:1px solid var(--merk-zacht);color:var(--gray-900);min-height:var(--raakvlak)}
.appmerk:hover{border-color:var(--merk-diep)}
.appmerk.aan{background:var(--merk-diep);border-color:var(--merk-diep);color:#fff}
.appjaarrij{display:flex;gap:11px;align-items:flex-start;flex-wrap:wrap}
.appjaar{width:120px;height:46px;border:1px solid var(--merk-zacht);border-radius:11px;padding:0 12px;
  font-size:16px;font-family:inherit;background:var(--vlak);color:var(--gray-900);box-sizing:border-box}
.appjaaruitleg{flex:1 1 220px;font-size:var(--t-min);color:var(--gray-500);line-height:1.4}
.appjaargevolg{margin:8px 0 0;font-size:var(--t-toel);font-weight:600;color:var(--merk-diep)}
.appmodellen{display:flex;flex-direction:column;gap:7px}
.appmodel{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;text-align:left;padding:10px 13px;border-radius:11px;cursor:pointer;font-family:inherit;font-size:inherit;background:var(--vlak);border:1px solid var(--merk-zacht);color:var(--gray-900);min-height:var(--raakvlak)}
.appmodel:hover{border-color:var(--merk-diep)}
.appmodel.aan{background:var(--merk-tint);border:2px solid var(--merk-diep);padding:9px 12px}
.appmodel b{display:block;font-size:14.5px;font-weight:700}
.appmodel small{display:block;font-size:var(--t-min);color:var(--gray-500)}
.appmodel .herkomst{font-size:var(--t-min);font-weight:700;color:var(--gray-500);white-space:nowrap}
.appvelden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.appveld .lab{display:block;font-size:var(--t-min);color:var(--gray-500);margin-bottom:3px}
.appveld input{width:100%;height:46px;border:2px solid var(--veldrand);border-radius:11px;padding:0 12px;font-size:16px;font-family:inherit;background:var(--veld);color:var(--gray-900);box-sizing:border-box}
.appveld .hint{display:block;margin-top:3px}
/* Een keuzelijst en een tekstveld horen er hetzelfde uit te zien als de
   getalvelden ernaast; anders valt een dakrichting uit de rij. */
.appveld select{width:100%;height:46px;border:2px solid var(--veldrand);border-radius:11px;
  padding:0 10px;font-size:16px;font-family:inherit;background:var(--veld);color:var(--gray-900);
  box-sizing:border-box}
/* Een aanvinkveld: het vinkje hoort links van de tekst en niet als derde
   regel onder een label. */
.appveld.aanvink{display:flex;flex-direction:row;align-items:center;gap:10px;flex-wrap:wrap}
.appveld.aanvink input[type=checkbox]{width:22px;height:22px;flex:none;order:-1;margin:0}
.appveld.aanvink .lab{flex:1;margin-bottom:0;font-size:13.5px;color:var(--gray-900)}
.appveld.aanvink .hint{flex-basis:100%;margin-top:0}
.appwaar{margin-top:11px;display:flex;gap:10px;align-items:flex-start;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:11px;padding:10px 13px;font-size:13px;color:var(--let)}
.appwaar .ico{flex:none;margin-top:2px}
.appgevolg{margin-top:auto;background:var(--merk-diep);color:#fff;border-radius:15px;padding:13px 18px;font-size:13.5px;line-height:1.4}
/* Smal: één kolom. Dit hangt niet aan de breedte van het VENSTER maar aan
   die van het paneel zelf, want in de vragenlijst staat hetzelfde paneel in
   een kaart van ruim 700 px terwijl het scherm 1366 breed is. Een
   mediaquery kijkt naar het scherm en zou hem daar dus in twee kolommen
   persen. Het script meet de kaart en zet deze klasse. */
.apppaneel.smal{grid-template-columns:1fr}
.apppaneel.smal .applijst{border-right:none;border-bottom:1px solid var(--merk-zacht)}
.apppaneel.smal .appvelden{grid-template-columns:1fr}
.apppaneel.smal .appniveau{grid-template-columns:22px 1fr}
.apppaneel.smal .appniveau .merk{grid-column:2;margin-top:4px}
@media (max-width:900px){
  .apppaneel{grid-template-columns:1fr}
  .applijst{border-right:none;border-bottom:1px solid var(--merk-zacht)}
  .appvelden{grid-template-columns:1fr}
  .appniveau{grid-template-columns:22px 1fr}
  .appniveau .merk{grid-column:2;margin-top:4px}
}

/* ---- tabellen op een telefoon (UX-rapport, punt 10) ----
   De kamertabel is 675 px breed; op 390 px zag je alleen Naam en Functie en
   moest je per rij zijwaarts scrollen — met tien kamers is dat onwerkbaar.
   Onder 640 px wordt elke rij een kaartje met het kolomlabel ervoor. Dat
   label komt uit data-kop, dat de tekenfuncties meegeven.

   Alleen tabellen met klasse "kaartjes" doen dit: een tabel met getallen
   die je wilt vergelijken blijft beter een tabel, ook op een telefoon. */
@media (max-width:640px){
  .tbl-wrap:has(table.kaartjes){overflow-x:visible}
  table.kaartjes,table.kaartjes tbody,table.kaartjes tr,table.kaartjes td{display:block;width:auto}
  table.kaartjes thead{position:absolute;left:-9999px}
  table.kaartjes tr{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-m);padding:10px 12px;margin-bottom:10px}
  table.kaartjes td{border:none;padding:5px 0;display:grid;grid-template-columns:minmax(96px,38%) 1fr;gap:10px;align-items:center}
  table.kaartjes td::before{content:attr(data-kop);font-size:var(--t-min);font-weight:700;color:var(--gray-500)}
  table.kaartjes td:empty{display:none}
  table.kaartjes td input,table.kaartjes td select{width:100%;min-height:44px}
  table.kaartjes td button{min-height:44px}
}
@media (max-width:640px){
  /* Raakvlakken: veertien van de tweeënvijftig bedienbare elementen waren
     onder de 32 px hoog. Op een telefoon is 44 px de ondergrens. */
  .wizbody .small-btn,.wizbody button.link,.wizbody input,.wizbody select{min-height:44px}
  .wizbody input[type=checkbox]{width:26px;height:26px}
  .wizfoot button.link{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;padding:8px 12px}
  .wizfoot button.link small{display:block;font-size:13px}
}
input.veldfout,select.veldfout{border-color:var(--fout);box-shadow:inset 0 0 0 1px var(--fout)}
.alslink{background:none;border:none;padding:0;font:inherit;color:var(--merk-diep);text-decoration:underline;cursor:pointer;min-height:0}
.alslink:hover{color:var(--gray-900)}
.noresultknoppen{margin-top:12px;display:flex;gap:10px;flex-wrap:wrap}
/* Bezig met rekenen. Geen animatie die om aandacht schreeuwt: een rustig
   rondje, en uit zodra het besturingssysteem om minder beweging vraagt. */
@keyframes draai{to{transform:rotate(360deg)}}
.kicker{font-size:var(--t-min);font-weight:800;color:var(--let);letter-spacing:.05em;text-transform:uppercase}
h2.groot404{font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:8px 0 0}
.vier04-lead{font-size:15.5px;color:var(--gray-700);margin:10px 0 0;max-width:46ch}
.vier04-knoppen{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.vier04-knop{display:inline-flex;align-items:center;min-height:50px;padding:0 18px;border-radius:12px;border:1px solid var(--gray-300);background:none;color:var(--gray-900);font-size:15px;font-weight:700;text-decoration:none}
.vier04-knop:hover{background:var(--merk-tint);border-color:var(--merk-zacht)}
.vier04-knop.hoofd{background:var(--knop);border-color:var(--knop);color:var(--knop-op);padding:0 22px;font-size:16px;font-weight:800}
.vier04-knop.hoofd:hover{background:var(--knop-hover);border-color:var(--knop-hover)}
.juridischpagina{max-width:820px;margin:0 auto;padding:24px 24px 60px}
.juridischpagina .terug{display:inline-block;margin-bottom:16px;font-size:14px;color:var(--merk-diep)}

/* De drie bedragen die er het meest toe doen: wat het kost, wat je terugkrijgt,
   wat je zelf betaalt. Bruto staat vooraan, want dat is het getal op de offerte
   en dat is wat mensen voelen. */
.kpi.groot{background:var(--vlak);border-color:var(--gray-300)}
.kpi.groot .value{font-size:26px;letter-spacing:-.02em}
.kpi.groot .label{font-weight:600;color:var(--gray-500)}
.kpi.groot.uitgave .value{color:var(--kosten)}
@media(max-width:700px){.kpi.groot .value{font-size:22px}}

/* ------------------------------------------------------------------
   Het rapport op papier (of als PDF).

   Geen PDF-bibliotheek: de browser kan dit zelf, en een bibliotheek van een
   halve megabyte voor één A4 is niet te verdedigen. Dezelfde keuze als bij
   het verantwoordingsrapport in het beheer.

   Op het scherm staat het vel er niet; bij het afdrukken staat er niets
   anders. Zo hoeft er geen tweede pagina bijgehouden te worden die na een
   wijziging uit de pas loopt met het scherm. */
#rapportVel{display:none}
@media print{
  @page{size:A4 portrait;margin:16mm}
  body>*{display:none !important}
  body>#rapportVel{display:block !important}
  #rapportVel{font:12px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#1d2a2b}
  #rapportVel h1{font-size:21px;margin:0 0 2px}
  #rapportVel .van{font-size:12px;color:#4b5d5e;margin:0 0 14px}
  #rapportVel h2{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#0f3d3e;
                 margin:16px 0 6px;border-bottom:1px solid #c9ddd6;padding-bottom:3px}
  #rapportVel table{width:100%;border-collapse:collapse;font-size:12px}
  #rapportVel th,#rapportVel td{text-align:left;padding:4px 6px;border-bottom:1px solid #e2ece9;
                                vertical-align:top}
  #rapportVel td.get{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  /* TP5: de brief en het agendapunt, en "Voor je VvE" op een eigen blad. */
  #rapportVel .irapbrief p{white-space:pre-wrap;font-size:12pt;line-height:1.5}
  #rapportVel .irapvve{break-before:page}
  #rapportVel td .ico{width:16px;height:16px;vertical-align:-3px;margin-right:6px;color:#0f3d3e}
  #rapportVel .klein{font-size:11px;color:#4b5d5e}
  #rapportVel .voet{margin-top:18px;border-top:1px solid #c9ddd6;padding-top:6px;
                    font-size:10.5px;color:#4b5d5e}
  /* Het vel van het traject (ontwerp I2). Het scherm en het papier delen hier
     dezelfde opbouw; alleen de maten verschillen, want een A4 is smaller dan
     een venster. */
  #rapportVel .irap{display:flex;flex-direction:column;gap:14px;font-size:11px;color:#1d2a2b}
  #rapportVel .irapkop{display:flex;justify-content:space-between;align-items:flex-start;
                       gap:16px;border-bottom:2.5pt solid #0f3d3e;padding-bottom:10px}
  #rapportVel .irapmerk{font-size:8pt;font-weight:800;letter-spacing:.14em;
                        text-transform:uppercase;color:#63736f}
  #rapportVel .irapkop h1{font-size:19px;font-weight:800;line-height:1.1;margin:4px 0 0}
  #rapportVel .irapwie{text-align:right;font-size:9.5pt;color:#3d4b4c;line-height:1.55}
  #rapportVel .irapkpi{display:flex;gap:8px}
  #rapportVel .irapkpi>div{flex:1;border:1px solid #c9ddd6;border-radius:7px;padding:7px 9px}
  #rapportVel .irapkpi>div.goed{background:#eaf7df;border-color:#a9e08a}
  #rapportVel .irapkpi b{display:block;font-size:15px;font-weight:800}
  #rapportVel .irapkpi span{display:block;font-size:8pt;color:#3d4b4c;line-height:1.3}
  #rapportVel .irap h2{font-size:11.5pt;font-weight:800;margin:0 0 5px;border:none;
                       padding:0;text-transform:none;letter-spacing:0;color:#1d2a2b}
  #rapportVel .irap h3{font-size:10pt;font-weight:800;margin:0 0 4px}
  #rapportVel .iraptabel{border:1px solid #c9ddd6;border-radius:7px;overflow:hidden}
  #rapportVel .iraprij{display:grid;grid-template-columns:20px 1.7fr 1fr .9fr .9fr;gap:8px;
                       padding:6px 10px;border-top:1px solid #e2ece9;align-items:baseline;
                       break-inside:avoid}
  #rapportVel .iraprij.kop{background:#f8f9fa;border-top:none;border-bottom:1px solid #c9ddd6;
                           font-size:7.5pt;font-weight:800;letter-spacing:.04em;
                           text-transform:uppercase;color:#63736f}
  #rapportVel .iraprij.tot{border-top:1.5pt solid #0f3d3e;background:#f8f9fa}
  #rapportVel .irnr{font-size:8.5pt;font-weight:800;color:#63736f}
  #rapportVel .irnaam b{display:block;font-size:10pt;font-weight:700}
  #rapportVel .irnaam small{display:block;font-size:8pt;color:#63736f}
  #rapportVel .irnaam em{display:block;font-size:8pt;color:#8a4b00;font-style:normal}
  #rapportVel .irprijs b{display:block;font-size:10pt;font-weight:800}
  #rapportVel .irprijs small{display:block;font-size:8pt;color:#63736f}
  #rapportVel .irmaand{font-size:10pt;font-weight:800;color:#287a05}
  #rapportVel .irtvt{font-size:9.5pt;color:#3d4b4c}
  #rapportVel .irapafg{border:1px dashed #c9ddd6;border-radius:7px;padding:8px 10px;
                       display:flex;flex-direction:column;gap:5px}
  #rapportVel .irapafg>div{display:flex;justify-content:space-between;gap:12px;font-size:9.5pt}
  #rapportVel .irapbasis{background:#f8f9fa;border:1px solid #c9ddd6;border-radius:7px;padding:9px 11px}
  #rapportVel .irapbasis p{margin:0;font-size:8.5pt;line-height:1.55;color:#3d4b4c}
  #rapportVel .irapvoet{border-top:1px solid #c9ddd6;padding-top:6px;font-size:8pt;color:#63736f;
                        display:flex;justify-content:space-between;gap:12px}
  /* De onderdelen uit Adviesrapport.dc.html, op papier. */
  #rapportVel .irapvak{display:flex;flex-direction:column;gap:5px;break-inside:avoid}
  #rapportVel .irapbij{margin:0;font-size:8pt;color:#63736f;line-height:1.5}
  #rapportVel .irapklein{display:block;font-size:8pt;font-weight:700;color:#63736f}
  #rapportVel .iraprolblok{background:#eaf7df;border:1px solid #a9e08a;border-radius:7px;padding:8px 11px}
  #rapportVel .iraprolblok b{display:block;font-size:10pt;color:#287a05}
  #rapportVel .iraprolblok span{display:block;font-size:8.5pt;color:#3d4b4c;line-height:1.55}
  #rapportVel .iraprekening{margin:0;font-size:9.5pt}
  #rapportVel .iraprij.groepkop{background:#e2ece9;border-top:none;border-bottom:1px solid #c9ddd6;padding:5px 10px}
  #rapportVel .iraprij.groepkop b{font-size:10pt}
  #rapportVel .iraprij.groepkop small{font-size:8pt;color:#3d4b4c}
  #rapportVel .iraptabel.zelf .iraprij.groepkop{background:#eaf7df}
  #rapportVel .iraptabel+.iraptabel{margin-top:7px}
  #rapportVel .irapletop{background:#fbeddc;border:1px solid #e6c08a;border-radius:7px;
                         padding:7px 10px;font-size:8.5pt;line-height:1.55;color:#5a3400}
  #rapportVel .irapdelen{display:flex;flex-direction:column;gap:4px}
  #rapportVel .irapdelen>div{display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:baseline}
  #rapportVel .irapdelen b{font-size:9.5pt;color:#0f3d3e}
  #rapportVel .irapdelen span{font-size:8.5pt;color:#3d4b4c;line-height:1.5}
  #rapportVel .irapalles{display:grid;grid-template-columns:1fr 1fr;gap:5px 16px}
  #rapportVel .irapalles>div{display:grid;grid-template-columns:16px 1fr;gap:7px;align-items:baseline}
  #rapportVel .irapalles>div>span:first-child{font-size:8pt;font-weight:800;color:#63736f}
  #rapportVel .irapalles b{display:block;font-size:9pt}
  #rapportVel .irapalles small{display:block;font-size:8pt;color:#63736f;line-height:1.35}
  /* Waar dit advies op rust (ontwerp T4, 1.72), op een eigen blad zoals
     pagina 5 van Adviesrapport v2. Licht in plaats van teal: een donker vlak
     drukt niet op elke printer af. */
  #rapportVel .iraprust{break-before:page}
  #rapportVel .irapgrens{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;background:#e2ece9;
                         border:1px solid #c9ddd6;border-radius:7px;padding:8px 11px;color:#1d2a2b}
  #rapportVel .irapgrensgetal span{display:block;font-size:8pt;color:#3d4b4c;opacity:1}
  #rapportVel .irapgrensgetal b{display:block;font-size:15px;font-weight:800;color:#0f3d3e}
  #rapportVel .irapgrensgetal em{display:block;font-style:normal;font-size:8pt;font-weight:700;color:#287a05}
  #rapportVel .irapgrens p{margin:0;font-size:9pt;line-height:1.5}
  #rapportVel .iraprusttabel{width:100%;border-collapse:collapse;font-size:8.5pt;border:1px solid #c9ddd6}
  #rapportVel .iraprusttabel th{background:#f8f9fa;font-size:7.5pt;color:#63736f;padding:4px 6px;text-align:left}
  #rapportVel .iraprusttabel td{padding:4px 6px;border-top:1px solid #e2ece9;vertical-align:top}
  #rapportVel .iraprusttabel .irrs.goed{color:#287a05}
  #rapportVel .iraprusttabel .irrs.let{color:#8a4b00}
  #rapportVel .iraprusttabel .irrs.info{color:#1f5f7a}
  #rapportVel .iraprustgeen,#rapportVel .iraprustbuiten p{margin:0;font-size:9pt;color:#3d4b4c}
  #rapportVel .iraprustbuiten{background:#f8f9fa;border:1px solid #c9ddd6;border-radius:7px;padding:7px 10px}
  #rapportVel .iraprustaan{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  #rapportVel .iraprustaan>div{border:1px solid #c9ddd6;border-radius:7px;padding:6px 8px;font-size:8.5pt;line-height:1.45}
  #rapportVel .iraprustvast{display:grid;grid-template-columns:1fr 1fr;gap:6px;background:#e2ece9;border:1px solid #c9ddd6;
                            border-radius:7px;padding:7px 10px;font-size:8pt;color:#3d4b4c}
  #rapportVel .iraprustvast b{color:#0f3d3e}
}

/* ================= STAP 5: JE RESULTAAT (ontwerp S, 1.71) =================
   Eén pagina met één plan. Desktop: links het resultaat, rechts het paneel
   "Je rapport" in merk-diep (370px). iPad staand: het paneel verdwijnt, het
   rapport staat naast het label, en het antwoord blijft boven de vouw.
   Telefoon: één kolom, "Download je rapport" als balk onderaan. Wat op een
   maat niet past, verbergt de opmaak; de inhoud staat er één keer. */
.s1lang{display:inline}.s1kort{display:none}
.trajmain.s1{max-width:1240px;display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:28px;align-items:start;padding-top:22px}
.s1kaart{background:var(--goed-tint);border:1px solid var(--goed-rand);border-radius:18px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px}
.s1budget{display:flex;gap:6px;align-items:center;font-size:13.5px;font-weight:700}
.s1budget .ico{width:18px;height:18px;flex:none}
.s1budget.binnen{color:var(--goed)}
.s1budget.boven{color:var(--let)}
.s1regelknop{width:100%;min-height:52px;border:none;background:none;font:inherit;color:var(--gray-900);cursor:pointer;
  padding:6px 14px;display:grid;grid-template-columns:minmax(0,1fr) 110px 110px 24px;gap:10px;align-items:center;text-align:left}
.s1link{background:none;border:none;padding:0;min-height:44px;font:inherit;font-size:13px;color:var(--merk-diep);
  text-decoration:underline;cursor:pointer;text-align:left}
.s1dieper,.s1rand{min-height:48px;padding:0 16px;border-radius:12px;font:inherit;font-size:14.5px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;text-align:left}
.s1dieper{border:2px solid var(--merk-diep);background:var(--vlak);color:var(--merk-diep);font-weight:800}
.s1dieper .ico,.s1rand .ico{width:20px;height:20px;flex:none}
.s1rand{min-height:44px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:14px;font-weight:700;justify-content:center}
.s1rand.donker{border-color:var(--gray-300);background:var(--vlak);color:var(--gray-900)}
.s1rand[hidden],.s1coach[hidden]{display:none}
/* het paneel rechts */
.s1download{min-height:50px;border:none;border-radius:12px;background:var(--knop);color:var(--knop-op);font:inherit;font-size:15.5px;
  font-weight:800;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;width:100%}
.s1download:hover{background:var(--knop-hover)}
.s1download .ico{width:20px;height:20px}
.s1rap-ipad,.s1balkonder,.s1coachknop{display:none}
/* iPad staand: het rapport naast het label, de kaart in twee kolommen */
@media(max-width:1024px){
  .trajmain.s1{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:16px}
  .s1kaart{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:16px;align-items:center;padding:16px 18px}
  .s1regelknop{grid-template-columns:minmax(0,1fr) 100px 24px}
}
/* Telefoon: één kolom; de verderknop heet "Woonplan"; downloaden onderaan */
@media(max-width:640px){
  .s1lang{display:none}.s1kort{display:inline}
  .trajmain.s1{padding-top:12px;gap:10px}
  .s1kaart{display:flex;align-items:stretch;padding:13px 15px;border-radius:16px;gap:5px}
  .s1budget{font-size:13px}
  .s1regelknop{grid-template-columns:minmax(0,1fr) auto 22px;padding:6px 12px;min-height:50px}
  .s1dieper,.s1rand{width:100%;justify-content:center}
  .s1balkonder{display:block;position:sticky;bottom:0;z-index:5;margin:6px -16px -28px;background:var(--merk-diep);padding:10px 14px}
}

/* ---------- S4b: het labelblok ----------
   Een officiële letter in het volle donkere vak, met jaar en bron. De
   verwachting na je plan altijd gestippeld en met het woord "schatting". */
.lblok{background:var(--vlak);border:1px solid var(--gray-300);border-radius:18px;padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.lblokkop{font-size:15px;font-weight:800}
.lblokreg{display:flex;gap:10px;align-items:center}
.lbletter{min-width:46px;height:46px;padding:0 9px;box-sizing:border-box;border-radius:10px;background:var(--merk-diep);color:#fff;
  font-size:22px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.lblokreg>div>b,.lblokmeld>div>b{display:block;font-size:14px;font-weight:800}
.lblokreg>div>span,.lblokmeld>div>span{display:block;font-size:13px;color:var(--gray-700);line-height:1.45}
.lblokmeld{display:flex;gap:9px;align-items:flex-start;background:var(--papier);border:1px solid var(--gray-100);border-radius:12px;padding:9px 11px}
.lblokmeld>.ico{width:20px;height:20px;flex:none;color:var(--gray-700)}
.lblokschat{display:grid;grid-template-columns:minmax(0,1fr)}
.lbvak{border:2px dashed var(--merk-zacht);border-radius:12px;padding:8px 10px;display:flex;flex-direction:column;gap:1px}
.lbvak.gelijk{background:var(--papier)}
.lbvak span{font-size:13px;color:var(--gray-700)}
.lbvak b{font-size:26px;font-weight:800;line-height:1.2}
.lbvak b.lang{font-size:17px}
.lbvak em{font-style:normal;font-size:13px;font-weight:700;color:var(--gray-500)}
.lblokniet{border:2px dashed var(--gray-300);border-radius:12px;padding:9px 11px;font-size:13px;line-height:1.45;color:var(--gray-700)}
.lblokniet b{color:var(--gray-900)}
.lblokzin,.lblokvoet{margin:0;font-size:var(--t-toel);line-height:1.45;color:var(--gray-700)}
.lblokvoet{color:var(--gray-500)}

/* ---------- S4: zonder plan ---------- */
.s4 .lblok{max-width:640px}

/* ---------- S2: het paneel "Je rapport" ----------
   Rechts een laag van 480px over de pagina; op de telefoon een vel van
   onderen. */
.raplaag{position:fixed;inset:0;z-index:60;background:rgba(15,61,62,.2);display:flex;justify-content:flex-end}
.rappaneel{width:480px;max-width:100%;height:100%;overflow-y:auto;box-sizing:border-box;background:var(--vlak);
  border-left:1px solid var(--gray-300);box-shadow:-8px 0 24px rgba(20,40,38,.12);padding:22px 24px;display:flex;flex-direction:column;gap:12px}
.rapgreep{display:none}
.rapkop{display:flex;justify-content:space-between;align-items:center;gap:10px}
.rapkop h2{margin:0;font-size:20px;font-weight:800}
.rapsluit{width:44px;height:44px;border:none;background:none;cursor:pointer;color:var(--gray-700);display:inline-flex;align-items:center;justify-content:center}
.rapsluit .ico{width:24px;height:24px}
.rapzin{margin:0;font-size:var(--t-toel);line-height:1.5;color:var(--gray-700);display:flex;gap:8px;align-items:flex-start}
.rapzin .ico{width:18px;height:18px;flex:none;margin-top:2px;color:var(--merk-diep)}
.rapin{background:var(--papier);border:1px solid var(--gray-300);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.rapin b{font-size:14px}
.rapin ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rapin li{display:flex;gap:7px;align-items:center;font-size:var(--t-toel)}
.rapin li .ico{width:18px;height:18px;color:var(--goed);flex:none}
.raprand{align-self:flex-start;min-height:44px;padding:0 12px;border:1px solid var(--gray-300);border-radius:10px;background:var(--vlak);
  font:inherit;font-size:13.5px;font-weight:700;color:var(--merk-diep);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.raprand.vol{align-self:stretch;justify-content:center;color:var(--gray-900);font-size:14px}
.raprand .ico{width:18px;height:18px}
.rapkeuzes{display:flex;flex-direction:column;gap:8px}
.rapkeuze{min-height:48px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;cursor:pointer;
  padding:0 12px;display:flex;align-items:center;gap:10px;text-align:left;color:var(--gray-900)}
.rapkeuze.aan{background:var(--merk-tint);border-color:var(--merk-zacht)}
.rapkeuze[aria-disabled="true"]{cursor:default}
.rapkeuze b{flex:1;font-size:14px}
.rapkeuze small{font-size:13px;color:var(--gray-500)}
.rapvak{width:24px;height:24px;box-sizing:border-box;border-radius:7px;border:2px solid var(--gray-500);background:var(--vlak);
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.rapvak .ico{width:16px;height:16px;stroke-width:2.8;color:var(--merk-op);opacity:0}
.rapkeuze.aan .rapvak{background:var(--merk);border-color:var(--merk)}
.rapkeuze.aan .rapvak .ico{opacity:1}
.rapknop{min-height:52px;border:none;border-radius:12px;background:var(--knop);color:var(--knop-op);font:inherit;font-size:16px;font-weight:800;
  display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer}
.rapknop:hover{background:var(--knop-hover)}
.rapknop[aria-disabled="true"]{background:var(--gray-100);color:var(--gray-700);cursor:progress}
.rapknop .ico{width:21px;height:21px}
.rapuitleg{margin:0;font-size:var(--t-toel);color:var(--gray-500);line-height:1.45}
.rapklaar,.rapfout{display:flex;gap:10px;border-radius:14px;padding:12px 14px;align-items:flex-start}
.rapklaar{background:var(--goed-tint);border:1px solid var(--goed-rand)}
.rapklaar>.ico{width:22px;height:22px;flex:none;color:var(--goed)}
.rapfout{background:var(--let-tint);border:1px solid var(--let-rand)}
.rapfout>.ico{width:22px;height:22px;flex:none;color:var(--let)}
.rapklaar b,.rapfout b{display:block;font-size:15px}
.rapklaar span,.rapfout span{display:block;font-size:13.5px;line-height:1.5;color:var(--gray-900)}
.rapdaarnakop{font-size:15px;margin-top:4px}
.rapdaarna{min-height:52px;border:1px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;padding:8px 14px;
  display:flex;align-items:center;gap:10px;text-align:left;color:var(--gray-900);cursor:pointer}
.rapdaarna>.ico{width:20px;height:20px;flex:none;color:var(--merk-diep)}
.rapdaarna>.ico:last-child{color:var(--gray-500)}
.rapdaarna>span{flex:1}
.rapdaarna b{display:block;font-size:14.5px}
.rapdaarna span span{display:block;font-size:13px;color:var(--gray-700)}
.raplink{align-self:flex-start;min-height:44px;padding:0 4px;border:none;background:none;font:inherit;font-size:14px;font-weight:700;
  color:var(--merk-diep);text-decoration:underline;cursor:pointer}
@media(max-width:640px){
  .raplaag{align-items:flex-end}
  .rappaneel{width:100%;height:auto;max-height:88vh;border-left:none;border-radius:20px 20px 0 0;padding:10px 16px 18px;gap:10px}
  .rapgreep{display:block;width:40px;height:5px;border-radius:3px;background:var(--gray-300);align-self:center}
  .rapkop h2{font-size:18px}
}

/* ================= S3a: ALLES WAT WE DOORREKENDEN =================
   Een laag onder je resultaat. Sinds 1.73 weer het overzicht van ontwerp
   "Resultatenpagina" (1.70.2): het antwoord met de drie samen, de top 3, het
   budget en de ranglijst als kaarten. Geen nieuwe kleuren: merk-diep draagt
   de volgorde, de datakleuren de terugverdientijd. De grote kaart is teal,
   nooit de groene kaart van je resultaat, en noemt zijn invalshoek.
   Tekst minstens 13px, raakvlakken 44px (ontwerp S). */
.trajmain.ad{max-width:1120px;padding-top:20px;display:flex;flex-direction:column;gap:22px}
#adInhoud{display:flex;flex-direction:column;gap:22px}
.s3kop h2{margin:0;font-size:26px;font-weight:800;letter-spacing:-.03em}
.s3kop p{margin:2px 0 0;font-size:var(--t-toel);color:var(--gray-700)}
.ad-link{background:none;border:none;padding:0 2px;min-height:44px;font:inherit;color:var(--merk-diep);text-decoration:underline;cursor:pointer;
  display:inline-flex;align-items:center;vertical-align:middle}
.ad-knopstil{min-height:44px;padding:0 14px;border:1px solid var(--gray-300);border-radius:11px;background:var(--vlak);
  color:var(--merk-diep);font:inherit;font-size:13.5px;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.ad-knopstil .ico{width:17px;height:17px}
.ad-knopstil.aan{background:var(--merk-tint);border-color:var(--merk-diep)}
/* De top N van 3a (eigen weging) staat nog in het gestippelde kader van S3a. */
.s3top{background:var(--vlak);border:2px dashed var(--merk-zacht);border-radius:16px;padding:12px 16px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}
.s3toplabel{font-size:13px;font-weight:800;color:var(--gray-500)}
.s3topnamen{font-size:16px;font-weight:800}
.s3topgetal{font-size:13.5px;color:var(--gray-700)}

/* laag 1: het antwoord */
.ad-antwoord{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:stretch}
.ad-antwoord.leeg{grid-template-columns:minmax(0,1fr)}
.ad-kopvak{display:flex;flex-direction:column;justify-content:space-between;gap:18px}
.ad-kopzin{display:flex;flex-direction:column;gap:10px}
.ad-onder{margin:0;font-size:var(--t-toel);color:var(--gray-700)}
.ad-kop{margin:0;font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.06;text-wrap:pretty;color:var(--gray-900)}
.ad-samen{background:var(--merk-diep);color:#fff;border-radius:20px;padding:18px 22px;display:flex;flex-direction:column;gap:7px}
.ad-samenlabel{font-size:14px;color:var(--op-diep)}
.ad-samenlabel b{color:#fff}
.ad-samenbedrag{font-size:15px;font-weight:600;display:flex;align-items:baseline;gap:10px}
.ad-samenbedrag span{font-size:54px;font-weight:800;line-height:.92;color:var(--goed-op-diep)}
.ad-samenregel{font-size:13.5px;color:var(--op-diep)}
.ad-samenzin{font-size:13px;line-height:1.45;color:var(--op-diep);border-top:1px solid rgba(255,255,255,.22);padding-top:8px;margin-top:2px}
.ad-samenvoet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13px;line-height:1.4;color:var(--op-diep);margin-top:2px}
.ad-samenvoet b{color:#fff}
.ad-samenvoet .ad-knopstil{border-color:#fff}
.ad-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.ad-topkaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:16px 18px;
  display:flex;flex-direction:column;gap:9px}
.ad-topkop{display:flex;align-items:center;gap:10px}
.ad-pos{width:34px;height:34px;border-radius:50%;background:var(--merk-diep);color:#fff;font-weight:800;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;flex:none}
.ad-woord{font-size:14px;font-weight:800;color:var(--merk-diep)}
.ad-topico{margin-left:auto}
.ad-topnaam{font-size:18px;font-weight:800;letter-spacing:-.015em}
.ad-topmodel{font-size:13px;color:var(--gray-500)}
.ad-tag{align-self:flex-start;font-size:13px;font-weight:800;color:var(--merk-diep);background:var(--merk-tint);
  border-radius:var(--r-rond);padding:4px 10px 4px 7px;display:inline-flex;gap:5px;align-items:center}
.ad-tag .ico{width:14px;height:14px}
.ad-topzin{font-size:13.5px;color:var(--gray-700);line-height:1.45;flex:1;text-wrap:pretty}
.ad-topvoet{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;
  border-top:1px solid var(--gray-100);padding-top:9px;font-size:13px;color:var(--gray-700)}
.ad-geld{font-size:20px;font-weight:800;color:var(--goed)}
.ad-geld small{font-size:13px;font-weight:600}
.ad-budget{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:14px 18px;display:flex;flex-direction:column;gap:8px}
.ad-budget p{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.ad-budgetkop{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.ad-budgetkop>b{font-size:15px}
.ad-budgetkop span{font-size:13px;color:var(--gray-500)}
.ad-budgetkop span b{color:var(--gray-900)}
.ad-balkvak{position:relative;padding:6px 0 20px}
.ad-balk{display:flex;height:34px;border-radius:9px;overflow:hidden;background:var(--gray-100)}
.ad-seg{flex:none;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;box-sizing:border-box;overflow:hidden}
.ad-seg.s1{background:var(--merk-diep)}
.ad-seg.s2{background:color-mix(in srgb,var(--merk-diep) 78%,#fff)}
.ad-seg.s3{background:color-mix(in srgb,var(--merk-diep) 60%,#fff)}
.ad-seg.volgend{background:var(--let-tint);border:1px dashed var(--let-rand);color:var(--let)}
.ad-streep{position:absolute;top:0;height:46px;width:3px;margin-left:-1px;background:var(--gray-900);border-radius:2px}
.ad-streeplabel{position:absolute;bottom:0;transform:translateX(-50%);font-size:13px;font-weight:800;white-space:nowrap;font-style:normal}
.ad-streeplabel.rechts{transform:translateX(-100%)}
.ad-streeplabel.links{transform:none}

/* laag 2: anders kijken en de ranglijst */
.ad-lijst{display:flex;flex-direction:column;gap:12px;padding-top:8px;border-top:2px solid var(--gray-900)}
.ad-lijstkop{display:flex;flex-direction:column;gap:12px}
.ad-lijstkop h2{margin:12px 0 0;font-size:24px;font-weight:800;letter-spacing:-.025em}
.ad-lijstkop p{margin:3px 0 0;font-size:var(--t-toel);color:var(--gray-700)}
.ad-kijken{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap}
.ad-kijklabel{font-size:13.5px;font-weight:800;color:var(--gray-700)}
.ad-lenzen{display:flex;gap:4px;flex-wrap:wrap;background:var(--gray-100);border-radius:14px;padding:4px}
.ad-lens{min-height:44px;padding:0 14px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);color:var(--gray-900);
  font:inherit;font-size:14px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ad-lens.aan{background:var(--merk-tint);border-color:var(--merk)}
.ad-lens .ico{width:18px;height:18px;flex:none}
/* Als tabbladen boven de ranglijst: de knop die aanstaat licht op. */
.ad-lenzen .ad-lens{border:none;border-radius:10px;background:transparent;color:var(--gray-700);font-weight:800}
.ad-lenzen .ad-lens.aan{background:var(--vlak);color:var(--merk-diep);box-shadow:0 1px 4px rgba(15,61,62,.2)}
.ad-scens{display:flex;gap:8px;flex-wrap:wrap;align-items:center;font-size:13px;color:var(--gray-700)}
.ad-scen{min-height:44px;padding:0 14px;border:1px solid var(--merk-diep);border-radius:var(--r-rond);background:var(--vlak);
  color:var(--merk-diep);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer}
.ad-scen.aan{background:var(--merk-diep);color:#fff}
.ad-verander{display:flex;gap:10px;align-items:center;background:var(--let-tint);border:1px solid var(--let-rand);
  border-radius:12px;padding:10px 14px;font-size:13.5px;line-height:1.45;color:var(--let-tekst)}
.ad-verander .ico{width:20px;height:20px;color:var(--let);flex:none}
.ad-kolommen,.ad-rijknop{display:grid;grid-template-columns:36px minmax(0,1fr) 104px 104px 76px 84px 46px 24px;gap:14px;align-items:center}
.ad-kolommen{padding:0 18px 0 23px;font-size:13px;font-weight:700;color:var(--gray-500)}
.ad-kolommen span:nth-child(n+3){text-align:right}
.ad-rijen{display:flex;flex-direction:column;gap:8px}
.ad-rij{background:var(--vlak);border:1px solid var(--gray-300);border-left:5px solid var(--gray-300);border-radius:13px;overflow:hidden}
.ad-rij.snel{border-left-color:var(--goed)}
.ad-rij.middel{border-left-color:var(--let)}
.ad-rij.traag{border-left-color:var(--fout)}
.ad-rij.open{border-color:var(--merk-diep);border-left-width:5px}
.ad-rij.open.snel{border-left-color:var(--goed)}.ad-rij.open.middel{border-left-color:var(--let)}.ad-rij.open.traag{border-left-color:var(--fout)}
.ad-rijknop{width:100%;border:none;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer;padding:10px 18px;min-height:64px}
.ad-nr{font-size:17px;font-weight:800;color:var(--merk-diep)}
.ad-rijtekst{min-width:0;display:flex;flex-direction:column;gap:3px}
.ad-rijnaam{display:block;font-size:15.5px;font-weight:800;line-height:1.35}
.ad-rijnaam>.ico{width:20px;height:20px;color:var(--merk-diep);vertical-align:-4px;margin-right:8px}
.ad-rijnaam small{font-size:13px;font-weight:500;color:var(--gray-500);margin-left:8px}
.ad-rijnaam .ad-badge,.ad-rijnaam .ad-status{margin-left:2px;vertical-align:1px}
.ad-rijsub{font-size:13px;color:var(--gray-500)}
.ad-rijsub b{color:var(--merk-diep);font-weight:700}
.ad-rijmobiel,.ad-alleenmobiel{display:none}
.ad-badge{display:inline-block;font-size:13px;font-weight:800;line-height:1.35;border-radius:var(--r-rond);padding:1px 9px;background:var(--goed-tint);color:var(--goed);white-space:nowrap}
.ad-badge.eigen{background:var(--merk-tint);color:var(--merk-diep)}
.ad-badge.top{background:var(--merk-diep);color:#fff}
.ad-badge.gratis{background:var(--gray-100);color:var(--gray-700)}
/* De status van een regel voor je plan: altijd een woord met een pictogram. */
.ad-status{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;line-height:1.35;border-radius:var(--r-rond);padding:1px 9px 1px 6px;
  background:var(--gray-100);color:var(--gray-700);white-space:nowrap}
.ad-status .ico{width:15px;height:15px;flex:none}
.ad-status.plan{background:var(--goed-tint);color:var(--goed)}
.ad-status.niet{background:var(--let-tint);color:var(--let)}
.ad-cel{text-align:right;font-size:14.5px;font-weight:700}
.ad-cel.geld{font-size:16px;font-weight:800;color:var(--goed)}
.ad-cel.nadruk{font-weight:800}
.ad-cel.tvt{font-weight:800}
.ad-cel.tvt.snel,.ad-rijmobiel .snel{color:var(--goed)}
.ad-cel.tvt.middel,.ad-rijmobiel .middel{color:var(--let)}
.ad-cel.tvt.traag,.ad-rijmobiel .traag{color:var(--fout)}
.ad-cel.zet{font-size:13px;font-weight:800;color:var(--gray-500)}
.ad-cel.zet.op{color:var(--goed)}.ad-cel.zet.neer{color:var(--fout)}
.ad-chevron{width:22px;height:22px;color:var(--merk-diep);transform:rotate(90deg);transition:transform .15s}
[aria-expanded="true"]>.ad-chevron{transform:rotate(-90deg)}
.ad-legenda{margin:0;font-size:var(--t-toel);color:var(--gray-500);padding:2px 4px;line-height:1.45}

/* laag 3: de onderbouwing, na een tik op een regel */
.ad-onderbouwing{border-top:1px solid var(--gray-100);background:var(--papier);padding:18px 20px 20px;display:flex;flex-direction:column;gap:18px}
.ad-twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.ad-blokkop{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ad-blokkop b{font-size:14px}
.ad-blokkop span{font-size:13px;color:var(--gray-500)}
.ad-regels{background:var(--vlak);border:1px solid var(--gray-100);border-radius:12px;padding:2px 14px}
.ad-regel{display:flex;justify-content:space-between;gap:12px;padding:8px 0;align-items:baseline;font-size:13.5px}
.ad-regel+.ad-regel{border-top:1px solid var(--gray-100)}
.ad-regel small{display:block;font-size:13px;color:var(--gray-500);line-height:1.35}
.ad-regel>span{font-weight:600;white-space:nowrap}
.ad-regel.vet>span,.ad-regel.vet>div>div{font-weight:800}
.ad-regel.subsidie>span{color:var(--subsidie);font-weight:700}
.ad-regel.totaal{border-top:2px solid var(--merk-diep)}
.ad-regel.totaal>span,.ad-regel.totaal>div>div{font-weight:800;color:var(--merk-diep)}
.ad-regel.plus>span{color:var(--goed)}
.ad-regel.min>span{color:var(--fout)}
.ad-detail{margin:8px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.5}
.ad-waarde{align-self:flex-start;font-size:13px;font-weight:800;border-radius:var(--r-rond);padding:2px 8px}
.ad-waarde.fab{background:var(--subsidie-tint);color:var(--subsidie)}
.ad-waarde.ind{background:var(--let-tint);color:var(--let)}
.ad-winregel{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:13.5px;color:var(--merk-diep);font-weight:700}
.ad-winregel .ad-knopstil{margin-left:auto}
.ad-geenalt{display:flex;gap:10px;border:1px dashed var(--spoor-lijn);border-radius:12px;padding:11px 14px;font-size:13.5px;
  color:var(--gray-700);line-height:1.45;background:var(--vlak)}
.ad-geenalt .ico{width:20px;height:20px;color:var(--merk-diep);flex:none}
.ad-geenalt b{color:var(--gray-900)}
.ad-curve{background:var(--vlak);border:1px solid var(--gray-100);border-radius:14px;padding:14px 16px}
.ad-curve p{margin:8px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.ad-staven{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:560px}
.ad-staaf{display:flex;flex-direction:column;align-items:center;gap:4px}
.ad-staaf>span{font-size:13px;font-weight:800;color:var(--goed)}
.ad-staaf>span.klein{color:var(--fout)}
.ad-staaf .kolom{height:90px;width:100%;display:flex;align-items:flex-end}
.ad-staaf i{display:block;width:100%;background:var(--gray-300);border-radius:7px 7px 2px 2px}
.ad-staaf.advies i{background:var(--merk-diep)}
.ad-staaf b{font-size:13px}
.ad-staaf small{font-size:13px;color:var(--gray-700)}
/* laag 4: het rekenspoor */
.ad-spoor{border:1px solid var(--gray-300);border-radius:14px;background:var(--vlak)}
.ad-spoorknop{width:100%;min-height:52px;border:none;background:none;font:inherit;color:var(--merk-diep);cursor:pointer;
  padding:0 16px;display:flex;align-items:center;gap:10px;text-align:left}
.ad-spoorknop .ico{width:21px;height:21px;flex:none}
.ad-spoorknop b{font-size:14.5px}
.ad-spoorknop span{font-size:13px;color:var(--gray-500)}
.ad-spoorknop .ad-chevron{margin-left:auto}
.ad-stappen{list-style:none;margin:0;padding:0 16px 12px}
.ad-stappen li{display:grid;grid-template-columns:26px minmax(0,1fr) auto;gap:12px;padding:10px 0;border-top:1px solid var(--gray-100);align-items:start}
.ad-stapnr{width:24px;height:24px;border-radius:50%;background:var(--merk-tint);color:var(--merk-diep);font-size:13px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center}
.ad-stappen b{display:block;font-size:13.5px}
.ad-stappen code{display:block;font:13px/1.5 ui-monospace,Menlo,Consolas,monospace;margin-top:3px;background:var(--gray-100);
  border-radius:7px;padding:5px 9px;overflow-wrap:anywhere;color:var(--gray-900)}
.ad-stappen small{display:block;font-size:13px;color:var(--gray-500);margin-top:3px}
.ad-bron{font-size:13px;font-weight:800;border-radius:var(--r-rond);padding:2px 8px;white-space:nowrap;background:var(--gray-100);color:var(--gray-700)}
.ad-bron.doorjou{background:var(--merk-tint);color:var(--merk-diep)}
.ad-bron.wijschatten,.ad-bron.indicatie{background:var(--let-tint);color:var(--let)}
.ad-bron.fabrikant{background:var(--subsidie-tint);color:var(--subsidie)}

/* laag 5: ons advies (ingeklapt), boven de grens, kan niet, de aansluiting en de bronnen */
.ad-advies .r7{margin:0;background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:14px 18px}
.r7open{width:100%;min-height:48px;margin-top:10px;border:1px solid var(--gray-300);border-radius:12px;background:var(--papier);
  font:inherit;font-size:14px;color:var(--gray-900);cursor:pointer;display:flex;align-items:center;gap:10px;padding:0 14px;text-align:left}
.r7open>.tn{flex:1}
.r7openzin{font-weight:800;color:var(--merk-diep)}
.r7open .r7pijl{width:20px;height:20px;color:var(--merk-diep);transform:rotate(90deg);transition:transform .15s;flex:none}
.r7open[aria-expanded="true"] .r7pijl{transform:rotate(-90deg)}
.ad-sectie{display:flex;flex-direction:column;gap:8px}
.ad-sectiekop{display:flex;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.ad-sectiekop h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.ad-sectiekop span{font-size:13px;color:var(--gray-500)}
.ad-sectiezin{margin:0;font-size:var(--t-toel);color:var(--gray-700);max-width:82ch;line-height:1.5}
.ad-boven{background:var(--vlak);border:1px dashed var(--gray-300);border-left:5px solid var(--fout);border-radius:13px;padding:10px 16px;
  display:grid;grid-template-columns:minmax(0,1fr) 96px 96px 90px auto;gap:14px;align-items:center}
.ad-boven p{margin:2px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.ad-boven .ad-status{margin-top:6px}
.ad-kanniet{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ad-kanniet>div{background:var(--gray-100);border-radius:13px;padding:11px 16px;display:flex;gap:12px;align-items:flex-start}
.ad-kanniet .ico{width:22px;height:22px;color:var(--gray-500);flex:none}
.ad-kanniet b{font-size:15px}
.ad-kanniet p{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.ad-onderaan{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:14px}
.ad-kaartje{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:14px 18px}
.ad-kaartje>b{font-size:15px}
.ad-kaartje p{margin:3px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.ad-meter{height:14px;border-radius:7px;background:var(--gray-100);margin-top:10px;overflow:hidden}
.ad-meter i{display:block;height:100%;background:var(--merk-diep)}
.ad-meterlabels{display:flex;justify-content:space-between;font-size:13px;color:var(--gray-500);margin-top:4px}
.ad-kaartje dl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:0 10px;margin:4px 0 0;font-size:13px}
.ad-kaartje dt{font-weight:800;padding:5px 0;border-top:1px solid var(--gray-100)}
.ad-kaartje dd{margin:0;padding:5px 0;border-top:1px solid var(--gray-100);color:var(--gray-700)}
.ad-voet{margin:0;font-size:var(--t-toel);color:var(--gray-500);line-height:1.5}
.ad-leeg{background:var(--papier);border:2px dashed var(--spoor-lijn);border-radius:16px;padding:20px;display:flex;flex-direction:column;
  gap:8px;align-items:flex-start;max-width:520px}
.ad-leeg>.ico{width:30px;height:30px;color:var(--merk-diep)}
.ad-leeg b{font-size:16px}
.ad-leeg p{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}

/* iPad staand: het antwoord blijft boven de vouw, de top 3 onder elkaar */
@media(max-width:1024px){
  .ad-antwoord{grid-template-columns:1fr;gap:12px}
  .ad-kopvak{gap:10px}
  .trajmain.ad,#adInhoud{gap:14px}
  .trajmain.ad{padding-top:14px}
  .ad-kop{font-size:31px}
  .ad-samen{padding:13px 16px;gap:4px;border-radius:16px}
  .ad-samenbedrag span{font-size:40px}
  .ad-budget{padding:11px 14px;gap:6px}
  .ad-balkvak{padding:4px 0 16px}
  .ad-balk{height:26px}
  .ad-streep{height:36px}
  /* De top 3 compact, zoals in het ontwerp voor iPad en telefoon: nummer,
     "Eerst · de reden", naam met bedrag, en wat je betaalt. Zo past het
     antwoord boven de vouw van een iPad staand. */
  .ad-top{grid-template-columns:1fr;gap:9px}
  .ad-topkaart{display:grid;grid-template-columns:30px auto minmax(0,1fr) auto;
    grid-template-areas:"pos woord tag tag" "pos naam naam geld" "pos zelf zelf zelf";gap:2px 10px;padding:10px 12px;border-radius:14px}
  .ad-topkop,.ad-topvoet{display:contents}
  .ad-pos{grid-area:pos;width:30px;height:30px;font-size:14px;align-self:start}
  .ad-woord{grid-area:woord;font-size:13px}
  .ad-tag{grid-area:tag;font-size:13px;padding:0;background:none;align-self:center}
  .ad-tag .ico{width:13px;height:13px}
  .ad-topwie{grid-area:naam;min-width:0}
  .ad-topnaam{font-size:15px;line-height:1.2}
  .ad-geld{grid-area:geld;font-size:15px;white-space:nowrap}
  .ad-topzelf{grid-area:zelf;font-size:13px}
  .ad-topico,.ad-topmodel,.ad-topzin{display:none}
  .ad-kolommen,.ad-rijknop{grid-template-columns:28px minmax(0,1fr) 88px 88px 84px 40px 22px}
  .ad-kolommen span:nth-child(5),.ad-rijknop>span:nth-of-type(5){display:none}
  .ad-onderaan{grid-template-columns:1fr}
}
/* iPad staand: de ranglijst zonder kolommen. Naam, merkjes en prijsbron
   links, wat je betaalt en wanneer hij terug is in de regel eronder, per
   maand rechts. Zo blijft de naam leesbaar naast de merkjes. */
@media(max-width:820px){
  .ad-kolommen{display:none}
  .ad-rijknop{grid-template-columns:28px minmax(0,1fr) auto 36px 22px;gap:12px}
  .ad-rijknop .ad-breed{display:none}
  .ad-rijmobiel{display:block;font-size:13px;color:var(--gray-700)}
  .ad-alleenmobiel{display:inline}
  .ad-boven{grid-template-columns:minmax(0,1fr) auto}
  .ad-boven .ad-breed{display:none}
}
/* Telefoon: één kolom, alleen per maand rechts; de rest in de regel eronder */
@media(max-width:640px){
  .s3kop h2{font-size:20px}
  .s3kop p{font-size:var(--t-toel)}
  .trajmain.ad{padding-top:14px;gap:12px}
  .ad-kop{font-size:24px;line-height:1.12}
  .ad-samen{padding:13px 15px;border-radius:16px}
  .ad-samenbedrag span{font-size:40px}
  .ad-samenvoet .ad-knopstil{width:100%;justify-content:center}
  .ad-kijklabel{display:none}
  .ad-kijken{align-items:stretch}
  .ad-lenzen{flex-wrap:nowrap;width:100%;box-sizing:border-box}
  .ad-lenzen .ad-lens{flex:1;justify-content:center;padding:0 4px;font-size:13px;gap:5px}
  .ad-scens{flex-wrap:nowrap;overflow-x:auto}
  .ad-scen{flex:none;white-space:nowrap}
  .ad-kolommen{display:none}
  .ad-rijknop{grid-template-columns:20px minmax(0,1fr) auto;gap:9px;padding:9px 11px;min-height:60px}
  .ad-rijknop .ad-breed,.ad-rijknop .ad-chevron,.ad-rijsub{display:none}
  .ad-rijknop .ad-cel.zet{display:none}
  .ad-rijnaam{font-size:15px}
  .ad-rijmobiel{display:block;font-size:13px;color:var(--gray-700)}
  .ad-alleenmobiel{display:inline}
  .ad-onderbouwing{padding:12px 11px 13px;gap:13px}
  .ad-advies .r7{padding:12px 13px}
  .ad-boven{grid-template-columns:1fr;gap:8px;padding:10px 12px}
  .ad-boven .ad-breed{display:none}
  .ad-boven .ad-knopstil{justify-self:start}
  .ad-kanniet{grid-template-columns:1fr}
  .ad-stappen li{grid-template-columns:1fr}
  .ad-stapnr{display:none}
  .s3top{grid-template-columns:1fr;padding:10px 12px;border-radius:13px}
  .s3topnamen{font-size:14px}
}

/* ---------- 3a: eigen weging (ontwerp C v2, 27 september 2026) ----------
   Links drie schuiven die samen 100 zijn, rechts de volgorde die eruit volgt,
   met per regel een balkje in drie delen (geld, milieu, later) en de status in
   woorden. Onderaan de top 3 in het gestippelde kader van S3a. */
.ov-kopknoppen{display:flex;gap:8px;flex-wrap:wrap}
.ad-naarweging{margin-left:6px}
.trajmain.wg{max-width:1200px}
.wg-uitleg{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.5;max-width:90ch}
.wg-raster{display:grid;grid-template-columns:380px minmax(0,1fr);gap:26px;align-items:start}
.wg-links,.wg-rechts{display:flex;flex-direction:column;gap:10px;min-width:0}
.wg-links h2{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em}
.wg-links>p{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.5}
.wg-schuif{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:10px 14px 2px;display:flex;flex-direction:column;gap:2px}
.wg-schuifkop{display:flex;justify-content:space-between;align-items:center}
.wg-schuifkop span{display:flex;gap:7px;align-items:center;font-size:15px;font-weight:800}
.wg-schuifkop .ico{width:20px;height:20px;color:var(--merk-diep)}
.wg-schuifkop b{font-size:17px;font-weight:800}
.wg-zin{font-size:13px;color:var(--gray-500)}
.wg-schuif input{width:100%;height:44px;accent-color:var(--merk-diep);cursor:pointer}
.wg-snel{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.wg-snel>span{font-size:13px;color:var(--gray-700)}
.wg-lijstkop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.wg-lijstkop h2{margin:0;font-size:17px;font-weight:800}
.wg-lijstkop span{font-size:13px;color:var(--gray-500)}
.wg-rijen{display:flex;flex-direction:column;gap:7px}
.wg-rij{display:grid;grid-template-columns:30px minmax(0,1fr) 220px 60px 150px;gap:12px;align-items:center;background:var(--vlak);
  border:2px solid var(--gray-100);border-radius:13px;padding:6px 14px;min-height:52px;box-sizing:border-box}
.wg-rij.top{border-color:var(--merk-zacht)}
.wg-rij.buiten{background:var(--papier)}
.wg-nr{font-size:18px;font-weight:800;color:var(--gray-500)}
.wg-rij.top .wg-nr{color:var(--goed)}
.wg-naam{min-width:0;display:flex;flex-direction:column;gap:2px}
.wg-naam b{font-size:15px;font-weight:800}
.wg-naam>span.tn{font-size:13px;color:var(--gray-700)}
.wg-balk{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--gray-100)}
.wg-balk.leeg{background:none}
.wg-balk i,.wg-legenda i{display:block;height:100%;transition:width .4s ease}
.wg-balk .g,.wg-legenda .g{background:var(--merk-diep)}
.wg-balk .m,.wg-legenda .m{background:var(--goed)}
.wg-balk .l,.wg-legenda .l{background:var(--merk-zacht)}
.wg-score{font-size:16px;font-weight:800;text-align:right}
.wg-st{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--gray-700)}
.wg-st .ico{width:16px;height:16px;flex:none}
.wg-st.top{color:var(--goed)}
.wg-st.boven{color:var(--let)}
.wg-kort{display:none}
.wg-legenda{display:flex;gap:14px;font-size:13px;color:var(--gray-700)}
.wg-legenda span{display:flex;gap:5px;align-items:center}
.wg-legenda i{width:12px;height:12px;border-radius:3px}
.wg-top{margin-top:4px}
.wg-neem{padding:0 16px;font-size:14.5px;min-height:48px}
.wg-alin{display:inline-flex;align-items:center;gap:6px;min-height:48px;padding:0 14px;border-radius:12px;background:var(--merk-tint);
  color:var(--merk-diep);font-size:14.5px;font-weight:800}
.wg-alin .ico{width:18px;height:18px}
@media(max-width:1024px){
  .wg-raster{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:640px){
  .wg-links h2,.wg-links>p,.wg-zin{display:none}
  .wg-rij{grid-template-columns:22px minmax(0,1fr) auto;grid-template-areas:"nr naam st" "nr balk st";gap:4px 8px;padding:6px 11px;min-height:48px}
  .wg-nr{grid-area:nr}.wg-naam{grid-area:naam}.wg-balk{grid-area:balk;height:7px}.wg-st{grid-area:st}
  .wg-score{display:none}
  .wg-lang{display:none}.wg-kort{display:inline}
  .wg-naam>span.tn{display:none}
  .wg-top{position:sticky;bottom:0;z-index:5;border-style:solid}
  .wg-top .wg-neem{width:100%}
}
@media (prefers-reduced-motion: reduce){.wg-balk i{transition:none}}

/* ============ UITGEBREID OVERZICHT: WAT ELKE MAATREGEL VERANDERT ============
   Ontwerp "C Uitgebreid overzicht v2", richting 2a. Desktop: de balk met zes
   getallen, links de lijst per maatregel (250px + zes kolommen), rechts
   340px met het warmtelek en de zon. iPad: zes getallen per regel in drie
   kolommen. Telefoon: per regel één getal, een tik opent de rest.
   Alleen balkbreedtes en -hoogtes (.5s) en de schakelaar (.2s) bewegen. */
.trajmain.ov,.trajmain.sg{max-width:1280px;padding-top:18px;display:flex;flex-direction:column;gap:14px}
.ov-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.ov-titel{margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;color:var(--gray-900)}
.ov-smal{display:none}
.ov-context{display:block;font-size:13.5px;color:var(--gray-500)}
.ov-vakknop{min-height:44px;padding:0 14px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);
  font:inherit;font-size:13.5px;font-weight:700;color:var(--merk-diep);cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ov-vakknop .ico{width:18px;height:18px}
.ov-vakknop[aria-pressed="true"]{border-color:var(--merk);background:var(--merk-tint)}
.ov-kpis{background:var(--merk-diep);color:#fff;border-radius:var(--r-l);padding:12px 20px;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.ov-kpi{display:flex;flex-direction:column;min-width:0}
.ov-kpinaam{font-size:13px;color:var(--op-diep)}
.ov-kpiwaarde{font-size:22px;font-weight:800;line-height:1.2}
.ov-kpionder{display:flex;align-items:center;gap:6px;margin-top:3px}
.ov-kpibalk{flex:1;height:5px;background:rgba(255,255,255,.18);border-radius:3px;overflow:hidden}
.ov-kpibalk i{display:block;height:100%;background:#fff;transition:width .5s ease}
.ov-kpibalk i.goed{background:var(--goed-op-diep)}
.ov-kpidelta{font-size:13px;font-weight:800;color:#fff;white-space:nowrap}
.ov-kpidelta.goed{color:var(--goed-op-diep)}
.ov-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
.ov-lijst{display:flex;flex-direction:column;gap:8px;min-width:0}
.ov-lijstkop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.ov-lijstkop h2{font-size:22px;font-weight:800;letter-spacing:-.02em;margin:0}
.ov-lijstkop span{font-size:13px;color:var(--gray-500)}
.ov-kolommen,.ov-rijkop,.ov-samen{display:grid;grid-template-columns:250px repeat(6,minmax(0,1fr)) 44px;align-items:center;padding:0 12px}
.ov-kolommen{font-size:13px;font-weight:800;color:var(--gray-500)}
.ov-kolommen span{text-align:right;padding:0 6px;line-height:1.2}
.ov-kolommen small{display:block;font-weight:600;font-size:13px}
.ov-groep{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-m);overflow:hidden}
.ov-groepkop{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--papier);border-bottom:1px solid var(--gray-100)}
.ov-groepkop .ico{width:17px;height:17px;color:var(--merk-diep)}
.ov-groepnaam{font-size:13px;font-weight:800;color:var(--merk-diep);letter-spacing:.03em;text-transform:uppercase}
.ov-groepzin{font-size:13px;color:var(--gray-500)}
.ov-rij{border-bottom:1px solid var(--gray-100)}
.ov-rij:last-child{border-bottom:none}
.ov-rij.uit{background:var(--papier)}
.ov-wie{display:flex;align-items:center;gap:7px;min-height:52px;min-width:0}
.ov-schakel{width:44px;height:44px;margin:0 -3px;border:none;background:none;padding:0;cursor:pointer;flex:none;
  display:inline-flex;align-items:center;justify-content:center;border-radius:11px}
.ov-knop{width:38px;height:22px;border-radius:11px;background:var(--gray-300);position:relative;display:block}
.ov-knop i{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.ov-schakel[aria-checked="true"] .ov-knop{background:var(--merk)}
.ov-schakel[aria-checked="true"] .ov-knop i{left:18px}
.ov-naam{flex:1;min-width:0;min-height:44px;text-align:left;border:none;background:none;padding:4px 0;font:inherit;
  color:var(--gray-900);cursor:pointer;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.ov-naamtekst{font-size:13.5px;font-weight:800;line-height:1.2}
.ov-naamsub{font-size:13px;color:var(--gray-500)}
.ov-niet{display:block;font-size:13px;font-weight:800;color:var(--let);line-height:1.3}
.ov-niet .ico{width:13px;height:13px;vertical-align:-2px;margin-right:3px}
.ov-kort{display:none}
.ov-cellen{display:contents}
.ov-cel{padding:0 6px;text-align:right;font-size:13px;line-height:1.25;min-width:0}
.ov-cel b{font-weight:800;color:var(--kosten)}
.ov-cel.goed b{color:var(--goed)}
.ov-cel.nul b{color:var(--gray-500);font-weight:600}
.ov-cel small{display:block;font-size:13px;font-weight:600;color:var(--gray-500)}
.ov-rij.uit .ov-cel b{font-style:italic;opacity:.6}
/* Op de desktop staat de kolomkop erboven; label en eenheid zijn er dan
   alleen voor een schermlezer. */
.ov-cellabel,.ov-celeenh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ov-chev{width:44px;height:44px;border:none;background:none;padding:0;cursor:pointer;color:var(--gray-500);
  display:inline-flex;align-items:center;justify-content:center}
.ov-chev .ico{width:22px;height:22px;transform:rotate(90deg)}
.ov-rij.open .ov-chev .ico{transform:rotate(-90deg)}
.ov-uitleg{margin:0 12px 10px 60px;display:flex;gap:10px;align-items:flex-start;background:var(--papier);
  border:1px solid var(--gray-100);border-radius:11px;padding:9px 12px;font-size:13px;line-height:1.5}
.ov-rij.uit .ov-uitleg{background:var(--vlak)}
.ov-uitleg>.ico{width:19px;height:19px;color:var(--merk-diep);margin-top:1px}
.ov-uitleg p{margin:0}
.ov-formule{display:block;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:var(--merk-diep);margin-top:3px}
.ov-uitlegprijs{display:none}
.ov-samen{background:var(--merk-tint);border-radius:var(--r-m)}
.ov-samennaam{padding:9px 0;font-size:13.5px;font-weight:800}
.ov-samennaam small{display:block;font-size:13px;font-weight:600;color:var(--gray-700)}
.ov-samen .ov-cel{font-size:14px}
.ov-samenloop{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--gray-700);line-height:1.45}
.ov-samenloop .ico{width:18px;height:18px;color:var(--merk-diep);margin-top:1px}
.ov-zijkant{display:flex;flex-direction:column;gap:12px;min-width:0}
.ov-kaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-m);padding:12px 14px}
.ov-kaartkop{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ov-kaartkop b{font-size:14.5px;font-weight:800}
.ov-kaartkop span{font-size:13px;color:var(--gray-500)}
.ov-kaartzin{margin:8px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.ov-lek{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.ov-lekrij{display:grid;grid-template-columns:74px 1fr 84px;gap:8px;align-items:center}
.ov-leknaam{font-size:13px;font-weight:700}
.ov-lekbalk{position:relative;height:16px;background:var(--gray-100);border-radius:4px;overflow:hidden}
.ov-lekbalk i{position:absolute;left:0;top:0;bottom:0;transition:width .5s ease}
.ov-lekbalk i.nu,.ov-legenda i.nu{background:var(--let-rand)}
.ov-lekbalk i.straks,.ov-legenda i.straks{background:var(--let)}
.ov-lekwaarde{font-size:13px;text-align:right}
.ov-lekwaarde small{display:block;font-size:13px;color:var(--gray-500)}
.ov-legenda{display:flex;gap:12px;font-size:13px;color:var(--gray-700);margin-top:8px}
.ov-legenda span{display:inline-flex;align-items:center;gap:5px}
.ov-legenda i{width:12px;height:8px;border-radius:2px;display:inline-block}
.ov-zon{display:flex;align-items:flex-end;gap:3px;height:88px;margin-top:10px;border-bottom:1px solid #9fb3ae}
.ov-zonuur{flex:1;display:flex;flex-direction:column-reverse;height:100%}
.ov-zonuur i{display:block;flex:none;transition:height .5s ease}
.ov-zonuur i.eigen,.ov-zonpct i.eigen{background:var(--goed)}
.ov-zonuur i.terug,.ov-zonpct i.terug{background:var(--goed-rand)}
.ov-assen{display:flex;justify-content:space-between;font-size:13px;color:var(--gray-500);margin-top:3px}
.ov-zonpct{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px;font-size:13px}
.ov-zonpct>span{display:flex;gap:7px;align-items:center}
.ov-zonpct i{width:12px;height:12px;border-radius:3px;flex:none}
.ov-zonpct b{display:block;font-size:15px}
.ov-naarstroom{margin-top:10px;min-height:44px;width:100%;padding:0 12px;border:1px solid var(--gray-300);border-radius:11px;
  background:var(--vlak);font:inherit;font-size:13.5px;font-weight:700;color:var(--merk-diep);cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.ov-naarstroom .ico{width:18px;height:18px}
.ov-leeg{background:var(--papier);border:2px dashed var(--spoor-lijn);border-radius:16px;padding:20px;display:flex;
  flex-direction:column;gap:8px;align-items:flex-start;max-width:520px}
.ov-leeg>.ico{width:30px;height:30px;color:var(--merk-diep)}
.ov-leeg p{margin:0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}

/* ---- de stroom per uur (ontwerp Q, deel 1) ----
   Kleur en patroon horen vast bij een verbruiker. De warmtepomp en de boiler
   zijn deep teal als vaste datakleur (#0f3d3e), niet var(--merk-diep): een
   organisatie met een eigen merk mag de grafiek niet omkleuren. */
.sg-r-huis{background:var(--stroom)}
.sg-r-wp{background:#0f3d3e}
.sg-r-boiler{background:repeating-linear-gradient(45deg,#0f3d3e 0 3px,var(--spoor-lijn) 3px 6px)}
.sg-r-pompen{background:var(--kosten)}
.sg-r-ventilatoren{background:repeating-linear-gradient(90deg,var(--kosten) 0 2px,var(--gray-300) 2px 5px)}
.sg-r-auto{background:var(--let)}
.sg-r-accu{background:repeating-linear-gradient(0deg,var(--info) 0 3px,var(--info-rand) 3px 6px)}
.sg-uur i.sg-grijs{background:#dfe6e4}
.sg-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap}
.sg-kop .trajterug{margin-top:0}
.trajmain.sg>.trajterug{margin-top:0;align-self:flex-start}
.sg-titel{margin:0;font-size:28px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.sg-dagen{display:flex;gap:6px}
.sg-dag{min-height:44px;padding:0 16px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);
  font:inherit;font-size:14px;font-weight:700;color:var(--gray-900);cursor:pointer}
.sg-dag[aria-pressed="true"]{border-color:var(--merk);background:var(--merk-tint)}
.sg-zin{margin:0;font-size:var(--t-lopend);color:var(--gray-700)}
.sg-raster{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:28px;align-items:start}
.sg-kaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:18px 20px 14px;min-width:0}
.sg-focuskop{display:none;font-size:13px;font-weight:800;color:var(--gray-500);margin-bottom:5px}
.sg-focuskop.aan{color:var(--merk-diep)}
.sg-grafiek{display:grid;grid-template-columns:40px 1fr;gap:8px}
.sg-as{display:flex;flex-direction:column;justify-content:space-between;height:340px;font-size:13px;color:var(--gray-500);text-align:right}
.sg-vlak{position:relative;height:340px;border-bottom:1px solid #9fb3ae}
.sg-half{position:absolute;left:0;right:0;top:50%;border-top:1px dashed #dfe6e4}
.sg-uren{position:absolute;inset:0;display:flex;align-items:flex-end;gap:6px}
.sg-uur{flex:1;display:flex;flex-direction:column-reverse;height:100%;min-width:0}
.sg-uur i{display:block;flex:none;border-top:1px solid #fff;transition:height .5s ease}
.sg-tijden{display:flex;justify-content:space-between;font-size:13px;color:var(--gray-500);margin:5px 0 0 48px}
.sg-onder{margin:8px 0 0;font-size:var(--t-toel);color:var(--gray-500)}
.sg-onder+.sg-onder{margin-top:2px}
.sg-legenda{display:flex;flex-direction:column;gap:6px}
.sg-lkop{font-size:15px;font-weight:800;margin-bottom:2px}
.sg-lkop span{font-weight:600;color:var(--gray-500);font-size:13px}
.sg-tip{display:none;margin:0;font-size:var(--t-toel);color:var(--gray-500)}
.sg-lijst{display:flex;flex-direction:column;gap:6px}
.sg-knop{text-align:left;font:inherit;cursor:pointer;background:var(--vlak);border:2px solid var(--gray-300);border-radius:12px;
  padding:7px 12px;display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;min-height:48px;color:var(--gray-900)}
.sg-knop[aria-pressed="true"]{background:var(--merk-tint);border-color:var(--merk)}
.sg-lijst:has([aria-pressed="true"]) .sg-knop[aria-pressed="false"]{opacity:.6}
.sg-staal{width:20px;height:20px;border-radius:5px;border:1px solid #9fb3ae}
.sg-knopnaam b{display:block;font-size:14px;font-weight:800}
.sg-knopnaam small{display:block;font-size:13px;color:var(--gray-700);line-height:1.3}
.sg-kwh{font-size:14px;font-weight:800}
.sg-niet{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:var(--gray-700);background:var(--vlak);
  border:1px dashed var(--gray-300);border-radius:11px;padding:8px 11px;margin-top:2px}
.sg-niet .ico{width:17px;height:17px;color:var(--gray-500);margin-top:1px}

@media (max-width:1024px){
  .ov-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px;padding:12px 18px}
  .ov-kpiwaarde{font-size:19px}
  .ov-kpibalk{display:none}
  .ov-raster{grid-template-columns:minmax(0,1fr)}
  .ov-kolommen{display:none}
  .ov-rijkop{grid-template-columns:230px minmax(0,1fr) 44px;gap:10px;padding:6px 12px}
  .ov-samen{grid-template-columns:230px minmax(0,1fr) 44px;gap:10px;padding:9px 12px}
  .ov-cellen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px 10px}
  .ov-cel{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding:0;text-align:right;font-size:13px}
  .ov-cellabel,.ov-celeenh{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .ov-cellabel{color:var(--gray-700);text-align:left}
  .ov-celeenh{font-weight:600}
  .ov-cel small{display:none}
  .ov-nietwaarom{display:none}
  .ov-uitleg{margin-left:12px}
  .ov-zijkant{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ov-lekrij{grid-template-columns:64px 1fr 64px;gap:6px}
  .sg-raster{grid-template-columns:minmax(0,1fr);gap:12px}
  .sg-titel{font-size:24px}
  .sg-grafiek{grid-template-columns:1fr}
  .sg-as{display:none}
  .sg-vlak{height:280px}
  .sg-uren{gap:4px}
  .sg-tijden{margin-left:0}
  .sg-tijden .sg-breed{display:none}
  .sg-lkop{display:none}
  .sg-lijst{display:grid;grid-template-columns:1fr 1fr;gap:6px}
  .sg-knop{grid-template-columns:20px 1fr auto;gap:9px;border-radius:11px;padding:6px 11px}
  .sg-knopnaam small{display:none}
  .sg-onder:first-of-type{display:none}
}
@media (max-width:640px){
  .trajmain.ov,.trajmain.sg{padding-top:10px;gap:9px}
  /* "Eigen weging" blijft op de telefoon: dat is geen vakkennis maar een
     keuze van de bewoner (C 3a). Tot 1.76 verdween hij hier met de rest. */
  .ov-breed,.ov-context,.ov-vakknop:not(.ov-wegingknop),.ov-lijstkop{display:none}
  .ov-smal{display:inline}
  .ov-titel{font-size:18px}
  .ov-kpis{padding:10px 14px;gap:6px 10px;border-radius:var(--r-m)}
  .ov-kpi:not(.kort){display:none}
  .ov-kpi.k1{order:1}.ov-kpi.k2{order:2}.ov-kpi.k3{order:3}
  .ov-kpinaam{font-size:13px}
  .ov-kpiwaarde{font-size:17px}
  .ov-kpionder{display:block;margin-top:0}
  .ov-kpidelta{font-size:13px}
  .ov-lijst{gap:7px}
  .ov-groep{background:none;border:none;overflow:visible;display:flex;flex-direction:column;gap:7px}
  .ov-groepkop{background:none;border:none;padding:3px 0 0}
  .ov-groepkop .ico,.ov-groepzin{display:none}
  .ov-groepnaam{font-size:13px}
  .ov-rij,.ov-rij:last-child{background:var(--vlak);border:1px solid var(--merk-zacht);border-radius:12px;padding:4px 4px 4px 4px}
  .ov-rij.uit{background:var(--vlak);border-color:var(--gray-300)}
  .ov-rijkop{grid-template-columns:minmax(0,1fr) 44px;gap:0;padding:0}
  .ov-wie{gap:4px;min-height:44px}
  .ov-schakel{margin:0}
  .ov-knop{width:36px;height:21px}
  .ov-knop i{width:17px;height:17px}
  .ov-schakel[aria-checked="true"] .ov-knop i{left:17px}
  .ov-naam{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:6px}
  .ov-naamtekst{flex:1 1 60%;font-size:13px}
  .ov-naamsub{display:none}
  .ov-niet{order:3;flex-basis:100%}
  .ov-nietwaarom{display:none}
  .ov-kort{display:block;text-align:right;font-size:13px;font-weight:800;color:var(--kosten)}
  .ov-kort.goed{color:var(--goed)}
  .ov-kort.nul{color:var(--gray-500)}
  .ov-rij.uit .ov-kort{font-style:italic}
  .ov-kort small{display:block;font-size:13px;font-weight:600;color:var(--gray-500);font-style:normal}
  .ov-chev{order:2}
  .ov-cellen{display:none}
  .ov-rij.open .ov-cellen{display:grid;order:3;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:4px 12px;padding:2px 8px 0 12px}
  .ov-rij.open .ov-cel{border-bottom:1px solid var(--gray-100);padding:3px 0}
  .ov-uitleg{margin:0;padding:6px 8px 8px 12px;background:none!important;border:none;font-size:13px}
  .ov-uitleg>.ico{display:none}
  .ov-uitlegprijs{display:block;margin-top:5px!important;font-size:var(--t-toel);color:var(--gray-500)}
  .ov-samen{grid-template-columns:minmax(0,1fr);padding:9px 12px}
  .ov-samen .ov-cellen{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px}
  .ov-samen>span:last-child{display:none}
  .ov-zijkant{grid-template-columns:minmax(0,1fr)}
  .sg-titel{display:none}
  .sg-kop{align-items:stretch}
  .sg-kop>div:first-child{width:100%}
  .sg-dagen{width:100%}
  .sg-dag{flex:1;font-size:13.5px}
  .sg-zin{font-size:var(--t-lopend);line-height:var(--t-regel)}
  .sg-kaart{border-radius:14px;padding:10px 10px 6px}
  .sg-focuskop{display:block}
  .sg-vlak{height:170px}
  .sg-uren{gap:2px}
  .sg-uur i{border-top:none}
  .sg-tip{display:block}
  .sg-lijst{grid-template-columns:1fr;gap:5px}
  .sg-knop{min-height:44px;border-radius:10px;padding:0 11px;grid-template-columns:18px 1fr auto}
  .sg-staal{width:16px;height:16px;border-radius:4px}
  .sg-knopnaam b{font-size:13.5px;font-weight:700}
}
/* ================================================================
   P · Kosten en subsidie, en Q · terugkomen (1.68)
   Mijn woonplan per regel: zelf, subsidie en prijs in de kop, open met
   drie blokken. Kleuren uit de datapaletten: kosten (zelf) en subsidie.
   Een toestand is nooit alleen een kleur: altijd een pictogram en een zin.
   ================================================================ */
.wpregel .wprij{grid-template-columns:auto minmax(0,1fr);gap:4px;padding:6px 6px 6px 8px}
.wpkop{display:grid;grid-template-columns:auto minmax(0,1fr) 112px 128px 112px 28px;gap:14px;align-items:center;
  width:100%;min-height:56px;background:none;border:none;font:inherit;text-align:left;color:var(--gray-900);
  cursor:pointer;padding:6px 10px 6px 4px;border-radius:var(--r-m)}
.wpkop:hover{background:var(--gray-100)}
/* Z1: de subsidie van je gemeente apart, onder de landelijke. */
.wglokaal{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-toel);line-height:1.45;color:var(--let-tekst);
  background:var(--let-tint);border:1px solid var(--let-rand);border-radius:var(--r-m);padding:9px 12px;margin:10px 0 0}
.wglokaal .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--let)}
.wpniet{padding:0 16px 8px 64px}
/* Uit: schuin en lichter, zoals in het uitgebreide overzicht, en met de zin
   "staat uit" erbij. */
.wpregel.uit{background:var(--papier);border-style:dashed}
.wpregel.uit .wpcel b,.wpregel.uit .wpprijs b,.wpregel.uit .rnaam{font-style:italic;opacity:.6}
.wpmeld{display:flex;gap:10px;align-items:flex-start;margin:0 16px 10px;border:1px solid;border-radius:11px;
  padding:8px 12px;font-size:13px;line-height:1.45}
.wpmeld .ico{width:19px;height:19px;flex:none;margin-top:1px}
.wpmeld.let{background:var(--let-tint);border-color:var(--let-rand)}.wpmeld.let .ico{color:var(--let)}
.wpmeld.info{background:var(--info-tint);border-color:var(--info-rand)}.wpmeld.info .ico{color:var(--info)}
.wpmeld.sub{background:var(--subsidie-tint);border-color:var(--subsidie-rand)}.wpmeld.sub .ico{color:var(--subsidie)}
/* Y2 en Y3: lokale regelingen. Elke toestand heeft een woord en een pictogram. */
.lokvragen{margin:16px 0;border:1px solid var(--gray-300);border-radius:14px;padding:14px 16px;background:var(--vlak)}
.lokkop{display:flex;align-items:center;gap:8px;font-size:15px}.lokkop .ico{width:20px;height:20px;color:var(--subsidie)}
.lokaantal{margin-left:auto;font-size:13px;color:var(--gray-500)}
.lokvraag{padding:12px 0 4px;border-top:1px solid var(--gray-100);margin-top:10px}
.lokvraag.inregel{margin-top:8px;padding-bottom:0}
.lokv{font-size:15px;font-weight:800;margin:0 0 4px}.lokvraag.inregel .lokv{font-size:14px}
.lokuitleg{font-size:var(--t-toel);margin:0 0 10px}
.lokknoppen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.lokhint,.lokgevolg,.lokslot,.lokwijk,.lokvlag,.lokinfo{display:flex;gap:7px;align-items:flex-start;font-size:var(--t-toel);line-height:1.45;margin:6px 0 0}
.lokhint .ico,.lokgevolg .ico,.lokslot .ico,.lokwijk .ico,.lokvlag .ico,.lokinfo .ico{width:17px;height:17px;flex:none;margin-top:1px}
.lokgevolg{font-weight:700}.lokgevolg.sub .ico{color:var(--subsidie)}.lokgevolg.let .ico,.lokvlag .ico{color:var(--let)}
.lokslot,.lokinfo{color:var(--gray-700)}.lokwijk .ico{color:var(--subsidie)}
.loklijst{margin:0 16px 10px;display:flex;flex-direction:column;gap:8px}
.lokreg{border:1px solid var(--gray-300);border-left-width:4px;border-radius:11px;padding:9px 12px;font-size:13px;line-height:1.45}
.lokreg.sub{border-left-color:var(--subsidie)}.lokreg.let{border-left-color:var(--let)}.lokreg.info{border-left-color:var(--info)}.lokreg.kosten{border-left-color:var(--kosten)}
.lokreg p{margin:4px 0 0}
.lokregkop{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px}
.lokregnaam{flex:1;min-width:140px}
.lokwoord{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800}
.lokwoord .ico{width:17px;height:17px}
.lokreg.sub .lokwoord .ico{color:var(--subsidie)}.lokreg.let .lokwoord .ico{color:var(--let)}.lokreg.info .lokwoord .ico{color:var(--info)}
.loklos{margin:10px 0;padding:0 2px}
.loksamen{list-style:none;padding:0;margin:0 0 14px;display:flex;flex-direction:column;gap:6px}
.loksamen li{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-toel)}.loksamen .ico{width:18px;height:18px;flex:none;color:var(--subsidie)}
.loktijd{margin-top:14px}.loktijd h4{font-size:14px;margin:0 0 6px}
.loktijd ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.loktijd li{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-toel)}.loktijd li .ico{width:18px;height:18px;flex:none;margin-top:2px}
.loktijd small{display:block;font-size:13px;color:var(--gray-500);font-weight:700}
@media print{.lokknoppen{display:none}}
.wpblok h4,.wpinfo summary{font-size:13.5px;font-weight:800;margin:0 0 7px}
.wpuitv{display:flex;flex-direction:column;gap:6px}
.wpuitvknop{text-align:left;font:inherit;cursor:pointer;background:var(--vlak);border:2px solid var(--gray-300);
  border-radius:11px;padding:7px 11px;min-height:44px;color:var(--gray-900)}
.wpuitvknop b{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:800}
.wpuitvknop b .ico{width:15px;height:15px;color:var(--merk-diep)}
.wpuitvknop span{display:block;font-size:13px;color:var(--gray-700);line-height:1.3}
.wpuitvknop[aria-pressed="true"]{background:var(--merk-tint);border-color:var(--merk)}
.wpeffect{display:flex;gap:6px;font-size:var(--t-toel);color:var(--gray-700);line-height:1.4;margin:8px 0 0}
.wpeffect .ico{width:16px;height:16px;flex:none;color:var(--subsidie)}
.wpinfo{min-width:0}
.wpinfo summary{list-style:none;display:flex;align-items:center;gap:7px;cursor:pointer;min-height:24px}
.wpinfo summary::-webkit-details-marker{display:none}
.wpinfo summary>.ico:first-child{display:none}
.wpinfo summary .wpinfochev{margin-left:auto;width:14px;height:14px;color:var(--gray-500);transform:rotate(90deg)}
.wpinfo[open] summary .wpinfochev{transform:rotate(-90deg)}
.wpo{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid var(--gray-100)}
.wpo small{display:block;font-size:13px;color:var(--gray-500);line-height:1.35}
.wpo b{font-weight:700;white-space:nowrap}
.wpo b.sub{color:var(--subsidie)}
.wpo.som{border-bottom:none;font-size:14px;padding-top:7px}
.wpo.som span,.wpo.som b{font-weight:800}
.wpaanname{font-size:var(--t-toel);color:var(--gray-500);margin:6px 0 0;line-height:1.4}
.wpsubzin{font-size:var(--t-toel);color:var(--gray-700);margin:7px 0 0;line-height:1.45}
.wppil{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:13px;font-weight:700;
  border:1px solid;border-radius:var(--r-rond);padding:3px 10px;line-height:1.35}
.wppil .ico{width:15px;height:15px;flex:none}
.wppil.sub{color:var(--subsidie);background:var(--subsidie-tint);border-color:var(--subsidie-rand)}
.wppil.let{color:var(--let);background:var(--let-tint);border-color:var(--let-rand)}
.wppil.kosten{color:var(--kosten);background:var(--kosten-tint);border-color:var(--gray-300)}
.wppil.info{color:var(--info);background:var(--info-tint);border-color:var(--info-rand)}
/* P2: het hele plan. */
.trajmain.wg,.trajmain.md{max-width:1200px;padding-top:18px}
.wggrid{display:grid;grid-template-columns:1.1fr .9fr;gap:22px;align-items:start;margin-top:8px}
.wglinks{display:flex;flex-direction:column;gap:12px;min-width:0}
.wglinks .trajvraag{max-width:none;font-size:28px}
.wgtotaal{display:flex;gap:26px;flex-wrap:wrap}
.wgtotaal small{display:block;font-size:13px;color:var(--gray-700)}
.wgtotaal b{font-size:28px;font-weight:800}
.wgtotaal .sub small,.wgtotaal .sub b{color:var(--subsidie)}
.wgtotaal .zelf b{color:var(--kosten)}
.wpkaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:14px 18px}
.wpkaart h3{font-size:15px;margin:0 0 10px}
.wgbalken{display:flex;flex-direction:column;gap:11px}
.wgbalk{display:grid;grid-template-columns:190px minmax(0,1fr) 90px;gap:12px;align-items:center}
.wgnaam{font-size:13.5px;font-weight:700}
.wgspoor{display:flex;height:22px}
.wgvul{display:flex;border-radius:6px;overflow:hidden;transition:width .5s ease}
.wgvul .zelf{background:var(--kosten);display:flex;align-items:center;overflow:hidden}
.wgvul .sub{flex:1;background:var(--subsidie);display:flex;align-items:center;justify-content:flex-end;overflow:hidden}
.wgvul i{font-style:normal;color:#fff;font-size:13px;font-weight:700;padding:0 6px;white-space:nowrap}
.wgbalk>b{text-align:right;font-size:14px;font-weight:800}
.wgklein{display:none;font-size:13px;color:var(--gray-700)}
.wgklein .sub{color:var(--subsidie)}
.wglegenda{display:flex;gap:16px;font-size:13px;color:var(--gray-700);border-top:1px solid var(--gray-100);padding-top:9px}
.wglegenda span{display:inline-flex;align-items:center;gap:6px}
.wglegenda i{width:12px;height:12px;border-radius:3px;display:inline-block}
.wglegenda i.zelf{background:var(--kosten)}.wglegenda i.sub{background:var(--subsidie)}
.wptijdlijn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.wptijdlijn li{border-top:4px solid var(--gray-300);padding-top:8px;display:flex;flex-direction:column;gap:1px}
.wptijdlijn li.kost{border-top-color:var(--kosten)}.wptijdlijn li.aan{border-top-color:#8f86e6}.wptijdlijn li.sub{border-top-color:var(--subsidie)}
.wptijdlijn small{font-size:13px;font-weight:800;color:var(--gray-500)}
.wptijdlijn b{font-size:13.5px}
.wptijdlijn span{font-size:13px;color:var(--gray-700);line-height:1.35}
.wptijdzin{font-size:var(--t-toel);color:var(--gray-700);margin:10px 0 0}
.wgrechts .wpinfo summary{font-size:15px}
.wgreg{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:12px 15px;margin-bottom:10px}
.wgreg.sub{border-color:var(--subsidie-rand)}.wgreg.let{border-color:var(--let-rand)}.wgreg.info{border-color:var(--info-rand)}
.wgregkop{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wgregkop span{display:inline-flex;align-items:center;gap:7px;font-size:14.5px}
.wgregkop .ico{width:19px;height:19px;flex:none}
.wgreg.sub .ico,.wgreg.sub .wgregkop>b,.wgreg.sub small{color:var(--subsidie)}
.wgreg.let .ico,.wgreg.let .wgregkop>b,.wgreg.let small{color:var(--let)}
.wgreg.info .ico,.wgreg.info .wgregkop>b,.wgreg.info small{color:var(--info)}
.wgreg.kosten .ico,.wgreg.kosten .wgregkop>b,.wgreg.kosten small{color:var(--kosten)}
.wgregkop>b{font-size:16px;font-weight:800;white-space:nowrap}
.wgreg p{font-size:var(--t-toel);color:var(--gray-700);margin:4px 0 0;line-height:1.45}
.wgreg small{display:block;font-size:13px;font-weight:700;margin-top:5px}
/* P3: één maatregel. */
.mdofferte{background:var(--vlak);border:2px solid var(--merk-diep);border-radius:16px;padding:14px 18px}
.mdoffkop{display:flex;align-items:center;gap:7px;color:var(--merk-diep);font-size:13px}
.mdoffkop .ico{width:18px;height:18px}
.mdoffkop .rherkomst{margin-left:auto;font-size:13px;font-weight:800;color:var(--merk-diep);background:var(--merk-tint);border-radius:var(--r-rond);padding:2px 8px}
.mdvelden{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:9px}
.mdvelden label,.mdlabel{font-size:13px;font-weight:700;color:var(--gray-700)}
.mdinvoer{margin-top:5px;display:flex;align-items:center;min-height:50px;border:2px solid var(--veldrand);border-radius:12px;
  background:var(--veld);padding:0 12px;gap:6px}
.mdinvoer span{font-weight:700;color:var(--gray-500)}
.mdinvoer input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:18px;font-weight:700;color:var(--gray-900);
  min-height:44px;padding:0;font-variant-numeric:tabular-nums}
.mdinvoer:focus-within{border-color:var(--merk)}
.mdtype{margin-top:5px;display:flex;align-items:center;min-height:50px;border:2px solid var(--gray-300);border-radius:12px;
  background:var(--merk-tint);padding:4px 12px;font-size:14px;font-weight:700;line-height:1.3}
.mdverg{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;border:1px solid;border-radius:14px;padding:12px 16px;font-size:13.5px;line-height:1.4}
.mdverg .ico{width:24px;height:24px}
.mdverg.hoger{background:var(--goed-tint);border-color:var(--goed-rand)}.mdverg.hoger .ico{color:var(--goed)}
.mdverg.lager{background:var(--merk-tint);border-color:var(--merk-zacht);grid-template-columns:auto 1fr}.mdverg.lager .ico{color:var(--merk-diep)}
/* Q: terugkomen. Een kaart die niets blokkeert, bovenaan Mijn woonplan. */
.wptkvak{max-width:var(--traj-breed);margin:0 auto;width:100%;padding:14px clamp(16px,4vw,32px) 0}
.wptkvak:empty{display:none}
/* Ontwerp V5b: bijgewerkt waar we mee rekenen, en een maatregel die niet meer
   in de tool staat. Met een pictogram en een woord, nooit alleen een kleur. */
.wpkb{display:flex;gap:11px;align-items:flex-start;background:var(--info-tint);border:1px solid var(--info-rand,#b5d4f4);
  border-radius:14px;padding:12px 16px;margin:10px 0 4px;font-size:14px;line-height:1.5}
.wpkb .ico{width:22px;height:22px;color:var(--info);flex:none;margin-top:1px}
.wpkbrapport{display:block;color:var(--gray-700)}
.wpkbversie{color:var(--gray-500)}
.wpweg{background:var(--let-tint,#fbeddc);border:1px solid var(--gray-300);border-radius:14px;padding:11px 16px;margin:0 0 10px}
.wpweghoofd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15.5px}
.wpweghoofd .ico{width:18px;height:18px;color:var(--let,#8a4b00)}
.wpwegbadge{font-size:13px;font-weight:800;color:var(--let,#8a4b00)}
.wpweg p{margin:4px 0 8px;font-size:var(--t-toel);color:var(--gray-700)}
.wpweg .trajknop{min-height:44px}
.wptk{background:var(--vlak);border:2px solid var(--info);border-radius:16px;overflow:hidden}
.wptkkop{padding:13px 18px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center}
.wptkico{width:40px;height:40px;border-radius:50%;background:var(--info-tint);display:inline-flex;align-items:center;justify-content:center}
.wptkico .ico{width:22px;height:22px;color:var(--info)}
.wptkkop>div>b{font-size:15.5px;font-weight:800}
.wptkzin{font-size:13px;color:var(--gray-700)}
.wptkzin .alslink{color:var(--info);font-weight:700;min-height:24px}
.wptkknoppen{display:flex;gap:8px;flex-wrap:wrap}
.wptkknoppen .trajknop{min-height:48px;font-size:14.5px;padding:0 16px;border-radius:12px}
.trajknop.donker{background:var(--merk-diep);border-color:var(--merk-diep);color:#fff}
.trajknop.donker:hover{background:var(--gray-900);border-color:var(--gray-900)}
.wptkdetail{border-top:1px solid var(--gray-100);padding:12px 18px 14px;background:#fcfdfd}
.wptktabel{width:100%;border-collapse:collapse;font-size:13px}
.wptktabel th,.wptktabel td{text-align:left;padding:5px 12px 5px 0;border-top:1px solid var(--gray-100);vertical-align:middle}
.wptktabel thead th{border-top:none;font-size:13px;font-weight:800;color:var(--gray-500)}
.wptktabel tbody th{font-weight:700;width:30%}
.wptktabel .ico{width:16px;height:16px;margin-right:6px;vertical-align:-3px}
.wptktabel .ico.plus{color:var(--goed)}.wptktabel .ico.min{color:#9fb3ae}.wptktabel .ico.pen{color:var(--info)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wptkrest{font-size:var(--t-toel);color:var(--gray-700);margin:6px 0 0}
.wptkwat{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.wptkwat .ico{width:17px;height:17px;flex:none;color:var(--info)}
.wptkbalk{display:flex;align-items:center;gap:12px;background:var(--merk-tint);border:1px solid var(--merk-zacht);
  border-radius:14px;padding:10px 12px 10px 18px;font-size:14px;line-height:1.4}
.wptkbalk.goed{background:var(--goed-tint);border-color:var(--goed-rand)}
.wptkbalk>.ico{width:22px;height:22px;flex:none;color:var(--merk-diep)}
.wptkbalk.goed>.ico{color:var(--goed)}
.wptkbalk span{flex:1}
.wptkbalk .trajknop{min-height:44px;font-size:14px;padding:0 14px;border-radius:11px}
.wpversies{margin-top:16px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:4px 16px}
.wpversies summary{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-weight:700;font-size:14px}
.wpversies summary .ico{width:18px;height:18px;color:var(--info)}
.wpversies p{font-size:var(--t-toel);color:var(--gray-700);margin:0 0 8px}
.wpversie{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--gray-100);font-size:13.5px}
.wpversie .trajknop{min-height:44px;font-size:14px;padding:0 14px}
/* U: een datum vragen in de vragenlijst (1.69). Jaar en maand zijn knoppen
   van 44 px of hoger; wat gekozen is heeft een vinkje, nooit alleen een kleur.
   iPad staand vanaf 1024 px, telefoon vanaf 640 px, zoals de rest van de
   vragenlijst. */
.ukort{display:none}
.uleid{margin:0;font-size:var(--t-lopend);color:var(--gray-700);line-height:1.5}
.utegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.utegel{text-align:left;font:inherit;cursor:pointer;background:var(--vlak);border:2px solid var(--gray-300);border-radius:14px;
  padding:12px 14px;min-height:96px;display:flex;flex-direction:column;gap:6px;color:var(--gray-900)}
.utegel:hover{border-color:var(--merk-zacht)}
.utegel.on{background:var(--merk-tint);border-color:var(--merk)}
.utop{display:flex;justify-content:space-between;align-items:flex-start;width:100%}
.utegel .usoort{width:26px;height:26px;color:var(--merk-diep)}
.uvk{width:24px;height:24px;border-radius:8px;border:2px solid #9fb3ae;background:var(--vlak);display:inline-flex;align-items:center;justify-content:center;flex:none}
.uvk .ico{width:15px;height:15px;color:var(--merk-op);opacity:0}
.utegel.on .uvk{background:var(--merk);border-color:var(--merk)}
.utegel.on .uvk .ico{opacity:1}
.utekst{display:flex;flex-direction:column;gap:6px}
.unaam{font-size:14.5px;font-weight:800;line-height:1.2}
.udatum{font-size:13px;color:var(--gray-700)}
.uniets{margin-top:16px;align-self:flex-start;min-height:48px;padding:0 16px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);
  font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;color:var(--gray-900);display:inline-flex;align-items:center;gap:8px}
.uniets .ico{width:19px;height:19px}
.uniets.on{background:var(--merk-tint);border-color:var(--merk)}
.uniets.on .ico{color:var(--merk-diep)}
.uzin{margin:16px 0 0;font-size:var(--t-toel);color:var(--gray-700);display:flex;gap:8px;align-items:flex-start;line-height:1.45}
.uzin .ico{width:18px;height:18px;color:var(--info);flex:none}
.uwaar{align-self:flex-start;display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:13px;font-weight:700;
  color:var(--merk-diep);background:var(--merk-tint);border-radius:var(--r-rond);padding:5px 12px}
.uwaar .ico{width:18px;height:18px}
.ublok{margin-top:14px}
.ublok:first-child{margin-top:0}
.ulabel{font-size:13px;font-weight:700;color:var(--gray-700);margin-bottom:6px}
.ulabel span{font-weight:400;color:var(--gray-500)}
.ujaren{display:flex;gap:8px;flex-wrap:wrap}
.umaanden{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;max-width:600px}
.ujaar,.umaand,.uaanvr{border:2px solid var(--gray-300);background:var(--vlak);font:inherit;cursor:pointer;color:var(--gray-900);
  display:inline-flex;align-items:center;justify-content:center;gap:5px}
.ujaar{min-width:84px;min-height:50px;border-radius:12px;font-size:16px;font-weight:800}
.umaand{min-height:46px;border-radius:11px;font-size:14.5px;font-weight:700;padding:0 4px}
.ujaar .ico,.umaand .ico,.uaanvr .ico{width:15px;height:15px;color:var(--merk-diep)}
.ujaar.on,.umaand.on,.uaanvr.on{background:var(--merk-tint);border-color:var(--merk)}
.ujaar:hover,.umaand:hover,.uaanvr:hover{border-color:var(--merk-zacht)}
.ujaar.on:hover,.umaand.on:hover,.uaanvr.on:hover{border-color:var(--merk)}
.umaand.uit{color:var(--gray-500);opacity:.55;cursor:not-allowed}
.umaand.uit:hover{border-color:var(--gray-300)}
.umaand.tever span{text-decoration:line-through}
.ubetekenis{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--gray-300);background:var(--vlak);border-radius:13px;
  padding:11px 14px;max-width:600px;font-size:14px;line-height:1.45;margin-top:14px}
.ubetekenis>.ico{width:21px;height:21px;flex:none;color:var(--gray-500)}
.ubetekenis.sub{background:var(--subsidie-tint);border-color:var(--subsidie-rand)}
.ubetekenis.sub>.ico{color:var(--subsidie)}
.ubetekenis.info{background:var(--info-tint);border-color:var(--info-rand)}
.ubetekenis.info>.ico{color:var(--info)}
.uaanvraag{border-top:1px solid var(--gray-100);padding-top:14px;margin-top:14px}
.uaanvrkop{font-size:16px;font-weight:800;margin-bottom:8px}
.uknoppen{display:flex;gap:8px;flex-wrap:wrap}
.uaanvr{min-height:48px;padding:0 18px;border-radius:12px;font-size:14.5px;font-weight:700}
.uweetniet{align-self:flex-start;margin-top:12px;min-height:44px;padding:0 4px;border:none;background:none;font:inherit;font-size:14px;
  font-weight:700;color:var(--merk-diep);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.usam{display:flex;flex-direction:column;gap:12px}
.usamrij{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:12px 16px;display:grid;
  grid-template-columns:30px minmax(0,1fr) auto;gap:12px;align-items:start}
.usamrij>.usoort{width:24px;height:24px;color:var(--merk-diep);margin-top:2px}
.usamkop{font-size:15.5px}
.usamkop b{font-weight:800}
.usamkop .tn{font-weight:600;color:var(--gray-700)}
.usamzin,.wpeerderzin{font-size:13px;color:var(--gray-700);margin-top:3px;line-height:1.45;display:flex;gap:6px;align-items:flex-start}
.usamzin .ico,.wpeerderzin .ico{width:17px;height:17px;flex:none;color:var(--gray-500)}
.usamzin.sub .ico,.wpeerderzin.sub .ico{color:var(--subsidie)}
.usamzin.info .ico,.wpeerderzin.info .ico{color:var(--info)}
.uwijzig{min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--gray-300);border-radius:11px;background:var(--vlak);color:var(--merk-diep);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.uwijzig .ico{width:20px;height:20px;color:var(--gray-500)}
.usamleeg{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:14px 16px;font-size:14px;color:var(--gray-700)}
.uvoet{font-size:var(--t-toel);color:var(--gray-500);line-height:1.45;margin:12px 0 0}
.ugasopties{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.ugasoptie{text-align:left;font:inherit;cursor:pointer;background:var(--vlak);border:2px solid var(--gray-300);border-radius:14px;
  padding:13px 16px;min-height:80px;color:var(--gray-900);display:flex;gap:12px;align-items:flex-start}
.ugasoptie:hover{border-color:var(--merk-zacht)}
.ugasoptie.on{background:var(--merk-tint);border-color:var(--merk)}
.ugasoptie b{display:block;font-size:15.5px;font-weight:800}
.ugasoptie .tn{display:block;font-size:13px;color:var(--gray-700);margin-top:3px}
.ugasoptie .bol{width:24px;height:24px;border-radius:50%;border:2px solid var(--gray-300);background:var(--vlak);flex:none;
  display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.ugasoptie .bol .ico{width:14px;height:14px;stroke-width:2.6;color:var(--merk-op);opacity:0}
.ugasoptie.on .bol{background:var(--merk);border-color:var(--merk)}
.ugasoptie.on .bol .ico{opacity:1}
.ugasopties+.ublok{margin-top:14px}
.ublok+.umaanden{margin-top:8px}
.uoud{margin:0 0 8px;padding-left:18px;font-size:13.5px;line-height:1.5}
@media (max-width:1024px){
  .uleid .ulang{display:none}
  .uleid .ukort{display:inline}
  .utegels{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px}
  .utegel{min-height:84px;padding:10px 12px;border-radius:13px}
  .ujaren{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
  .ujaren.drie{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ujaar{min-width:0}
  .umaanden{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;max-width:none}
  .umaand{min-height:48px}
  .ubetekenis{max-width:none;font-size:13.5px}
  .uknoppen .uaanvr{flex:1}
  .ugasopties{grid-template-columns:1fr;gap:9px}
  .ugasoptie{min-height:64px;padding:12px 15px}
}
@media (max-width:640px){
  .utegels{grid-template-columns:1fr;gap:8px;margin-top:10px}
  .utegel{min-height:50px;padding:0 12px;border-radius:12px;display:grid;grid-template-columns:24px minmax(0,1fr) auto;gap:10px;align-items:center}
  .utegel .utop{display:contents}
  .utegel .usoort{width:22px;height:22px;grid-column:1;grid-row:1}
  .utegel .utekst{grid-column:2;grid-row:1;gap:1px}
  .utegel .uvk{grid-column:3;grid-row:1}
  .utegel .unaam{font-size:14px}
  .utegel .udatum{font-size:13px}
  .uniets{display:flex;width:100%;justify-content:center;margin-top:10px}
  .ujaren{gap:6px}
  .ujaar{min-height:48px;font-size:15px;border-radius:11px}
  .umaanden{gap:6px}
  .umaand{min-height:46px;font-size:14px;border-radius:10px}
  .ubetekenis{font-size:13px;padding:9px 11px}
  .uaanvrkop{font-size:14.5px}
  .uaanvrkop .ulang{display:none}
  .uaanvrkop .ukort{display:inline}
  .uknoppen{flex-direction:column;gap:6px}
  .uknoppen .uaanvr{justify-content:flex-start;min-height:46px;padding:0 13px}
  .uweetniet{align-self:center}
  .usam{gap:9px}
  .usamrij{grid-template-columns:minmax(0,1fr) auto;padding:10px 12px;gap:4px 8px}
  .usamrij>.usoort{display:none}
  .usamkop{font-size:14px}
  .usamkop .tn{display:block;font-size:13px;font-weight:400}
  .usamkop .usep{display:none}
  .usamzin{font-size:13px;margin-top:4px}
  .uwijzig{border:none;padding:0}
  .uwijzig .ulang{display:none}
  .uwijzig .ico.ukort{display:inline-block}
  .ugasoptie{min-height:60px;padding:10px 13px}
}
@media(max-width:980px){
  .wpkop{grid-template-columns:auto minmax(0,1fr) auto 26px}
  .wpuitv{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .wggrid,.mdgrid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
  .wpregel .wprij{padding:4px 4px 4px 6px}
  .wpkop{gap:8px;padding:6px 6px 6px 2px}
  .wpmeld{margin:0 10px 9px;font-size:13px}
  .wpuitvknop{text-align:center;padding:6px 8px}
  .wpuitvknop b{justify-content:center}
  .wpuitvknop span{display:none}
  .wpinfo{background:var(--vlak);border:1px solid var(--gray-300);border-radius:13px;padding:0 13px}
  .wpinfo summary{min-height:48px;margin:0;font-size:13.5px}
  .wpinfo summary>.ico:first-child{display:inline-block;width:19px;height:19px;color:var(--kosten)}
  .wpinfo.subs summary>.ico:first-child{color:var(--subsidie)}
  .wpinfo .wpinfoin{padding-bottom:11px}
  .wpniet{padding:0 10px 8px}
  .wgtotaal{gap:14px}.wgtotaal b{font-size:22px}
  .wgbalk{grid-template-columns:minmax(0,1fr) auto}
  .wgspoor{display:none}
  .wgklein{display:block;grid-column:1/-1;margin-top:-6px}
  .wglegenda{display:none}
  .wptijdlijn{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mdlinks .trajvraag,.wglinks .trajvraag{font-size:24px}
  .mdvelden{grid-template-columns:minmax(0,1fr)}
  .mdverg{grid-template-columns:auto 1fr;font-size:13px}
  .wptkkop{grid-template-columns:auto 1fr;padding:11px 13px;gap:9px}
  .wptkico{width:auto;height:auto;background:none}
  .wptkkop>div>b{font-size:14px}
  .wptkknoppen{grid-column:1/-1;flex-direction:column}
  .wptkknoppen .trajknop{width:100%;justify-content:center}
  .wptktabel thead{display:none}
  .wptktabel tbody th{width:auto}
  .wptktabel tr{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--gray-100)}
  .wptktabel tbody th{grid-column:1/-1;border-top:none;padding-bottom:0}
  .wptktabel td{border-top:none;font-size:13px}
  .wptkbalk{flex-wrap:wrap;padding:9px 11px}
  .wptkbalk .trajknop{width:100%;justify-content:center}
}
@media (prefers-reduced-motion: reduce){.wgvul,.wpchev .ico{transition:none}}
/* R (1.70): wat je al hebt, "Dit staat er al in je huis" en zelf invullen.
   Links de lijst, rechts "Wat we overnemen"; op de iPad en de telefoon staat
   het paneel eronder. Een keuze is nooit alleen een kleur: een vinkje erbij,
   en de herkomst staat er in woorden. */
.hk{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;margin-top:14px}
.hkhoofd{display:flex;flex-direction:column;gap:11px;min-width:0}
.hkpaneel{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;position:sticky;top:0}
.hkpkop{font-size:13px;font-weight:800;color:var(--gray-500)}
.hknaam{font-size:18px;font-weight:800;line-height:1.2}
.hksub{font-size:13px;color:var(--gray-700)}
.hkleid{margin:0;font-size:var(--t-lopend);color:var(--gray-700)}
.hkleeg{margin:0;font-size:var(--t-toel);color:var(--gray-700)}
.hkzoek{display:flex;align-items:center;gap:9px;min-height:50px;border:2px solid var(--veldrand);border-radius:12px;background:var(--veld);padding:0 13px;margin:0}
.hkzoek:focus-within{border-color:var(--merk-diep)}
.hkzoek>.ico{width:21px;height:21px;color:var(--gray-500);flex:none}
.hkzoek input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:16px;color:var(--gray-900);min-height:44px;padding:0}
.hktel{font-size:13px;color:var(--gray-500);white-space:nowrap}
.wegtekst{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.hkmerken{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hkmerken>span{font-size:13px;font-weight:700;color:var(--gray-700);margin-right:2px}
.hkchip{min-height:44px;padding:0 13px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);font:inherit;font-size:13.5px;font-weight:700;
  color:var(--gray-900);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.hkchip.rond{border-radius:999px}
.hkchip.on{border-color:var(--merk);background:var(--merk-tint)}
.hkchip .ico{width:16px;height:16px;color:var(--merk-diep)}
.hkseries{display:grid;grid-template-columns:1fr 1fr;gap:7px;align-content:start}
.hkserie,.hkauto{text-align:left;font:inherit;cursor:pointer;background:var(--vlak);border:2px solid var(--gray-300);border-radius:12px;padding:8px 13px;min-height:56px;
  color:var(--gray-900);display:flex;justify-content:space-between;align-items:center;gap:10px}
.hkserie:hover,.hkauto:hover{border-color:var(--merk-zacht)}
.hkserie.on,.hkauto.on{border-color:var(--merk);background:var(--merk-tint)}
.hkserie .wt b,.hkauto .wt b{display:block;font-size:14.5px;font-weight:800}
.hkserie .wt b .ico,.hkauto .wt b .ico{width:16px;height:16px;color:var(--merk-diep);vertical-align:-2px;margin-right:4px;stroke-width:2.4}
.hkserie .wt small,.hkauto .wt small{display:block;font-size:13px;color:var(--gray-700)}
.hkstatus{font-size:13px;font-weight:800;border-radius:999px;padding:3px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.hkstatus.uit{color:var(--gray-700);background:var(--gray-100)}
.hkstatus.koop{color:var(--goed);background:var(--goed-tint)}
.hkstatus .ico{width:12px;height:12px}
.hkautos{display:flex;flex-direction:column;gap:6px}
.hkauto{display:grid;grid-template-columns:minmax(0,1fr) 130px 110px;min-height:54px}
.hkjaren,.hksoort{font-size:13px;color:var(--gray-700)}
.hksoort{text-align:right}
.hkmeer{margin:0;font-size:var(--t-toel);color:var(--gray-500)}
.hkrij{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.hkhoofd>.hkrij{margin-top:2px}
.hkknop{min-height:44px;padding:0 14px;border:2px solid var(--merk-diep);border-radius:11px;background:var(--vlak);font:inherit;font-size:13.5px;font-weight:700;
  color:var(--merk-diep);display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.hkknop.stil{border:1px dashed var(--spoor-lijn)}
.hkknop[aria-pressed="true"]{background:var(--merk-tint)}
.hkknop .ico{width:18px;height:18px}
.hkmelding{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--gray-300);background:var(--vlak);border-radius:13px;padding:10px 13px;font-size:var(--t-toel);line-height:1.45;margin:0}
.hkmelding>.ico{width:20px;height:20px;flex:none;color:var(--merk-diep);margin-top:1px}
.hkmelding.info{background:var(--info-tint);border-color:var(--info-rand)}.hkmelding.info>.ico{color:var(--info)}
.hkmelding.let{background:var(--let-tint);border-color:var(--let-rand)}.hkmelding.let>.ico{color:var(--let)}
.hkmelding.goed{background:var(--goed-tint);border-color:var(--goed-rand)}.hkmelding.goed>.ico{color:var(--goed)}
.hkmelding.merk{background:var(--merk-tint);border-color:var(--merk-zacht)}
.hkherk{font-size:13px;font-weight:800;border-radius:999px;padding:2px 8px;white-space:nowrap;justify-self:start;align-self:center}
.hkherk.fab{color:var(--merk-diep);background:var(--merk-tint)}
.hkherk.ind{color:var(--let);background:var(--let-tint)}
.hkherk.jij{color:var(--info);background:var(--info-tint)}
.hklab{font-size:13px;font-weight:700;color:var(--gray-700)}
.hkuitvs{display:flex;gap:6px;flex-wrap:wrap}
.hkjaar{display:flex;align-items:center;gap:8px;min-height:48px;border:2px solid var(--veldrand);border-radius:11px;background:var(--veld);padding:0 12px;margin:0}
.hkjaar span{font-size:13.5px;color:var(--gray-700);flex:1}
.hkjaar input,.hkwv input{width:72px;min-height:44px;border:none;background:none;font:inherit;font-size:16px;font-weight:800;color:var(--gray-900);text-align:right;padding:0}
.hkwaarde{border-bottom:1px solid var(--gray-100);padding-bottom:7px}
.hkwk{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.hkwk label,.hkwk>span:first-child{font-size:13px;color:var(--gray-700)}
.hkwv{display:flex;align-items:center;gap:6px;border:2px solid var(--veldrand);border-radius:10px;background:var(--veld);padding:0 10px;margin-top:3px;width:max-content}
.hkwv input{text-align:left;width:88px}
.hkwv .eenh{font-size:13px;color:var(--gray-500)}
.hkwt{font-size:15px;font-weight:800;margin-top:2px}
.hkwaarde small{display:block;font-size:13px;color:var(--gray-500);margin-top:2px}
.hkvoet{font-size:var(--t-toel);color:var(--gray-500);line-height:1.45;margin:4px 0 0}
.hkkort{display:none}
.hkstuur{align-self:flex-start;display:flex;align-items:flex-start;gap:10px;min-height:44px;border:none;background:none;padding:0;font:inherit;cursor:pointer;text-align:left;color:var(--gray-900);font-size:14px;line-height:1.4}
.hkstuur .vak{width:24px;height:24px;border-radius:7px;border:2px solid var(--gray-500);background:var(--vlak);display:inline-flex;align-items:center;justify-content:center;flex:none;margin-top:1px}
.hkstuur .vak .ico{width:16px;height:16px;color:#fff;opacity:0;stroke-width:2.8}
.hkstuur.on .vak{background:var(--merk-diep);border-color:var(--merk-diep)}
.hkstuur.on .vak .ico{opacity:1}
.hkstuur small{display:block;font-size:13px;color:var(--gray-500)}
.hkzelf{display:flex;flex-direction:column;gap:12px}
.hksoorten{display:flex;gap:6px;flex-wrap:wrap}
.hksoorten button{min-height:48px;padding:0 15px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);font:inherit;font-size:14px;font-weight:700;color:var(--gray-900);
  cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.hksoorten button.on{border-color:var(--merk);background:var(--merk-tint)}
.hksoorten button .ico{width:18px;height:18px;color:var(--merk-diep)}
.hksoorten.klein{margin-top:10px}
.hksoorten.klein button{min-height:44px}
.hkwaar{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:var(--t-toel);color:var(--info)}
.hkwaar .ico{width:18px;height:18px;flex:none}
.hkvak{background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.5;max-width:560px;margin-top:14px}
.hkautokaart{border:2px solid var(--gray-300);border-radius:13px;padding:10px 13px;display:flex;flex-direction:column;gap:5px}
.hkautokaart.on{border-color:var(--merk)}
/* W8: meer accu's en auto's */
.hkaextra{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.aihsoort{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.aihkaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;padding:10px 14px;display:grid;grid-template-columns:30px minmax(0,1fr) auto auto;gap:10px;align-items:center}
.aihnr{width:28px;height:28px;border-radius:50%;background:var(--merk-tint);color:var(--merk-diep);font-size:13.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
.aihwat{display:flex;flex-direction:column;gap:3px;min-width:0}
.aihwat select{min-height:44px;font:inherit;font-size:15px;font-weight:700;border:1px solid var(--gray-300);border-radius:10px;padding:0 8px;background:var(--vlak);max-width:100%}
.aihwat small{font-size:13px;color:var(--gray-700)}
.aihmaat{display:flex;align-items:center;gap:2px;background:var(--merk-tint);border-radius:12px;padding:0 4px}
.aihmaat button{width:40px;min-height:44px;border:none;background:transparent;cursor:pointer;color:var(--merk-diep);font:inherit;font-size:20px;font-weight:800}
.aihmaat span{font-size:15px;font-weight:800;min-width:70px;text-align:center}
.aihweg{width:44px;height:44px;border:1px solid var(--gray-300);border-radius:12px;background:var(--vlak);cursor:pointer;color:var(--gray-700);display:inline-flex;align-items:center;justify-content:center}
.aihweg .ico{width:18px;height:18px}
.aihnog{min-height:52px;border:1px dashed var(--spoor-lijn);border-radius:14px;background:var(--merk-tint);font:inherit;font-size:15px;font-weight:800;cursor:pointer;color:var(--merk-diep);display:flex;gap:7px;align-items:center;justify-content:center}
.aihnog .ico{width:20px;height:20px}
.aihvol,.aihsom{display:flex;gap:6px;margin:0;font-size:var(--t-toel);color:var(--gray-700)}
.aihvol .ico{width:17px;height:17px;flex:none}
@media (max-width:640px){.aihkaart{grid-template-columns:30px minmax(0,1fr) auto}.aihmaat{grid-column:2/3;justify-self:start}}
button.hkautokaart{font:inherit;background:var(--vlak);cursor:pointer;text-align:left;min-height:52px}
.hkakop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;width:100%;border:none;background:none;padding:0;font:inherit;cursor:pointer;text-align:left;color:var(--gray-900);min-height:44px}
.hkakop b{font-size:16px;font-weight:800}
.hkakop small{font-size:13px;color:var(--gray-500)}
/* R2 */
.r2kaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:16px;overflow:hidden}
.r2rij{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto auto;gap:12px;align-items:center;padding:6px 16px;border-bottom:1px solid var(--gray-100);min-height:52px}
.r2rij>.ico{width:22px;height:22px;color:var(--merk-diep)}
.r2rij.leeg>.ico{color:#9fb3ae}
.r2wat small{display:block;font-size:13px;color:var(--gray-500)}
.r2wat b{display:block;font-size:14.5px;font-weight:800}
.r2rij.leeg .r2wat b{color:var(--gray-500)}
.r2rij.eerder{background:var(--papier);grid-template-columns:30px minmax(0,1fr) auto}
.r2jaar{font-size:13px;color:var(--gray-700);text-align:right}
.r2schat{display:none;color:var(--let);font-weight:700}
.r2knop{min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--gray-300);border-radius:10px;background:var(--vlak);color:var(--merk-diep);font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.r2knop.kies{border-color:var(--let-rand)}
.r2knop .ico{width:20px;height:20px;color:var(--gray-500)}
/* R8 */
.r8velden{display:flex;flex-direction:column;gap:10px;max-width:640px}
.r8veld{display:grid;grid-template-columns:200px minmax(0,1fr);gap:12px;align-items:center;margin:0}
.r8l{font-size:14px;font-weight:700}
.r8l small{display:block;font-size:13px;font-weight:400;color:var(--gray-500)}
.r8in{display:flex;align-items:center;gap:8px;min-height:50px;border:2px solid var(--veldrand);border-radius:12px;background:var(--veld);padding:0 12px}
.r8in:focus-within{border-color:var(--merk-diep)}
.r8in input{flex:1;min-width:0;border:none;background:none;font:inherit;font-size:16px;font-weight:700;color:var(--gray-900);min-height:44px;padding:0}
.r8in input[aria-invalid="true"]{outline:2px solid var(--fout)}
.r8in .eenh{font-size:13px;color:var(--gray-500)}
.r8rij{display:flex;justify-content:space-between;gap:10px;font-size:13.5px;border-bottom:1px solid var(--gray-100);padding:4px 0}
.r8rij span{color:var(--gray-700)}
.r8rij b{text-align:right}
.r8rij b.let{color:var(--let)}.r8rij b.sub{color:var(--subsidie)}
.r8klaar{margin:12px 0}
@media (max-width:1100px){
  .hk{grid-template-columns:1fr}
  .hkpaneel{position:static}
  .hkseries{grid-template-columns:1fr}
  .r2rij{grid-template-columns:30px minmax(0,1fr) auto 96px}
  .r2rij .hkherk{display:none}
  .r2schat{display:inline}
}
@media (max-width:640px){
  .hkauto{grid-template-columns:minmax(0,1fr) auto}
  .hkauto .hksoort{display:none}
  .hkmerken>span{display:none}
  /* Op de telefoon is de merkenrij één regel die je opzij schuift: veertien merken onder elkaar duwen de lijst uit beeld. */
  .hkmerken{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
  .hkmerken .hkchip{flex:none}
  .hksoorten{display:grid;grid-template-columns:1fr 1fr}
  .hkvoet .hklang{display:none}
  .hkvoet .hkkort{display:inline}
  .r2kaart{background:none;border:none;border-radius:0;display:flex;flex-direction:column;gap:7px}
  .r2rij,.r2rij.eerder{grid-template-columns:24px minmax(0,1fr) 44px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:12px;padding:3px 3px 3px 12px;min-height:50px}
  .r2rij .r2jaar{display:none}
  .r2knop{border:none;padding:0}
  .r2knop .hklang{display:none}
  .r2knop .ico.hkkort{display:inline-block}
  .r2gevolg .hkmelding.r2rest,.r2gevolg .hkvoet{display:none}
  .r8veld{grid-template-columns:1fr;gap:4px}
}
/* R3 tot en met R7 (1.70): ons advies, welk apparaat past hier, naast
   elkaar, je keuze op de regel en je plan op basis van het advies. Een
   toestand is nooit alleen een kleur: elk merkje draagt een woord, een
   gekozen knop een vinkje of aria-pressed, en elk raakvlak is 44px of meer. */
.r4label{display:inline-flex;align-items:center;font-size:13px;font-weight:800;border-radius:999px;padding:2px 9px;white-space:nowrap;
  color:var(--gray-700);background:var(--gray-100)}
.r4label.advies{color:var(--merk-diep);background:var(--merk-tint)}
.r4label.keuze,.r4label.merk{color:var(--info);background:var(--info-tint)}
.r4label.let{color:var(--let);background:var(--let-tint)}
.r4label.goed{color:var(--goed);background:var(--goed-tint)}
.r4weg{min-height:44px;padding:0 13px;border:1px solid var(--gray-300);border-radius:10px;background:var(--vlak);color:var(--merk-diep);
  font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;flex:none;align-self:center}
.r4weg:hover{border-color:var(--merk-zacht);background:var(--gray-100)}
/* R3 */
.trajmain.r3{max-width:980px}
.r3kaart{margin-top:18px;background:var(--vlak);border:2px solid var(--merk);border-radius:20px;padding:18px 22px;display:flex;flex-direction:column;gap:12px}
.r3labels{display:flex;gap:6px;flex-wrap:wrap}
.r3labels .r4label{font-size:13px;padding:3px 10px}
.r3kop{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.r3naam{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.08}
.r3soort{font-size:13px;color:var(--gray-700);margin-top:3px}
.r3getallen{display:flex;gap:18px;text-align:right}
.r3getallen small{display:block;font-size:13px;color:var(--gray-500)}
.r3getallen b{display:block;font-size:21px;font-weight:800}
.r3getallen .pm b{color:var(--goed)}
.r3getallen b.traag,.r4getal b.traag{color:var(--let)}
.r3waarom{display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--gray-100);padding-top:10px}
.r3waarom>b{font-size:13.5px}
.r3reden{display:flex;gap:8px;font-size:14px;line-height:1.4}
.r3reden .ico{width:18px;height:18px;flex:none;margin-top:1px;color:var(--merk-diep)}
.r3reden.goed .ico{color:var(--goed)}.r3reden.let .ico{color:var(--let)}
/* Ons advies met een let-op (1.72): de lange zin op een groot scherm, de
   korte op de telefoon. De inhoud staat er één keer per maat. */
.r3reden .r3kort{display:none}
.r3voet{display:flex;align-items:center;gap:10px;border-top:1px solid var(--gray-100);padding-top:10px;flex-wrap:wrap}
.r3andere{flex:1;min-width:220px;font-size:13px;color:var(--gray-700)}
.r3knoppen{display:flex;gap:8px;flex-wrap:wrap}
.r3knoppen .trajknop{min-height:44px;font-size:14.5px;padding:0 15px}
.r3knoppen .trajknop .ico{width:18px;height:18px}
.r3keuze{margin-top:10px}
/* R4 */
.trajmain.r4,.trajmain.r5{max-width:var(--traj-breed)}
.r4keus{text-align:left;min-height:44px;padding:0 12px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);font:inherit;font-size:13.5px;font-weight:700;
  color:var(--gray-900);cursor:pointer;display:flex;align-items:center;gap:8px}
.r4keus[aria-pressed="true"]{border-color:var(--merk);background:var(--merk-tint)}
.r4keus[aria-pressed="true"] .r4vakje{background:var(--merk-diep);border-color:var(--merk-diep)}
.r4keus[aria-pressed="true"] .r4vakje .ico{opacity:1}
.r4merk{min-height:44px;padding:0 11px;border:2px solid var(--gray-300);border-radius:999px;background:var(--vlak);font:inherit;font-size:13px;font-weight:700;
  color:var(--gray-900);cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.r4merk[aria-pressed="true"]{border-color:var(--merk);background:var(--merk-tint)}
.r4merk .ico{width:15px;height:15px;color:var(--merk-diep)}
.r4maten{display:flex;align-items:center;gap:2px;margin-top:2px;flex-wrap:wrap}
.r4maatkop{font-size:13px;color:var(--gray-500);margin-right:2px}
.r4maat{min-height:44px;min-width:44px;padding:0;border:none;background:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:inherit}
.r4maat span{min-width:36px;height:30px;padding:0 8px;box-sizing:border-box;border:2px solid var(--gray-300);border-radius:8px;background:var(--vlak);
  font-size:13px;font-weight:800;color:var(--gray-900);display:inline-flex;align-items:center;justify-content:center}
.r4maat[aria-pressed="true"] span{border-color:var(--merk);background:var(--merk-tint)}
.r4maatzin{font-size:13px;color:var(--gray-700);margin-left:4px}
.r4past{display:flex;gap:6px;align-items:flex-start;font-size:13px;margin-top:4px;color:var(--gray-700)}
.r4past .ico{width:16px;height:16px;flex:none;margin-top:1px}
.r4past.ok{color:var(--goed)}
.r4past.onzeker,.r4past.onbekend{color:var(--let)}
.r4past.niet{color:var(--gray-700)}
/* R4: de velden van de soort (in_lijst). */
.r4velden{font-size:13px;color:var(--gray-700);margin-top:4px;line-height:1.45}
.r4vink{width:44px;height:44px;border:none;background:none;cursor:pointer;padding:0;display:inline-flex;align-items:center;justify-content:center}
.r4vak{width:26px;height:26px;border-radius:8px;border:2px solid var(--gray-500);background:var(--vlak);display:inline-flex;align-items:center;justify-content:center}
.r4vak .ico{width:17px;height:17px;color:#fff;opacity:0;stroke-width:2.8}
.r4vink[aria-checked="true"] .r4vak{background:var(--merk-diep);border-color:var(--merk-diep)}
.r4vink[aria-checked="true"] .r4vak .ico{opacity:1}
.r4vink[aria-disabled="true"]{cursor:default}
.r4nietdoor{margin-top:6px}
.r4nietdoor summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--gray-500)}
.r4nietdoor summary::-webkit-details-marker{display:none}
.r4nietdoor .r4chev{width:16px;height:16px;transition:transform .15s}
.r4nietdoor[open] .r4chev{transform:rotate(90deg)}
.r4uitleg{font-size:var(--t-toel);color:var(--gray-700);margin:0 0 4px}
/* R5 */
.r5tabel{display:grid;grid-template-columns:200px repeat(var(--r5kol),minmax(0,1fr));background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;overflow:hidden;margin-top:12px}
.r5rij,.r5groep{display:contents}
.r5tabel>.r5rij>div,.r5tabel>.r5groep>div{border-bottom:1px solid var(--gray-100);padding:8px 14px;min-width:0}
.r5tabel>.r5rij>div+div{border-left:1px solid var(--gray-100)}
.r5groep>div{grid-column:1/-1;background:var(--papier);font-size:13px;font-weight:800;color:var(--merk-diep)}
.r5lab{font-size:13px;font-weight:600;color:var(--gray-700)}
.r5lab small{display:block;font-size:13px;font-weight:400;color:var(--gray-500);margin-top:2px}
.r5rij.kop>div{border-bottom:1px solid var(--gray-300)}
.r5kolkop{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.r5kolkop.advies{background:transparent}
.r5rij.kop>div:has(.r5kolkop.advies){background:var(--goed-tint)}
.r5naam{font-size:17px;font-weight:800;line-height:1.15}
.r5niet{font-size:13px;color:var(--let);font-weight:700}
.r5cel{font-size:13.5px;line-height:1.4}
.r5t{font-weight:700}
.r5t.vet{font-weight:800}.r5t.goed{color:var(--goed);font-weight:800}.r5t.sub{color:var(--subsidie)}.r5t.let{color:var(--let)}
.r5t.stil{color:var(--gray-500);font-weight:500}.r5t.zacht{font-weight:500}
.r5sub{display:block;font-size:13px;color:var(--gray-500)}
.r5sub.let{color:var(--let)}
.r5sub.goed{color:var(--goed)}
.r5tabel.klein{margin-top:10px}
.r5alle{margin-top:12px}
.r5alle summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:var(--merk-diep)}
.r5alle summary::-webkit-details-marker{display:none}
.r5alle summary .ico{width:18px;height:18px}
.r5alle[open] .r4chev{transform:rotate(90deg)}
.r5voet{font-size:var(--t-toel);color:var(--gray-500);margin:12px 0 0}
/* R6 */
.wpadvies{display:flex;align-items:center;gap:10px;margin:0 16px 10px;background:var(--papier);border:1px solid var(--gray-100);border-radius:11px;padding:6px 6px 6px 12px;font-size:13.5px;line-height:1.4}
.wpadvies>.ico{width:19px;height:19px;flex:none;color:var(--merk-diep)}
.wpadvies>span{flex:1}
.r3keuze{margin:12px 0 0}
.wpmeld .r4weg{margin-left:auto}
/* R7 */
.r7{margin-top:26px}
.r7kop{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap}
.r7kop .trajkopje{margin:0}
.r7onder{margin:4px 0 0;font-size:var(--t-toel);color:var(--gray-700)}
.r7kop .trajknop{min-height:48px;font-size:15px;padding:0 18px}
.r7kop .trajknop .ico{width:19px;height:19px}
.r7kop .trajknop[aria-disabled="true"]{cursor:default}
.r7>.hkmelding{margin-top:10px}
.r7lijst{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.r7regel{background:var(--vlak);border:1px solid var(--gray-300);border-radius:13px;padding:10px 16px;display:grid;
  grid-template-columns:auto minmax(0,1fr) 160px 110px 120px 140px;gap:12px;align-items:center}
.r7regel.niet{border-style:dashed}
.r7wie small{display:block;font-size:13px;color:var(--gray-500)}
.r7wie b{font-size:15px;font-weight:800}
.r7bron{font-size:13px;color:var(--gray-700)}
.r7pm{font-size:13.5px}.r7pm b{color:var(--goed)}
.r7tvt{font-size:13.5px}
.r7status{font-size:13px;font-weight:800;display:flex;align-items:center;gap:5px;justify-content:flex-end;color:var(--gray-500)}
.r7status .ico{width:17px;height:17px;flex:none}
.r7status.aan{color:var(--goed)}.r7status.keuze{color:var(--info)}
.r7afwijk{display:flex;gap:10px;align-items:flex-start;background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:11px 13px;margin-top:10px;font-size:13.5px;line-height:1.45}
.r7afwijk .ico{width:20px;height:20px;flex:none;color:var(--merk-diep)}
/* De resultaatpagina: één regel per maatregel (R3). */
.ad-waaromzin{margin:6px 0 0;font-size:var(--t-toel);line-height:1.45}
.ad-waaromzin.keuze{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
@media (max-width:1100px){
  .r4keus{border-radius:999px}
  .r5tabel{grid-template-columns:150px repeat(var(--r5kol),minmax(0,1fr))}
  .r5tabel>.r5rij>div,.r5tabel>.r5groep>div{padding:7px 10px}
  .r5naam{font-size:14.5px}
  .r7regel{grid-template-columns:auto minmax(0,1fr) auto;row-gap:4px}
  .r7bron{grid-column:2}
  .r7pm,.r7tvt{grid-column:2}
  .r7status{grid-column:3;grid-row:1}
}
@media (max-width:640px){
  .r3kaart{padding:13px 14px;border-radius:16px}
  .r3naam{font-size:21px}
  .r3getallen{width:100%;justify-content:space-between;text-align:left;gap:8px}
  .r3getallen b{font-size:16px}
  .r3knoppen{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .r3knoppen .r3zet{grid-column:1/-1;justify-content:center}
  .r3knoppen .trajknop{justify-content:center}
  .r3waarom .r3reden:nth-child(n+4){display:none}
  .r3reden .r3lang{display:none}.r3reden .r3kort{display:inline}
  .r4keus{flex:none;min-height:44px}
  .r4keus .r4lang{display:none}
  .r4keus .r4kort{display:inline}
  .r5tabel:not(.klein){display:none}
  .r5tabel.klein{grid-template-columns:110px repeat(var(--r5kol),minmax(0,1fr));font-size:13px}
  .r7regel{padding:9px 12px}
  .r7regel .rico{display:none}
  .r7regel{grid-template-columns:minmax(0,1fr) auto}
  .r7bron,.r7tvt{display:none}
  .r7pm{grid-column:2;grid-row:1;text-align:right}
  .r7status{grid-column:1/-1;grid-row:auto;justify-content:flex-start}
  .wpadvies{flex-wrap:wrap}
  .wpadvies .r4weg{width:100%}
}

/* T4: waar dit advies op rust, op het vel van het rapport (ontwerp T en
   Adviesrapport v2, 1.72). Op papier staat dezelfde opbouw licht
   (#rapportVel) en in de pdf met tabellen (de opmaak van de pdf op de server). */
.irapgrens{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center;background:var(--merk-diep);color:var(--vlak);
  border-radius:var(--r-m);padding:14px 18px}
.irapgrensgetal span{display:block;font-size:13px;opacity:.85}
.irapgrensgetal b{display:block;font-size:26px;font-weight:800;letter-spacing:-.02em}
.irapgrensgetal em{display:block;font-style:normal;font-size:13px;font-weight:700;color:var(--goed-op-diep)}
.irapgrens p{margin:0;font-size:13px;line-height:1.55}
.iraprust h3{margin:6px 0 0}
.iraprusttabel{width:100%;border-collapse:collapse;border:1px solid var(--gray-300);font-size:13px;line-height:1.45}
.iraprusttabel th{text-align:left;font-size:13px;font-weight:800;color:var(--gray-500);background:var(--papier);padding:6px 10px}
.iraprusttabel td{padding:7px 10px;border-top:1px solid var(--gray-100);vertical-align:top}
.iraprusttabel .irrm,.iraprusttabel .irrw{font-weight:800}
.iraprusttabel .irrw{white-space:nowrap}
.iraprusttabel .irrs.goed{color:var(--goed)}.iraprusttabel .irrs.let{color:var(--let)}.iraprusttabel .irrs.info{color:var(--info)}
.iraprusttabel .irro{color:var(--gray-700)}
.iraprustgeen{margin:0;font-size:13px;color:var(--gray-700)}
.iraprustbuiten{background:var(--papier);border:1px solid var(--gray-300);border-radius:var(--r-m);padding:10px 14px}
.iraprustbuiten b{font-size:13.5px}
.iraprustbuiten p{margin:2px 0 0;font-size:13px;line-height:1.55;color:var(--gray-700)}
.iraprustaan{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.iraprustaan>div{border:1px solid var(--gray-300);border-radius:var(--r-m);padding:10px 12px;font-size:13px;line-height:1.5}
.iraprustaan b,.iraprustvast b{display:block;font-size:13px}
.iraprustaan span,.iraprustvast span{display:block}
.iraprustvast{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:9px;background:var(--merk-tint);border:1px solid var(--merk-zacht);
  border-radius:var(--r-m);padding:10px 14px;font-size:13px;line-height:1.55;color:var(--gray-700)}
.iraprustvast b{color:var(--merk-diep)}
/* Sinds dit rapport herzien (T4): in Mijn woonplan bij de versie. */
.wpherzien{display:flex;gap:6px;align-items:flex-start;margin-top:6px;font-size:13px;line-height:1.45;color:var(--let-tekst);
  background:var(--let-tint);border-radius:9px;padding:6px 9px}
.wpherzien .ico{width:16px;height:16px;flex:none;margin-top:2px;color:var(--let)}
@media (max-width:640px){
  .irapgrens{grid-template-columns:1fr;gap:6px}
  .iraprustaan,.iraprustvast{grid-template-columns:1fr}
  .iraprusttabel thead{display:none}
  .iraprusttabel,.iraprusttabel tbody,.iraprusttabel tr,.iraprusttabel td{display:block}
  .iraprusttabel{border:none}
  .iraprusttabel tr{border:1px solid var(--gray-300);border-radius:12px;padding:8px 10px;margin-bottom:8px}
  .iraprusttabel td{border:none;padding:1px 0}
}

/* ================= T3: waar dit voorstel op rust (ontwerp T, 1.72) =================
   De knop op de regel in stap 4 en het blok eronder; hetzelfde blok staat in
   laag 4 van "Alles wat we doorrekenden". Een toestand is nooit alleen een
   kleur: elk item zegt in woorden waar zijn waarde vandaan komt en of hij het
   voorstel kan omdraaien, en een gekozen "stel dat" krijgt een vinkje.
   Raakvlakken 44px. */
.trrustknop{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:6px;padding:0 12px;border:2px solid var(--gray-300);
  border-radius:11px;background:var(--vlak);font:inherit;font-size:13px;line-height:1.3;color:var(--gray-900);cursor:pointer;text-align:left}
.trrustknop:hover{border-color:var(--merk-zacht)}
.trrustknop[aria-expanded="true"]{border-color:var(--merk-diep);background:var(--merk-tint)}
.trrustknop .ico{width:18px;height:18px;flex:none;color:var(--merk-diep)}
.trrustknop b{color:var(--merk-diep)}
.trrustknop b.geen{color:var(--gray-500)}
.trrustknop .trpijl{color:var(--gray-500);transition:transform .15s}
.trrustknop[aria-expanded="true"] .trpijl{transform:rotate(90deg)}
.trajregel.trustopen{opacity:1;align-items:start}
/* De knop in een eigen cel: op een groot scherm onder de naam, op de
   telefoon over de hele breedte van de regel (T3). */
.trajregel>.rrust{grid-column:3/4;margin-top:-6px}
.trajregel>.rrust .trrustknop{margin-top:0}
.trajregel>.trrust{grid-column:1/-1}
@media(max-width:760px){
  .trajregel>.rrust{grid-column:1/-1;margin-top:0}
  .trajregel>.rrust .trrustknop{width:100%}
  .trajregel>.rrust .trrustknop>span{flex:1}
}
.trrust{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--gray-300);padding-top:12px;margin-top:2px}
.ad-spoor .trrust{margin-top:12px}
.trrustkop{display:flex;flex-direction:column;gap:3px}
.trrustkop>b{font-size:13px;font-weight:800;color:var(--gray-500)}
.trrustkop p{display:flex;gap:7px;align-items:center;margin:0;font-size:var(--t-toel);font-weight:700;color:var(--merk-diep)}
.trrustkop p.goed{color:var(--goed)}
.trrustkop .ico{width:19px;height:19px;flex:none}
.tritem{border:2px solid var(--gray-300);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--vlak)}
.tritem.om{border-color:var(--merk-diep)}
.tritemkop{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.tritemkop b{font-size:14px;font-weight:800}
.tritemkop b.tn{font-size:15px;white-space:nowrap}
.trsoort{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;border-radius:999px;padding:3px 9px;
  color:var(--let);background:var(--let-tint)}
.trsoort .ico{width:15px;height:15px;flex:none}
.trsoort.goed{color:var(--goed);background:var(--goed-tint)}
.trsoort.info{color:var(--info);background:var(--info-tint)}
.trom{display:flex;gap:6px;margin:0;font-size:13px;line-height:1.45;color:var(--gray-500)}
.trom.om{color:var(--merk-diep);font-weight:700}
.trom .ico{width:17px;height:17px;flex:none;margin-top:1px}
.trtoel{margin:0;font-size:var(--t-toel);line-height:1.45;color:var(--gray-700);background:var(--let-tint);border-radius:9px;padding:7px 9px}
.treigen{display:flex;gap:6px;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:9px;padding:8px 10px;font-size:13px;line-height:1.45;color:var(--let-tekst)}
.treigen>.ico{width:17px;height:17px;flex:none;color:var(--let);margin-top:1px}
.treigen p{margin:0 0 6px}
.trinvoer{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.trinvoer label{font-size:13px;color:var(--gray-700)}
.trveld{display:inline-flex;align-items:center;gap:4px;min-height:44px;box-sizing:border-box;border:2px solid var(--veldrand);border-radius:10px;background:var(--veld);padding:0 8px}
.trveld:focus-within{border-color:var(--merk-diep)}
.trveld.fout{border-color:var(--fout)}
.trveld input{width:48px;min-height:44px;border:none;background:none;font:inherit;font-size:15px;font-weight:800;color:var(--gray-900);text-align:right;font-variant-numeric:tabular-nums}
.trveld span{font-size:13px;color:var(--gray-500)}
.trknop{min-height:44px;padding:0 12px;border:1px solid var(--gray-300);border-radius:10px;background:var(--vlak);font:inherit;font-size:13px;font-weight:700;color:var(--merk-diep);cursor:pointer}
.treigen .trknop{border-color:var(--let-rand);color:var(--gray-900)}
.trfout{flex-basis:100%;display:flex;gap:5px;align-items:center;margin:0;font-size:var(--t-toel);font-weight:700;color:var(--fout)}
.trfout .ico{width:16px;height:16px;flex:none}
.trsteldat{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.trsteldat>span{font-size:13px;font-weight:700;color:var(--gray-700)}
.trstelknoppen{display:flex;gap:6px;flex-wrap:wrap}
.trstel{min-height:44px;min-width:44px;padding:0 11px;border:2px solid var(--gray-300);border-radius:10px;background:var(--vlak);font:inherit;font-size:13px;font-weight:700;color:var(--gray-900);cursor:pointer}
.trstel[aria-pressed="true"]{border-color:var(--merk);background:var(--merk-tint)}
.trstel[aria-pressed="true"]::before{content:"✓ ";content:"✓ "/""}
.trwatals{flex-basis:100%;margin:0;font-size:var(--t-toel);line-height:1.45;color:var(--info)}
.trklein{margin:0;font-size:var(--t-toel);line-height:1.45;color:var(--gray-500)}
.trvoet{margin:0;font-size:var(--t-toel);line-height:1.45;color:var(--gray-500)}
/* ---------- O8 (WA): je advies en Mijn woonplan, 1.88 ---------- */
.o8goed{color:var(--goed);font-weight:800}
/* R5: het menu van je advies, op elke pagina dezelfde omlijsting */
.trajmain.mkader{max-width:1320px;display:block;padding-top:14px}
.mtabs{display:none}
.mwerk{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.mzij{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;min-width:0}
.minhoud{min-width:0}
.mnav{display:flex;flex-direction:column;gap:4px}
.mnav button{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;font-size:15px;font-weight:600;color:var(--gray-900);cursor:pointer;text-align:left}
.mnav button:hover{border-color:var(--merk-zacht)}
.mnav button[aria-current="page"]{border-color:var(--merk-diep);background:var(--merk-tint);font-weight:800;box-shadow:inset 4px 0 0 var(--merk-diep)}
.mnav .ico{width:18px;height:18px;color:var(--merk-diep);flex:none}
.mnav span{flex:1}
.mnav small{display:block;font-size:13px;color:var(--gray-700);font-weight:400}
.mnav .mpijl{color:var(--gray-500);width:16px;height:16px}
.ikeus{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:24px;align-items:start}
@media(max-width:1024px){
  .ikeus{grid-template-columns:minmax(0,1fr)}
  .mtabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;position:sticky;top:0;z-index:6;background:var(--papier);padding:6px 0;margin-bottom:10px}
  .mtabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;min-width:0;padding:4px 2px;border:2px solid var(--gray-300);border-radius:12px;background:#f3f6f5;font:inherit;font-size:13px;font-weight:700;color:var(--gray-900);cursor:pointer}
  .mtabs button[aria-current="page"]{background:var(--merk-diep);border-color:var(--merk-diep);color:#fff;font-weight:800}
  .mtabs .ico{width:18px;height:18px}
  .mtabs span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mwerk{display:block}
  .mzij{position:static;gap:0}
  .mnav{display:none}
}
.o8titel{font-size:clamp(26px,3.4vw,38px);line-height:1.15;margin:0 0 8px;color:var(--gray-900);font-weight:800}
.o8onder{font-size:var(--t-lopend);color:var(--gray-700);margin:0 0 18px;max-width:70ch;line-height:var(--t-regel)}
.o8sectie{margin-top:26px}
.o8h3{font-size:17px;font-weight:800;margin:0 0 10px;color:var(--gray-900)}
.o8h3 span{font-weight:600;color:var(--gray-700);font-size:15px}
.o8nr{width:30px;height:30px;border-radius:50%;background:var(--merk-diep);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex:none}
.o8nr.leeg{background:var(--gray-100);color:var(--gray-700)}
.o8badge{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:800;color:var(--goed);background:var(--goed-tint);border-radius:999px;padding:3px 10px}
.o8badge .ico{width:14px;height:14px}
.o8advlijst{list-style:none;margin:0;padding:0;background:var(--vlak);border:2px solid var(--gray-300);border-radius:var(--r-l);overflow:hidden}
.o8advlijst li{display:flex;align-items:center;gap:12px;padding:8px 16px;border-top:1px solid var(--gray-100);min-height:56px}
.o8advlijst li:first-child{border-top:none}
.o8advnaam{flex:1;min-width:0;font-size:15px}
.o8advnaam span{color:var(--gray-700)}
.o8advbedrag{font-size:16px;white-space:nowrap}
.o8advsom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 16px;margin-top:8px;background:var(--merk-tint);border-radius:var(--r-l);font-size:var(--t-lopend)}
.note.o8boven{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:var(--t-kader)}
.o8boven .ico{width:18px;height:18px;flex:none;color:var(--let);margin-top:2px}
.o8alles{display:flex;flex-direction:column;gap:6px}
.o8allesrij{display:grid;grid-template-columns:30px 40px minmax(0,1fr) auto 210px;align-items:center;gap:12px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:12px;padding:8px 14px}
.o8allesrij.niet,.o8allesrij.kan{background:var(--papier)}
.o8allesnaam{display:flex;flex-direction:column;min-width:0}
.o8allesnaam small,.o8allesgetal small{font-size:13px;color:var(--gray-700)}
.o8allesgetal{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.o8status{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--gray-700)}
.o8status .ico{width:16px;height:16px;flex:none}
.o8status.top,.o8status.advies{color:var(--goed)}
.o8status.jij{color:var(--info)}
.o8status.kan{color:var(--let)}
.o8volg{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:var(--t-toel);color:var(--gray-700);margin:12px 0}
.o8volg>.ico{width:18px;height:18px}
.o8link{background:none;border:none;font:inherit;font-size:14px;font-weight:700;color:var(--merk-diep);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 4px}
.o8verder{margin-top:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;border-top:1px solid var(--gray-300);padding-top:20px}
.o8hints{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:var(--t-lopend);color:var(--gray-700)}
.o8hints li{display:flex;gap:10px;align-items:flex-start}
.o8hints .ico{width:20px;height:20px;color:var(--merk-diep);flex:none;margin-top:1px}
/* Mijn woonplan */
.o8zij{display:flex;flex-direction:column;gap:10px}
.minhoud .wptkvak{max-width:none;padding:0;margin:0 0 12px}
.o8kies{display:none}
.o8zijin{display:flex;flex-direction:column;gap:10px}
.o8plan{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);overflow:hidden}
.o8plankop{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 14px;background:var(--gray-100);color:var(--gray-900);border:none;border-bottom:1px solid var(--gray-300);font:inherit;font-size:15px;cursor:pointer;text-align:left}
.o8plankop b{flex:1}
.o8plankop .ico{width:18px;height:18px}
.o8chev{transform:rotate(90deg);transition:transform .15s}
.o8plankop[aria-expanded="true"] .o8chev,.o8kies[aria-expanded="true"] .o8chev{transform:rotate(-90deg)}
.o8planlijst{padding:8px;display:flex;flex-direction:column;gap:4px}
.o8planlijst[hidden]{display:none}
.o8groep{font-size:13px;font-weight:800;color:var(--gray-700);padding:8px 6px 2px}
.o8regel{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:6px 10px;border:1px solid transparent;border-left:4px solid transparent;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--gray-900)}
.o8regel:hover{background:var(--gray-100)}
.o8regel.nu{background:var(--merk-tint);border-color:var(--merk-zacht);border-left-color:var(--merk)}
.o8regel.uit{color:var(--gray-700)}
.o8regel .o8nr{width:26px;height:26px;font-size:13px}
.o8regeltekst{display:flex;flex-direction:column;min-width:0}
.o8regeltekst b{font-size:14.5px;line-height:1.25}
.o8regeltekst small{font-size:13px;color:var(--gray-700);line-height:1.3}
.o8regelbedrag{font-size:14.5px;white-space:nowrap}
.mvlak.o8mini{width:28px;height:28px;border-radius:8px}
.mvlak.o8mini .ico{width:17px;height:17px}
.o8toevoegen{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:6px;border:2px dashed var(--gray-300);border-radius:10px;background:none;font:inherit;font-size:14.5px;font-weight:700;color:var(--merk-diep);cursor:pointer}
.o8toevoegen:hover,.o8toevoegen.nu{border-color:var(--merk-diep);background:var(--merk-tint)}
.o8toevoegen .ico{width:18px;height:18px}
.o8leeg{padding:6px;font-size:14px;color:var(--gray-700)}
.o8som{background:var(--merk-tint);border-radius:var(--r-l);padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.o8somkop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:15px}
.o8somkop b{font-size:22px;color:var(--merk-diep)}
.o8somzin{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700}
.o8somzin .ico{width:16px;height:16px;flex:none}
.o8somzin.binnen{color:var(--goed)}
.o8somzin.boven{color:var(--fout)}
.o8sompm{font-size:13.5px;color:var(--gray-700)}
.o8som.onder{display:none}
.o8paneel{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:18px 20px;min-width:0}
.o8pkop{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.o8pkoptekst{flex:1;min-width:200px}
.o8vraag{font-size:22px;margin:0;line-height:1.2;color:var(--gray-900)}
.o8tel{margin:2px 0 0;font-size:var(--t-toel);color:var(--gray-700)}
.o8erbij{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--merk-tint);color:var(--gray-900)}
.o8erbij .ico{width:18px;height:18px;flex:none;margin-top:2px}
.o8vglknop{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:12px;border:none;background:var(--merk-diep);color:#fff;font:inherit;font-weight:700;cursor:pointer}
.o8vglknop .ico{width:18px;height:18px}
.o8vglknop[aria-disabled="true"]{opacity:.55;cursor:default}
.o8pbalk{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.o8sort{display:flex;gap:6px;flex-wrap:wrap}
.o8chip{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--gray-300);background:var(--vlak);font:inherit;font-size:14px;cursor:pointer;color:var(--gray-900)}
.o8chip[aria-pressed="true"]{background:var(--merk-tint);border:2px solid var(--merk-diep);font-weight:800}
.o8stil{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;font-size:14px;color:var(--gray-700);cursor:pointer}
.o8stil .ico{width:16px;height:16px}
.o8waarom{display:flex;gap:8px;font-size:var(--t-toel);color:var(--gray-700);margin:6px 0}
.o8waarom .ico{width:18px;height:18px;color:var(--merk-diep);flex:none}
.o8goedkoper{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;margin-top:10px;padding:8px 12px;border:1px solid var(--info-rand);border-radius:12px;background:var(--info-tint);font:inherit;font-size:14px;color:var(--gray-900);text-align:left;cursor:pointer}
.o8goedkoper span{flex:1}
.o8goedkoper b{color:var(--info)}
.o8goedkoper .ico{width:19px;height:19px;color:var(--info);flex:none}
.o8opties{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.o8optie{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:16px;align-items:center;border:2px solid var(--gray-300);border-radius:var(--r-l);padding:12px 14px;background:var(--vlak)}
.o8optie.gekozen{border-color:var(--merk);background:var(--goed-tint)}
.o8onaam{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:16px}
.o8bron{font-size:13px;color:var(--gray-700);margin-top:3px}
.o8bron.let{color:var(--let)}
.o8getallen{display:grid;grid-template-columns:repeat(3,auto);gap:16px;text-align:right}
.o8getallen span{display:flex;flex-direction:column}
.o8getallen small{font-size:13px;color:var(--gray-700)}
.o8getallen b{font-size:16px}
.o8oactie{display:flex;align-items:center;gap:6px}
.o8kiesknop{min-height:44px;padding:0 16px;font-size:15px;border-radius:12px}
.o8gekozen{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--merk-tint);color:var(--merk-diep);font-weight:800;font-size:15px}
.o8gekozen .ico{width:16px;height:16px}
.o8sub{font-size:15px;font-weight:800;margin:18px 0 8px}
.o8niet{display:flex;flex-direction:column;gap:4px}
.o8nietrij{display:flex;justify-content:space-between;gap:6px 12px;flex-wrap:wrap;padding:8px 12px;border:1px solid var(--gray-300);border-radius:10px;background:var(--papier);font-size:14px}
.o8offerte{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin-top:16px;padding:10px 14px;border:2px dashed var(--gray-300);border-radius:var(--r-l);background:none;font:inherit;font-size:15px;color:var(--gray-900);cursor:pointer;text-align:left}
.o8offerte b{color:var(--merk-diep)}
.o8offerte .ico{width:20px;height:20px;color:var(--merk-diep);flex:none}
.o8aanb{margin-top:16px}
.o8aanbknop{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:8px 12px;border:1px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;font-size:14.5px;font-weight:700;color:var(--merk-diep);text-align:left;cursor:pointer}
.o8aanbknop span{flex:1}
.o8aanbknop .ico{width:18px;height:18px;flex:none}
.o8aanbknop[aria-expanded="true"] .o8chev{transform:rotate(-90deg)}
.o8aanbvak{margin-top:8px;padding:4px 14px 12px;border:1px solid var(--gray-300);border-radius:var(--r-l);background:var(--papier)}
.o8aanbvak p{margin:0 0 8px;font-size:14px;color:var(--gray-700);line-height:1.4}
.o8aanbvak .o8sub{margin-top:10px}
.o8aanblijst{list-style:none;margin:8px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.o8aanbrij{border:1px solid var(--gray-300);border-radius:10px;padding:10px 12px 4px;background:var(--vlak)}
.o8aanbrij.laagste{border:2px solid var(--merk);background:var(--goed-tint)}
.o8aanbkop{display:flex;justify-content:space-between;gap:10px;font-size:15px}
.o8aanbtags{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.o8tag{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:13px;background:var(--gray-100);color:var(--gray-900)}
.o8tag .ico{width:14px;height:14px;flex:none}
.o8tag.met,.o8tag.laag{background:var(--goed-tint);color:var(--goed)}
.o8tag.zonder,.o8tag.oud{background:var(--let-tint);color:var(--let-tekst)}
.o8aanbbron{font-size:13px;color:var(--gray-700)}
.o8aanbbron a{display:inline-flex;align-items:center;min-height:44px;color:var(--merk-diep)}
.o8aanbzin{display:flex;gap:6px}
.o8aanbzin .ico{width:16px;height:16px;flex:none;margin-top:2px}
.o8offvak{margin-top:16px}
.o8offknoppen{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px}
.o8offdatum{font-size:13px;color:var(--gray-700)}
.o8r8{margin-top:8px}
.o8uitleg{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.o8voet{font-size:var(--t-toel);color:var(--gray-700);margin:10px 0 0;line-height:1.4}
.o8paneel .wpblok{margin:10px 0}
.o8wie .wpuitv{flex-direction:row;flex-wrap:wrap}
.o8wie .wpuitvknop{flex:1 1 150px;min-height:44px}
.o8wie .wpeffect{display:flex;gap:6px;margin-top:8px}
.o8wie .wpeffect .ico{width:16px;height:16px;flex:none;margin-top:2px}
.o8meer{margin-top:28px;display:flex;flex-direction:column;gap:14px}
.o8buiten{display:flex;flex-direction:column;gap:6px}
.o8buitenrij{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;border:1px solid var(--gray-300);border-radius:10px}
.o8buitentekst{display:flex;flex-direction:column}
.o8buitentekst small{font-size:13px;color:var(--gray-700)}
.o8buitenwie{font-size:13px;font-weight:700;color:var(--gray-700)}
.o8esoorten{margin-top:12px}
.o8terug{margin-bottom:6px}
.o8tabel .r5t.o8beste{font-weight:800;color:var(--goed)}
.o8beste{font-weight:800;color:var(--goed)}
.o8bestewoord{display:inline-flex;align-items:center;gap:3px;font-size:13px;font-weight:800;margin-left:4px}
.o8bestewoord .ico{width:13px;height:13px}
.o8vglmob{display:none}
.o8vglblok{border-top:1px solid var(--gray-300);padding:10px 0}
.o8vgllab{display:block;font-size:14px;margin-bottom:4px}
.o8vglrij{display:flex;justify-content:space-between;gap:10px;font-size:14px;padding:3px 0}
.o8vglrij>span:last-child{text-align:right}
.o8vglknoppen{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.o8vglknoppen>div{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px}
@media(max-width:1024px){
  .o8allesrij{grid-template-columns:30px 40px minmax(0,1fr) auto}
  .o8allesrij .o8status{grid-column:3/-1}
  .o8zij{margin-bottom:12px}
  .o8kies{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 14px;border:2px solid var(--merk-diep);border-radius:var(--r-l);background:var(--vlak);font:inherit;text-align:left;cursor:pointer;color:var(--gray-900)}
  .o8kies .ico{width:18px;height:18px}
  .o8kiestekst{flex:1;display:flex;flex-direction:column;min-width:0}
  .o8kiestekst small{font-size:13px;color:var(--gray-700)}
  .o8zijin{display:none}
  .o8zijin.open{display:flex}
  .o8som.zij{display:none}
  .o8som.onder{display:block;position:sticky;bottom:0;z-index:5;margin-top:12px;padding:0;background:none}
  .o8onderknop{width:100%;display:flex;flex-direction:column;gap:2px;padding:10px 14px;background:var(--merk-tint);border:2px solid var(--merk-diep);border-radius:var(--r-l);box-shadow:0 -4px 14px rgba(0,0,0,.08);font:inherit;text-align:left;cursor:pointer;color:var(--gray-900)}
  .o8paneel{padding:14px}
}
@media(max-width:640px){
  .o8allesrij{grid-template-columns:30px minmax(0,1fr) auto;gap:8px}
  .o8allesrij .mvlak{display:none}
  .o8allesrij .o8status{grid-column:2/-1}
  .o8naar{width:100%;justify-content:center}
  .o8optie{grid-template-columns:minmax(0,1fr);gap:10px}
  .o8getallen{text-align:left;grid-template-columns:repeat(3,minmax(0,1fr))}
  .o8oactie{justify-content:space-between}
  .o8kiesknop{flex:1}
  .o8tabel{display:none}
  .o8vglmob{display:block}
  .o8vraag{font-size:19px}
  .o8pkop .mvlak{display:none}
}
/* ---------- VW en IS: het rechterdeel van Mijn woonplan (ontwerp 3009) ----------
   Een toestand heeft altijd een woord en een pictogram; wat openstaat een balk onderaan. */
.vwsoorten,.isdelen{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:14px 0 6px}
.vwsoort,.isdeelknop{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:64px;min-width:0;padding:8px 12px;font:inherit;text-align:left;cursor:pointer;color:var(--gray-900)}
.vwsoort{border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak)}
.vwsoort[aria-pressed="true"],.isdeel.nu{border-color:var(--merk-diep);box-shadow:inset 0 -4px 0 var(--merk-diep)}
.vwsoort[aria-pressed="true"]{background:var(--merk-tint)}
.vwsoort[aria-disabled="true"]{cursor:default;background:var(--papier)}
.vwsoortkop,.isdeelkop{display:flex;align-items:center;gap:6px;font-size:15px}
.vwsoortkop .ico,.isdeelkop .ico{width:18px;height:18px;flex:none;color:var(--merk-diep)}
.vwsoortkop b,.isdeelkop b{min-width:0;overflow-wrap:anywhere;hyphens:auto}
.vwsoortzin,.isgetal{font-size:13px;color:var(--gray-700)}
.vwst,.isst{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:800;color:var(--gray-700)}
.vwst .ico,.isst .ico{width:15px;height:15px;flex:none}
.vwst.plan,.isst.plan{color:var(--goed)}
.vwst.kan,.isst.kan{color:var(--info)}
.vwst.eerst{color:var(--let)}
.vwfilters{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 4px}
.vwfilter{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.vwfilterkop{font-size:13.5px;font-weight:800;color:var(--gray-700)}
.vwleeg{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0;padding:10px 12px;border:1px dashed var(--gray-500);border-radius:12px;font-size:14px}
.vwleeg>span{flex:1;min-width:200px}
.vwleeg>.ico{width:20px;height:20px;flex:none;color:var(--merk-diep)}
.isdeel{display:flex;flex-direction:column;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);overflow:hidden}
.isdeel.aan{background:var(--goed-tint)}
.isdeelknop{border:none;background:none;flex:1}
.isschakel{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;border:none;border-top:1px solid var(--gray-300);background:none;font:inherit;font-size:14px;font-weight:700;cursor:pointer;color:var(--gray-900)}
.isknop{position:relative;width:40px;height:24px;border-radius:12px;background:var(--gray-500);flex:none}
.isknop::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;font-size:13px;line-height:18px;text-align:center;font-weight:800}
.isschakel[aria-checked="true"] .isknop{background:var(--goed)}
.isschakel[aria-checked="true"] .isknop::after{left:19px;content:"✓";content:"✓"/"";color:var(--goed)}
.isdubbel{display:flex;gap:6px;align-items:flex-start;margin:4px 0 0;font-size:14px;font-weight:700;color:var(--goed)}
.isdubbel .ico{width:18px;height:18px;flex:none}
/* ---------- O: Hulp bij financiën, 1.89 ---------- */
.fnwerk{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-areas:"kop rechts" "inhoud rechts";gap:0 24px;align-items:start}
.fnkop{grid-area:kop}
.fninhoud{grid-area:inhoud;min-width:0}
.fnrechts{grid-area:rechts;align-self:stretch;display:flex;flex-direction:column;gap:12px;min-width:0}
.fntabel{width:100%;border-collapse:separate;border-spacing:0;background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);font-size:14.5px}
.fntabel thead th{font-size:13px;font-weight:800;color:var(--gray-700);text-align:right;padding:10px 14px;border-bottom:1px solid var(--gray-300)}
.fntabel thead th:first-child{text-align:left}
.fntabel td{text-align:right;padding:10px 14px;border-top:1px solid var(--gray-100);white-space:nowrap;vertical-align:top}
.fntabel tbody th{text-align:left;font-weight:400;padding:4px 6px;border-top:1px solid var(--gray-100);white-space:normal}
.fntabel tbody tr:first-child>*{border-top:none}
.fntabel td.sub{color:var(--subsidie)}
.fntabel td small{display:block;font-size:13px;color:var(--gray-700);white-space:normal}
.fntabel tfoot>tr>*{border-top:2px solid var(--gray-900);padding:10px 14px;font-weight:800;text-align:right}
.fntabel tfoot th{text-align:left}
.fnregel{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start;width:100%;min-height:44px;padding:6px 8px;border:none;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--gray-900)}
.fnregel:hover{background:var(--gray-100)}
.fnregeltekst{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.fnregeltekst b{font-size:15px}
.fnregeltekst small{font-size:13px;color:var(--gray-700)}
.fnregeltekst .fnbron,.fnregeltekst .fnhint{display:flex;align-items:flex-start;gap:5px;font-weight:700}
.fnbron .ico,.fnhint .ico{width:15px;height:15px;flex:none;margin-top:1px}
.fnregeltekst .fnbron.offerte{color:var(--goed)}
.fnregeltekst .fnbron.catalogus,.fnregeltekst .fnhint{color:var(--info)}
.fnregeltekst .fnbron.oud{color:var(--let)}
.fnvoet{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-toel);color:var(--gray-700);margin:12px 0 0;line-height:1.45}
.fnvoet>.ico{width:18px;height:18px;flex:none;color:var(--info);margin-top:1px}
.fnvoet .alslink{display:flex;align-items:center;min-height:44px;font-weight:700;text-align:left}
.fnleningen{margin-top:26px;display:flex;flex-direction:column;gap:10px}
.fnstil{font-size:var(--t-toel);color:var(--gray-700);margin:0 0 4px}
.fnlening{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:12px 16px}
.fnlening.nu{border:2px solid var(--merk)}
.fnleningkop{display:flex;justify-content:space-between;gap:10px;align-items:baseline;flex-wrap:wrap}
.fnleningkop b{font-size:15.5px}
.fnleningkop span{font-weight:800;color:var(--goed)}
.fnlening p{margin:4px 0 0;font-size:var(--t-toel);color:var(--gray-700);line-height:1.45}
.fnlening small{display:block;margin-top:4px;font-size:13px;color:var(--gray-500)}
.fnjouw{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;font-weight:800}
.fnjouw b{font-size:20px;color:var(--merk-diep)}
.fnkaart{position:sticky;top:12px;z-index:2;background:var(--merk-diep);color:#fff;border-radius:var(--r-l);padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.fnknaam{font-size:13px;font-weight:700;opacity:.85}
.fnkrij{display:flex;justify-content:space-between;gap:10px;font-size:14px}
.fnkrij.dik{font-weight:800}
.fnkstreep{border-top:1px solid rgba(255,255,255,.25);margin:6px 0}
.fnknetto{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:8px;padding:10px 12px;background:rgba(255,255,255,.1);border-radius:12px}
.fnknetto span{display:flex;flex-direction:column;font-weight:800;font-size:15px}
.fnknetto small{font-size:13px;font-weight:600;opacity:.85}
.fnknetto b{font-size:30px;font-weight:800;line-height:1}
.fnknetto.plus b{color:var(--goed-op-diep)}
.fnkzin{margin:8px 0 0;font-size:var(--t-toel);opacity:.9;line-height:1.4}
.fnvak{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.fnh{font-size:15px;font-weight:800;margin:0}
.fnsoorten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.fnsoort{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:52px;padding:6px 10px;border:2px solid var(--gray-300);border-radius:11px;background:var(--vlak);font:inherit;text-align:left;cursor:pointer;color:var(--gray-900)}
.fnsoort b{font-size:14px}
.fnsoort span{font-size:13px;color:var(--goed);font-weight:700}
.fnsoort[aria-checked="true"]{border-color:var(--merk);background:var(--merk-tint)}
.fnsoort[aria-checked="true"] b::after{content:" ✓";content:" ✓"/""}
.fneigen{display:flex;flex-direction:column;gap:8px}
.fnveld{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:700;color:var(--gray-700)}
.fnveld input{font:inherit;font-size:16px;font-weight:600;color:var(--gray-900);min-height:44px;padding:0 10px;border:2px solid var(--veldrand);border-radius:10px;background:var(--veld);box-sizing:border-box;width:100%}
.fnin{display:flex;align-items:center;gap:6px}
.fnin input{flex:1;min-width:0}
.fnin.fout input{border-color:var(--fout)}
.fnfout{display:flex;gap:6px;align-items:flex-start;margin:0;font-size:var(--t-toel);color:var(--fout);font-weight:700}
.fnfout[hidden]{display:none}
.fnfout .ico{width:16px;height:16px;flex:none;margin-top:2px}
.fninkomen p{margin:0;font-size:var(--t-toel)}
.fninkomen small{display:block;font-size:13px;color:var(--gray-700);margin-top:6px}
.fnknoppen{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.fnschuif{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:baseline}
.fnschuif label,.fnschuif output{font-size:15px;font-weight:800}
.fnschuif input{grid-column:1 / -1;width:100%;height:44px;margin:0;accent-color:var(--knop);cursor:pointer}
.fnschuif.uit label,.fnschuif.uit output{color:var(--gray-500)}
.fnschuif.uit input{opacity:.45;cursor:not-allowed}
.fnonder{position:sticky;bottom:0;z-index:6;display:flex;justify-content:space-between;gap:10px;margin-top:24px;padding:10px 0;background:var(--papier);border-top:1px solid var(--gray-300)}
.fnonder .trajknop{min-height:48px;display:inline-flex;align-items:center;gap:8px}
.fnonder .ico{width:18px;height:18px}
@media(max-width:1024px){
  .fnwerk{grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"kop kop" "inhoud rechts"}
  .fntabel thead{display:none}
  .fntabel,.fntabel tbody,.fntabel tfoot{display:block}
  .fntabel tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px 10px;border-top:1px solid var(--gray-100)}
  .fntabel tbody tr:first-child{border-top:none}
  .fntabel tr>th{grid-column:1 / -1;border:none;padding:0}
  .fntabel tr>td,.fntabel tfoot>tr>*{border:none;padding:2px 4px;text-align:left;white-space:normal}
  .fntabel td::before{content:attr(data-l);display:block;font-size:13px;color:var(--gray-700);font-weight:600}
  .fntabel tfoot tr{border-top:2px solid var(--gray-900)}
}
@media(max-width:640px){
  .fnwerk{grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "rechts" "inhoud";gap:12px}
  .fnkaart{position:static}
  .fnonder{gap:8px}
  .fnonder .trajknop{flex:1;justify-content:center;padding:0 8px;font-size:15px;white-space:nowrap}
}
/* ---------- TP2: je woning, je antwoorden en hulp vragen ----------
   Herkomst altijd als woord, niet alleen als kleur; raakvlakken van 44 px. */
.huiskaart{background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:14px 18px}
.huiskaart .trajkopje{margin:0}
.huisadres{margin:6px 0 0;font-size:var(--t-lopend);color:var(--gray-700)}
.huisgebouw,.huisals,.huislet,.o8letop{display:flex;gap:9px;align-items:flex-start;margin:10px 0 0;font-size:var(--t-kader);line-height:var(--t-regel);
  background:var(--info-tint);border-left:4px solid var(--info);border-radius:0 var(--r-m) var(--r-m) 0;padding:10px 13px}
.huislet,.o8letop{background:var(--let-tint);border-left-color:var(--let);color:var(--let-tekst)}
.huisgebouw .ico,.huisals .ico,.huislet .ico,.o8letop .ico{width:19px;height:19px;flex:none;margin-top:1px}
.huisverschil{margin-top:12px;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:var(--r-l);padding:12px 14px}
.huisverschil.fout{border-width:2px;border-color:var(--let)}
.huisverschil>p{display:flex;gap:9px;align-items:flex-start;margin:0;font-size:var(--t-lopend);color:var(--let-tekst)}
.huisverschil>p .ico{width:20px;height:20px;flex:none}
.huisverschilfout{font-weight:700}
.huisverschilknoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.huisrijen{margin-top:10px;border-top:1px solid var(--gray-100)}
.huisrij{border-bottom:1px solid var(--gray-100);padding:6px 0}
.huisrijkop{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:4px 12px;align-items:center;min-height:44px}
.huisrijkop .hk{color:var(--gray-700);font-size:14.5px}
.huisrijkop .hw{font-size:15.5px;color:var(--merk-diep);text-align:right}
@media(max-width:640px){
  .huisrijkop{grid-template-columns:minmax(0,1fr) auto}
  .huisrijkop .hbron{justify-self:start}
}
.hbron{font-size:13px;font-weight:700;border-radius:var(--r-rond);padding:3px 10px;background:var(--gray-100);color:var(--gray-700);white-space:nowrap}
.hbron.register,.hbron.jij,.hbron.voorpagina{background:var(--goed-tint);color:var(--goed)}
.hbron.aanname{background:var(--let-tint);color:var(--let)}
.huispas{justify-self:end;font:inherit;font-size:14px;font-weight:700;color:var(--goed);background:none;border:0;min-height:44px;padding:0 4px;cursor:pointer;text-decoration:underline}
.huispasvak{background:var(--papier);border-radius:12px;padding:12px;margin:4px 0 6px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.huispasvak .field{width:100%;max-width:340px}
.huispasvak .wizmelding[hidden]{display:none}
.huiskeuzes{display:flex;flex-wrap:wrap;gap:8px}
.huiskeuze{min-height:44px;padding:0 14px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);font:inherit;font-size:15px;
  font-weight:600;color:var(--gray-900);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.huiskeuze .ico{width:17px;height:17px;color:var(--goed)}
.huiskeuze.on{border-color:var(--merk);background:var(--goed-tint);font-weight:800}
.huiskeuzes.letters .huiskeuze{min-width:48px;justify-content:center;font-size:17px;font-weight:800}
.huisvraag{margin-top:18px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);padding:14px 18px}
.huisvraag .trajkopje{margin:0 0 10px}
.huiswaar{margin-top:10px;font-size:var(--t-lopend)}
.huiswaar summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--goed);font-weight:700;text-decoration:underline}
.huiswaar p{margin:4px 0 0;color:var(--gray-700);line-height:1.5}
.huislink{display:inline-flex;align-items:center;min-height:44px;margin-top:6px;font-size:14.5px;font-weight:700;color:var(--goed)}
/* GT2d: reken zonder adres. */
.trajzonder{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-top:12px}
.trajzonder .trajknop{margin-top:0}
.trajzonder>span{font-size:14.5px;color:var(--gray-700)}
.zavp{margin:0 0 10px}
#zaFout{margin-top:14px}
#zaFout[hidden]{display:none}
.zaveld{max-width:340px;margin-top:12px}
.zaveld input{min-height:48px;font-size:16px}
.zamis{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zamis li{display:flex;gap:9px;align-items:flex-start;font-size:var(--t-lopend);line-height:var(--t-regel)}
.zamis .ico{width:19px;height:19px;flex:none;margin-top:1px;color:var(--info)}
.zawoonplan{flex-wrap:wrap;align-items:center;margin:0 0 14px}
.zawoonplan>span{flex:1;min-width:14em}
.zawoonplan .trajknop{margin-top:0}
/* 2a: "Wijzig" opent één vraag in een paneel; op de telefoon van onderen. */
.wizpaneel{position:fixed;inset:0;z-index:150;background:rgba(15,61,62,.45);display:flex;align-items:center;justify-content:center;padding:32px 16px;overflow-y:auto}
.wizpaneelvak{width:100%;max-width:600px;background:var(--vlak);border-radius:20px;padding:22px;display:flex;flex-direction:column;gap:12px;box-shadow:0 10px 30px rgba(15,61,62,.18);max-height:100%;overflow-y:auto}
.wizpaneelvak h2{margin:0;font-size:21px;line-height:1.25}
.wizpaneelvak .uitleg{display:flex;gap:9px;font-size:var(--t-lopend);color:var(--gray-700);line-height:var(--t-regel)}
.wizpaneelvak .uitleg .ico{width:18px;height:18px;flex:none;margin-top:2px}
.wizpaneelgevolg{display:flex;gap:8px;align-items:flex-start;margin:0;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:12px;padding:10px 13px;font-size:var(--t-lopend);color:var(--let-tekst)}
.wizpaneelgevolg[hidden]{display:none}
.wizpaneelgevolg .ico{width:18px;height:18px;flex:none;margin-top:1px}
.wizpaneelknoppen{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.wizpaneelrechts{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap}
#wizPaneelWeet.on{border-style:dashed;border-color:var(--merk-diep);background:var(--merk-tint)}
@media(max-width:640px){
  .wizpaneel{align-items:flex-end;padding:0}
  .wizpaneelvak{border-radius:20px 20px 0 0;max-height:92vh}
}
/* 2b en 2a in route A: waar we mee rekenen, onder de regel. */
.aanrij .awe{grid-column:1/-1;display:flex;gap:7px;align-items:flex-start;font-size:13.5px;color:var(--let-tekst);line-height:1.4}
.aanrij .awe .ico{width:16px;height:16px;flex:none;margin-top:1px}
.antwoord .kop .aherrekend{font-size:13px;font-weight:700;color:var(--goed-op-diep);opacity:1}
/* 2d: wat bedoelen we, en het aanbod na drie keer "Weet ik niet". */
.wizwatbed{display:inline-flex;align-items:center;gap:7px;min-height:44px;margin-top:8px;padding:0;background:none;border:0;font:inherit;
  font-size:15px;font-weight:700;color:var(--goed);cursor:pointer;text-decoration:underline}
.wizwatbed .ico{width:19px;height:19px}
.wizwatbedvak{background:var(--merk-tint);border-radius:12px;padding:10px 14px;font-size:14.5px;line-height:1.45}
.wizwatbedvak p{margin:3px 0}
.wizaanbod{margin-top:16px;background:var(--merk-diep);color:#fff;border-radius:18px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.wizaanbod b{font-size:16.5px}
.wizaanbod span{font-size:14.5px;color:rgba(255,255,255,.9)}
.wizaanbod .trajknop.stil{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.wizanders{margin-top:12px;max-width:420px}
.verbruikmodus{margin-bottom:12px}
.verbruikom{margin-top:6px}
/* 3: zonder geld. */
.geengeld{display:flex;gap:12px;align-items:center;width:100%;text-align:left;margin-top:16px;min-height:62px;padding:12px 16px;
  border:2px solid var(--gray-300);border-radius:var(--r-l);background:var(--vlak);font:inherit;color:var(--gray-900);cursor:pointer}
.geengeld b{display:block;font-size:16.5px}
.geengeld span span{display:block;font-size:14px;color:var(--gray-700);margin-top:2px}
.geengeld .bol{width:26px;height:26px;border-radius:50%;border:2px solid var(--gray-300);display:inline-flex;align-items:center;justify-content:center;flex:none}
.geengeld .bol .ico{width:15px;height:15px;opacity:0;color:var(--merk-op)}
.geengeld.on{border-color:var(--merk);background:var(--goed-tint)}
.geengeld.on .bol{background:var(--merk);border-color:var(--merk)}
.geengeld.on .bol .ico{opacity:1}
.geengeldlijst{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.geengeldlijst li{display:flex;gap:8px;align-items:flex-start;font-size:var(--t-lopend)}
.geengeldlijst .ico{width:17px;height:17px;flex:none;margin-top:2px}
.betalenhulp{margin-top:14px;background:var(--vlak);color:var(--gray-900);border:1px solid var(--gray-300);border-radius:16px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:14.5px}
.betalenhulp b{font-size:16px}
.betalenhulp ul{margin:0;padding-left:20px}
/* TP7 2c: wat niet in je bedrag past. */
.trajnietpast{border-top:1px dashed var(--gray-300);padding-top:12px}
.trajnietpastzin{margin:4px 0 8px;font-size:var(--t-toel);color:var(--gray-700)}
.trajerbij.nietpast{background:var(--papier);border-style:dashed}
.trajrest{margin:12px clamp(16px,4vw,32px) 0}
/* 1d: wie huurt, in Mijn woonplan. */
.wphuur{background:var(--vlak);border:1px solid var(--gray-300);border-radius:18px;padding:16px 18px;margin-bottom:14px}
.wphuur .o8vraag{margin:0;font-size:20px}
.wphuur>p{margin:6px 0 0;font-size:var(--t-lopend);color:var(--gray-700)}
.wphuurlijst{list-style:none;margin:10px 0 0;padding:0;border-top:1px solid var(--gray-100)}
.wphuurlijst li{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--gray-100);font-size:var(--t-lopend)}
.wphuurlijst li span{font-size:13.5px;color:var(--gray-700)}
.wpverhuur{margin-top:12px;background:var(--merk-diep);color:#fff;border-radius:16px;padding:14px 16px;font-size:15px}
.wpverhuur b{font-size:17px}
.wpverhuur p{margin:6px 0 0;color:rgba(255,255,255,.92)}
.wpverhuur ul{margin:6px 0 0;padding-left:20px}
/* TP5 2b en 2c: de brief, het agendapunt, je rechten. */
.wpverhuurkop{margin:0;font-size:18px;color:#fff}
/* PC 63: onder de vaste tabbladen, niet erachter. */
#wpVerhuurKop,#wpVveKop{scroll-margin-top:calc(var(--kspoor-h,0px) + 96px)}
.briefkeuzes{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.briefkeuze{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:2px solid rgba(255,255,255,.7);border-radius:22px;background:transparent;color:#fff;font:inherit;font-size:15px;cursor:pointer}
.briefkeuze[aria-pressed="true"]{background:#fff;color:var(--merk-diep);border-color:#fff;font-weight:800}
.briefkeuze .ico{width:16px;height:16px;flex:none}
.brieftekst{display:block;width:100%;box-sizing:border-box;margin:4px 0 0;padding:12px 14px;border:2px solid var(--gray-300);border-radius:12px;background:var(--vlak);color:var(--gray-900);font:inherit;font-size:15px;line-height:1.5;resize:vertical}
.briefknoppen{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.briefknoppen .trajknop{text-decoration:none}
.wpverhuur .briefknoppen .trajknop{border-color:#fff}
.briefmeld{min-height:20px;margin:6px 0 0;font-size:var(--t-toel);font-weight:700}
.wprechten{margin-top:14px}
.wprechten .o8h3{margin:14px 0 6px}
.rechtlijst{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:var(--t-lopend);line-height:var(--t-regel)}
.rechtlijst .bron,.rechtloket .bron{font-weight:700;color:var(--merk-diep);white-space:nowrap}
.rechtloket{margin:10px 0 0;font-size:var(--t-lopend);line-height:var(--t-regel)}
.wphulp{margin-top:14px;font-size:15px}
.o8advwie{margin-left:auto;font-size:14.5px;font-weight:700;color:var(--gray-700);white-space:nowrap}
.o8ander{margin-top:18px}
.o8stekker{margin:8px 0 0}
.irapbrief p{white-space:pre-wrap;margin:6px 0 0;padding:10px 12px;border:1px dashed var(--gray-300);border-radius:10px;font-size:14px}
.iraprecht{margin:4px 0 0;padding-left:18px}
.irapbron{color:var(--gray-700);font-size:13px}
/* 4: hulp vragen. */
.gmain{max-width:760px}
.gorg{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;background:var(--vlak);border:1px solid var(--gray-300);border-radius:18px;padding:14px 16px}
.gorginit{width:48px;height:48px;border-radius:12px;background:var(--merk-diep);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;flex:none}
.gorgtekst{display:flex;flex-direction:column;gap:3px;flex:1;min-width:200px;font-size:14.5px}
.gorgtekst b{font-size:17px}
.gorgtekst span{color:var(--gray-700)}
.gvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17em),1fr));gap:14px;margin-top:16px}
.gveld label{font-size:15px;font-weight:700;color:var(--gray-900)}
.gveld input{font:inherit;font-size:16px;border:2px solid var(--veldrand);border-radius:var(--r-m);padding:0 14px;min-height:52px;background:var(--veld);color:var(--gray-900);width:100%;box-sizing:border-box}
.gveld input:focus{border-color:var(--merk)}
.gveld input.veldfout{border-color:var(--fout)}
.gwaarom{font-size:13.5px;color:var(--gray-700);line-height:1.4}
.gkrijgt{margin-top:18px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:18px;padding:14px 16px}
.gkrijgt .trajkopje{margin:0}
.gkrijgtlijst{margin:8px 0 0}
.gkrijgtlijst>div{display:flex;flex-wrap:wrap;gap:2px 12px;padding:7px 0;border-top:1px solid var(--gray-100);font-size:15px}
.gkrijgtlijst dt{min-width:110px;color:var(--gray-700)}
.gkrijgtlijst dd{margin:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;flex:1;min-width:0}
.gkrijgtlijst .hbron{background:var(--gray-100);color:var(--gray-700)}
.gafwijk{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;background:var(--let-tint);border:1px solid var(--let-rand);border-radius:12px;padding:10px 13px;font-size:var(--t-kader);color:var(--let-tekst)}
.gafwijk .ico{width:18px;height:18px;flex:none;margin-top:1px}
/* TP5 3: bel mij terug. */
.gbel{margin-top:14px;background:var(--vlak);border:2px solid var(--merk-diep);border-radius:18px;padding:0 16px}
.gbel summary{display:flex;align-items:center;gap:8px;min-height:52px;cursor:pointer;list-style:none;font-size:16px;font-weight:800;color:var(--gray-900)}
.gbel summary::-webkit-details-marker{display:none}
.gbel summary .ico{width:20px;height:20px;flex:none}
.gbel summary .o8chev{margin-left:auto}
.gbel[open] summary .o8chev{transform:rotate(-90deg)}
.gbelin{padding:0 0 16px}
.gbeltijd{border:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px}
.gbeltijd legend{margin-bottom:4px}
.gbelin .trajknop{margin-top:12px}
.gzelfbel{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-size:var(--t-lopend);line-height:var(--t-regel)}
.gzelfbel .ico{width:18px;height:18px;flex:none;margin-top:2px}
.gzelfbel a{font-weight:700;color:var(--merk-diep)}
.glees{margin-top:8px;font-size:14.5px}
.glees summary{min-height:44px;display:inline-flex;align-items:center;cursor:pointer;color:var(--goed);font-weight:700;text-decoration:underline}
.glees p{margin:6px 0 0;color:var(--gray-700);line-height:1.5}
.gklaar{background:var(--goed-tint);border:2px solid var(--merk);border-radius:18px;padding:16px 18px;margin-top:8px}
.gklaar h2{display:flex;gap:10px;align-items:center;margin:0;font-size:24px}
.gklaar h2 .ico{width:26px;height:26px;color:var(--goed);flex:none}
.gklaar p{margin:10px 0 0;font-size:var(--t-lopend)}
.gstappenlicht{list-style:none;padding:0;border-top:0;margin-top:10px}
.gstappenlicht .gstap span{opacity:1;color:var(--gray-700)}
/* 5: groot en toegankelijk (200 % tekst, 360 px). De kop breekt af, het merk
   blijft heel; elke icoonknop heeft een woord; de kaarten A en B staan onder
   elkaar; een vaste balk die te hoog wordt, scrolt mee (kBalkMeten). */
.kbalk{flex-wrap:wrap}
.kmerk b{white-space:nowrap}
.kham .kwoord{font-size:14.5px;font-weight:700;margin-left:6px}
.kmelding{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}
.trajwegen{grid-template-columns:repeat(auto-fit,minmax(min(100%,18em),1fr))}
.kspoorrij{flex-wrap:wrap}
.kspoor{min-width:min(100%,4em)}
.kspoorrij.los{position:static}
.kactie{flex-wrap:wrap}
body.tv2 .kactie .wizfoot{flex-wrap:wrap}
@media(max-width:860px){
  .kplan .klabel{display:inline}
  .kactie .wizfoot>#wizTerug span.t{display:inline}
  .kactie .wizfoot>#wizTerug{padding:0 11px;gap:6px}
}
/* ---- TP7 1b: wat wil je oplossen? ---- */
.oplossen{margin:0 0 22px}
.oplosvraag{font-size:clamp(22px,2.6vw,28px);line-height:1.2;margin:0 0 6px;color:var(--gray-900);font-weight:800}
.oploskeuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.oploskeuze{display:flex;align-items:center;gap:10px;min-height:54px;padding:8px 14px;border:2px solid var(--gray-300);border-radius:14px;background:var(--vlak);font:inherit;font-size:16px;font-weight:600;color:var(--gray-900);text-align:left;cursor:pointer}
.oploskeuze:hover{border-color:var(--merk-diep)}
.oploskeuze[aria-pressed="true"]{border-color:var(--merk-diep);background:var(--merk-tint);font-weight:800}
.oplosvak{width:24px;height:24px;flex:none;border:2px solid var(--gray-500);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;background:var(--papier)}
.oplosvak .ico{width:16px;height:16px;visibility:hidden}
.oploskeuze[aria-pressed="true"] .oplosvak{border-color:var(--merk-diep);background:var(--merk-diep);color:#fff}
.oploskeuze[aria-pressed="true"] .oplosvak .ico{visibility:visible}
.o8oplos{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;margin:-8px 0 16px;font-size:var(--t-lopend);color:var(--gray-700)}
.o8oplos>.ico{width:18px;height:18px;color:var(--merk-diep);flex:none}
/* ---- TP7 1b en 1c: per maatregel wat hij oplost en hoe we rekenden ---- */
.o8advlijst li.o8advrij{display:block;padding:10px 16px}
.o8advkop{display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-height:40px}
.o8advkop .o8advnaam{flex:1 1 7em}
.o8lost,.o8extra{display:flex;gap:6px;align-items:flex-start;margin:4px 0 0 42px;font-size:var(--t-lopend);font-weight:700}
.o8lost{color:var(--goed)}
.o8extra{color:var(--let)}
.o8lost .ico,.o8extra .ico{width:16px;height:16px;flex:none;margin-top:3px}
.o8reken{margin:6px 0 0 42px}
.o8reken summary{display:flex;align-items:center;gap:6px;min-height:44px;cursor:pointer;list-style:none;font-size:14.5px;font-weight:700;color:var(--merk-diep)}
.o8reken summary::-webkit-details-marker{display:none}
.o8reken summary .ico{width:18px;height:18px;flex:none}
.o8reken[open] summary .o8chev{transform:rotate(-90deg)}
.o8rekenregels{background:var(--papier);border-radius:10px;padding:8px 12px;display:flex;flex-direction:column;gap:4px}
.o8rekenregels p{margin:0;font-size:var(--t-toel);color:var(--gray-900)}
.o8vent{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:12px 16px;border:1px solid var(--info-rand);background:var(--info-tint);border-radius:var(--r-l);font-size:15px}
.o8vent>.ico{width:22px;height:22px;color:var(--info);flex:none;margin-top:2px}
.o8vent p{margin:4px 0 0}
/* ---- TP7 1a: hulp van een energiecoach ---- */
.coachblok{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;padding:16px 18px;background:var(--merk-diep);color:#fff;border-radius:var(--r-l)}
.coachblokico .ico{width:26px;height:26px;color:var(--goed-op-diep)}
.coachbloktekst{flex:1;min-width:220px}
.coachbloktekst h3{margin:0 0 4px;font-size:17px;color:#fff}
.coachbloktekst p{margin:0;font-size:var(--t-lopend);line-height:var(--t-regel)}
.coachblok .trajknop{border-color:#fff;text-decoration:none}
.coachblok.kop{margin:0 0 14px;padding:12px 16px}
/* ---- W5: "met hulp van" in de kop en het logo van de stichting (js/via.js) ---- */
.via-kop{display:inline-flex;align-items:center;gap:9px;padding-left:12px;border-left:1px solid var(--gray-300);min-height:40px;font-size:14px;color:var(--gray-700);min-width:0}
.via-kop[hidden]{display:none}
.via-tegel{width:30px;height:30px;border-radius:9px;background:var(--via-k1);color:var(--via-k1op);display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex:none;overflow:hidden}
.via-tegel.met{background:#fff;border:1px solid var(--gray-300)}
.via-tegel img{width:100%;height:100%;object-fit:contain}
.via-naam{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.via-naam b{color:var(--gray-900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch;display:inline-block;vertical-align:bottom}
.via-weg{background:none;border:0;padding:0;margin:-10px 0;min-height:44px;font:inherit;font-size:13px;color:var(--merk-diep);text-decoration:underline;cursor:pointer;text-align:left}
.via-strook{display:flex;gap:11px;align-items:center;background:var(--vlak);border:1px solid var(--gray-300);border-radius:14px;padding:12px 16px;max-width:520px;margin-top:14px;font-size:15px;line-height:1.4}
.via-strook[hidden]{display:none}
.via-strook .via-tegel{width:40px;height:40px;border-radius:11px}
.coachblok .via-tegel{width:44px;height:44px;border-radius:12px}
/* in de tool een eigen regel onder het logo: Mijn woonplan en het menu blijven waar ze waren */
@media(max-width:1200px){
  .kbalk .via-kop{order:9;flex:1 0 100%;border-left:0;padding:0 0 8px;min-height:0}
  .kbalk .via-naam{flex-direction:row;align-items:center;gap:14px}}
@media(max-width:620px){.via-kop .via-woord{display:none}.via-naam b{max-width:14ch}.kbalk .via-naam b{max-width:20ch}}
/* ---- GM: hulp in je gemeente zonder stichting (coachblok, Hulp vragen, huurders) ---- */
.gmvak{margin:12px 0 0}
.gmvak p{margin:0 0 6px}
ul.gmhulp{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.gmhulp li{display:flex;flex-direction:column;gap:2px;font-size:var(--t-lopend);line-height:var(--t-regel)}
.gmsoort{font-size:13.5px}
.gmlinks{display:flex;flex-wrap:wrap;gap:0 16px}
.gmlinks a{color:inherit;font-weight:700;text-decoration:underline;display:inline-flex;align-items:center;min-height:44px}
.wpverhuur .o8h3.glandkop{color:#fff;margin-top:14px}
.wpverhuur ul.glandelijk{padding-left:0;margin-bottom:0}
/* ---- TP7 1e: een rapport zonder maatregelen ---- */
.irapleeg h3{font-size:15px;margin:14px 0 6px}
/* ---- TP7 1f: een laadteken, pas na een seconde (geen flits bij snel rekenen) ---- */
.laadvak{display:flex;align-items:center;gap:12px;max-width:520px;margin:32px auto;padding:18px;background:var(--vlak);border:1px solid var(--gray-300);border-radius:var(--r-l);font-size:16px;font-weight:700;color:var(--gray-900);opacity:0;animation:laadIn .2s ease 1s forwards}
.laadvak.zweef{position:fixed;left:16px;right:16px;bottom:24px;margin:0 auto;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.laadteken{width:28px;height:28px;flex:none;border-radius:50%;border:3px solid var(--gray-300);border-top-color:var(--merk-diep);animation:laadDraai .9s linear infinite}
@keyframes laadIn{to{opacity:1}}
@keyframes laadDraai{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.laadteken{animation:none}}
body.rekent #wizCard{cursor:progress}
body.rekent #wizCard button,body.rekent #wizCard a,body.rekent #wizCard input{pointer-events:none}
@media(max-width:640px){
  .oploskeuzes{grid-template-columns:minmax(0,1fr)}
  .o8lost,.o8extra,.o8reken{margin-left:0}
}
/* ---- GT 1: zo betaal je het, de subsidie per regel, buiten je huis ---- */
.betaalblok{margin:0 0 18px;padding:14px 16px;background:var(--vlak);border:2px solid var(--merk-diep);border-radius:var(--r-l)}
.betaalblok.plan{margin:10px 0 0}
.betaalkop{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--gray-900)}
.betaalrijen{margin:0;display:flex;flex-direction:column;gap:6px}
.betaalrijen>div{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:16px}
.betaalrijen dt{display:flex;flex-direction:column}
.betaalrijen dt small{font-size:13.5px;color:var(--gray-700)}
.betaalrijen dd{margin:0 0 0 auto;font-size:19px;font-weight:800;white-space:nowrap}
.betaalrijen .eerst dd{font-size:24px}
.betaalrijen .terug dd{color:var(--goed)}
.betaalrijen .zelf{border-top:1px solid var(--gray-300);padding-top:6px}
.betaalvoet{margin:10px 0 0;font-size:var(--t-lopend);color:var(--gray-700)}
/* PC 81: de knop op een eigen regel, dan houdt de zin zijn regelafstand. */
.betaalvoet .alslink{display:flex;align-items:center;min-height:44px;font-weight:700;text-align:left}
.o8subst{display:flex;gap:6px;align-items:flex-start;margin:4px 0 0 42px;font-size:var(--t-lopend);color:var(--gray-700)}
.o8subst .ico{width:16px;height:16px;flex:none;margin-top:3px}
.o8subst.sub .ico{color:var(--goed)}
.o8subst.let .ico{color:var(--let)}
.o8advnaam .o8badge{margin-left:8px;vertical-align:middle;color:var(--goed)}
.o8buiten{margin-top:14px}
.o8allesvak>summary,.o8buiten>summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 14px;border:1px solid var(--gray-300);border-radius:12px;background:var(--vlak);cursor:pointer;list-style:none;font-size:16px;font-weight:700}
.o8allesvak>summary>span>span{font-weight:400;color:var(--gray-700)}
.o8allesvak>summary::-webkit-details-marker,.o8buiten>summary::-webkit-details-marker{display:none}
.o8allesvak>summary .ico,.o8buiten>summary .ico{width:20px;height:20px;flex:none}
.o8allesvak>summary .o8chev,.o8buiten>summary .o8chev{margin-left:auto}
.o8allesvak[open]>summary .o8chev,.o8buiten[open]>summary .o8chev{transform:rotate(-90deg)}
.o8allesvak>.o8alles,.o8buiten>.o8voet,.o8buiten>.o8alles{margin-top:8px}
.o8h3.glandkop{margin-top:20px}
.glandelijk{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.glandelijk a{display:flex;flex-direction:column;gap:2px;min-height:44px;padding:12px 16px;border:1px solid var(--gray-300);border-radius:var(--r-l);background:var(--vlak);color:var(--gray-900);text-decoration:none;font-size:15.5px}
.glandelijk a:hover{border-color:var(--merk-diep)}
.glandelijk b{font-size:17px;color:var(--merk-diep);text-decoration:underline}
.glandelijk small{font-size:14px;color:var(--gray-500)}
@media(max-width:640px){.o8subst{margin-left:0}}
/* ---- GT 2: de trap in stap 1, welkom terug, wat is dat ---- */
.antwoord ol.stappen{list-style:none;padding:0;margin:14px 0 0}
.antwoord .trapzin{margin:12px 0 0;font-size:var(--t-lopend);opacity:.9}
.antwoord .trap .stap.buiten{opacity:.85}
.antwoord .trap .stap.buiten .bedrag{font-size:13.5px}
.antwoord .trap .stap{flex-wrap:wrap;row-gap:2px}
.antwoord .trap .stap .naam{flex:1 1 8em;min-width:0;overflow-wrap:anywhere}
.antwoord .trap .stap .bedrag{flex:0 1 auto;min-width:0;margin-left:auto;white-space:nowrap}
.antwoord .trapgeld{margin:14px 0 0;font-size:var(--t-lopend)}
.trajterugkaart{margin:8px clamp(16px,4vw,32px) 4px;padding:16px 18px;background:var(--goed-tint);border:2px solid var(--merk);border-radius:var(--r-l)}
.trajterugkaart .trajvraag{margin:0 0 6px}
.trajterugkaart p{margin:0 0 6px;font-size:var(--t-lopend)}
.trajterugkaart.dicht{padding:10px 18px;border-width:1px}
.trajterugzonder{display:flex;gap:6px;align-items:flex-start;color:var(--gray-700)}
.trajterugzonder .ico{width:18px;height:18px;flex:none;margin-top:4px}
.trajterugkaart .trajlink{min-height:44px}
.trajprijsinfo{display:flex;gap:8px;align-items:flex-start;margin:8px 0 0;padding:10px 14px;background:var(--vlak);border-radius:12px;font-size:var(--t-lopend);color:var(--gray-700)}
.trajprijsinfo .ico{width:20px;height:20px;flex:none;color:var(--merk-diep)}
.trajprijsinfo b{color:var(--gray-900)}
.trajvak{display:block;font-size:13px;font-weight:400;color:var(--gray-700);margin-top:1px}
.trajerbijvak{display:flex;flex-direction:column;min-width:0}
.trajerbijvak>.trajerbij{flex:1}
.trajwat>summary{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:14px;font-weight:700;color:var(--merk-diep);cursor:pointer;list-style:none}
.trajwat>summary::-webkit-details-marker{display:none}
.trajwat>summary .ico{width:18px;height:18px}
.trajwat p{margin:0 0 6px;font-size:var(--t-lopend);line-height:var(--t-regel);color:var(--gray-700)}
.trajerbijvak>.trajwat{padding:0 6px}
/* RT6b: de knoppenrij krimpt en breekt af in plaats van buiten beeld te
   schuiven. Wat onder een plakkende balk zou vallen, schuift eronder vandaan
   (--kbalk-h en --kspoor-h zet kBalkMeten). Op een smal scherm staat alleen de
   naam van de stap waar je bent; de andere namen blijven voor de schermlezer. */
.kactie{flex:0 1 auto;min-width:0;max-width:100%}
html{scroll-padding-top:var(--kbalk-h,0px);scroll-padding-bottom:var(--kvoet-h,0px)}
@media(max-width:1024px){.mtabs{top:var(--kspoor-h,0px)}}
@media(max-width:900px){.vdmain{grid-template-columns:minmax(0,1fr)}}
@media(max-width:640px){.fnonder{flex-wrap:wrap}.ideel .dbadge{white-space:normal}}
.gkrijgtlijst dd{min-width:min(100%,12em)}
.kactie .wizfoot .rechts{margin-left:auto}
@media(max-width:620px){
  .kspoor li{position:relative}
  .kspoor li:not(.nu) .klabel{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
.geenjs{max-width:36em;margin:48px auto;padding:20px 22px;background:var(--vlak);border:2px solid var(--gray-300);
  border-radius:var(--r-l);font-size:16px;line-height:1.5;color:var(--gray-900)}
.geenjs b{display:block;font-size:19px}
.geenjs p{margin:8px 0 0}