/* ---------------------------------------------------------------------------
 * keuzehulp.css — templates/keuzehulp.php (baserules 8)
 *
 * Naar 'Keuzehulp' in Claude Design, maat voor maat. Drie schermen in één
 * blad: de start (.khIntro), een vraag (.khVragen) en het advies (.khAdvies
 * met de blokken eronder). Het ontwerp schakelt op 760px naar kleinere
 * kaarten, letters en vinkjes; dat is hier één @media-blok onderaan.
 *
 * Het ontwerp is content-box, dit thema border-box (zie de kop van main.css).
 * Waar dat verschil maakt is de maat opgeteld en staat het erbij.
 *
 * Een antwoord is een knop (één keuze) of een label met een vinkje (meer
 * keuzes); beide heten .khOptie. De aangevinkte stand komt van de server
 * (.isAan) en, bij de vinkjes, ook van :has(:checked) — dan klopt hij ook
 * zonder JavaScript zodra je klikt.
 * --------------------------------------------------------------------------- */

.keuzeHulp {
    background: var(--kleurWit);
}

.keuzeHulp [hidden] {
    display: none !important;
}

/* Het vinkje of de radio zelf: onzichtbaar, maar bereikbaar met het toetsenbord. */
.keuzeHulp .khVak {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.keuzeHulp .sterren {
    color: var(--kleurGeelDiep);
}

/* --------------------------------------------------------------------------
 * Start
 * -------------------------------------------------------------------------- */

.khIntro {
    display: flex;
    align-items: center;
    min-height: calc(100vh - 160px);
    background: linear-gradient(160deg, var(--kleurMint) 0%, var(--kleurGrond) 55%, var(--kleurGeelVlak) 100%);
}

.khIntroBinnen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
    padding-top: 40px;
    padding-bottom: 64px;
}

