/* kNect-hub – componenten. Dezelfde klassen voor kNect Groep, Constructieshop en Architectdirect;
 * het merk komt uit tokens.css (<html data-merk="cs">).
 * Basis: components/bundle.css van de drie design systems (30-10-2026), met het voorvoegsel --kn-
 * en typografie via de type-tokens. Breedtes zijn maximaal in plaats van vast, zodat alles op mobiel past.
 * Regel: alleen tokens. Geen losse kleuren, fonts, lettergroottes of afrondingen (zie tests/unit/huisstijl.test.js).
 */

.kn { font: var(--kn-type-tekst); color: var(--kn-tekst); background: var(--kn-achtergrond); }
.kn *, .kn *::before, .kn *::after { box-sizing: border-box; }
.kn a:not([class]) { color: var(--kn-link); }
.kn a:not([class]):focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }

/* ---------- Knoppen ----------
 * Conversieknop: vol vlak, valt op. Het vlak zit in ::before met de afgeschuinde hoek (clip-path),
 * zodat de hoek de focusring niet wegknipt. Een variant zet alleen --kn-knop-vlak.
 * Wit op oranje is altijd 17px/700 met een dikkere pijl: dat regelen --kn-knop-type en --kn-knop-pijl per merk. */
.kn-knop { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: var(--kn-ruimte-16);
  height: var(--kn-hoogte-knop); padding: 0 20px 0 var(--kn-ruimte-16); border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: var(--kn-knop-type); --kn-knop-vlak: var(--kn-primair); --kn-pijl: var(--kn-knop-pijl); background: transparent; color: var(--kn-op-primair); }
.kn-knop::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kn-knop-vlak);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--kn-afschuining-knop)), calc(100% - var(--kn-afschuining-knop)) 100%, 0 100%); }
.kn-knop svg { width: 10px; height: 10px; flex: none; }
.kn-knop svg path { stroke-width: var(--kn-pijl); }
.kn-knop:hover::before { filter: brightness(.95); }
.kn-knop:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-knop--accent { --kn-knop-vlak: var(--kn-secundair); --kn-pijl: var(--kn-knop-accent-pijl); color: var(--kn-op-secundair); font: var(--kn-knop-accent-type); }
.kn-knop--donker { --kn-knop-vlak: var(--kn-donker); --kn-pijl: 1.8; color: var(--kn-op-donker); font: var(--kn-type-knop); }
.kn-knop--donker:hover::before { filter: brightness(1.2); }
.kn-knop--breed { width: 100%; }
/* Neutrale knop: alleen een rand, valt niet op. De rand volgt de afgeschuinde hoek.
 * Zet --kn-ondergrond op de kleur van het vlak eronder (standaard achtergrond). */
.kn-knop--neutraal { height: var(--kn-hoogte-knop-neutraal); gap: 15px; font: var(--kn-type-knop); --kn-pijl: 1.8;
  color: var(--kn-tekst); border: 1px solid var(--kn-rand-knop); }
