/*
 * keuzehulp.css — de keuzehulp.
 *
 * Hoort bij keuzehulp.php en wordt alleen op die template ingeladen (baserules
 * regel 8), na reset.css, main.css, onderdelen/productkaart.css en
 * onderdelen/inhoud.css. Die laatste twee staan in samitAssets::ONDERDELEN: het
 * raster onder het podium is het raster van de winkel, en de vrije tekst onder
 * het advies komt uit de editor.
 *
 * De secties staan in dezelfde volgorde en met dezelfde nummers als in
 * keuzehulp.php en inc/js/keuzehulp.js:
 *
 *   0. tokens en de pagina zelf
 *   1. de kop
 *   2. de kengetallen
 *   3. de kaart met de vragen
 *   4. de voortgang
 *   5. een vraag
 *   6. een antwoordtegel
 *   7. de stapknoppen
 *   8. de samenvatting
 *   9. het adviespaneel voor de eerste keuze
 *  10. het advies
 *  11. een podiumkaart
 *  12. het raster eronder
 *  13. de slotknoppen
 *  14. de leegmelding
 *  15. het hulpblok
 *  16. de breekpunten
 *
 * Klassenamen zijn camelCase (regel 2). De breekpunten zijn 1024 en 767, gelijk
 * aan samitApparaat::BREEKPUNT en ::BREEKPUNT_SMAL — wijken ze af, dan krijgt
 * een bezoeker rond die breedte de ene HTML met de andere CSS. Dat geldt hier
 * dubbel: de voortgangsbalk bestáát onder 767 pixels niet als trapje maar als
 * regel tekst, en die keuze valt op de server.
 */

/* ==================================================================
 * 0. Tokens en de pagina zelf
 * ================================================================== */

.keuzePagina {
    /* Dezelfde drie blauwen als de kop van de vragenpagina, de hero en de
       footer. Geen eigen tinten: dit is hetzelfde vlak op dezelfde plek — een
       band aan het begin van de pagina die aansluit op de categoriebalk erboven
       — en een vierde blauw ernaast zou de reeks losser maken in plaats van
       rijker. */
    --keuzeDiep: #0f5482;
    --keuzeDiepMidden: #17699e;
    --keuzeDiepLicht: #1b6f9f;

    /* Zachte tekst. Met opzet niet --kleurTekstZacht (#7a8896): dat haalt op wit
       3,6:1 en dus niet de 4,5:1 van WCAG AA, hier nagemeten op de tegeluitleg,
       de aandachtspunten en de btw-regel. Dezelfde waarde als
       --infoTekstZacht in informatie.css, waar dezelfde afweging al gemaakt is;
       die komt op wit uit op 6,0:1 en blijft duidelijk lichter dan de
       hoofdtekst, dus de rangorde in de kaart blijft staan. */
    --keuzeTekstZacht: #5a6478;

    /* De lichte laag waarop de kaarten staan: iets koeler dan wit, zodat een
       witte kaart een kaart is en niet een stuk achtergrond met een randje. */
    --keuzeZacht: #f7fafc;
    --keuzeLijn: #e6ecf2;
    --keuzeLijnDonker: #d7e3ec;
    --keuzeVlak: #f1f7fb;

    --keuzeRand: 14px;
    --keuzeRandGroot: 28px;

    /* Eén verticale maat voor de ruimte tussen de blokken, meebewegend met de
       breedte: een telefoon hoort niet dezelfde 86 pixels wit te krijgen als
       een monitor. */
    --keuzeSectie: clamp(40px, 5vw, 72px);

    background-color: var(--keuzeZacht);
}

/*
 * De kop loopt van rand tot rand en zet zijn eigen ruimte bovenaan. De
 * standaardmarge van het inhoudsgebied moet er hier dus af — net als op de
 * voorpagina, de vragenpagina en het productoverzicht.
 */
.siteInhoud {
    padding-top: 0;
}

/* ==================================================================
 * 1. De kop
 *
 * Dezelfde drie achtergrondlagen als `.vraagKop`: twee radiale gloeden en een
 * lineair verloop, alle drie stilstaand en alle drie eindigend op transparant.
 * Geen filter: blur(), geen backdrop-filter en geen mix-blend-mode — die zijn
 * duur zodra er iets bij beweegt, en hier beweegt de kaart eronder. Zie de les
 * bij `.hero` in front-page.css.
 *
 * De onderrand is ruim, want de kaart met de vragen valt er met een negatieve
 * marge over heen. Dat is wat deze pagina zijn eigen gezicht geeft zonder een
 * nieuwe ontwerptaal te openen: hetzelfde blauw, dezelfde afronding, alleen
 * ligt het formulier er half op.
 * ================================================================== */

.keuzeKop {
    position: relative;
    z-index: 1;
    padding-block: clamp(32px, 3.4vw, 48px) clamp(78px, 8vw, 104px);
    border-radius: 0 0 var(--keuzeRandGroot) var(--keuzeRandGroot);
    background-color: var(--keuzeDiep);
    background-image:
        radial-gradient(760px 620px at 14% -30%, rgb(120 200 245 / 38%) 0%, rgb(120 200 245 / 0%) 64%),
        radial-gradient(680px 560px at 88% 128%, rgb(86 178 236 / 32%) 0%, rgb(86 178 236 / 0%) 62%),
        linear-gradient(158deg, var(--keuzeDiep) 0%, var(--keuzeDiepMidden) 54%, var(--keuzeDiepLicht) 100%);
    color: var(--kleurWit);
    isolation: isolate;
}

