/* Keukencheck — eigen opmaak, in de huisstijl van het thema.
   Alles onder .kc zodat het niets buiten de tool raakt. */

.kc {
  --kc-ink: #100F0E;
  --kc-ink-2: #191715;
  --kc-ink-3: #242120;
  --kc-bone: #F3F1EC;
  --kc-bone-2: #E4E0D7;
  --kc-grey: #9A948B;
  --kc-amber: #EDA31B;
  --kc-amber-d: #C9860C;
  --kc-line: rgba(243, 241, 236, .13);
  --kc-line-2: rgba(243, 241, 236, .07);
  --kc-rood: #E0674A;

  background: var(--kc-ink);
  color: var(--kc-bone);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  font-weight: 350;
  padding: clamp(22px, 4vw, 52px) 0;
}
.kc *, .kc *::before, .kc *::after { box-sizing: border-box; }
.kc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.kc h2, .kc h3, .kc h4 { font-family: Archivo, Helvetica, Arial, sans-serif; margin: 0; text-wrap: balance; }
.kc p { margin: 0; }
.kc .num { font-variant-numeric: tabular-nums; }
.kc :focus-visible { outline: 2px solid var(--kc-amber); outline-offset: 3px; }

/* ---------------- kop ---------------- */
.kc-titel {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.03em;
}
.kc-lbl {
  font-family: Archivo, sans-serif;
  font-size: .68rem; font-weight: 700; letter-spacing: .19em;
  text-transform: uppercase; color: var(--kc-amber);
  display: block; margin-bottom: 10px;
}
.kc-lead {
  color: #CFC9BF; font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 62ch; margin-top: 14px;
}

/* ---------------- indeling ---------------- */
.kc-lijf {
  display: grid; gap: clamp(18px, 3vw, 34px);
  grid-template-columns: 1fr;
  margin-top: clamp(24px, 4vw, 44px);
}
@media (min-width: 940px) {
  .kc-lijf { grid-template-columns: minmax(0, 1fr) 360px; align-items: start; }
  .kc-paneel { position: sticky; top: 92px; }
}

/* ---------------- vragen ---------------- */
.kc-vragen { display: grid; gap: 14px; min-width: 0; }
.kc-v {
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-line);
  border-radius: 6px;
  padding: clamp(14px, 2.4vw, 22px);
  min-width: 0;
}
.kc-v h3 {
  font-size: clamp(1.05rem, 1.9vw, 1.35rem);
  font-weight: 700; line-height: 1.2; letter-spacing: -.015em;
}
.kc-hint { color: var(--kc-grey); font-size: .93rem; margin-top: 6px !important; }

