/*
 * Rekentool klimaatwand en klimaatplafond: alle stijl hangt onder .kwr,
 * zodat het thema van technea.nl er niet doorheen komt (en andersom).
 * Alleen px, geen rem: het thema zet html{font-size:10px}.
 */
@font-face { font-family: 'KWR Open Sans'; src: url('/assets/fonts/OpenSans-Regular.woff2') format('woff2'),url('/assets/fonts/OpenSans-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'KWR Open Sans'; src: url('/assets/fonts/OpenSans-Semibold.woff2') format('woff2'),url('/assets/fonts/OpenSans-Semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'KWR Open Sans'; src: url('/assets/fonts/OpenSans-Bold.woff2') format('woff2'),url('/assets/fonts/OpenSans-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'KWR Open Sans'; src: url('/assets/fonts/OpenSans-ExtraBold.woff2') format('woff2'),url('/assets/fonts/OpenSans-ExtraBold.ttf') format('truetype'); font-weight: 800; font-display: swap; }

.kwr {
  --kwr-oranje: #F28D2D;
  --kwr-oranje-tekst: #F28D2D; /* huisstijloranje, ook voor tekst (Berber, 14 okt 2026); was #B85F0E */
  /* Kleuren en vormen volgens de webstyleguide (20 okt 2026) */
  --kwr-oranje-diep: #D97A1F; /* hover van oranje knoppen */
  --kwr-oranje-zacht: #FDF1E4;
  --kwr-oranje-rand: #F6D9B8;
  --kwr-navy: #1C2338;
  --kwr-navy-2: #2A3550;
  --kwr-inkt: #161616;
  --kwr-tekst: #161616;
  --kwr-zacht: #5C5C5C;
  --kwr-lijn: #E3E5E9;
  --kwr-vlak: #FFFFFF;
  --kwr-grond: #F3F4F7; /* de ene grijze achtergrond van de styleguide */
  --kwr-fout: #ED1C00;
  --kwr-fout-vlak: #FDECEA;
  --kwr-goed: #89D957;
  --kwr-r: 6px;   /* knoppen, velden, tabjes */
  --kwr-r-blok: 10px; /* kaarten en blokken */
  font-family: 'KWR Open Sans', 'Open Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--kwr-tekst);
  background: var(--kwr-grond);
  padding: 32px 16px 48px;
  text-align: left;
}
.kwr *, .kwr *::before, .kwr *::after { box-sizing: border-box; }
/* :where() houdt de specificiteit laag, zodat de klassen hieronder winnen */
.kwr :where(h1, h2, h3, h4, p, ul, dl, dd, form, fieldset) { margin: 0; padding: 0; border: 0; }
.kwr :where(ul) { list-style: disc; padding-left: 18px; }
.kwr a { color: var(--kwr-oranje-tekst); font-weight: 600; text-decoration: underline; }
.kwr [hidden] { display: none !important; }
.kwr-wrap { max-width: 1120px; margin: 0 auto; display: grid; gap: 24px; }

.kwr-kop { display: grid; gap: 8px; }
.kwr-eyebrow { color: var(--kwr-oranje-tekst); font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.kwr h1 { color: var(--kwr-inkt); font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; text-wrap: balance; }
.kwr :where(h2, h3, h4) { font-weight: 700; letter-spacing: -.01em; }
.kwr-intro { color: var(--kwr-zacht); max-width: 62ch; }

.kwr-tool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .kwr-tool { grid-template-columns: minmax(0, 1fr); } .kwr h1 { font-size: 26px; } }
/* Prijsbalk: alleen op smalle schermen, waar de prijs onder alle vragen staat. Rechts ruimte voor de chatknop. */
.kwr .kwr-prijsbalk { display: none; }
@media (max-width: 860px) {
  .kwr .kwr-prijsbalk:not([hidden]) { display: flex; position: fixed; left: 12px; right: 84px; bottom: 14px; z-index: 50; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 10px 10px 10px 14px; border: 0; border-radius: var(--kwr-r-blok); background: var(--kwr-navy); color: #fff; font: inherit; text-align: left; line-height: 1.25; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); cursor: pointer; }
  .kwr .kwr-prijsbalk small { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .75); }
  .kwr .kwr-prijsbalk strong { display: block; font-size: 16px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
  .kwr .kwr-prijsbalk-knop { flex: none; background: var(--kwr-oranje); color: #fff; font-weight: 700; font-size: 14px; padding: 9px 16px; border-radius: var(--kwr-r); }
}

.kwr-paneel { background: var(--kwr-vlak); border: 1px solid var(--kwr-lijn); border-radius: var(--kwr-r-blok); padding: 24px; display: grid; gap: 22px; }
.kwr-veld { display: grid; gap: 8px; min-width: 0; }
.kwr-label { font-weight: 700; color: var(--kwr-inkt); font-size: 14px; }
.kwr-hulp { font-size: 13px; color: var(--kwr-zacht); }
.kwr-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
/* Antwoordknoppen = filterchip uit de styleguide: pil, 13.5px/600, gekozen oranje met witte tekst */
.kwr-keuze { font: inherit; font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--kwr-lijn); background: var(--kwr-vlak); color: var(--kwr-zacht); cursor: pointer; line-height: 1.4; transition: border-color .15s, background .15s, color .15s; }
.kwr-keuze:hover { border-color: var(--kwr-oranje); color: var(--kwr-inkt); }
.kwr-keuze[aria-pressed="true"] { background: var(--kwr-oranje); border-color: var(--kwr-oranje); color: #fff; }
/* "Wie ben je?" = formuliertabjes uit de styleguide (zoals op de rekenkaart): grijze strook, gekozen tab navy */
.kwr .kwr-tabs { display: flex; gap: 3px; padding: 3px; background: var(--kwr-grond); border-radius: var(--kwr-r); max-width: 440px; }
.kwr .kwr-tabs .kwr-keuze { flex: 1; border: 0; border-radius: var(--kwr-r); background: transparent; padding: 9px 8px; color: var(--kwr-zacht); }
.kwr .kwr-tabs .kwr-keuze:hover { color: var(--kwr-inkt); }
.kwr .kwr-tabs .kwr-keuze[aria-pressed="true"] { background: var(--kwr-navy); color: #fff; }
.kwr button:focus-visible, .kwr input:focus-visible, .kwr textarea:focus-visible, .kwr summary:focus-visible, .kwr a:focus-visible { outline: 2px solid var(--kwr-oranje); outline-offset: 2px; }
/* Klein vraagteken op de "Weet ik niet"-knop: opent de chat met Durk (Berber, 27 okt 2026) */
.kwr .kwr-weetniet { position: relative; display: inline-flex; }
.kwr .kwr-durk-vraag { position: absolute; top: -9px; right: -9px; z-index: 1; width: 22px; height: 22px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: var(--kwr-navy); color: #fff; font: inherit; font-size: 12px; font-weight: 800; line-height: 1; display: grid; place-items: center; cursor: pointer; }
.kwr .kwr-durk-vraag:hover { background: var(--kwr-navy-2); }
.kwr-getallen { display: flex; gap: 12px; flex-wrap: wrap; }
.kwr-getal { display: grid; gap: 6px; }
/* veldlabels: 11px Regular in hoofdletters, zoals form-field in de styleguide */
.kwr-getal span { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--kwr-zacht); }
/* 16px in plaats van de 14.5px uit de styleguide: anders zoomt iOS in bij het typen */
.kwr input[type="number"], .kwr input[type="text"], .kwr input[type="email"], .kwr input[type="tel"], .kwr textarea {
  font: inherit; font-size: 16px; width: 100%; max-width: 100%; padding: 10px 14px; border: 1.5px solid var(--kwr-lijn); border-radius: var(--kwr-r); background: var(--kwr-vlak); color: var(--kwr-inkt); margin: 0; box-shadow: none; height: auto;
}
.kwr input[type="number"]:focus, .kwr input[type="text"]:focus, .kwr input[type="email"]:focus, .kwr input[type="tel"]:focus, .kwr textarea:focus { outline: none; border-color: var(--kwr-oranje); }
.kwr input[type="number"] { width: 140px; font-variant-numeric: tabular-nums; }
.kwr textarea { min-height: 96px; resize: vertical; }
.kwr input[aria-invalid="true"], .kwr textarea[aria-invalid="true"] { border-color: var(--kwr-fout); }

.kwr details { font-size: 13.5px; }
.kwr summary { cursor: pointer; font-weight: 700; color: var(--kwr-oranje-tekst); }
.kwr-schat { display: grid; gap: 8px; margin-top: 12px; }
.kwr-klein-label { font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--kwr-zacht); }

.kwr-uitkomst { position: sticky; top: 16px; display: grid; gap: 14px; }
.kwr-uitkomst-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.kwr-uitkomst-kop h2 { font-size: 18px; color: var(--kwr-inkt); }
.kwr-uitkomst-kop span { font-size: 13px; color: var(--kwr-zacht); }
.kwr-kaarten { display: grid; gap: 12px; }
.kwr-kaart { background: var(--kwr-vlak); border: 1px solid var(--kwr-lijn); border-radius: var(--kwr-r-blok); padding: 20px 22px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.kwr-kaart.is-laagste { border-color: var(--kwr-oranje); box-shadow: inset 4px 0 0 var(--kwr-oranje); }
.kwr-kaart.is-enkel { border-top: 4px solid var(--kwr-oranje); }
.kwr-kaart h3 { font-size: 16px; color: var(--kwr-inkt); }
.kwr-soort { font-size: 13px; color: var(--kwr-zacht); }
.kwr-prijs { grid-column: 1 / -1; font-size: 26px; font-weight: 800; color: var(--kwr-inkt); font-variant-numeric: tabular-nums; letter-spacing: -.01em; line-height: 1.2; }
.kwr-prijs small { font-size: 13px; font-weight: 600; color: var(--kwr-zacht); letter-spacing: 0; }
.kwr-detail { grid-column: 1 / -1; font-size: 13px; color: var(--kwr-zacht); font-variant-numeric: tabular-nums; }
.kwr-opbouw { grid-column: 1 / -1; border-top: 1px solid var(--kwr-lijn); padding-top: 12px; }
.kwr-opbouw h4 { margin: 0 0 6px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--kwr-oranje); }
/* Productlijst met artikelnummers (geen prijzen, geen aantallen; Berber 20 okt 2026) */
/* Tabel met kolommen product | artikelnummer | portaal (alleen installateur); op smal scherm onder elkaar (Berber 20 okt 2026) */
.kwr .kwr-producten-details .kwr-opbouw { container-type: inline-size; }
.kwr .kwr-producten { list-style: none; margin: 8px 0 0; padding: 0; border: 1px solid var(--kwr-lijn); border-radius: var(--kwr-r-blok); overflow: hidden; background: #fff; display: grid; grid-template-columns: minmax(0, 1fr) max-content; }
.kwr .kwr-producten.kwr-met-portaal { grid-template-columns: minmax(0, 1fr) max-content max-content; }
/* subgrid: kolommen sluiten over alle regels op elkaar aan */
.kwr .kwr-producten li { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; gap: 6px 20px; padding: 12px 16px; border-top: 1px solid var(--kwr-lijn); font-size: 14px; line-height: 1.45; }
.kwr .kwr-producten li:first-child { border-top: 0; }
.kwr .kwr-producten li.kwr-producten-kop { padding-top: 9px; padding-bottom: 9px; background: var(--kwr-grond); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kwr-zacht); }
.kwr .kwr-product-naam { color: var(--kwr-inkt); font-weight: 600; }
.kwr .kwr-sku { justify-self: start; font-size: 13px; font-weight: 600; color: var(--kwr-zacht); background: var(--kwr-grond); border: 1px solid var(--kwr-lijn); border-radius: 4px; padding: 2px 8px; font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
.kwr .kwr-portaal { justify-self: end; font-size: 13px; font-weight: 700; color: var(--kwr-oranje-tekst); text-decoration: none; white-space: nowrap; }
.kwr .kwr-portaal:hover { text-decoration: underline; }
@container (max-width: 440px) {
  .kwr .kwr-producten, .kwr .kwr-producten.kwr-met-portaal { display: block; }
  .kwr .kwr-producten li { grid-template-columns: minmax(0, 1fr) auto; padding: 12px 14px; }
  .kwr .kwr-producten li.kwr-producten-kop { display: none; }
  .kwr .kwr-producten li:nth-child(2) { border-top: 0; }
  .kwr .kwr-product-naam { grid-column: 1 / -1; }
}
.kwr .kwr-opbouw .kwr-hulp { margin: 12px 0 0; }
.kwr .kwr-producten-details { grid-column: 1 / -1; border-top: 1px solid var(--kwr-lijn); padding-top: 12px; margin-top: 6px; }
.kwr .kwr-producten-details summary { font-size: 14px; padding: 4px 0; cursor: pointer; }
.kwr .kwr-producten-details .kwr-opbouw { border-top: 0; padding-top: 10px; }
/* incl. of excl. btw: altijd in oranje, zodat direct duidelijk is welk bedrag het is */
.kwr .kwr-btw { color: var(--kwr-oranje); font-weight: 700; }
.kwr-opbouw dl { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; font-size: 14px; font-variant-numeric: tabular-nums; }
.kwr-opbouw dt { min-width: 0; font-weight: 600; }
.kwr-opbouw dt span { display: block; font-size: 12.5px; font-weight: 400; color: var(--kwr-zacht); }
.kwr-opbouw dd { text-align: right; color: var(--kwr-inkt); font-weight: 600; }
/* Knoppen volgens de styleguide: oranje, wit, 15px/700, 14px 26px, hoek 6px; hover dieper oranje en 1px omhoog. Geen zwarte knoppen. */
.kwr-cta { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; background: var(--kwr-oranje); color: #fff; border: 0; border-radius: var(--kwr-r); padding: 14px 26px; cursor: pointer; white-space: nowrap; line-height: 1.3; transition: background .18s ease, transform .18s ease; }
.kwr-cta:hover { background: var(--kwr-oranje-diep); transform: translateY(-1px); }
.kwr .kwr-cta:focus-visible, .kwr .kwr-verstuur:focus-visible { outline: 3px solid var(--kwr-navy); outline-offset: 3px; }
.kwr-kaart .kwr-cta { grid-row: 1 / span 2; grid-column: 2; }
.kwr-kaart.is-enkel .kwr-cta { grid-row: auto; grid-column: 1 / -1; justify-self: start; }
/* badge uit de styleguide */
.kwr-label-laagste { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--kwr-oranje); padding: 4px 10px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; line-height: 1.3; }
.kwr-melding { font-size: 13.5px; color: var(--kwr-zacht); background: var(--kwr-vlak); border: 1px dashed var(--kwr-lijn); border-radius: var(--kwr-r-blok); padding: 14px 16px; }
.kwr-korting { background: var(--kwr-oranje-zacht); border-left: 4px solid var(--kwr-oranje); border-radius: 0 var(--kwr-r-blok) var(--kwr-r-blok) 0; padding: 14px 18px; font-size: 14px; }
.kwr-korting strong { color: var(--kwr-inkt); }
.kwr-klein { font-size: 12.5px; color: var(--kwr-zacht); }
.kwr-aannames { background: var(--kwr-vlak); border: 1px solid var(--kwr-lijn); border-radius: var(--kwr-r-blok); padding: 12px 16px; }
.kwr-aannames summary { color: var(--kwr-inkt); }
.kwr-aannames ul { margin-top: 10px; display: grid; gap: 4px; }

/* Montage altijd zichtbaar naast de prijs (de prijs is alleen materiaal) */
.kwr-montage { grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--kwr-oranje-tekst); }
/* callout uit de styleguide */
.kwr-montage-melding { font-size: 14px; background: var(--kwr-oranje-zacht); border-left: 4px solid var(--kwr-oranje); border-radius: 0 var(--kwr-r-blok) var(--kwr-r-blok) 0; padding: 14px 18px; }
.kwr-montage-melding strong { color: var(--kwr-inkt); }

/* Poort: past de prijs binnen het budget? */
.kwr-acties { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.kwr-poort-knoppen .kwr-keuze { font-size: 15px; padding: 12.5px 24.5px; border-radius: var(--kwr-r); color: var(--kwr-inkt); }
.kwr-poort-knoppen .kwr-keuze:hover { color: var(--kwr-oranje-tekst); }
.kwr-poort-knoppen .kwr-keuze[aria-pressed="true"] { color: #fff; }
.kwr-poort-extra h2 { font-size: 18px; color: var(--kwr-inkt); }
.kwr-poort-extra ul { display: grid; gap: 6px; }
a.kwr-cta { display: inline-flex; text-decoration: none; color: #fff; }
/* btn-ghost uit de styleguide */
.kwr-cta.is-licht, a.kwr-cta.is-licht { background: transparent; color: var(--kwr-inkt); border: 1.5px solid var(--kwr-lijn); padding: 12.5px 24.5px; }
.kwr-cta.is-licht:hover { background: var(--kwr-vlak); border-color: var(--kwr-oranje); color: var(--kwr-oranje-tekst); }

/* Keuzerondjes in het formulier (al klant / adviesvoorkeur) */
.kwr :where(fieldset.kwr-rondjes) { margin: 0; padding: 0; border: 0; min-width: 0; }
.kwr-rondjes legend { padding: 0; margin-bottom: 8px; }
.kwr-rondje { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; padding: 9px 14px; border: 1.5px solid var(--kwr-lijn); border-radius: var(--kwr-r); background: var(--kwr-vlak); cursor: pointer; }
.kwr-rondje input { width: 16px; height: 16px; margin: 0; accent-color: var(--kwr-oranje); }
.kwr-rondje:has(input:checked) { border-color: var(--kwr-oranje); background: var(--kwr-oranje-zacht); }

/* Aanvraagformulier */
.kwr-formulier { max-width: 760px; }
.kwr-terug { font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; padding: 0; color: var(--kwr-oranje-tekst); cursor: pointer; text-decoration: underline; justify-self: start; }
.kwr-samenvatting { background: var(--kwr-oranje-zacht); border-left: 4px solid var(--kwr-oranje); border-radius: 0 var(--kwr-r-blok) var(--kwr-r-blok) 0; padding: 16px 20px; display: grid; gap: 2px; }
.kwr-samenvatting .kwr-prijs { font-size: 22px; }
.kwr-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.kwr-rij-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.4fr); }
@media (max-width: 600px) { .kwr-rij, .kwr-rij-3 { grid-template-columns: minmax(0, 1fr); } }
.kwr-verplicht { color: var(--kwr-oranje-tekst); }
.kwr-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.kwr-check input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--kwr-oranje); }
.kwr-bestanden { font-size: 14px; }
.kwr-bestanden input[type="file"] { font: inherit; font-size: 14px; max-width: 100%; }
.kwr-bestandlijst { font-size: 13px; color: var(--kwr-zacht); }
.kwr-fout { background: var(--kwr-fout-vlak); color: var(--kwr-fout); border-left: 4px solid var(--kwr-fout); border-radius: 0 var(--kwr-r-blok) var(--kwr-r-blok) 0; padding: 12px 16px; font-size: 14px; font-weight: 600; }
.kwr-verstuur { font: inherit; font-weight: 700; font-size: 15px; background: var(--kwr-oranje); color: #fff; border: 0; border-radius: var(--kwr-r); padding: 14px 26px; cursor: pointer; justify-self: start; line-height: 1.3; transition: background .18s ease, transform .18s ease; }
.kwr-verstuur:hover { background: var(--kwr-oranje-diep); transform: translateY(-1px); }
.kwr-verstuur[disabled] { opacity: .6; cursor: wait; }
.kwr-honing { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Bedankt */
.kwr-bedankt { max-width: 640px; text-align: left; }
.kwr-bedankt h2 { font-size: 26px; color: var(--kwr-inkt); line-height: 1.2; }
.kwr-vinkje { width: 48px; height: 48px; border-radius: 50%; background: var(--kwr-oranje); display: grid; place-items: center; color: #fff; font-size: 26px; font-weight: 800; }

@media (prefers-reduced-motion: no-preference) { .kwr-kaart { transition: border-color .2s; } }