/*
 * Gecentreerd, met een leesmaat die de titel niet over de volle 1180 pixels
 * uitrekt: 760 is de breedte waarop de intro op twee regels uitkomt.
 */
.keuzeKopInner {
    position: relative;
    max-width: 760px;
    text-align: center;
}

.keuzeKopLabel {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 18px;
    padding: 7px 16px 7px 12px;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 8%);
    font-size: 0.8125rem;
    line-height: 1.3;
}

/*
 * Het stipje is oranje en niet wit. Warmte komt op deze pagina van wat tóch al
 * oranje is — het stipje, het vinkje op een gekozen tegel, de rolvlag van de
 * beste match — en nooit van een gloed over het blauw. Zie de tokens in
 * front-page.css.
 */
.keuzeKopStip {
    width: 7px;
    height: 7px;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
}

.keuzeKopTitel {
    margin: 0;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.01em;
}

.keuzeKopIntro {
    max-width: 620px;
    margin: 16px auto 0;
    /* 92% wit en niet 78%: op dit lichtere blauw is een zachtere tint niet meer
       leesbaar. Zie de contrastnotitie in CLAUDE.md. */
    color: rgb(255 255 255 / 92%);
    font-size: var(--tekstMd);
    line-height: 1.6;
}

/* ==================================================================
 * 2. De kengetallen
 *
 * Twee gerekende getallen en één ingevulde regel. Ze staan op één rij met een
 * scheidingslijntje ertussen, en dat lijntje komt uit een border-left op alles
 * behalve de eerste — geen los element, want het is geen inhoud.
 * ================================================================== */

.keuzeFeiten {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 26px 0 0;
    padding: 0;
    list-style: none;
}

.keuzeFeit {
    display: flex;
    align-items: baseline;
    gap: 7px;
    padding-inline: 18px;
    border-left: 1px solid rgb(255 255 255 / 20%);
}

.keuzeFeit:first-child {
    border-left: 0;
}

.keuzeFeitWaarde {
    font-size: var(--tekstLg);
    font-weight: 600;
    line-height: 1;
}

.keuzeFeitLabel {
    color: rgb(255 255 255 / 88%);
    font-size: var(--tekstSm);
}

.keuzeFeitBreed .keuzeFeitLabel {
    font-weight: 500;
}

/* ==================================================================
 * 3. De kaart met de vragen
 *
 * Een witte kaart die met een negatieve marge over de onderrand van de blauwe
 * band valt. De z-index hoort bij die overhang: de band heeft er ook een, en
 * zonder deze zou de schaduw van de kaart erachter verdwijnen.
 * ================================================================== */

.keuzeRomp {
    position: relative;
    z-index: 2;
    padding-bottom: var(--keuzeSectie);
}

.keuzeVragenKaart {
    margin-top: clamp(-72px, -6vw, -52px);
    padding: clamp(20px, 2.4vw, 32px);
    border: 1px solid var(--keuzeLijn);
    border-radius: var(--keuzeRandGroot);
    background-color: var(--kleurWit);
    box-shadow: 0 18px 44px rgb(15 24 74 / 12%);
}

.keuzeForm {
    margin: 0;
}

/* ==================================================================
 * 4. De voortgang
 *
 * Het trapje links, de teller rechts. De teller is het getal dat deze pagina
 * bruikbaar maakt: hij loopt bij elk antwoord terug, en daarmee is te zien dat
 * een keuze iets doet.
 * ================================================================== */

.keuzeVoortgang {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimteMd);
    margin-bottom: clamp(20px, 2vw, 28px);
    padding-bottom: clamp(16px, 1.6vw, 22px);
    border-bottom: 1px solid var(--keuzeLijn);
}

/*
 * Een <ol> met een teller, want het nummer staat niet in de HTML: de lijst ís
 * genummerd, en het cijfer twee keer neerzetten laat een schermlezer "twee
 * twee" voorlezen.
 */
.keuzeTrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: keuzeStap;
}

.keuzeTrapStap {
    display: flex;
    align-items: center;
    gap: 8px;
    counter-increment: keuzeStap;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstXs);
}

/*
 * Het verbindingslijntje. Op elke stap behalve de laatste, en met `::after` in
 * plaats van een los element: het is opmaak en geen inhoud.
 */
.keuzeTrapStap:not(:last-child)::after {
    width: clamp(10px, 2vw, 26px);
    height: 2px;
    border-radius: var(--randRond);
    background-color: var(--keuzeLijnDonker);
    content: "";
}