.kc-keuzes {
  display: grid; gap: 8px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.kc-kaart {
  appearance: none; text-align: left; cursor: pointer;
  background: var(--kc-ink-3);
  border: 1px solid var(--kc-line);
  border-radius: 5px;
  color: var(--kc-bone);
  padding: 11px 13px;
  font: inherit;
  display: block; min-width: 0;
  transition: border-color .16s, background .16s, transform .16s;
}
.kc-kaart b {
  display: block; font-family: Archivo, sans-serif;
  font-size: .96rem; font-weight: 700; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.kc-kaart i {
  display: block; font-style: normal; color: var(--kc-grey);
  font-size: .82rem; line-height: 1.35; margin-top: 3px;
  overflow-wrap: anywhere;
}
.kc-kaart:hover { border-color: rgba(243, 241, 236, .3); }
.kc-kaart.aan {
  background: rgba(237, 163, 27, .12);
  border-color: var(--kc-amber);
}
.kc-kaart.aan b { color: var(--kc-amber); }

/* tellers */
.kc-tellers { display: grid; gap: 10px; margin-top: 14px; }
.kc-teller {
  display: flex; align-items: center; gap: 12px;
  background: var(--kc-ink-3);
  border: 1px solid var(--kc-line);
  border-radius: 5px; padding: 10px 12px;
  min-width: 0;
}
.kc-icoon { width: 22px; height: 30px; flex: 0 0 auto; }
.kc-icoon rect { fill: none; stroke: var(--kc-grey); stroke-width: 1.4; }
.kc-icoon .kc-grip { fill: var(--kc-amber); stroke: none; }
.kc-tlabel { flex: 1 1 auto; min-width: 0; }
.kc-tlabel b {
  display: block; font-family: Archivo, sans-serif;
  font-size: .95rem; font-weight: 700;
}
.kc-tlabel i {
  display: block; font-style: normal; color: var(--kc-grey);
  font-size: .8rem; line-height: 1.3;
}
.kc-knoppen { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.kc-knoppen button {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 5px; cursor: pointer;
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-line);
  color: var(--kc-bone);
  font-size: 1.15rem; line-height: 1;
  transition: border-color .16s, color .16s;
}
.kc-knoppen button:hover { border-color: var(--kc-amber); color: var(--kc-amber); }
.kc-getal {
  min-width: 34px; text-align: center;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

/* ---------------- zijpaneel met de tekening ---------------- */
.kc-paneel {
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-line);
  border-radius: 6px;
  padding: clamp(14px, 2.4vw, 20px);
  min-width: 0;
}
.kc-paneel h3 { font-size: 1.05rem; font-weight: 700; }
.kc-tekening {
  margin-top: 12px;
  background: var(--kc-ink);
  border: 1px solid var(--kc-line-2);
  border-radius: 5px;
  padding: 10px;
}
.kc-tekening svg { width: 100%; height: auto; display: block; }
.kc-vlak {
  fill: rgba(243, 241, 236, .07);
  stroke: rgba(243, 241, 236, .34);
  stroke-width: 1;
}
.kc-lade { fill: rgba(243, 241, 236, .04); }
.kc-vlak.kc-zij { fill: rgba(237, 163, 27, .13); stroke: var(--kc-amber-d); }
.kc-greep { fill: var(--kc-amber); }
.kc-leegtekst { fill: var(--kc-grey); font-size: 15px; font-family: Archivo, sans-serif; }
@media (prefers-reduced-motion: no-preference) {
  .kc-vlak { animation: kc-op .34s both; animation-delay: var(--v, 0ms); }
}
@keyframes kc-op { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

/* meelopende samenvatting in het zijpaneel */
.kc-mini {
  margin-top: 14px;
  border-top: 1px solid var(--kc-line);
  padding-top: 14px;
}
.kc-minikop {
  display: block; margin-top: 4px;
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: 1.05rem; color: var(--kc-amber);
  overflow-wrap: anywhere;
}
.kc-miniband {
  display: block; margin-top: 2px;
  font-family: Archivo, sans-serif; font-weight: 800; font-size: 1.2rem;
  letter-spacing: -.02em; overflow-wrap: anywhere;
}

/* Op een smal scherm staat het uitkomstblok er vlak onder, met dezelfde
   voorbehoudzin. Twee keer achter elkaar leest slordig. */
.kc-minidisc { display: none; }
@media (min-width: 940px) { .kc-minidisc { display: block; } }

/* ---------------- uitkomst ---------------- */
.kc-uitkomst { margin-top: clamp(28px, 5vw, 56px); }
.kc-h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.6rem);
  font-weight: 800; letter-spacing: -.028em; line-height: 1.04;
}
.kc-maat { color: var(--kc-grey); margin-top: 10px !important; font-size: .95rem; }
.kc-maat b { color: var(--kc-bone); }
.kc-disc { display: block; color: var(--kc-amber); font-size: .85rem; margin-top: 2px; }

.kc-routes {
  display: grid; gap: 12px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
/* Vijf routes: op een breed scherm passen er vier naast elkaar en blijft de
   vijfde alleen achter. Drie kolommen leest als 3 + 2 en dat oogt rustiger. */
@media (min-width: 1080px) {
  .kc-routes { grid-template-columns: repeat(3, 1fr); }
}
.kc-route {
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-line);
  border-radius: 6px;
  padding: 16px;
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
.kc-route.top { border-color: var(--kc-amber); background: rgba(237, 163, 27, .06); }
.kc-route.af { opacity: .72; }
.kc-route header { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.kc-letter {
  width: 26px; height: 26px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 4px;
  background: var(--kc-ink-3); border: 1px solid var(--kc-line);
  font-family: Archivo, sans-serif; font-weight: 800; font-size: .84rem;
}
.kc-route.top .kc-letter { background: var(--kc-amber); border-color: var(--kc-amber); color: var(--kc-ink); }
.kc-route h4 { font-size: 1.06rem; font-weight: 700; letter-spacing: -.012em; }
.kc-vlag {
  font-family: Archivo, sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--kc-amber); border: 1px solid var(--kc-amber);
  border-radius: 3px; padding: 3px 6px; white-space: nowrap;
}
.kc-vlag.af { color: var(--kc-rood); border-color: var(--kc-rood); }
.kc-wat { color: #CFC9BF; font-size: .93rem; line-height: 1.5; }

.kc-prijs {
  border-top: 1px solid var(--kc-line-2);
  border-bottom: 1px solid var(--kc-line-2);
  padding: 11px 0;
}
.kc-plabel {
  display: block;
  font-family: Archivo, sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--kc-grey);
}
.kc-band {
  display: block; font-family: Archivo, sans-serif;
  font-size: clamp(1.15rem, 2.4vw, 1.45rem); font-weight: 800;
  letter-spacing: -.02em; margin-top: 3px;
  overflow-wrap: anywhere;
}
.kc-band-geen { font-size: 1.02rem; color: var(--kc-bone-2); }
/* Elk bedrag twee keer: exclusief en inclusief btw. */
.kc-bandincl {
  display: block; margin-top: 1px;
  font-family: Archivo, sans-serif; font-weight: 700;
  font-size: .95rem; color: var(--kc-bone-2);
  overflow-wrap: anywhere;
}
/* Het btw-label staat altijd op een eigen regel. Inline meelopen ziet er in
   een brede kaart goed uit maar breekt in een smalle af, en dan staat het in
   de ene kolom anders dan in de andere. */
.kc-btwlbl {
  display: block; margin-top: -1px;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-weight: 400; font-size: .76rem; color: var(--kc-grey);
  letter-spacing: 0; white-space: nowrap;
}
.kc-ponder {
  display: block; font-style: normal; color: var(--kc-grey);
  font-size: .82rem; line-height: 1.4; margin-top: 6px;
}

/* Label boven de waarde. Een vaste labelkolom werkt hier niet: "DOORLOOPTIJD"
   is breder dan zijn basis, waardoor de waarden per regel verspringen. */
.kc-feiten { margin: 0; display: grid; gap: 9px; }
.kc-feiten dt {
  font-family: Archivo, sans-serif; font-size: .66rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kc-grey);
  margin-bottom: 1px;
}
.kc-feiten dd { margin: 0; font-size: .89rem; line-height: 1.4; }

.kc-nadelen span {
  display: block;
  font-family: Archivo, sans-serif; font-size: .68rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--kc-grey);
  margin-bottom: 5px;
}
.kc-nadelen ul { margin: 0; padding-left: 17px; }
.kc-nadelen li { font-size: .85rem; line-height: 1.45; color: #C3BDB4; margin-bottom: 3px; }

.kc-waarschuwing {
  background: rgba(224, 103, 74, .1);
  border: 1px solid rgba(224, 103, 74, .4);
  border-radius: 5px; padding: 10px 12px;
}
.kc-waarschuwing b {
  display: block; font-family: Archivo, sans-serif;
  font-size: .88rem; color: var(--kc-rood); margin-bottom: 3px;
}
.kc-waarschuwing span { display: block; font-size: .85rem; line-height: 1.45; color: #E5DDD6; }

/* werkblad-prijsklassen */
.kc-werkblad {
  margin-top: 12px;
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-line);
  border-radius: 6px; padding: 16px;
}
.kc-werkblad h4 { font-size: 1.02rem; font-weight: 700; }
.kc-werkblad ul {
  list-style: none; margin: 12px 0 0; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.kc-werkblad li { min-width: 0; }

/* De materialen zijn knoppen geworden (gemeld: "deze kan ik niet aanvinken").
   Daar hoort ook zichtbaar bediening bij: een cursor die het zegt, een rand die
   meebeweegt onder de muis, en een duidelijke focusring voor wie met het
   toetsenbord werkt. Een vak dat klikt maar er niet klikbaar uitziet is net zo
   onbruikbaar als een vak dat niet klikt. */
.kc-werkblad li > .kc-wbmat {
  display: block; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--kc-ink-3); border: 1px solid var(--kc-line-2);
  border-radius: 5px; padding: 10px 12px; min-width: 0; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
}
.kc-werkblad li > .kc-wbmat:hover { border-color: var(--kc-amber); transform: translateY(-1px); }
.kc-werkblad li > .kc-wbmat:active { transform: none; }
.kc-werkblad li > .kc-wbmat:focus-visible { outline: 2px solid var(--kc-amber); outline-offset: 2px; }
.kc-werkblad .kc-wbmat b { display: block; font-family: Archivo, sans-serif; font-size: .92rem; }
.kc-werkblad .kc-wbmat span { display: block; font-size: .84rem; color: var(--kc-grey); line-height: 1.4; }
.kc-werkblad .kc-wbmat.aan { border-color: var(--kc-amber); background: rgba(237, 163, 27, .1); }
.kc-werkblad .kc-wbmat.aan b { color: var(--kc-amber); }

/* advies */
.kc-advies {
  margin-top: 12px;
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-amber);
  border-radius: 6px;
  padding: clamp(16px, 2.6vw, 24px);
}
.kc-advies h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; letter-spacing: -.015em; }
.kc-advieskop {
  margin-top: 10px !important;
  font-size: clamp(1.02rem, 1.8vw, 1.18rem);
  color: var(--kc-bone);
}
.kc-advieskop b { color: var(--kc-amber); }
.kc-redenen { margin: 12px 0 0; padding-left: 18px; }
.kc-redenen li { margin-bottom: 7px; color: #D6D0C7; font-size: .95rem; line-height: 1.5; }

.kc-vaste { margin-top: 16px; border-top: 1px solid var(--kc-line); padding-top: 14px; }
.kc-vaste h4 {
  font-size: .68rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kc-grey);
}
.kc-vaste ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.kc-vaste li {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-bottom: 1px solid var(--kc-line-2); padding-bottom: 6px;
}
.kc-vaste li span { min-width: 0; font-size: .92rem; }
.kc-vaste li i {
  display: block; font-style: normal; color: var(--kc-grey);
  font-size: .8rem; line-height: 1.35;
}
.kc-vaste li b {
  flex: 0 0 auto; text-align: right;
  font-family: Archivo, sans-serif; font-weight: 700;
}
.kc-vaste li small { font-weight: 400; font-size: .72rem; color: var(--kc-grey); }
.kc-vaste li em {
  display: block; font-style: normal; font-weight: 400;
  font-size: .78rem; color: var(--kc-grey);
}

