/* Rekenkaart klimaatwand (compact, voor in een hero). Alles onder .kwk, px want het thema zet html op 10px.
   Elke selector begint met :root .kwk[data-kwk], zodat hij zwaarder weegt dan de revert-regel van de klimaatwandpagina's
   (.tn-project .kw-leadgen :where(*){all:revert}) en dan paginaregels als .tn-project .kw-praktijk .closing p
   (witte tekst op een donkere sectie); anders valt bijvoorbeeld de witte achtergrond of de tekst weg.
   Kleuren, hoeken en knoppen volgens de webstyleguide (20 okt 2026). */
:root .kwk[data-kwk] { --kwk-oranje:#f28d2d; --kwk-oranje-h:#d97a1f; --kwk-navy:#1c2338; --kwk-inkt:#161616; --kwk-tekst:#161616; --kwk-zacht:#5c5c5c; --kwk-lijn:#e3e5e9; --kwk-vlak:#f3f4f7;
  background:#fff; color:var(--kwk-tekst); border-radius:10px; padding:24px; box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
  font-family:"Open Sans",Arial,sans-serif; font-size:15px; line-height:1.5; text-align:left; }
:root .kwk[data-kwk] *, :root .kwk[data-kwk] *::before, :root .kwk[data-kwk] *::after { box-sizing:border-box; }
:root .kwk[data-kwk] :where(h2, p, form) { margin:0; padding:0; }
:root .kwk[data-kwk].kwk :is(h2, p) { max-width:none; }
:root .kwk[data-kwk] [hidden] { display:none !important; }
:root .kwk[data-kwk] .kwk-tabs { display:flex; gap:3px; background:var(--kwk-vlak); border-radius:6px; padding:3px; margin:0 0 18px; }
:root .kwk[data-kwk] .kwk-tab { flex:1; padding:9px 8px; background:transparent; border:0; border-radius:6px; font:inherit; font-size:13.5px; font-weight:600; color:var(--kwk-zacht); cursor:pointer; line-height:1.3; text-transform:none; letter-spacing:0; }
:root .kwk[data-kwk] .kwk-tab[aria-pressed="true"] { background:var(--kwk-navy); color:#fff; }
:root .kwk[data-kwk] .kwk-titel { font-size:19px; font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--kwk-inkt); margin:0 0 4px; text-transform:none; }
:root .kwk[data-kwk] .kwk-sub { font-size:13px; color:var(--kwk-zacht); margin:0 0 16px; }
:root .kwk[data-kwk] .kwk-form { display:grid; gap:14px; }
:root .kwk[data-kwk] .kwk-veld { display:grid; gap:6px; min-width:0; }
:root .kwk[data-kwk] .kwk-label { font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--kwk-zacht); }
:root .kwk[data-kwk] .kwk-knoppen { display:flex; flex-wrap:wrap; gap:6px; }
/* antwoordknoppen = filterchip uit de styleguide */
:root .kwk[data-kwk] .kwk-keuze { font:inherit; font-size:13.5px; font-weight:600; padding:7px 14px; border:1.5px solid var(--kwk-lijn); border-radius:999px; background:#fff; color:var(--kwk-zacht); cursor:pointer; line-height:1.4; text-transform:none; }
:root .kwk[data-kwk] .kwk-keuze:hover { border-color:var(--kwk-oranje); color:var(--kwk-inkt); }
:root .kwk[data-kwk] .kwk-keuze[aria-pressed="true"] { background:var(--kwk-oranje); border-color:var(--kwk-oranje); color:#fff; }
:root .kwk[data-kwk] .kwk-getallen { display:flex; gap:10px; flex-wrap:wrap; }
:root .kwk[data-kwk] .kwk-getal { display:grid; gap:4px; flex:1 1 140px; }
:root .kwk[data-kwk] .kwk-getal span { font-size:11px; font-weight:400; letter-spacing:.06em; text-transform:uppercase; color:var(--kwk-zacht); }
:root .kwk[data-kwk] input[type="number"] { font:inherit; font-size:16px; width:100%; padding:10px 14px; border:1.5px solid var(--kwk-lijn); border-radius:6px; background:#fff; color:var(--kwk-inkt); margin:0; height:auto; box-shadow:none; }
:root .kwk[data-kwk] input[type="number"]:focus { border-color:var(--kwk-oranje); outline:none; }
:root .kwk[data-kwk] .kwk-hulp { font-size:12px; color:var(--kwk-zacht); }
:root .kwk[data-kwk] .kwk-fout { font-size:13px; font-weight:600; color:#ed1c00; background:#fdecea; border-left:4px solid #ed1c00; border-radius:0 10px 10px 0; padding:8px 12px; }
:root .kwk[data-kwk] .kwk-verder { width:100%; font:inherit; font-size:15px; font-weight:700; background:var(--kwk-oranje); color:#fff; border:0; border-radius:6px; padding:14px 26px; cursor:pointer; line-height:1.3; text-transform:none; transition:background .18s ease, transform .18s ease; }
:root .kwk[data-kwk] .kwk-verder:hover { background:var(--kwk-oranje-h); transform:translateY(-1px); }
:root .kwk[data-kwk] .kwk-verder:focus-visible { outline:3px solid var(--kwk-navy); outline-offset:3px; }
:root .kwk[data-kwk] .kwk-klein { font-size:12px; color:var(--kwk-zacht); text-align:center; }
:root .kwk[data-kwk] button:focus-visible, :root .kwk[data-kwk] input:focus-visible { outline:2px solid var(--kwk-oranje); outline-offset:2px; }