.keuzeTrapBol {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1.5px solid var(--keuzeLijnDonker);
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    color: var(--keuzeTekstZacht);
    font-size: 0.75rem;
    font-weight: 500;
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.keuzeTrapBol::before {
    content: counter(keuzeStap);
}

/*
 * Alleen bij de vraag die open staat. Vijf vragen met hun tekst erbij vullen op
 * 1180 pixels de hele regel en laten geen ruimte voor de teller ernaast; de
 * bolletjes zeggen waar je bent en het label zegt waarbij.
 */
.keuzeTrapLabel {
    display: none;
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.keuzeTrapNu .keuzeTrapLabel {
    display: inline;
}

/* De vraag waar de bezoeker mee bezig is: oranje, want dat is de plek waar hij
   moet kijken. */
.keuzeTrapNu {
    color: var(--kleurTekst);
    font-weight: 500;
}

.keuzeTrapNu .keuzeTrapBol {
    border-color: var(--kleurOranje);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

/* Een beantwoorde vraag: blauw met een vinkje in plaats van het nummer. */
.keuzeTrapKlaar {
    color: var(--kleurBlauwDonker);
}

.keuzeTrapKlaar .keuzeTrapBol {
    border-color: var(--kleurBlauw);
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.keuzeTrapKlaar .keuzeTrapBol::before {
    content: "\2713";
    font-size: 0.8125rem;
}

.keuzeTrapKlaar:not(:last-child)::after {
    background-color: var(--kleurBlauw);
}

/* De regel "Vraag 2 van 5" in de smalle weergave. */
.keuzeVoortgangTekst {
    margin: 0;
    color: var(--kleurTekst);
    font-size: var(--tekstSm);
    font-weight: 500;
}

.keuzeTeller {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 7px 14px;
    border-radius: var(--randRond);
    background-color: var(--keuzeVlak);
    color: var(--kleurBlauwDonker);
    font-size: var(--tekstXs);
    font-weight: 500;
    white-space: nowrap;
}

.keuzeTellerStip {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: var(--randRond);
    background-color: var(--kleurGroen);
}

/* ==================================================================
 * 5. Een vraag
 *
 * De <legend> wordt als blok opgemaakt en niet als flexcontainer: op een
 * <legend> is `display: flex` niet in elke browser betrouwbaar, en het nummer
 * ernaast is een inline-block die dat niet nodig heeft.
 * ================================================================== */

.keuzeStap {
    margin: 0;
    padding: 0;
    border: 0;
}

.keuzeVraag {
    display: block;
    width: 100%;
    padding: 0;
    color: var(--kleurTekst);
}

.keuzeVraagTekst {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 600;
    line-height: 1.25;
}

.keuzeToelichting {
    margin: 10px 0 0;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstSm);
    line-height: 1.55;
}

/* ==================================================================
 * 6. Een antwoordtegel
 *
 * Het <input> zit in .screenReaderText — hij blijft dus focusbaar en de
 * pijltjestoetsen werken, maar wat je ziet is het <label>. De stand hangt aan
 * `:checked` en aan `:focus-visible` van dat verborgen veld, met de
 * broer-selector.
 *
 * De aangevinkte stand komt uit een `box-shadow: inset` en niet uit een dikkere
 * rand: een border die van 1 naar 2 pixels gaat verschuift de inhoud van de
 * tegel een pixel, en dat is bij een raster van vijf tegels zichtbaar als
 * geklapper.
 * ================================================================== */

/*
 * Drie tegels per rij op de volle breedte. Met een krappere minimummaat kwamen
 * er vier in, en dan valt een regel als "Een beeldscherm bij een computer die je
 * al hebt" over drie regels uiteen en wordt de rij hoger dan hij hoeft te zijn.
 */
.keuzeTegels {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 10px;
    margin-top: clamp(16px, 1.8vw, 22px);
}

.keuzeTegelHouder {
    position: relative;
    display: flex;
}

.keuzeTegel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px;
    border: 1px solid var(--keuzeLijn);
    border-radius: var(--keuzeRand);
    background-color: var(--kleurWit);
    cursor: pointer;
    transition:
        border-color var(--duurSnel) ease,
        background-color var(--duurSnel) ease,
        box-shadow var(--duurSnel) ease,
        transform var(--duurSnel) var(--versnelling);
}

.keuzeTegel:hover {
    border-color: var(--kleurBlauw);
    box-shadow: var(--schaduwMd);
    transform: translateY(-1px);
}

.keuzeTegelIcoon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    border-radius: 11px;
    background-color: var(--keuzeVlak);
    color: var(--kleurBlauwDonker);
    transition:
        background-color var(--duurSnel) ease,
        color var(--duurSnel) ease;
}

.keuzeTegelIcoonSvg {
    width: 21px;
    height: 21px;
}

.keuzeTegelWoorden {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.keuzeTegelLabel {
    color: var(--kleurTekst);
    font-size: var(--tekstBasis);
    font-weight: 500;
    line-height: 1.3;
}

.keuzeTegelUitleg {
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.4;
}

.keuzeTegelAantal {
    padding: 4px 9px;
    border-radius: var(--randRond);
    background-color: var(--keuzeZacht);
    color: var(--keuzeTekstZacht);
    font-size: 0.75rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
 * Het vinkje staat in de derde kolom, op dezelfde plek als het aantal. Dat is
 * met opzet: bij een gekozen tegel is het aantal dat erbij staat het aantal van
 * de hele keuze, en dat staat al in de teller boven de vraag.
 */
.keuzeTegelVink {
    display: none;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: var(--randRond);
    background-color: var(--kleurOranje);
    color: var(--kleurWit);
}

.keuzeTegelVinkSvg {
    width: 14px;
    height: 14px;
}

.keuzeInvoer:checked + .keuzeTegel {
    border-color: var(--kleurBlauw);
    background-color: var(--keuzeVlak);
    box-shadow: inset 0 0 0 1px var(--kleurBlauw);
}

.keuzeInvoer:checked + .keuzeTegel .keuzeTegelIcoon {
    background-color: var(--kleurBlauw);
    color: var(--kleurWit);
}

.keuzeInvoer:checked + .keuzeTegel .keuzeTegelAantal {
    display: none;
}

.keuzeInvoer:checked + .keuzeTegel .keuzeTegelVink {
    display: grid;
}

/*
 * De focusring op het label en niet op het veld: het veld is één pixel groot en
 * weggeclipt, dus zou de ring nergens te zien zijn. `:focus-visible` en niet
 * `:focus`, zodat een muisklik geen ring achterlaat.
 */
.keuzeInvoer:focus-visible + .keuzeTegel {
    outline: 2px solid var(--kleurOranje);
    outline-offset: 2px;
}

.keuzeOverslaanRegel {
    margin: 14px 0 0;
}

.keuzeOverslaan {
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstSm);
    text-decoration: underline;
    text-decoration-color: var(--keuzeLijnDonker);
    text-underline-offset: 3px;
    transition: color var(--duurSnel) ease;
}

.keuzeOverslaan:hover,
.keuzeOverslaan:focus-visible {
    color: var(--kleurBlauw);
}

/* ==================================================================
 * 7. De stapknoppen
 *
 * De knop "Toon mijn advies" staat er voor de bezoeker zonder JavaScript; draait
 * het script, dan haalt het hem uit de DOM en zet het deze twee neer. Ze staan
 * dus nooit samen in beeld.
 * ================================================================== */

.keuzeVerstuur,
.keuzeKnoppen {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ruimteMd);
    margin: clamp(18px, 2vw, 26px) 0 0;
}

.keuzeVerstuur {
    justify-content: flex-end;
}

.keuzeVerstuurPijl,
.keuzeVerderPijl {
    width: 16px;
    height: 16px;
}

.keuzeTerug {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--keuzeTekstZacht);
    font-family: inherit;
    font-size: var(--tekstSm);
    cursor: pointer;
    transition: color var(--duurSnel) ease;
}