.khIntroTekst {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.khIntroKop {
    font-size: clamp(38px, 4.6vw, 64px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
}

.khIntroKop:focus,
.khVraagTitel:focus,
.khAdviesTitel:focus {
    outline: 0;
}

.khIntroLees {
    max-width: 46ch;
    color: var(--kleurTekstZacht);
    font-size: 18px;
    line-height: 1.6;
}

.khPunten {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.khPunten li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.khPunten .icoon {
    color: var(--kleurActie);
}

.khStart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    height: 62px;
    padding: 0 32px;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    box-shadow: 0 12px 28px rgb(42 165 133 / .35);
    color: var(--kleurWit);
    font-size: 18px;
    font-weight: 800;
    transition: background var(--overgang), transform 150ms;
}

.khStart:hover {
    background: var(--kleurActieHover);
    color: var(--kleurWit);
}

.khStart:active {
    transform: scale(.98);
}

.khIntroBeeld {
    position: relative;
    justify-self: center;
    width: 100%;
    max-width: 580px;
    padding: 24px 0;
}

.khCirkel {
    position: relative;
    aspect-ratio: 1;
    padding: 5%;
    border-radius: 50%;
    background: var(--kleurActie);
}

.khCirkelFoto {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    background: var(--kleurVlak);
    box-shadow: 0 24px 48px rgb(20 60 50 / .25);
}

.khCirkelFoto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.khSticker {
    position: absolute;
    box-shadow: 0 14px 30px rgb(0 0 0 / .12);
}

.khSticker.isWit {
    top: 8%;
    right: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    border-radius: 20px;
    background: var(--kleurWit);
}

.khSticker.isWit strong {
    font-size: 28px;
    letter-spacing: -.03em;
}

.khSticker.isWit span {
    color: var(--kleurTekstZacht);
    font-size: 14px;
}

.khSticker.isGeel {
    bottom: 16%;
    left: 0;
    padding: 12px 18px;
    border-radius: var(--hoekPil);
    background: var(--kleurGeel);
    font-size: 15px;
    font-weight: 800;
}

/* --------------------------------------------------------------------------
 * Een vraag
 * -------------------------------------------------------------------------- */

.khVragen {
    min-height: calc(100vh - 160px);
    background: var(--kleurGrond);
}

.khVragenBinnen {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: clamp(24px, 3vw, 40px);
    padding-top: 28px;
    padding-bottom: 64px;
}

.khVraagKolom {
    display: flex;
    flex: 999 1 600px;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.khKopRij {
    display: flex;
    align-items: center;
    gap: 16px;
}

.khTerug {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--kleurWit);
    color: var(--kleurInkt);
    transition: transform var(--overgang);
}

.khTerug:hover {
    color: var(--kleurInkt);
    transform: translateX(-3px);
}

.khVoortgang {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
}

.khStapLabel {
    color: var(--kleurActieDiep);
    font-size: 14px;
    font-weight: 700;
}

.khBalk {
    display: block;
    height: 8px;
    overflow: hidden;
    border-radius: var(--hoekPil);
    background: var(--kleurRand);
}

.khBalkVol {
    display: block;
    width: var(--khVol, 0%);
    height: 100%;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    transition: width .5s var(--curve);
}

.khStap {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.khVraagKop {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.khVraagTitel {
    font-size: clamp(32px, 3.8vw, 52px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.08;
    text-wrap: balance;
}

.khVraagUitleg {
    max-width: 60ch;
    color: var(--kleurTekstZacht);
    font-size: 17px;
    line-height: 1.6;
}

/* — De antwoorden ------------------------------------------------------- */

.khOpties {
    --khMin: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--khMin)), 1fr));
    gap: 14px;
}

.khOpties.isBreed {
    --khMin: 220px;
}

.khOptie {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 3px solid var(--kleurWit);
    border-radius: 24px;
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}

.khOptie:hover {
    box-shadow: 0 18px 36px rgb(20 60 50 / .12);
    transform: translateY(-4px);
}

.khOptie:active {
    transform: scale(.98);
}

.khOptie.isAan,
.khOptie:has(.khVak:checked) {
    border-color: var(--kleurActie);
    box-shadow: 0 0 0 4px rgb(42 165 133 / .18);
}

.khOptie:has(.khVak:focus-visible) {
    outline: 3px solid var(--kleurFocus);
    outline-offset: 2px;
}

.khVink {
    position: absolute;
    top: 26px;
    right: 26px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 2px solid var(--kleurRand);
    border-radius: 50%;
    background: var(--kleurWit);
    box-shadow: 0 4px 12px rgb(0 0 0 / .18);
    color: var(--kleurWit);
    transition: all var(--overgang);
}

.khOptie.isAan .khVink,
.khOptie:has(.khVak:checked) .khVink {
    border-color: var(--kleurActie);
    background: var(--kleurActie);
}

.khOptieBeeld {
    display: block;
    align-self: stretch;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
}

.khOptieBeeld img,
.khOptieBeeld svg {
    display: block;
    width: 100%;
    height: 100%;
}

.khOptieBeeld.isTekening {
    padding: 6%;
    background: var(--kleurMint);
    transition: background 250ms;
}

.khOptieBeeld.isTekening img {
    object-fit: contain;
}

/* Een bed van twee meter staat even hoog als die bij 'Wie slaapt er'. */
.khOptieBeeld.isTekening svg {
    overflow: visible;
}

.khOptie.isAan .khOptieBeeld.isTekening,
.khOptie:has(.khVak:checked) .khOptieBeeld.isTekening {
    background: #cdeee2;
}

.khOptieBeeld.isFoto {
    background: var(--kleurVlak);
}

.khOptieBeeld.isFoto img {
    object-fit: cover;
}

.khOptieTekst {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 4px 4px;
}

.khOptieTekst strong {
    font-size: 20px;
    letter-spacing: -.02em;
    line-height: 1.2;
}

.khOptieTekst span {
    color: var(--kleurTekstZacht);
    font-size: 16px;
    line-height: 1.4;
}

/* — Het budget ----------------------------------------------------------- */

/* margin-top: in het ontwerp staat het (lege) raster met antwoorden er ook
   boven, en de 22px ruimte daarvan hoort bij hoe het eruitziet. */
.khBudget {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 22px;
    padding: clamp(22px, 3vw, 32px);
    border-radius: 24px;
    background: var(--kleurWit);
}

.khBudgetRij {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.khBudgetLabel {
    color: var(--kleurTekstZacht);
    font-size: 16px;
}

.khBudgetBedrag {
    font-size: 48px;
    font-weight: 800;
    letter-spacing: -.04em;
}

.khSchuif {
    width: 100%;
    height: 32px;
    accent-color: var(--kleurActie);
}

.khBudgetVoet {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--kleurTekstMeta);
    font-size: 14px;
}

.khVolgende {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    align-self: flex-start;
    height: 58px;
    padding: 0 26px;
    border: 0;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--overgang);
}

