/* De maandbedrag-calculator (financiering.html). Hergebruikt de bestaande
   tokens en bouwstenen van de site (.kicker, .kaart, .chip, .standknop,
   .knop, .hulp, .klein) — dit bestand voegt alleen toe wat er nog niet was:
   het bedragveld, de vraagblokken, "Zo kunt u betalen" en de
   kredietwaarschuwing.

   Nabewerking "doodsimpel" (21 sep 2026, bevinding integrator): één rustige
   vergelijking in plaats van vier volle kaarten. Per route: kicker, HET
   bedrag groot (het grootste op de kaart), precies één zin voor wie het
   geldt, bij een leenroute daaronder de compacte, altijd zichtbare
   voorbeeldregel (klein maar met genoeg contrast, WCAG AA), en al het
   overige achter één "Meer weten". */

.financiering .vraag { margin-top: 20px; }
.financiering .vraag-looptijd { margin-top: 16px; }
.financiering .vraagkop { font-family: var(--display); font-weight: 700; font-size: var(--t-klein); margin-bottom: 10px; display: block; }
.financiering .vraagknoppen { display: flex; flex-wrap: wrap; gap: 8px; }
/* Grote tikknoppen (besluit): ruimer dan de standaard .chip/.standknop op de rest van de site. */
.financiering .vraagknoppen .chip { min-height: 48px; padding: 12px 20px; font-size: var(--t-klein); }
.financiering .vraagknoppen .standknop { min-height: 44px; padding: 10px 18px; min-width: auto; }
.financiering .vraagknoppen .standknop b { font-size: var(--t-klein); }
.financiering select#fgemeente {
  width: 100%; max-width: 420px; min-height: 48px; padding: 10px 12px;
  border: 1.5px solid var(--lijn2); border-radius: var(--r-knop);
  background: var(--kaart); color: var(--inkt); font: inherit; font-size: var(--t-klein);
}
.financiering select#fgemeente:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }

.fbedragkaart {
  margin-top: 22px; padding: 18px 20px; background: var(--merk-licht); border-radius: var(--r-kaart);
}
.fbedragkaart label { display: block; font-size: var(--t-fijn); color: var(--grijs); margin-bottom: 6px; }
.fbedraginvoer { display: flex; align-items: baseline; gap: 4px; }
.fbedraginvoer span { font-family: var(--display); font-weight: 800; font-size: clamp(24px, 5vw, 34px); color: var(--nacht); }
.fbedraginvoer input {
  font-family: var(--display); font-weight: 800; font-size: clamp(24px, 5vw, 34px); color: var(--nacht);
  border: none; background: transparent; width: 10ch; padding: 2px 0; font-variant-numeric: tabular-nums;
  /* Zonder dit was het veld op de telefoon 30 px en op tablet/breed 41 px hoog
     (kijkcontrole 21 sep 2026) — min-height brengt het tikvlak op alle
     breedtes op 44 px, zonder het grote bedrag zelf kleiner te maken. */
  min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box;
}
.fbedraginvoer input:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; border-radius: 4px; }
.fbedragkaart .hulp { margin-top: 4px; }
/* Het deelbedrag bij "Allebei" (21 sep 2026, energie-eligibiliteit): een
   kleiner zusje van het grote bedragveld hierboven — zelfde opbouw, geen
   hoofdrol. */
.fbedraginvoer.klein span, .fbedraginvoer.klein input { font-size: clamp(18px, 4vw, 24px); }

.zkb-kop { margin-top: 30px; font-size: var(--t-sub); }

/* Het ongewijzigde AFM-beeld (1177×146, een brede lage strook): op zijn eigen
   beeldverhouding tonen, nooit uitrekken of bijsnijden — anders wordt de
   tekst in het beeld zelf onleesbaar, en dat is nu juist de waarschuwing. */
.kredietwaarschuwing { margin: 16px 0 0; border-radius: var(--r-kaart); overflow: hidden; }
.kredietwaarschuwing img { display: block; width: 100%; height: auto; }
.wettekst { margin: 10px 0 18px; }
/* Warmtefonds 0% rente (1.2.3, besluit 12 okt 2026): de voorwaarde in één
   zichtbare zin vlak boven de Warmtefonds-kaart, onder de AFM-balk. */