.keuzeTerug:hover,
.keuzeTerug:focus-visible {
    color: var(--kleurBlauw);
}

.keuzeTerugPijl {
    width: 15px;
    height: 15px;
    transform: rotate(180deg);
}

/*
 * De eerste vraag heeft geen vorige. De knop verdwijnt dan niet uit de rij maar
 * wordt onzichtbaar gehouden, zodat "Volgende vraag" op dezelfde plek blijft
 * staan als bij de tweede vraag — een knop die tussen twee vragen 80 pixels
 * opzij springt, is een knop die je op de verkeerde plek aanklikt. `visibility`
 * en niet `hidden`: het element blijft ruimte innemen, en dat is precies het
 * doel. Hij is daarbij ook niet aan te klikken en niet te focussen.
 */
.keuzeTerugUit {
    visibility: hidden;
}

/* ==================================================================
 * 8. De samenvatting
 *
 * Dezelfde labeltjes als boven het productoverzicht: elk labeltje is een link
 * die dat ene antwoord weghaalt.
 * ================================================================== */

.keuzeSamenvatting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: clamp(20px, 2.2vw, 28px);
}

.keuzeSamenvattingKop {
    margin: 0;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstXs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.keuzeChips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.keuzeChip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 10px 6px 12px;
    border: 1px solid var(--keuzeLijnDonker);
    border-radius: var(--randRond);
    background-color: var(--kleurWit);
    color: var(--kleurTekst);
    font-size: var(--tekstXs);
    text-decoration: none;
    transition:
        border-color var(--duurSnel) ease,
        background-color var(--duurSnel) ease;
}

.keuzeChip:hover,
.keuzeChip:focus-visible {
    border-color: var(--kleurOranje);
    background-color: #fff8ee;
}

.keuzeChipWaarde {
    font-weight: 500;
}

.keuzeChipKruis {
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    color: var(--keuzeTekstZacht);
}

.keuzeChipKruis svg {
    width: 11px;
    height: 11px;
}

.keuzeChip:hover .keuzeChipKruis,
.keuzeChip:focus-visible .keuzeChipKruis {
    color: var(--kleurOranjeDonker);
}

/* ==================================================================
 * 9. Het adviespaneel voor de eerste keuze
 *
 * Geen leeg kader en geen "geen resultaten": er is nog niets gevraagd. Wat er
 * staat is wat de bezoeker straks krijgt — de drie rollen met hun belofte —
 * zodat hij weet waarvoor hij de vragen beantwoordt.
 * ================================================================== */

.keuzeAdvies {
    margin-top: var(--keuzeSectie);
}

.keuzeStart {
    max-width: 42rem;
    margin-inline: auto;
    padding: clamp(24px, 3vw, 40px);
    border: 1px dashed var(--keuzeLijnDonker);
    border-radius: var(--keuzeRandGroot);
    background-color: var(--kleurWit);
    text-align: center;
}

.keuzeStartKop {
    margin: 0;
    font-size: var(--tekstH3);
    font-weight: 600;
    line-height: 1.2;
}

.keuzeStartTekst {
    margin: 10px auto 0;
    max-width: 32rem;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstBasis);
    line-height: 1.6;
}

.keuzeBelofteLijst {
    display: grid;
    gap: 10px;
    margin: clamp(20px, 2.4vw, 28px) 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.keuzeBelofteRegel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--keuzeRand);
    background-color: var(--keuzeZacht);
}