.khVolgende:hover {
    background: var(--kleurActieDiep);
}

/* — Jouw antwoorden ---------------------------------------------------- */

/* Ontwerp: flex-basis 280px en max-width 340px met 24px padding, content-box. */
.khZij {
    position: sticky;
    top: var(--plakBoven);
    display: flex;
    flex: 1 1 328px;
    flex-direction: column;
    gap: 14px;
    max-width: 388px;
    padding: 24px;
    border-radius: 28px;
    background: var(--kleurWit);
}

.khZijKop {
    font-size: 18px;
    font-weight: 700;
}

.khAntwoorden {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.khAntwoord {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--kleurInkt);
}

.khAntwoord:hover {
    color: var(--kleurInkt);
}

.khAntwoord.isStil {
    opacity: .45;
}

.khNummer {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--kleurGrond);
    color: var(--kleurTekstStil);
    font-size: 13px;
    font-weight: 800;
    transition: all 300ms;
}

.khAntwoord.isGedaan .khNummer {
    background: var(--kleurActie);
    color: var(--kleurWit);
}

.khAntwoord.isNu .khNummer {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.khAntwoordTekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.khAntwoordTekst span {
    color: var(--kleurTekstStil);
    font-size: 13px;
}

.khAntwoordTekst strong {
    font-size: 15px;
}

.khHulp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 14px;
    border-top: 2px solid var(--kleurGrond);
    color: var(--kleurTekstZacht);
    font-size: 14px;
    line-height: 1.4;
}

.khHulp a {
    color: var(--kleurActieDiep);
    font-weight: 700;
}

.khAvatar {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
    font-weight: 800;
}

.khAvatar.isMint {
    width: 42px;
    height: 42px;
    background: var(--kleurMint);
    color: var(--kleurActieDiep);
}

.khAvatar.isGroot {
    width: 72px;
    height: 72px;
    font-size: 26px;
}

/* --------------------------------------------------------------------------
 * Het advies
 * -------------------------------------------------------------------------- */

.khAdvies {
    background: linear-gradient(180deg, var(--kleurMint) 0%, var(--kleurGrond) 70%, var(--kleurWit) 100%);
}

.khAdviesBinnen {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding-top: 28px;
    padding-bottom: clamp(40px, 5vw, 56px);
}

.khAdviesBoven {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.khOpnieuw {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 14px;
    font-weight: 700;
}

.khAdviesKop {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.khAdviesTitel {
    font-size: clamp(34px, 4vw, 56px);
    font-weight: 800;
    letter-spacing: -.04em;
    line-height: 1.05;
    text-wrap: balance;
}

.khChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.khChip {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--overgang), color var(--overgang);
}

.khChip:hover {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.khChipPen {
    opacity: .5;
}

.khLeeg {
    max-width: 60ch;
    color: var(--kleurTekstZacht);
    font-size: 17px;
    line-height: 1.6;
}

/* — Het bed ------------------------------------------------------------- */

.khTop {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
    overflow: hidden;
    border-radius: var(--hoekVlak);
    background: var(--kleurWit);
    box-shadow: 0 24px 48px rgb(20 60 50 / .1);
}

.khTopBeeld {
    position: relative;
    min-height: 420px;
    background: var(--kleurVlak);
}

.khTopBeeld > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.khMatch {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: var(--kleurGeel);
    box-shadow: 0 14px 30px rgb(0 0 0 / .15);
}

.khMatch strong {
    font-size: 36px;
    letter-spacing: -.04em;
    line-height: 1;
}

.khMatch span {
    font-size: 14px;
    font-weight: 700;
}

.khLevering {
    position: absolute;
    bottom: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 40px);
    padding: 8px 14px;
    border-radius: var(--hoekPil);
    background: var(--kleurWit);
    box-shadow: 0 8px 20px rgb(0 0 0 / .12);
    font-size: 14px;
    font-weight: 700;
}

.khStip {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kleurActie);
    box-shadow: 0 0 0 4px rgb(42 165 133 / .2);
}

.khLevering.isLater .khStip {
    background: var(--kleurGeelDiep);
    box-shadow: 0 0 0 4px rgb(242 183 5 / .25);
}