.kn-knop--neutraal::before { content: none; }
.kn-knop--neutraal::after { content: ""; position: absolute; right: -1px; bottom: -1px;
  width: var(--kn-afschuining-knop-neutraal); height: var(--kn-afschuining-knop-neutraal);
  background: linear-gradient(to top left, var(--kn-ondergrond, var(--kn-achtergrond)) calc(50% - 0.5px), var(--kn-rand-knop) calc(50% - 0.5px),
    var(--kn-rand-knop) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.kn-knop--neutraal:hover { background: var(--kn-wit); }
.kn-knop.zonder-pijl { padding: 0 20px 0 16px; }
button.kn-knop:disabled { cursor: not-allowed; opacity: .5; }
.kn-knop[aria-disabled="true"] { cursor: not-allowed; } /* zichtbaar maar (nog) zonder werking, bijv. in een testversie */

/* ---------- Vinkjes ----------
 * Twee soorten, net als knoppen. Primair = het standaardvinkje van het merk (kleur van de volgende stap);
 * secundair = wijkt af van wat eromheen staat (de eigen merkkleur). */
.kn-vinkjes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font: var(--kn-type-tekst-klein); }
.kn-vinkjes li { display: flex; align-items: center; gap: 8px; }
.kn-vinkjes b { font-weight: 600; }
.kn-vinkjes--pakket { gap: 20px; font: var(--kn-type-tekst); color: var(--kn-tekst-2); }
.kn-vinkjes--pakket li { align-items: flex-start; }
.kn-vinkjes--pakket .kn-vinkje { margin-top: 3px; }
.kn-vinkje { width: 17px; height: 17px; flex: none; }
.kn-vinkje .vlak { fill: var(--kn-vinkje-vlak); }
.kn-vinkje .haak { fill: var(--kn-vinkje-haak); }
.kn-voordelen { list-style: none; margin: 0; padding: 0; display: grid; gap: 26px; }
.kn-voordelen li { display: grid; grid-template-columns: 40px 1fr; column-gap: 16px; align-items: center; }
.kn-voordelen .kn-vinkje { width: 40px; height: 40px; grid-row: span 2; }
.kn-voordelen .kn-vinkje .vlak { fill: var(--kn-vinkje-groot-vlak); }
.kn-voordelen strong { font: var(--kn-type-kop-5); }
.kn-voordelen span { font: var(--kn-type-tekst); color: var(--kn-tekst-2); }
.kn-vinkjes--secundair, .kn-voordelen--secundair, .kn-vinkje--secundair {
  --kn-vinkje-vlak: var(--kn-vinkje-secundair-vlak); --kn-vinkje-groot-vlak: var(--kn-vinkje-secundair-vlak); --kn-vinkje-haak: var(--kn-vinkje-secundair-haak); }

/* ---------- Keuzekaart ----------
 * Een keuze met beeld (type verbouwing, tool). Als knop met role="radio" en aria-checked. */
.kn-kaart { display: grid; grid-template-rows: 140px auto; gap: 14px; width: min(100%, 304px); padding: 7px 7px 18px;
  background: var(--kn-achtergrond); border: 1px solid var(--kn-rand-kaart); border-radius: var(--kn-afronding-kaart);
  font: var(--kn-type-tekst); color: var(--kn-tekst); text-align: center; text-decoration: none; cursor: pointer; }
.kn-kaart__beeld { display: block; background: var(--kn-achtergrond-2); border-radius: var(--kn-afronding-kaart) var(--kn-afronding-kaart) 0 0; }
.kn-kaart__titel { display: block; margin: 0; font: var(--kn-type-kop-3); color: var(--kn-tekst); } /* tekst, niet icoon (besluit 03-11-2026) */
.kn-kaart:hover { border-color: var(--kn-rand-knop); }
.kn-kaart:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-kaart[aria-checked="true"] { position: relative; outline: 2px solid var(--kn-interactie); outline-offset: -2px; }
.kn-kaart[aria-checked="true"]::after { content: ""; position: absolute; top: 14px; right: 14px; width: 17px; height: 17px;
  background: var(--kn-vinkje-vlak); clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); }

/* ---------- Pakketkaart en uitslagblok ----------
 * Het uitslagblok van een tool is een pakketkaart (besluit 30-10-2026): kop, label, uitslag of bedrag,
 * uitleg, één knop, lijn, vinkjes. Bij tekst in plaats van een bedrag: kn-pakket__prijs--tekst. */
.kn-pakket { width: min(100%, 412px); background: var(--kn-wit); border: 1px solid var(--kn-rand-kaart); border-radius: var(--kn-afronding-kaart); }
.kn-pakket__kop { margin: 0; padding: 30px 24px 28px; background: var(--kn-achtergrond); border-bottom: 1px solid var(--kn-rand-kaart);
  border-radius: var(--kn-afronding-kaart) var(--kn-afronding-kaart) 0 0; font: var(--kn-type-kop-2); color: var(--kn-tekst); }
.kn-pakket__inhoud { padding: var(--kn-ruimte-32); display: grid; gap: 0; }
.kn-pakket__vanaf { margin: 0; font: var(--kn-type-toelichting); color: var(--kn-tekst-vanaf); }
.kn-pakket__prijs { margin: 0 0 12px; font: var(--kn-type-prijs); }
.kn-pakket__prijs--tekst { font: var(--kn-type-kop-2); }
.kn-pakket__tekst { margin: 0 0 18px; font: var(--kn-type-tekst); color: var(--kn-tekst-2); }
.kn-pakket__lijn { height: 2px; background: var(--kn-lijn); margin: 32px 0 30px; }
.kn-pakket__voetnoot { margin: 32px 0 0; font: var(--kn-type-toelichting); font-style: italic; color: var(--kn-tekst-voetnoot); text-align: center; }
@media (max-width: 480px) {
  .kn-pakket__kop { padding: 24px 20px 22px; }
  .kn-pakket__inhoud { padding: 24px 20px; }
}