.keuzeBelofteIcoon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background-color: var(--kleurWit);
    color: var(--kleurBlauw);
}

.keuzeBelofteIcoonSvg {
    width: 18px;
    height: 18px;
}

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

.keuzeBelofteLabel {
    font-size: var(--tekstSm);
    font-weight: 500;
}

.keuzeBelofteUitleg {
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstXs);
    line-height: 1.45;
}

/* ==================================================================
 * 10. Het advies
 * ================================================================== */

.keuzeUitkomstKop {
    max-width: 44rem;
    margin-bottom: clamp(20px, 2.4vw, 30px);
}

.keuzeUitkomstTitel {
    margin: 0;
    font-size: clamp(1.375rem, 2.6vw, 1.875rem);
    font-weight: 600;
    line-height: 1.18;
}

.keuzeUitkomstTekst {
    margin: 8px 0 0;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstMd);
    line-height: 1.55;
}

/*
 * De eerlijke melding bij een krap budget. Oranje omlijnd en niet rood: het is
 * geen fout, het is een afweging die de bezoeker zelf mag maken.
 */
.keuzeMelding {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 14px 0 0;
    padding: 12px 14px;
    border: 1px solid #f6d9ac;
    border-radius: var(--keuzeRand);
    background-color: #fff8ee;
    color: #7a4b00;
    font-size: var(--tekstSm);
    line-height: 1.5;
}

.keuzeMeldingIcoon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
}

/* ==================================================================
 * 11. Een podiumkaart
 *
 * Drie kolommen, en de eerste is de aanbeveling: die krijgt de oranje rolvlag
 * en een iets zwaardere schaduw. De twee ernaast zijn alternatieven en dragen
 * blauw. Geen vierde kleur en geen groen: groen betekent op deze site
 * "op voorraad" (zie het bolletje in de voet van de kaart), en dezelfde kleur
 * voor twee betekenissen maakt beide onbetrouwbaar.
 * ================================================================== */

.keuzePodium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(12px, 1.4vw, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.keuzeKaartHouder {
    display: flex;
}

.keuzeKaart {
    position: relative;
    display: flex;
    width: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--keuzeLijn);
    border-radius: var(--keuzeRandGroot);
    background-color: var(--kleurWit);
    transition:
        border-color var(--duurMd) ease,
        box-shadow var(--duurMd) ease,
        transform var(--duurMd) var(--versnelling);
}

.keuzeKaart:hover,
.keuzeKaart:focus-within {
    border-color: var(--kleurBlauw);
    box-shadow: var(--schaduwLg);
    transform: translateY(-3px);
}

.keuzeKaartEerste .keuzeKaart {
    border-color: #f7d2a0;
    box-shadow: 0 10px 30px rgb(245 139 0 / 14%);
}

/*
 * De rolvlag. De twee tinten en hun tekstkleur zijn gemeten en niet gekozen —
 * dezelfde werkwijze als bij de blauwen in main.css:
 *
 *   - wit op het merkblauw #237eb3 haalt 4,46:1 en dus net niet de 4,5:1 die
 *     WCAG AA voor 13px vraagt. Vandaar --kleurHeaderNav (#2079ac), hetzelfde
 *     blauw dat de categoriebalk in de header om die reden al draagt: 4,84:1.
 *   - wit op het oranje #f58b00 haalt 2,45:1 en komt daar niet in de buurt.
 *     Een donkerder oranje zou werken maar haalt de verzadiging eruit, en
 *     verzadiging is wat een kleur vrolijk maakt (zie CLAUDE.md). Dus blijft het
 *     oranje staan en gaat de tekst naar het diepblauw van de site: 7,6:1, en
 *     een oranje vlag met donkere letters valt méér op dan een met witte.
 */
.keuzeRol {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 11px 16px;
    background-color: var(--kleurHeaderNav);
    color: var(--kleurWit);
    font-size: var(--tekstXs);
}

.keuzeKaartEerste .keuzeRol {
    background-color: var(--kleurOranje);
    color: var(--kleurTekst);
}