.khTopInfo {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 3.6vw, 40px);
}

.khTopNaamBlok {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.khBeoordeling {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kleurTekstZacht);
    font-size: 14px;
}

.khBeoordeling strong {
    color: var(--kleurInkt);
}

.khTopNaam {
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.05;
    overflow-wrap: break-word;   /* 'Opbergboxspring' past op 320px niet op één regel */
}

.khTopSpecs {
    color: var(--kleurTekstZacht);
    font-size: 16px;
}

.khTegels {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.khTegel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--kleurGrond);
}

.khTegel span {
    color: var(--kleurTekstMeta);
    font-size: 13px;
}

.khTegel strong {
    font-size: 17px;
}

.khBestel {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* De topper: een vinkje in een vlak, zoals de knop in het ontwerp. */
.khTopper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px 12px 12px;
    border: 2px solid var(--kleurRand);
    border-radius: 16px;
    background: var(--kleurWit);
    cursor: pointer;
    transition: all var(--overgang);
}

.khTopper:has(.khVak:checked) {
    border-color: var(--kleurActie);
    background: var(--kleurGrond);
}

.khTopper:has(.khVak:focus-visible),
.khBundelItem:has(.khVak:focus-visible) {
    outline: 3px solid var(--kleurFocus);
    outline-offset: 2px;
}

.khVakje {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 2px solid var(--kleurActieDiep);
    border-radius: 8px;
    background: var(--kleurWit);
    color: var(--kleurWit);
    transition: background var(--overgang);
}

.khVak:checked + .khVakje {
    background: var(--kleurActieDiep);
}

.khTopperBeeld {
    flex-shrink: 0;
    width: 56px;
    height: 40px;
    object-fit: contain;
}

.khTopperTekst {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.khTopperTekst strong {
    font-size: 15px;
}

.khTopperTekst span {
    color: var(--kleurTekstZacht);
    font-size: 13px;
}

.khPrijs {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;
}

.khPrijsNu {
    font-size: 46px;
    letter-spacing: -.04em;
    line-height: 1;
}

.khPrijsVan {
    color: var(--kleurTekstStil);
    font-size: 18px;
}

.khBespaar {
    padding: 5px 12px;
    border-radius: var(--hoekPil);
    background: var(--kleurMint);
    color: var(--kleurActieDiep);
    font-size: 14px;
    font-weight: 800;
}

.khPrijsRegel {
    margin-top: -8px;
    color: var(--kleurTekstZacht);
    font-size: 14px;
}

.khBestelKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 60px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    box-shadow: 0 12px 28px rgb(42 165 133 / .35);
    color: var(--kleurWit);
    font: inherit;
    font-size: 17px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--overgang), transform 150ms;
}

.khBestelKnop:hover {
    background: var(--kleurActieHover);
}

.khBestelKnop:active {
    transform: scale(.98);
}

/* De letter krimpt op een smal scherm mee (13px tot 11px), anders vielen
   'opgebouwd' en 'proefslapen' op 320px uit hun vakje. */