/* ---------- Prijsregels ----------
 * "Omschrijving – bedrag" in een uitslagblok. Bedragen altijd incl. btw en uit de rekenkern. */
.kn-prijsregels { display: grid; margin: 0 0 18px; font: var(--kn-type-tekst); }
.kn-prijsregel { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--kn-lijn); }
.kn-prijsregel dt { color: var(--kn-tekst-2); }
.kn-prijsregel dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.kn-prijsregel--totaal { border-bottom: 0; font: var(--kn-type-kop-5); }
.kn-prijsregel--totaal dt { color: var(--kn-tekst); }
/* Compact: een korte rekensom zonder lijnen tussen de regels; alleen een lijn boven het totaal (besluit 04-11-2026) */
.kn-prijsregels--compact { margin: 0; }
.kn-prijsregels--compact .kn-prijsregel { padding: 3px 0; border-bottom: 0; }
.kn-prijsregels--compact .kn-prijsregel--totaal { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--kn-tekst); }

/* ---------- Stappenbalk ----------
 * Horizontaal op desktop, verticaal (tijdlijn) op mobiel. Huidige stap: aria-current="step".
 * Afgeronde stap: data-status="klaar" met een vinkje in het blok. */
.kn-stappen { list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; font: var(--kn-type-tekst); counter-reset: kn-stap; }
.kn-stap { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; color: var(--kn-tekst-2); counter-increment: kn-stap; }
.kn-stap:last-child { flex: 0 0 auto; }
.kn-stap:not(:last-child)::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 2px; background: var(--kn-lijn); }
.kn-stap__blok { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; font: var(--kn-type-knop);
  background: var(--kn-achtergrond-2); color: var(--kn-tekst-2);
  clip-path: polygon(0 0, 100% 0, 100% 62%, 62% 100%, 0 100%); }
.kn-stap__blok::before { content: counter(kn-stap); }
.kn-stap__blok .kn-vinkje { width: 30px; height: 30px; }
.kn-stap[data-status="klaar"] { color: var(--kn-tekst); }
.kn-stap[data-status="klaar"] .kn-stap__blok { background: transparent; }
.kn-stap[data-status="klaar"] .kn-stap__blok::before { content: none; }
.kn-stap[aria-current="step"] { color: var(--kn-tekst); font-weight: 600; }
.kn-stap[aria-current="step"] .kn-stap__blok { background: var(--kn-vinkje-vlak); color: var(--kn-vinkje-haak); }
.kn-stap__naam { white-space: nowrap; }
@media (max-width: 640px) {
  .kn-stappen { flex-direction: column; gap: 0; }
  .kn-stap { position: relative; padding-bottom: 16px; }
  .kn-stap:last-child { padding-bottom: 0; }
  .kn-stap:not(:last-child)::after { position: absolute; left: 14px; top: 30px; bottom: 0; width: 2px; height: auto; min-width: 0; }
  .kn-stap__naam { white-space: normal; }
}

/* ---------- Merklabel ----------
 * Klein label met de merkkleur. Tekst altijd donker: wit op oranje alleen in grote knoppen. */
.kn-label { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; font: var(--kn-type-label-klein);
  color: var(--kn-tekst); background: var(--kn-achtergrond-2); white-space: nowrap; }
.kn-label--ad { background: var(--kn-label-ad); }
.kn-label--cs { background: var(--kn-label-cs); }
.kn-label--as { background: var(--kn-label-as); }

/* ---------- Formulier ----------
 * Velden, keuzes, akkoord, fout en melding. Fouten pas na versturen of na het verlaten van het veld. */