.keuzeRolIcoon {
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.keuzeRolIcoonSvg {
    width: 16px;
    height: 16px;
}

.keuzeRolLabel {
    font-weight: 500;
}

/*
 * Het matchpercentage staat rechts in de vlag, in een eigen pil. `auto` op de
 * marge in plaats van `justify-content: space-between`: het label mag bij een
 * lange rolnaam gewoon doorlopen en de pil moet er dan achteraan blijven staan.
 */
/*
 * Op de blauwe vlag een zwarte sluier en op de oranje een witte, en dat is geen
 * smaakkwestie: de pil verandert de achtergrond onder zijn eigen tekst. Wit op
 * blauw wordt beter van een donkerder pil, donkere tekst op oranje van een
 * lichtere. Een witte sluier op beide zou de blauwe pil juist onder de eis
 * duwen.
 */
.keuzeRolScore {
    margin-left: auto;
    padding: 3px 8px;
    border-radius: var(--randRond);
    background-color: rgb(15 24 74 / 22%);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.keuzeKaartEerste .keuzeRolScore {
    background-color: rgb(255 255 255 / 34%);
}

.keuzeKaartBeeld {
    position: relative;
    display: grid;
    height: 180px;
    place-items: center;
    overflow: hidden;
    border-bottom: 1px solid var(--keuzeLijn);
    background: linear-gradient(180deg, #fff 0%, var(--keuzeZacht) 100%);
}

.keuzeKaartVlag {
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    border-radius: var(--randSm);
    background-color: rgb(15 24 74 / 78%);
    color: var(--kleurWit);
    font-size: 0.6875rem;
    font-weight: 500;
}

/*
 * Absoluut gepositioneerd met de lucht als padding, precies zoals
 * `.winkelKaartFoto` in onderdelen/productkaart.css. Dat is geen willekeurige
 * keuze maar de enige stand die klopt, en dit bestand liep in de eerste versie
 * tegen dezelfde muur aan: met `max-height: 100%` op een rasteritem lost een
 * percentage niet op tegen de vaste hoogte van de houder maar tegen de rij, en
 * die rij wordt zo hoog als de afbeelding zelf. De foto's uit de migratie zijn
 * 400 bij 400, dus liep de foto 170 pixels over de titel, de onderbouwing en de
 * prijs heen.
 *
 * Absoluut gepositioneerd ís de houder wél een vaste maat, dus lost
 * `height: 100%` daar op.
 */
.keuzeKaartFoto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 16px;
    object-fit: contain;
    transition: transform var(--duurMd) var(--versnelling);
}

.keuzeKaart:hover .keuzeKaartFoto {
    transform: scale(1.04);
}

.keuzeKaartGeenFoto {
    display: grid;
    place-items: center;
    color: var(--keuzeLijnDonker);
}

.keuzeKaartGeenFotoIcoon {
    width: 46px;
    height: 46px;
}

.keuzeKaartTekst {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px;
}

.keuzeKaartMerk {
    margin: 0 0 3px;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstXs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.keuzeKaartTitel {
    margin: 0;
    font-size: var(--tekstBasis);
    font-weight: 600;
    line-height: 1.35;
}

.keuzeKaartLink {
    color: var(--kleurTekst);
    transition: color var(--duurSnel) ease;
}

.keuzeKaartLink:hover,
.keuzeKaartLink:focus-visible {
    color: var(--kleurBlauw);
}

/*
 * Eén link per kaart, met een ::after eroverheen die de hele kaart aanklikbaar
 * maakt. Zie de kop van template-parts/keuzehulp/kaart.php.
 */
.keuzeKaartLink::after {
    position: absolute;
    inset: 0;
    content: "";
}

/* ==================================================================
 * De onderbouwing
 * ================================================================== */

.keuzeRedenen {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.keuzeReden {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-block: 3px;
    color: var(--kleurTekst);
    font-size: var(--tekstXs);
    line-height: 1.45;
}

.keuzeRedenIcoon {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    margin-top: 1px;
    color: var(--kleurGroen);
}

.keuzeRedenLet {
    color: var(--keuzeTekstZacht);
}

.keuzeRedenLet .keuzeRedenIcoon {
    color: var(--kleurOranje);
}

.keuzeKaartVoet {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ruimteSm);
    margin-top: auto;
    padding-top: 14px;
}

.keuzeKaartPrijs {
    margin: 0;
    color: var(--kleurTekst);
    font-size: var(--tekstLg);
    font-weight: 600;
    line-height: 1.1;
}

.keuzeKaartPrijs del {
    margin-right: 6px;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstSm);
    font-weight: 400;
}

.keuzeKaartPrijs ins {
    text-decoration: none;
}

.keuzeKaartBtw {
    margin: 2px 0 0;
    color: var(--keuzeTekstZacht);
    font-size: 0.6875rem;
}

.keuzeKaartVoorraad {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: var(--tekstXs);
    white-space: nowrap;
}

.keuzeKaartBolletje {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: var(--randRond);
    background-color: var(--keuzeTekstZacht);
}

.keuzeKaartVoorraad.opVoorraad {
    color: var(--kleurGroen);
}

.keuzeKaartVoorraad.opVoorraad .keuzeKaartBolletje {
    background-color: var(--kleurGroen);
}

.keuzeKaartVoorraad.geenVoorraad {
    color: var(--keuzeTekstZacht);
}

.keuzeKaartActie {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 12px 0 0;
    color: var(--kleurBlauw);
    font-size: var(--tekstXs);
    font-weight: 500;
    opacity: 0;
    transition: opacity var(--duurMd) ease;
}

.keuzeKaart:hover .keuzeKaartActie,
.keuzeKaart:focus-within .keuzeKaartActie {
    opacity: 1;
}

.keuzeKaartActiePijl {
    width: 16px;
    height: 16px;
    transition: transform var(--duurMd) var(--versnelling);
}

.keuzeKaart:hover .keuzeKaartActiePijl {
    transform: translateX(3px);
}

/* ==================================================================
 * 12. Het raster eronder
 *
 * Dezelfde kaart en hetzelfde raster als in de winkel; alleen de variabelen
 * worden bijgesteld. Drie kolommen, want er staan er zes — twee rijen van drie
 * onder een podium van drie leest als één blok.
 * ================================================================== */

.keuzeMeer {
    margin-top: var(--keuzeSectie);
}

.keuzeMeerKop {
    margin: 0 0 clamp(14px, 1.6vw, 20px);
    font-size: var(--tekstH3);
    font-weight: 600;
    line-height: 1.2;
}

.keuzeRaster {
    --rasterKolommen: 3;
    --kaartBeeld: 160px;
}

/* ==================================================================
 * 13. De slotknoppen
 * ================================================================== */

.keuzeSlot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(14px, 1.8vw, 22px);
    margin-top: var(--keuzeSectie);
}

/*
 * De grote knop is oranje — de standaard `.knop` uit main.css — want dit is de
 * enige plek op de pagina waar de bezoeker verder de winkel in gaat. Het aantal
 * staat er als eigen pil in en niet in de tekst, zodat de tekst een veld blijft
 * en het getal gerekend wordt.
 */
.keuzeSlotKnop {
    padding: 14px 22px;
    font-size: var(--tekstMd);
}

.keuzeSlotAantal {
    padding: 3px 9px;
    border-radius: var(--randRond);
    background-color: rgb(255 255 255 / 24%);
    font-size: var(--tekstXs);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.keuzeSlotPijl {
    width: 18px;
    height: 18px;
    transition: transform var(--duurMd) var(--versnelling);
}

.keuzeSlotKnop:hover .keuzeSlotPijl {
    transform: translateX(3px);
}

.keuzeOpnieuw {
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstSm);
    text-decoration: underline;
    text-decoration-color: var(--keuzeLijnDonker);
    text-underline-offset: 3px;
    transition: color var(--duurSnel) ease;
}

.keuzeOpnieuw:hover,
.keuzeOpnieuw:focus-visible {
    color: var(--kleurBlauw);
}

/* ==================================================================
 * 14. De leegmelding
 * ================================================================== */

.keuzeLeeg {
    max-width: 34rem;
    margin-inline: auto;
    padding: clamp(24px, 3vw, 40px);
    border: 1px solid var(--keuzeLijn);
    border-radius: var(--keuzeRandGroot);
    background-color: var(--kleurWit);
    text-align: center;
}

.keuzeLeegKop {
    margin: 0;
    font-size: var(--tekstH3);
    font-weight: 600;
    line-height: 1.2;
}

.keuzeLeegTekst {
    margin: 10px 0 0;
    color: var(--keuzeTekstZacht);
    font-size: var(--tekstBasis);
    line-height: 1.6;
}

.keuzeLeegKnoppen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ruimteSm);
    margin: clamp(18px, 2vw, 24px) 0 0;
}