.khZeker {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    font-size: clamp(11px, 3.4vw, 13px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.khZeker li {
    padding: 10px 6px;
    border-radius: 14px;
    background: var(--kleurGrond);
}

.khDetails {
    align-self: flex-start;
    color: var(--kleurActieDiep);
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* — Waarom, en het verhaal ernaast ------------------------------------- */

.khWaaromRij {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
    align-items: start;
    gap: 20px;
    padding-top: clamp(40px, 5vw, 64px);
    padding-bottom: clamp(28px, 4vw, 48px);
}

.khWaarom {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: clamp(24px, 3vw, 36px);
    border-radius: 28px;
    background: var(--kleurActieDiep);
    color: var(--kleurWit);
}

.khWaaromKop,
.khBlokKop {
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1.1;
    text-wrap: balance;
}

.khWaaromKop .kopAccent {
    color: var(--kleurActieLicht);
}

.khWaaromLijst {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.khWaaromLijst li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.khWaaromVink {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kleurGeel);
    color: var(--kleurInkt);
}

.khWaaromLijst li > span:last-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.khWaaromLijst strong {
    font-size: 17px;
}

.khWaaromLijst li > span:last-child > span {
    color: #cdeee2;
    font-size: 15px;
    line-height: 1.5;
}

.khVerhaal {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(24px, 3vw, 36px);
    border: 2px solid var(--kleurVlak);
    border-radius: 28px;
}

.khVerhaalSterren {
    font-size: 18px;
}

.khVerhaalCitaat {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.khVerhaalKop {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.3;
}

.khVerhaalTekst {
    color: var(--kleurTekstZacht);
    font-size: 16px;
    line-height: 1.6;
}

.khVerhaalWie {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    font-size: 15px;
}

.khVerhaalWie > span:last-child {
    display: flex;
    flex-direction: column;
}

.khVerhaalWie > span:last-child > span {
    color: var(--kleurTekstMeta);
    font-size: 14px;
}

/* — Maak compleet ------------------------------------------------------- */

.khBlok {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: clamp(28px, 4vw, 48px);
    padding-bottom: clamp(28px, 4vw, 48px);
}

.khBlok.isLaatste {
    padding-bottom: clamp(56px, 7vw, 96px);
}

.khBundel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    padding: clamp(18px, 3vw, 28px);
    border: 2px solid var(--kleurVlak);
    border-radius: 28px;
}

/* Drie naast elkaar zoals het ontwerp; zijn het er minder, dan houdt een
   vakje toch een derde van de breedte in plaats van de hele rij te vullen. */
.khBundelItems {
    display: grid;
    flex: 1 1 560px;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, max(180px, calc((100% - 24px) / 3))), 1fr));
    gap: 12px;
}

.khBundelItem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    overflow-wrap: anywhere;
    padding: 12px;
    border: 2px solid var(--kleurVlak);
    border-radius: 18px;
    background: var(--kleurWit);
    opacity: .65;
    cursor: pointer;
    transition: all var(--overgang);
}

.khBundelItem:has(.khVak:checked) {
    border-color: var(--kleurActie);
    opacity: 1;
}

.khBundelBeeld {
    flex-shrink: 0;
    width: 52px;
    height: 44px;
    object-fit: contain;
}

.khBundelTekst {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.khBundelTekst strong {
    font-size: 14px;
    line-height: 1.3;
}

.khBundelTekst span {
    font-size: 14px;
}

.khBundelTekst s {
    color: var(--kleurTekstStil);
}

.khBundelSom {
    display: flex;
    flex: 1 1 220px;
    flex-direction: column;
    gap: 10px;
}

.khBundelAantal {
    color: var(--kleurTekstZacht);
    font-size: 15px;
}

.khBundelTotaal {
    font-size: 36px;
    letter-spacing: -.04em;
}

.khBundelKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background var(--overgang), transform 150ms;
}

.khBundelKnop:hover {
    background: var(--kleurActieDiep);
}

/* — Vergelijk ----------------------------------------------------------- */

.khVergelijk {
    overflow-x: auto;
    border: 2px solid var(--kleurVlak);
    border-radius: 28px;
}