.kn-form { display: grid; gap: 24px; width: min(100%, 520px); }
.kn-veld { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.kn-veld > label:not(.kn-keuze), .kn-veld > legend { padding: 0; font: var(--kn-type-label); color: var(--kn-tekst); }
.kn-veld__optioneel { font-weight: 400; color: var(--kn-tekst-2); }
.kn-veld input, .kn-veld select, .kn-veld textarea { width: 100%; height: var(--kn-hoogte-knop); padding: 0 16px;
  font: var(--kn-type-tekst); color: var(--kn-tekst); background: var(--kn-wit); border: 1px solid var(--kn-rand-knop); border-radius: var(--kn-afronding-geen); }
.kn-veld textarea { height: auto; min-height: 120px; padding: 12px 16px; resize: vertical; }
.kn-veld input::placeholder, .kn-veld textarea::placeholder { color: var(--kn-tekst-2); }
.kn-veld input:focus, .kn-veld select:focus, .kn-veld textarea:focus { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-keuzelijst { position: relative; }
.kn-keuzelijst select { appearance: none; padding-right: 48px; cursor: pointer; }
.kn-keuzelijst::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; pointer-events: none;
  border-right: 2px solid var(--kn-tekst); border-bottom: 2px solid var(--kn-tekst); transform: translateY(-70%) rotate(45deg); }
.kn-veld__hulp { margin: 0; font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.kn-veld--fout input, .kn-veld--fout select, .kn-veld--fout textarea { border-color: var(--kn-fout); box-shadow: inset 0 0 0 1px var(--kn-fout); }
.kn-veld__fout { margin: 0; font: var(--kn-type-tekst-klein-vet); color: var(--kn-fout); }
.kn-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-keuzes > legend { width: 100%; margin-bottom: 8px; }
.kn-keuze { position: relative; display: inline-flex; align-items: center; height: var(--kn-hoogte-knop-neutraal); padding: 0 16px;
  font: var(--kn-type-knop); color: var(--kn-tekst); background: var(--kn-wit); border: 1px solid var(--kn-rand-knop); cursor: pointer; }
.kn-keuze input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kn-keuze:has(input:focus-visible) { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-keuze:has(input:checked) { background: var(--kn-keuze-gekozen); border-color: var(--kn-interactie); box-shadow: inset 0 0 0 1px var(--kn-interactie); }
.kn-akkoord { display: flex; gap: 12px; align-items: flex-start; font: var(--kn-type-tekst); color: var(--kn-tekst); cursor: pointer; }
.kn-akkoord input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kn-vak { flex: none; width: 24px; height: 24px; background: var(--kn-wit); border: 1px solid var(--kn-rand-knop); }
.kn-vak .kn-vinkje { display: none; width: 24px; height: 24px; margin: -1px; }
.kn-akkoord input:checked + .kn-vak { border-color: transparent; background: transparent; }
.kn-akkoord input:checked + .kn-vak .kn-vinkje { display: block; }
.kn-akkoord input:focus-visible + .kn-vak { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-akkoord a { color: var(--kn-link); }
.kn-melding { display: flex; gap: 12px; align-items: flex-start; padding: 16px; font: var(--kn-type-tekst); color: var(--kn-tekst);
  background: var(--kn-primair-licht); border-left: 4px solid var(--kn-primair); }
.kn-melding .kn-vinkje { margin-top: 3px; }
.kn-melding .kn-vinkje .vlak, .kn-vak .kn-vinkje .vlak { fill: var(--kn-vinkje-groot-vlak); }
.kn-melding--fout { background: var(--kn-wit); border-left-color: var(--kn-fout); }
.kn-form .kn-knop { justify-self: start; }
.kn-form .kn-knop--breed { justify-self: stretch; }

/* ---------- Voortgang ----------
 * Voor tools met veel stappen, waar een stappenbalk met namen niet past: "Stap 3 van 8" met een balk. */
.kn-voortgang { display: grid; gap: 8px; font: var(--kn-type-tekst-klein); color: var(--kn-tekst-2); }
.kn-voortgang__balk { height: 6px; background: var(--kn-achtergrond-2); }
.kn-voortgang__balk span { display: block; height: 100%; background: var(--kn-vinkje-vlak); }

/* ---------- Opties (keuze met uitleg) ----------
 * Eén keuze uit een lijst, elk met een titel en eventueel een korte uitleg. Rondje verticaal in het midden. */
.kn-opties { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.kn-opties > legend { padding: 0; margin-bottom: 10px; font: var(--kn-type-label); color: var(--kn-tekst); }
.kn-optie { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; font: var(--kn-type-tekst); color: var(--kn-tekst);
  background: var(--kn-wit); border: 1.5px solid var(--kn-rand-knop); }
.kn-optie input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--kn-interactie); }
.kn-optie input:focus { outline: none; }
.kn-optie:has(input:checked) { background: var(--kn-keuze-gekozen); border-color: var(--kn-interactie); box-shadow: inset 0 0 0 1px var(--kn-interactie); }
.kn-optie:has(input:focus-visible) { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
/* Hover: de rand alvast in de kleur van kiezen en dikker (2px, als bij de gekozen keuze), zonder vulkleur.
 * Een vulkleur is voorbehouden aan de gekozen keuze; zo blijft duidelijk wat al gekozen is (besluit 04-11-2026).
 * Alleen op apparaten met een muis: op een telefoon blijft een hover na het tikken hangen. */
@media (hover: hover) {
  .kn-optie:hover:not(:has(input:checked)), .kn-keuze:hover:not(:has(input:checked)) {
    border-color: var(--kn-interactie); box-shadow: inset 0 0 0 1px var(--kn-interactie); }
}
.kn-optie__titel { display: block; font: var(--kn-type-label); }
.kn-optie__sub { display: block; color: var(--kn-tekst-2); }
.kn-optie:has(input:checked) .kn-optie__sub { color: var(--kn-tekst); } /* tekst-2 haalt geen 4,5:1 op de gekozen kleur */
.kn-opties--fout .kn-optie { border-color: var(--kn-fout); }

/* ---------- Invoer met eenheid ---------- */
.kn-invoer { position: relative; display: block; max-width: 240px; }
.kn-veld .kn-invoer input { padding-right: 56px; }
.kn-invoer__eenheid { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font: var(--kn-type-tekst); color: var(--kn-tekst-2); pointer-events: none; }

/* ---------- Uitleg (uitklapbaar) ---------- */
.kn-uitleg { font: var(--kn-type-tekst); }
.kn-uitleg summary { cursor: pointer; font: var(--kn-type-knop); color: var(--kn-link); }
.kn-uitleg summary:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }
.kn-uitleg p { margin: 12px 0 0; color: var(--kn-tekst-2); }
.kn-uitleg a { color: var(--kn-link); }

/* ---------- Uitslag ----------
 * Kop met label (vrij / nog uitzoeken / niet vrij) en daaronder de punten met hun status.
 * Rand: het primaire vinkje van het merk bij goed nieuws, grijs als je nog iets moet uitzoeken, rood als het niet mag. */
.kn-uitslag { display: grid; gap: 12px; padding: 24px; background: var(--kn-wit); border: 1px solid var(--kn-rand-kaart);
  border-left: 8px solid var(--kn-vinkje-vlak); border-radius: var(--kn-afronding-kaart); }
.kn-uitslag--twijfel { border-left-color: var(--kn-tekst-2); }
.kn-uitslag--nee { border-left-color: var(--kn-fout); }
.kn-uitslag .kn-label { justify-self: start; }
.kn-uitslag__titel { margin: 0; font: var(--kn-type-kop-3); }
.kn-uitslag p { margin: 0; }
.kn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kn-check { display: grid; grid-template-columns: 24px 1fr; gap: 4px 12px; align-items: start; }
.kn-check__teken { grid-row: span 3; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-top: 2px;
  font: var(--kn-type-label-klein); }
.kn-check__teken .kn-vinkje { width: 24px; height: 24px; }
.kn-check--nee .kn-check__teken { background: var(--kn-fout); color: var(--kn-wit); }
.kn-check--twijfel .kn-check__teken { border: 2px solid var(--kn-tekst); color: var(--kn-tekst); }
.kn-check__titel { font: var(--kn-type-label); }
.kn-check__uitleg { color: var(--kn-tekst-2); }
.kn-check__tip { font: var(--kn-type-tekst-klein); color: var(--kn-tekst); }
/* Compact: een lange lijst voorwaarden, bijvoorbeeld uitgeklapt onder de uitslag */
.kn-checks--compact { gap: 10px; }
.kn-checks--compact .kn-check { row-gap: 0; }
/* Niet gevraagd: de uitslag stond al vast. Lichter, met een open vakje. */
.kn-check--open { color: var(--kn-tekst-2); }
.kn-check--open .kn-check__teken { border: 2px dashed var(--kn-lijn); }
.kn-check--open .kn-check__titel { font-weight: 400; }
.kn-uitslag .kn-checks { padding-top: 8px; }

/* Links in een melding: in de tekstkleur, onderstreept. Blauw haalt op de lichte merktint van AD en KG geen 4,5:1 */
.kn-melding a, .kn .kn-melding a:not([class]) { color: var(--kn-tekst); text-decoration: underline; }
.kn-melding p { margin: 0; }
.kn-melding strong { font-weight: 600; }

/* ---------- Verder en terug ----------
 * In een tool met stappen staat "Vorige" links en "Volgende" rechts. De pijl wijst de kant op waar je heen gaat:
 * achter de tekst bij verder, ervoor bij terug (besluit 04-11-2026). Terug is een tekstknop: hij moet niet opvallen. */
.kn-navigatie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.kn-navigatie > :last-child { margin-left: auto; }
.kn-knop--verder { padding: 0 24px 0 20px; }
.kn-knop--verder svg { order: 1; width: 12px; height: 12px; } /* even groot als de pijl van terug */
.kn-terug { display: inline-flex; align-items: center; gap: 10px; height: var(--kn-hoogte-knop-neutraal); padding: 0 4px; border: 0;
  font: var(--kn-type-knop); color: var(--kn-tekst); background: transparent; cursor: pointer; }
.kn-terug svg { width: 12px; height: 12px; flex: none; }
.kn-terug svg path { stroke-width: var(--kn-knop-pijl); } /* zelfde pijl als in de verder-knop, alleen de richting verschilt */
.kn-terug:hover { text-decoration: underline; }
.kn-terug:focus-visible { outline: 3px solid var(--kn-interactie); outline-offset: 3px; }

/* ---------- Opties met een beeld ----------
 * Keuze met een kleine tekening (bovenaanzicht, icoon). Naast elkaar op een breed scherm, onder elkaar op mobiel. */
.kn-opties--beeld { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kn-opties--beeld > :not(.kn-optie) { grid-column: 1 / -1; }
.kn-opties--beeld .kn-optie { position: relative; flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px 16px 18px; }
.kn-opties--beeld .kn-optie input { position: absolute; top: 14px; right: 14px; }
.kn-optie__beeld { display: block; width: 72px; height: 72px; padding: 6px; background: var(--kn-achtergrond-2); }
.kn-optie__beeld svg { display: block; width: 100%; height: 100%; }
@media (max-width: 640px) {
  .kn-opties--beeld .kn-optie { flex-direction: row; align-items: center; padding-right: 48px; }
  .kn-opties--beeld .kn-optie input { top: 50%; transform: translateY(-50%); }
  .kn-optie__beeld { width: 56px; height: 56px; flex: none; }
}

/* ---------- Tekeningen ----------
 * Lijniconen en uitlegbeelden als inline SVG. De merkkleur zit in klassen, zodat één tekening in elk merk past.
 * Lijnen (t-lijn, t-merk-lijn, t-haak) kleuren alleen de lijn; zet fill="none" in de tekening als het vlak leeg moet blijven.
 * Neutrale kleuren (donker, grijs) mogen in de tekening zelf staan. */
.kn-tekening { display: block; width: 100%; height: auto; }
.kn-tekening .t-merk { fill: var(--kn-primair); }
.kn-tekening .t-merk-lijn { stroke: var(--kn-primair); }
.kn-tekening .t-merk-licht { fill: var(--kn-primair-licht); }
.kn-tekening .t-grond { fill: var(--kn-achtergrond-2); }
.kn-tekening .t-vlak { fill: var(--kn-achtergrond); }
.kn-tekening .t-wit { fill: var(--kn-wit); }
.kn-tekening .t-lijn { stroke: var(--kn-tekst); }
.kn-tekening .t-straat { fill: var(--kn-lijn); }
.kn-tekening .t-goed { fill: var(--kn-goed); }
.kn-tekening .t-haak { stroke: var(--kn-wit); }
.kn-uitleg .kn-tekening { margin-top: 16px; border: 1px solid var(--kn-lijn); }

/* ---------- CTA-blok ----------
 * Blok na een uitslag in de icoonkleur van het merk (CS bordeaux, AD olijf), zoals de CTA-band kn-band--icoon
 * uit de design systems: kop, korte tekst, de conversieknop en eventueel een neutrale knop (lichte rand). */
.kn-cta { display: grid; gap: 12px; padding: 24px; color: var(--kn-op-donker); background: var(--kn-icoon); border-radius: var(--kn-afronding-kaart); }
.kn-cta h3 { margin: 0; font: var(--kn-type-kop-5); }
.kn-cta p { margin: 0; color: var(--kn-op-donker); }
.kn-cta__knoppen { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 4px; }
.kn-cta .kn-knop--neutraal { --kn-rand-knop: var(--kn-op-donker); --kn-ondergrond: var(--kn-icoon); color: var(--kn-op-donker); }
.kn-cta .kn-knop--neutraal:hover { background: transparent; }