.keuzeLeegKnopIcoon {
    width: 16px;
    height: 16px;
}

/* ==================================================================
 * 15. Het hulpblok
 *
 * Dezelfde opzet en dezelfde blauwen als `.vraagHulp` op de vragenpagina: wie
 * de keuzehulp doorloopt en nog twijfelt, hoort dezelfde uitweg te vinden als
 * wie de veelgestelde vragen doorleest.
 * ================================================================== */

.keuzeHulp {
    padding-block: var(--keuzeSectie);
    background-color: var(--keuzeZacht);
}

.keuzeHulpPaneel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 2.6vw, 34px);
    padding: clamp(22px, 2.8vw, 36px);
    border-radius: var(--keuzeRandGroot);
    background-color: var(--keuzeDiepMidden);
    background-image: linear-gradient(152deg, var(--keuzeDiep) 0%, var(--keuzeDiepMidden) 62%, var(--keuzeDiepLicht) 100%);
    color: var(--kleurWit);
}

.keuzeHulpTekst {
    display: flex;
    align-items: center;
    gap: clamp(14px, 1.8vw, 22px);
}

.keuzeHulpFoto {
    width: 76px;
    height: 76px;
    flex: 0 0 auto;
    border: 2px solid rgb(255 255 255 / 26%);
    border-radius: var(--randRond);
    object-fit: cover;
}