.khTabel {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

.khTabel th,
.khTabel td {
    padding: 14px 18px;
    background: var(--kleurWit);
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    vertical-align: top;
}

.khTabel .isBeste {
    background: var(--kleurGrond);
}

.khTabel tbody th,
.khTabel tbody td {
    border-top: 2px solid var(--kleurVlak);
}

.khTabel tr > :first-child {
    width: 180px;
}

.khTabel tr > :not(:first-child) {
    border-left: 2px solid var(--kleurVlak);
}

.khTabel tbody th {
    color: var(--kleurTekstZacht);
    font-weight: 600;
}

.khTabel tbody td.isBeste {
    font-weight: 700;
}

.khTabel thead th {
    padding: 18px;
}

.khTabel thead th > span {
    display: flex;
}

.khTabelBeeld {
    aspect-ratio: 4 / 3;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 14px;
    background: var(--kleurVlak);
}

.khTabelBeeld img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.khTabelNaam {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.khTabelNaam a {
    color: var(--kleurInkt);
    font-size: 17px;
    font-weight: 700;
}

.khBeste {
    padding: 3px 8px;
    border-radius: var(--hoekPil);
    background: var(--kleurGeel);
    font-size: 12px;
    font-weight: 800;
}

.khTabel tbody tr:last-child td {
    padding: 16px 18px;
}

.khTabelKnop {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: var(--hoekPil);
    background: var(--kleurInkt);
    color: var(--kleurWit);
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity var(--overgang);
}

.khTabelKnop.isGroen {
    background: var(--kleurActie);
}

.khTabelKnop:hover {
    opacity: .88;
}

/* — Nog twijfel --------------------------------------------------------- */

.khTwijfel {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-items: center;
    gap: 28px;
    padding: clamp(24px, 4vw, 48px);
    border-radius: var(--hoekVlak);
    background: var(--kleurGrond);
}

.khTwijfelWie {
    display: flex;
    align-items: center;
    gap: 16px;
}

.khTwijfelTekst {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.khTwijfelKop {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}

.khTwijfelTekst p {
    color: var(--kleurTekstZacht);
    font-size: 15px;
    line-height: 1.55;
}

.khMail {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.khMailFout {
    flex: 1 1 100%;
    color: var(--kleurFout);
    font-size: 15px;
    font-weight: 600;
}

/* Ontwerp: height 56px plus een rand van 2px, content-box. */
.khMailVeld {
    flex: 1 1 268px;
    height: 60px;
    padding: 0 22px;
    border: 2px solid var(--kleurRand);
    border-radius: var(--hoekPil);
    outline: 0;
    background: var(--kleurWit);
    color: var(--kleurInkt);
    font: inherit;
    font-size: 16px;
}

.khMailVeld:focus {
    border-color: var(--kleurActie);
}

.khMailKnop,
.khBelKnop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 56px;
    padding: 0 22px;
    border-radius: var(--hoekPil);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all var(--overgang);
}

.khMailKnop {
    border: 0;
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.khMailKnop:hover {
    background: var(--kleurActieDiep);
}

.khBelKnop {
    border: 2px solid var(--kleurInkt);
    color: var(--kleurInkt);
}

.khBelKnop:hover {
    background: var(--kleurInkt);
    color: var(--kleurWit);
}

.khLok {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.khGemaild {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--kleurActieDiep);
    font-size: 17px;
    font-weight: 700;
}

.khGemaild .icoon {
    color: var(--kleurActie);
}

/* — De balk onderin, na 700px scrollen (alleen met JavaScript) ---------- */

.khBalkOnder {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    background: rgb(255 255 255 / .97);
    box-shadow: var(--schaduwBalk);
    backdrop-filter: blur(12px);
}

.khBalkOnderBinnen {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.khBalkBeeld {
    flex-shrink: 0;
    width: 54px;
    height: 44px;
    overflow: hidden;
    border-radius: 10px;
    background: var(--kleurVlak);
}

.khBalkBeeld img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.khBalkTekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.khBalkTekst strong {
    font-size: 16px;
}

.khBalkTekst span {
    color: var(--kleurTekstZacht);
    font-size: 14px;
}

.khBalkPrijs {
    font-size: 22px;
    letter-spacing: -.03em;
}

.khBalkKnop {
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: var(--hoekPil);
    background: var(--kleurActie);
    color: var(--kleurWit);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.khBalkKnop:hover {
    background: var(--kleurActieHover);
}

/* Na 'In winkelwagen' */
[data-knop].isToegevoegd {
    background: var(--kleurActieDiep);
}

/* Een pijl in een knop schuift mee als je erover gaat, zoals in het ontwerp. */
.khStart .icoon,
.khVolgende .icoon,
.khBestelKnop .icoon {
    transition: transform 300ms var(--curve);
}

.khStart:hover .icoon,
.khVolgende:hover .icoon,
.khBestelKnop:hover .icoon {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
 * Smal (het ontwerp schakelt op 760px)
 * -------------------------------------------------------------------------- */

@media (max-width: 47.5rem) {
    .khIntroBeeld {
        max-width: 300px;
        padding: 8px 0 0;
    }

    .khVraagTitel {
        font-size: 28px;
    }

    .khOpties,
    .khOpties.isBreed {
        --khMin: 140px;
    }

    .khOptie {
        padding: 8px;
        border-radius: 18px;
    }

    .khVink {
        top: 14px;
        right: 14px;
        width: 26px;
        height: 26px;
    }

    .khOptieTekst strong {
        font-size: 16px;
    }

    .khOptieTekst span {
        font-size: 13px;
    }

    .khVolgende {
        align-self: stretch;
    }

    .khTopBeeld {
        min-height: 260px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .khOptie,
    .khOptie:hover,
    .khBalkVol {
        transition: none;
        transform: none;
    }
}