.kc-slot { margin-top: 14px !important; color: var(--kc-grey); font-size: .9rem; }

.kc-verder {
  display: inline-block; margin-top: 16px;
  background: var(--kc-amber); color: var(--kc-ink);
  border: 0; border-radius: 5px; cursor: pointer;
  padding: 13px 22px;
  font-family: Archivo, sans-serif; font-weight: 700; font-size: .98rem;
  letter-spacing: -.01em; text-decoration: none;
  transition: background .16s;
}
.kc-verder:hover { background: var(--kc-amber-d); }

/* ---------------- smal scherm ---------------- */
@media (max-width: 460px) {
  .kc { font-size: 16px; }
  .kc-keuzes { grid-template-columns: 1fr 1fr; }
  .kc-routes, .kc-werkblad ul { grid-template-columns: 1fr; }
  .kc-feiten dt { flex-basis: 84px; }
}
@media (max-width: 340px) {
  .kc-keuzes { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   13 SEPTEMBER 2026 — DE CHECK ALS WIZARD, MET EEN LEVENDE TEKENING

   Wat hier ontbrak: de opmaak van page-keukencheck.php zelf. Het blad
   gebruikt .kc-raster / .kc-links / .kc-rechts en de id's #kc-vragen,
   #kc-svg, #kc-mini en #kc-uitkomst. Voor geen van die zes stond hier
   ook maar een regel. De twee kolommen die hierboven voor .kc-lijf en
   .kc-paneel klaarstonden zijn op de site dus nooit aangekomen: op een
   breed scherm viel de tekening ver onder de vragen, en er liep niets
   mee bij het scrollen. Hieronder staat het wel.

   Op een telefoon staat de tekening BOVEN de vragen en blijft hij daar
   plakken, want dat is het hele punt: je klikt en je ziet je keuken
   veranderen. Op een breed scherm staat hij ernaast en loopt hij mee.
   ══════════════════════════════════════════════════════════════════ */

.kc-raster {
  display: grid;
  gap: clamp(16px, 3vw, 30px);
  grid-template-columns: 1fr;
  margin-top: clamp(20px, 3.5vw, 38px);
}
.kc-links, .kc-rechts { min-width: 0; }
/* smal scherm: eerst zien wat je krijgt, dan pas kiezen */
.kc-rechts { order: -1; position: sticky; top: 0; z-index: 6; }
@media (min-width: 940px) {
  .kc-raster { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; }
  .kc-rechts { order: 0; top: 92px; }
}
#kc-vragen { display: block; min-width: 0; }
#kc-uitkomst { display: none; }
#kc-uitkomst.kc-zichtbaar { display: block; margin-top: clamp(26px, 5vw, 50px); }

/* ---------------- de tekening ---------------- */
#kc-svg {
  display: block;
  background: var(--kc-ink-2);
  border: 1px solid var(--kc-line);
  border-radius: 6px;
  overflow: hidden;
}
.kc-keuken {
  display: block; width: 100%; height: auto;
  /* de kleuren die overvloeien; keukencheck.js zet ze per keuze */
  --kc-front: #EDEAE3; --kc-front-rand: #BEB9AE;
  --kc-blad: #D9D5CD; --kc-blad-rand: #A09C94;
  --kc-greep: #5C5F60;
  --kc-glans: .05; --kc-nerf: 0; --kc-ader: 0;
  --kc-bladader: 0; --kc-bladnerf: 0;
}
.kc-k-muur { fill: #2B2724; }
.kc-k-vloer { fill: #221F1D; }
.kc-k-achterwand { fill: #3A3430; }
.kc-k-plint { fill: #1B1917; }
.kc-k-apparaat { fill: #2E3133; stroke: rgba(243,241,236,.20); stroke-width: 1; }
.kc-k-ovenruit { fill: #14181A; stroke: rgba(243,241,236,.13); stroke-width: 1; }
.kc-k-spoelbak { fill: #9FA5A6; stroke: rgba(0,0,0,.3); stroke-width: 1; }
.kc-k-kookplaat { fill: #1A1D1F; stroke: rgba(243,241,236,.18); stroke-width: 1; }
.kc-k-pit { fill: none; stroke: rgba(243,241,236,.42); stroke-width: 1.2; }
.kc-k-kraan { fill: none; stroke: #A8AEAF; stroke-width: 3.2; stroke-linecap: round; }
.kc-k-naad { stroke: rgba(0,0,0,.5); stroke-width: 1.4; }
.kc-k-lijst { fill: rgba(0,0,0,.42); }

/* de vlakken die van kleur wisselen. 260 ms met een curve die afremt,
   zodat het oog de verandering pakt zonder dat het traag voelt. */
.kc-k-kleur { fill: var(--kc-front); transition: fill .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-rand  { stroke: var(--kc-front-rand); stroke-width: 1; transition: stroke .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-glans { opacity: var(--kc-glans); transition: opacity .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-nerf  { opacity: var(--kc-nerf);  transition: opacity .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-ader  { opacity: var(--kc-ader);  transition: opacity .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-bladkleur { fill: var(--kc-blad); transition: fill .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-bladnerf  { opacity: var(--kc-bladnerf); transition: opacity .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-bladader  { opacity: var(--kc-bladader); transition: opacity .26s cubic-bezier(.22,.61,.36,1); }
.kc-k-zij .kc-k-kleur { filter: brightness(.88); }

/* het plattegrondje rechtsonder */
.kc-k-planvak { fill: rgba(16,15,14,.82); stroke: var(--kc-line); stroke-width: 1; }
.kc-k-planruimte { fill: none; stroke: rgba(243,241,236,.22); stroke-width: 1; stroke-dasharray: 3 3; }
.kc-k-planblok { fill: var(--kc-amber); opacity: .85; transition: fill .26s, opacity .26s; }
.kc-k-plantekst { fill: var(--kc-bone-2); font-family: Archivo, sans-serif; font-size: 11px; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .kc-k-front { animation: kc-op .3s both; animation-delay: var(--v, 0ms); }
  .kc-ververst { animation: kc-puls .3s cubic-bezier(.22,.61,.36,1); }
}
@keyframes kc-puls { from { opacity: .82; } to { opacity: 1; } }

.kc-onderschrift {
  display: block;
  margin-top: 10px; padding: 10px 12px;
  background: var(--kc-ink-2); border: 1px solid var(--kc-line); border-radius: 6px;
  font-size: .92rem; color: var(--kc-bone-2);
}
.kc-onderschrift b { color: var(--kc-bone); }
.kc-onderschrift i { display: block; margin-top: 3px; font-style: normal; font-size: .82rem; color: var(--kc-grey); }

/* ---------------- voortgang ---------------- */
.kc-voortgang { margin-bottom: 14px; }
.kc-vkop { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; }
.kc-vkop b {
  font-family: Archivo, sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .17em; text-transform: uppercase; color: var(--kc-amber);
}
.kc-vkop span { font-size: .9rem; color: var(--kc-grey); font-variant-numeric: tabular-nums; }
.kc-vbalk { margin-top: 8px; height: 5px; border-radius: 3px; background: var(--kc-line-2); overflow: hidden; }
.kc-vbalk i {
  display: block; height: 100%; border-radius: 3px; background: var(--kc-amber);
  transition: width .3s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) { .kc-vbalk i { transition: none; } }

.kc-faseonder { color: var(--kc-grey); font-size: .92rem; margin-bottom: 10px !important; }

/* ---------------- één vraag per scherm ---------------- */
.kc-stap { min-width: 0; }
@media (prefers-reduced-motion: no-preference) {
  .kc-in { animation: kc-schuif .26s cubic-bezier(.22,.61,.36,1) both; }
}
@keyframes kc-schuif { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

.kc-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; align-items: center; }
.kc-nav button {
  font: inherit; font-family: Archivo, sans-serif; font-weight: 700;
  border-radius: 4px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 48px; padding: 0 18px;
  transition: background .16s, border-color .16s, transform .09s;
}
.kc-nav button:active { transform: translateY(1px); }
.kc-nav svg { width: 15px; height: 15px; }
.kc-nav-terug {
  background: transparent; color: var(--kc-bone-2);
  border: 1px solid var(--kc-line);
}
.kc-nav-terug:hover:not([disabled]) { border-color: var(--kc-bone-2); color: var(--kc-bone); }
.kc-nav-terug[disabled] { opacity: .35; cursor: default; }
.kc-nav-weetniet {
  background: transparent; color: var(--kc-grey);
  border: 1px dashed var(--kc-line); font-weight: 600;
}
.kc-nav-weetniet:hover { color: var(--kc-bone); border-color: var(--kc-bone-2); }
.kc-nav-verder {
  margin-left: auto;
  background: var(--kc-amber); color: #17140F; border: 1px solid var(--kc-amber);
}
.kc-nav-verder:hover { background: var(--kc-amber-d); border-color: var(--kc-amber-d); }

/* de klik is meteen zichtbaar, ook voordat er iets berekend is */
@media (prefers-reduced-motion: no-preference) {
  .kc-tik { animation: kc-tik .18s cubic-bezier(.22,.61,.36,1); }
}
@keyframes kc-tik { 0% { transform: scale(1); } 42% { transform: scale(.965); } 100% { transform: scale(1); } }

/* ---------------- samenvatting ---------------- */
.kc-samen {
  background: var(--kc-ink-2); border: 1px solid var(--kc-line);
  border-radius: 6px; padding: clamp(14px, 2.4vw, 22px);
}
.kc-samen h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
.kc-samen ul { list-style: none; margin: 0; padding: 0; }
.kc-samen li {
  display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline;
  padding: 9px 0; border-top: 1px solid var(--kc-line-2);
}
.kc-samen li span { flex: 1 1 150px; color: var(--kc-grey); font-size: .92rem; }
.kc-samen li b { color: var(--kc-bone); font-weight: 600; }
.kc-wijzig {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--kc-amber); font: inherit; font-size: .88rem; text-decoration: underline;
}
.kc-samenknoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.kc-samenknoppen button {
  font: inherit; font-family: Archivo, sans-serif; font-weight: 700;
  min-height: 48px; padding: 0 18px; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--kc-bone); border: 1px solid var(--kc-amber);
  transition: background .16s;
}
.kc-samenknoppen button:hover { background: rgba(237,163,27,.14); }
.kc-samenhint { margin-top: 14px !important; color: var(--kc-grey); font-size: .92rem; }

/* ---------------- het bedrag telt mee ---------------- */
.kc-mini { min-width: 0; }
.kc-telt { transition: color .2s; }
.kc-telt.op { color: var(--kc-amber); }

/* ---------------- smal scherm ---------------- */
@media (max-width: 939px) {
  .kc-rechts {
    background: var(--kc-ink);
    padding-bottom: 8px;
    box-shadow: 0 10px 18px -12px rgba(0,0,0,.85);
  }
  .kc-mini {
    display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: baseline;
    margin-top: 8px; padding-top: 10px;
  }
  .kc-minidisc { display: none; }
}
@media (max-width: 460px) {
  .kc-nav button { padding: 0 14px; }
  .kc-nav-verder { margin-left: 0; flex: 1 1 100%; justify-content: center; }
}

/* ---------------- samenvatting: prijs, wat nu, later verder ---------------- */
.kc-samenprijs {
  background: var(--kc-ink-3); border: 1px solid var(--kc-line);
  border-radius: 5px; padding: 14px 16px; margin-bottom: 16px;
}
.kc-samenprijs b {
  display: block; margin-top: 4px;
  font-family: Archivo, sans-serif; font-weight: 800;
  font-size: clamp(1.5rem, 4.4vw, 2rem); letter-spacing: -.025em;
  color: var(--kc-amber); overflow-wrap: anywhere;
}
.kc-samenbtw { display: block; margin-top: 3px; font-size: .9rem; color: var(--kc-bone-2); }
.kc-samenwat { display: block; margin-top: 9px; font-size: .92rem; color: var(--kc-grey); }
.kc-watnu { margin-top: 16px; }
.kc-watnu h4 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.kc-watnu ol { margin: 0; padding-left: 20px; color: var(--kc-bone-2); font-size: .95rem; }
.kc-watnu li { margin: 4px 0; }
.kc-later {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--kc-line);
}
.kc-later b { display: block; font-family: Archivo, sans-serif; font-size: .98rem; }
.kc-later span { display: block; margin: 4px 0 8px; font-size: .9rem; color: var(--kc-grey); }
.kc-laterlink {
  width: 100%; font: inherit; font-size: .86rem;
  background: var(--kc-ink); color: var(--kc-bone-2);
  border: 1px solid var(--kc-line); border-radius: 4px;
  padding: 10px 12px; min-height: 44px;
}
.kc-laterkopie {
  margin-top: 8px; font: inherit; font-family: Archivo, sans-serif; font-weight: 700;
  min-height: 44px; padding: 0 16px; border-radius: 4px; cursor: pointer;
  background: transparent; color: var(--kc-bone); border: 1px solid var(--kc-line);
}
.kc-laterkopie:hover { border-color: var(--kc-amber); color: var(--kc-amber); }
.kc-minireden { display: block; }