.keuzeHulpWoorden {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.keuzeHulpKop {
    margin: 0;
    font-size: var(--tekstH3);
    font-weight: 600;
    line-height: 1.2;
}

.keuzeHulpRegel {
    max-width: 34rem;
    margin: 0;
    color: rgb(255 255 255 / 92%);
    font-size: var(--tekstBasis);
    line-height: 1.55;
}

.keuzeHulpTijden {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    color: rgb(255 255 255 / 90%);
    font-size: var(--tekstXs);
}

.keuzeHulpStip {
    width: 7px;
    height: 7px;
    border-radius: var(--randRond);
    background-color: var(--kleurGroen);
    box-shadow: 0 0 0 3px rgb(8 184 21 / 22%);
}

.keuzeHulpKnoppen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.keuzeHulpKnop {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border: 1px solid rgb(255 255 255 / 24%);
    border-radius: var(--keuzeRand);
    background-color: rgb(255 255 255 / 10%);
    color: var(--kleurWit);
    transition:
        background-color var(--duurSnel) ease,
        border-color var(--duurSnel) ease;
}

.keuzeHulpKnop:hover,
.keuzeHulpKnop:focus-visible {
    border-color: rgb(255 255 255 / 44%);
    background-color: rgb(255 255 255 / 18%);
}

.keuzeHulpKnopIcoon {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.keuzeHulpKnopIcoon svg {
    width: 18px;
    height: 18px;
}

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

.keuzeHulpKnopLabel {
    color: rgb(255 255 255 / 88%);
    font-size: 0.6875rem;
}

.keuzeHulpKnopWaarde {
    font-size: var(--tekstSm);
    font-weight: 500;
}

.keuzeHulpKnopPijl {
    width: 15px;
    height: 15px;
    opacity: 0.7;
}

/* De vrije tekst uit de editor, als die er staat. */
.keuzeVrijeTekst {
    max-width: 44rem;
    margin: var(--keuzeSectie) auto 0;
}

/* ==================================================================
 * 16. De breekpunten
 *
 * 1024 en 767 zijn samitApparaat::BREEKPUNT en ::BREEKPUNT_SMAL. Onder 767
 * levert de server andere HTML voor de voortgangsbalk; deze regels gaan alleen
 * over plaatsing, en dat is precies de grens die CLAUDE.md tussen CSS en regel
 * 16 legt.
 * ================================================================== */

@media (width <= 1024px) {
    /*
     * Het podium van drie naar twee, met de aanbeveling over de volle breedte.
     * Op 900 pixels is een kaart van een derde 280 pixels breed, en dan vallen
     * de vier onderbouwingsregels elk over twee regels uit elkaar.
     */
    .keuzePodium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .keuzeKaartEerste {
        grid-column: 1 / -1;
    }

    /*
     * De aanbeveling ligt daar op zijn kant: de foto links, de tekst rechts.
     * Dan is hij nog steeds de grootste van de drie zonder dat hij een halve
     * schermhoogte inneemt.
     */
    .keuzeKaartEerste .keuzeKaart {
        display: grid;
        grid-template-columns: minmax(0, 34%) minmax(0, 1fr);
        grid-template-areas:
            "rol rol"
            "beeld tekst";
    }

    .keuzeKaartEerste .keuzeRol {
        grid-area: rol;
    }

    .keuzeKaartEerste .keuzeKaartBeeld {
        height: 100%;
        min-height: 190px;
        grid-area: beeld;
    }

    .keuzeKaartEerste .keuzeKaartTekst {
        grid-area: tekst;
    }

    .keuzeRaster {
        --rasterKolommen: 2;
    }
}

@media (width <= 767px) {
    .keuzeKop {
        padding-block: 26px 88px;
    }

    /*
     * De kengetallen onder elkaar met de scheidingslijn erboven in plaats van
     * ernaast: drie regels van elk één getal met een verticaal streepje ertussen
     * wordt op 360 pixels een stapel afgebroken woorden.
     */
    .keuzeFeiten {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .keuzeFeit {
        padding-inline: 0;
        border-left: 0;
    }

    .keuzeTegels {
        grid-template-columns: 1fr;
    }

    .keuzePodium {
        grid-template-columns: 1fr;
    }

    .keuzeKaartEerste .keuzeKaart {
        display: flex;
        grid-template-columns: none;
        grid-template-areas: none;
    }

    .keuzeKaartEerste .keuzeKaartBeeld {
        min-height: 0;
        height: 180px;
    }

    .keuzeHulpPaneel {
        flex-direction: column;
        align-items: flex-start;
    }

    .keuzeHulpKnoppen {
        width: 100%;
        flex-direction: column;
    }

    .keuzeHulpKnop {
        justify-content: flex-start;
    }

    /*
     * Op een aanraakscherm is er geen hover, dus zou "Bekijk dit toestel" er
     * nooit staan. De regel valt weg in plaats van dat er een lege ruimte
     * openblijft — dezelfde afweging als bij `.winkelKaartActie`.
     */
    .keuzeKaartActie {
        display: none;
    }
}

/*
 * Geen hover-apparaat: de foto en de kaart bewegen niet mee. Staat na de
 * mediaqueries hierboven zodat hij die kan overschrijven op een aanraakscherm
 * dat breder is dan 767 pixels.
 */
@media (hover: none) {
    .keuzeKaart:hover {
        transform: none;
    }

    .keuzeKaart:hover .keuzeKaartFoto {
        transform: none;
    }

    .keuzeTegel:hover {
        transform: none;
    }
}

/*
 * Op papier is er geen formulier om in te vullen en geen knop om op te
 * klikken: wat overblijft is het advies. De vragen gaan eruit, het podium naar
 * twee kolommen en de kleurvlakken naar wit — een blauwe band van rand tot rand
 * kost een halve inktpatroon en voegt op papier niets toe.
 */
@media print {
    .keuzeKop,
    .keuzeHulpPaneel {
        background-image: none;
        background-color: var(--kleurWit);
        color: var(--kleurTekst);
        box-shadow: none;
    }

    .keuzeKopIntro,
    .keuzeFeitLabel,
    .keuzeHulpRegel {
        color: var(--kleurTekst);
    }

    .keuzeVragenKaart,
    .keuzeVoortgang,
    .keuzeVerstuur,
    .keuzeSlot,
    .keuzeSamenvattingKop {
        display: none;
    }

    .keuzePodium {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .keuzeRaster {
        --rasterKolommen: 2;
    }

    .keuzeKaartActie {
        display: none;
    }
}

/* ==================================================================
 * 17. De sluier tijdens het ophalen
 *
 * Staat na de breekpunten, want hij moet op elke breedte gelden. Een korte
 * verzachting en geen spinner: het advies staat er al, het wordt alleen
 * vervangen, en een laadicoon over inhoud die nog leesbaar is suggereert dat er
 * niets staat. `pointer-events` erbij zodat er niet op een kaart geklikt wordt
 * die een tel later een andere is.
 *
 * Geen filter: blur() — zie de les in CLAUDE.md. Dit is een opacity op iets dat
 * verandert, en dat is precies het goedkope antwoord.
 * ================================================================== */

.keuzeAdviesBezig {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity var(--duurMd) ease;
}