.warmtefonds-nul { margin: 0; padding: 10px 14px; border-left: 4px solid var(--merk); background: var(--merk-licht); color: var(--inkt); font-weight: 600; border-radius: 0 var(--r-kaart) var(--r-kaart) 0; }

.froutes { display: grid; gap: 12px; }
.froute { padding: 18px 20px; }
.froute .kicker { margin-bottom: 2px; }

/* HET bedrag: altijd het grootste element op de kaart. */
/* .kaart p (site2.css) is specifieker dan een losse klasse en maakte het bedrag
   klein en grijs; daarom hier met de kaart erbij (21 sep 2026). */
.kaart.froute .froute-bedrag { font-family: var(--display); font-weight: 800; font-size: clamp(22px, 5.5vw, 30px); color: var(--nacht); line-height: 1.15; margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.kaart.froute .froute-voorwie { font-size: var(--t-klein); color: var(--inkt); margin-top: 2px; }
/* De wettelijk vereiste voorbeeldregel: klein mag, onleesbaar niet — zelfde grijs/grootte als .klein elders op de site, al gecontroleerd op WCAG AA. */
.kaart.froute .froute-voorbeeld { font-size: var(--t-fijn); color: var(--grijs); margin-top: 8px; font-variant-numeric: tabular-nums; }
.kaart.froute .froute-kort { font-size: var(--t-klein); color: var(--inkt); margin-top: 2px; }
.froute-kort a { color: var(--merk); font-weight: 600; }

.froute-termijnen { display: flex; gap: 24px; flex-wrap: wrap; margin: 4px 0 2px; }
.froute-termijnen > div { display: flex; flex-direction: column; }
.froute-termijnlabel { font-size: var(--t-fijn); color: var(--grijs); }
.froute-termijnbedrag { font-family: var(--display); font-weight: 800; font-size: clamp(20px, 5vw, 26px); color: var(--nacht); font-variant-numeric: tabular-nums; }

.meerweten { margin-top: 10px; }
/* Eigen tikdoel, net als de vraagknoppen: minstens 44px hoog (besluit). */
.meerweten summary { cursor: pointer; font-size: var(--t-fijn); color: var(--merk); font-weight: 600; min-height: 44px; padding: 10px 2px; display: inline-flex; align-items: center; }
.meerweten summary:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }
.meerweten p, .meerweten .klein { font-size: var(--t-fijn); color: var(--grijs); margin-top: 6px; }

.fhypvelden { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 4px; }
.fhypveld { display: flex; align-items: center; gap: 8px; }
.fhypveld label { font-size: var(--t-fijn); color: var(--grijs); }
.fhypveld input {
  width: 7ch; min-height: 44px; padding: 6px 10px; text-align: right;
  border: 1.5px solid var(--lijn2); border-radius: var(--r-knop); background: var(--kaart); color: var(--inkt);
  font: inherit; font-variant-numeric: tabular-nums;
}
.fhypveld input:focus-visible { outline: 3px solid var(--warm); outline-offset: 2px; }

.subsidieblok { margin-top: 18px; }
.subsidieblok .kicker { margin-bottom: 2px; }

/* PP6 (29 sep 2026): de vragen over per maand betalen, onder de offerteknop.
   Zelfde klapvragen als op kozijnen.html (.vragen uit site2.css); hier alleen
   de kop, de bronregel en een zichtbare focus op de vraag. */
.fvragen-kop { margin-top: 48px; font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; color: var(--nacht); scroll-margin-top: 90px; }
.fvragen { margin-top: 14px; }
.fvragen summary { padding-top: 10px; padding-bottom: 10px; line-height: 1.35; }
.fvragen summary:focus-visible { outline: 3px solid var(--nacht); outline-offset: 2px; }
.fvragen a { color: var(--merk); text-decoration: underline; text-underline-offset: 2px; }
.fvragen-bron { margin-top: 12px; }