/*  Maatwerk klant 1130 — Werkstress & PSA Stress Scan.
    Alleen actief op de pagina waar [custom:stress-scan] staat; raakt geen andere klant.

    KLEUREN — hier staat geen enkele kleurcode. Alles komt uit de --brand-*-variabelen die
    Views/Shared/_SiteLayout.cshtml voor elke site zet op basis van de drie kleuren die de klant in het
    dashboard koos. Krijgt de klant morgen een rood logo, dan zet zij die drie velden om en is de scan
    rood — zonder dat hier iets verandert. Toegestaan naast die variabelen: wit, en zwart/wit met
    transparantie voor haarlijnen en gedempte tekst, want die werken onder elke huisstijl.

    Let op het verschil: --brand-primary is de kleur zoals de klant hem koos (voor vlakken),
    --brand-ink diezelfde kleur automatisch donker genoeg om als tekst op wit leesbaar te zijn.
    Eerder gebruikte dit bestand --base-color; die bestaat alleen in de Crafto-templates en is in
    business1 zelfs de steunkleur, dus bij een sjabloonwissel viel de scan terug op een noodkleur.

    Kleur draagt hier geen betekenis: een lage score is niet rood en een hoge niet groen. Dat kan niet
    als de merkkleur zelf rood mag zijn. Verschil in score toont zich via vulling en dikte van diezelfde
    ene merkkleur. */

/* ── koppen losmaken van de template ─────────────────────────────────────── */
/*  De scan staat middenin de pagina-inhoud, en templates versieren koppen daar op hun eigen manier:
    business1 zet met .biz-page-body h2::before een streepje boven élke h2 en overschrijft de kleur met
    .biz-page-body h2 (specificiteit 0,1,1 — die wint van een losse klasse). Binnen de scan voeren we
    onze eigen hiërarchie, dus die twee zetten we hier expliciet terug. De dubbele klasse in de selector
    is er alleen om boven die template-regel uit te komen. Andere templates die koppen op een eigen
    manier versieren vallen hier vanzelf ook onder. */
.wf-scan-cta .wf-scan-cta-titel::before,
.wf-scan .wf-scan-thema::before,
.wf-scan .wf-scan-klaar-titel::before,
.wf-scan-cta .wf-scan-cta-titel::after,
.wf-scan .wf-scan-thema::after,
.wf-scan .wf-scan-klaar-titel::after { content: none; display: none; }

/*  Ook de marges komen van de template (business1 zet 40px boven elke h2 en overschrijft de marge van
    elke alinea in de pagina-body). Daarom staat álle typografie van de scan hier, met een selector die
    één stap specifieker is dan die van de template. */
.wf-scan-cta .wf-scan-cta-titel,
.wf-scan .wf-scan-thema { color: var(--brand-tertiary-ink); text-transform: none; letter-spacing: -.015em; }
.wf-scan .wf-scan-thema { margin: 0; }
.wf-scan .wf-scan-uitleg { margin: 10px 0 0; }
.wf-scan-cta .wf-scan-cta-titel { margin: 0 0 12px; }
.wf-scan-cta .wf-scan-cta-tekst { margin: 0 0 26px; }
.wf-scan-cta .wf-scan-meta { margin: 14px 0 0; }
.wf-scan .modal-content.is-klaar .wf-scan-klaar-titel { color: var(--brand-on-tertiary); margin: 0 0 12px; }
.wf-scan .wf-scan-klaar-tekst { margin: 0 auto; }

/* ── startkaart op de pagina ─────────────────────────────────────────────── */
.wf-scan-cta {
    background: #fff;
    border-radius: var(--wf-radius-card, 14px);
    box-shadow: 0 9px 17.5px rgba(0, 0, 0, .05);
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 46px);
    margin: 2rem 0;
}
.wf-scan-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--brand-ink);
    margin-bottom: 14px;
}
.wf-scan-cta-titel {
    margin: 0 0 12px;
    font-size: clamp(22px, 3vw, 29px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.015em;
    color: var(--brand-tertiary-ink);
    text-transform: none;
}
.wf-scan-cta-tekst {
    margin: 0 0 26px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(0, 0, 0, .6);
    max-width: 44ch;
}
/*  Eigen knop in plaats van de Crafto-knopklassen: die halen hun kleur uit --base-color en zouden bij
    een sjabloonwissel of kleurwijziging uit de pas lopen met de rest van de scan. */
.wf-scan-knop {
    padding: 16px 30px;
    border: none;
    border-radius: var(--wf-radius-button, 9px);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: filter .2s ease;
}
.wf-scan-knop:hover { filter: brightness(.93); color: var(--brand-on-primary); }
.wf-scan-meta {
    margin: 14px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: rgba(0, 0, 0, .5);
}

/* ── de modal ────────────────────────────────────────────────────────────── */
/*  container-type maakt de maten afhankelijk van de breedte van de modal zelf (cqw) en niet van het
    scherm. Daardoor klopt dezelfde opmaak in de brede modal én op een telefoon, zonder aparte regels
    per schermformaat. */
.wf-scan .modal-content {
    container-type: inline-size;
    background: #fff;
    border: 0;
    border-radius: var(--wf-radius-card, 14px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    font-family: var(--brand-font, inherit);
    color: rgba(0, 0, 0, .82);
}

.wf-scan .modal-header {
    display: block;
    padding: clamp(20px, 4.2cqw, 30px) clamp(18px, 4.5cqw, 40px) clamp(16px, 2.6cqw, 22px);
    border-bottom: 1px solid rgba(0, 0, 0, .07);
}
.wf-scan-kopregel {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: clamp(16px, 2.6cqw, 22px);
}
.wf-scan-kopregel .wf-scan-eyebrow { margin-bottom: 0; line-height: 1.4; }

/*  Eigen sluitknop in plaats van .btn-close: dat is een achtergrondafbeelding met een vaste kleur, die
    op de donkere afsluitstap onzichtbaar zou worden. */
.wf-scan-sluit {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(0, 0, 0, .1);
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    color: rgba(0, 0, 0, .55);
    font-size: 15px;
    line-height: 1;
    padding: 0;
    transition: background-color .2s ease;
}
.wf-scan-sluit:hover { background: rgba(0, 0, 0, .04); }

/* ── voortgang ───────────────────────────────────────────────────────────── */
/*  De balk telt beantwoorde stellingen, niet afgeronde thema's: hij beweegt dus bij élk antwoord in
    plaats van één keer per negen. De witte streepjes verdelen hem in thema's, zodat zichtbaar is hoe
    groot een thema is ten opzichte van het geheel. */
.wf-scan-balk {
    position: relative;
    height: 10px;
    border-radius: 6px;
    background: rgba(0, 0, 0, .06);
    overflow: hidden;
}
.wf-scan-balk-vul {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--brand-primary);
    border-radius: 6px;
    transition: width .35s ease;
}
.wf-scan-balk-vakken {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--wf-scan-themas, 9), 1fr);
}
.wf-scan-balk-vakken > span { border-right: 2px solid #fff; }
.wf-scan-balk-vakken > span:last-child { border-right: 0; }

.wf-scan-stand {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
}
.wf-scan-teller {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-tertiary-ink);
    white-space: nowrap;
}
.wf-scan-rest {
    font-size: 12px;
    font-weight: 500;
    color: rgba(0, 0, 0, .5);
    text-align: right;
}

/* ── inhoud ──────────────────────────────────────────────────────────────── */
.wf-scan .modal-body {
    padding: clamp(22px, 4.4cqw, 36px) clamp(18px, 4.5cqw, 40px) clamp(6px, 1cqw, 10px);
}

/*  De template zet elke kop in kapitalen met veel letterafstand. Voor een menukopje werkt dat, maar dit
    is de naam van het thema waar de deelnemer in zit — die moet gewoon leesbaar zijn. */
.wf-scan-thema {
    margin: 0;
    font-size: clamp(23px, 3.6cqw, 32px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    color: var(--brand-tertiary-ink);
}
.wf-scan-uitleg {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 400;
    color: rgba(0, 0, 0, .55);
    max-width: 46ch;
}
.wf-scan-vragen { margin-top: clamp(20px, 3cqw, 30px); }

/* ── stapwissel ──────────────────────────────────────────────────────────── */
/*  Zonder animatie verspringt de inhoud hard en lijkt de modal stil te staan terwijl je wel degelijk
    vooruitkomt. De nieuwe stap komt daarom vanaf de kant waarheen je gaat: bij Volgende van rechts, bij
    Vorige van links. Dat maakt voelbaar of je vooruit of terug bladert, iets wat een enkele fade niet
    doet. 0,35 s is de Webfix-standaardduur voor effecten, en dezelfde duur als de voortgangsbalk, zodat
    balk en inhoud samen bewegen.

    De vertrekkende stap wordt niet uitgevloeid: die staat direct op display:none. Twee stappen tegelijk
    tonen zou de hoogte van de modal laten springen, omdat het ene thema langere stellingen heeft dan het
    andere. De verplaatsing blijft klein (16px) — genoeg om richting te geven, te weinig om af te leiden
    van waar het om gaat. */
@keyframes wf-scan-vooruit {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wf-scan-terug {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
.wf-scan-stap[data-scan-richting="vooruit"] { animation: wf-scan-vooruit .35s ease both; }
.wf-scan-stap[data-scan-richting="terug"]   { animation: wf-scan-terug .35s ease both; }

/*  Wie in zijn systeem heeft aangegeven bewegende beelden te willen beperken, krijgt hier niets te zien.
    Bij een vragenlijst over stress en klachten weegt dat zwaarder dan bij een gewone website. */
@media (prefers-reduced-motion: reduce) {
    .wf-scan-stap[data-scan-richting] { animation: none; }
    .wf-scan-balk-vul { transition: none; }
}

.wf-scan-vraag {
    padding: clamp(18px, 2.6cqw, 24px) 0;
    margin: 0;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .07);
}
/* Dubbele klasse om boven de alineamarges van de template uit te komen (.biz-page-body p in business1). */
.wf-scan-vraag .wf-scan-stelling {
    display: flex;
    gap: 14px;
    align-items: baseline;
    margin: 0 0 clamp(14px, 2cqw, 18px);
    padding: 0;
    font-size: inherit;
    line-height: inherit;
}
.wf-scan-nr {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--brand-ink);
    font-variant-numeric: tabular-nums;
}
.wf-scan-stelling-tekst {
    margin: 0;
    font-size: clamp(15px, 2cqw, 17.5px);
    line-height: 1.5;
    font-weight: 500;
    color: rgba(0, 0, 0, .84);
    text-wrap: pretty;
}

/* ── antwoordschaal ──────────────────────────────────────────────────────── */
/*  Vijf losse knoppen lezen als vijf keuzes; hier moet het als één schaal lezen, van oneens naar eens.
    Vandaar de doorlopende lijn achter de bollen en de oplopende vulling: de richting is zichtbaar nog
    voordat je de labels leest. */
.wf-scan-schaal {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--wf-scan-opties, 5), 1fr);
}
.wf-scan-schaal::before {
    content: "";
    position: absolute;
    left: 10%;
    right: 10%;
    top: 21px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .07), color-mix(in srgb, var(--brand-primary) 42%, #fff));
}
.wf-scan-optie {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px 2px 6px;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    margin: 0;
    min-width: 0;
}
/* Het keuzerondje zelf is onzichtbaar maar blijft focusbaar en bedienbaar met het toetsenbord. */
.wf-scan-in {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}
.wf-scan-bol {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 0, 0, .18);
    background: #fff;
    transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
/* Oplopende vulling van links naar rechts; nog niet gekozen, maar de richting is al leesbaar. */
.wf-scan-optie:nth-child(1) .wf-scan-bol { background: color-mix(in srgb, var(--brand-primary)  5%, #fff); }
.wf-scan-optie:nth-child(2) .wf-scan-bol { background: color-mix(in srgb, var(--brand-primary)  9%, #fff); }
.wf-scan-optie:nth-child(3) .wf-scan-bol { background: color-mix(in srgb, var(--brand-primary) 13%, #fff); }
.wf-scan-optie:nth-child(4) .wf-scan-bol { background: color-mix(in srgb, var(--brand-primary) 17%, #fff); }
.wf-scan-optie:nth-child(5) .wf-scan-bol { background: color-mix(in srgb, var(--brand-primary) 21%, #fff); }
.wf-scan-lab {
    font-size: clamp(10.5px, 1.35cqw, 12px);
    line-height: 1.3;
    text-align: center;
    font-weight: 500;
    color: rgba(0, 0, 0, .55);
    transition: color .2s ease;
}
.wf-scan-optie:hover .wf-scan-bol { border-color: var(--brand-primary); }

.wf-scan-in:checked + .wf-scan-bol {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--brand-primary) 13%, #fff);
}
.wf-scan-in:checked ~ .wf-scan-lab { color: var(--brand-ink); font-weight: 700; }
.wf-scan-in:focus-visible + .wf-scan-bol { outline: 2px solid var(--brand-ink); outline-offset: 3px; }

/* ── voet ────────────────────────────────────────────────────────────────── */
.wf-scan .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: nowrap;
    padding: clamp(16px, 2.4cqw, 22px) clamp(18px, 4.5cqw, 40px) clamp(20px, 3cqw, 26px);
    border-top: 1px solid rgba(0, 0, 0, .07);
}
.wf-scan .modal-footer > * { margin: 0; }
.wf-scan-vorige {
    padding: 12px 18px;
    border-radius: var(--wf-radius-button, 9px);
    border: 1px solid rgba(0, 0, 0, .14);
    background: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, .6);
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.wf-scan-vorige:hover:not(:disabled) { background: rgba(0, 0, 0, .04); color: rgba(0, 0, 0, .8); }
.wf-scan-vorige:disabled { opacity: .45; cursor: not-allowed; }
.wf-scan-voortgang {
    font-size: 12px;
    font-weight: 600;
    color: rgba(0, 0, 0, .62);
    text-align: center;
}
.wf-scan-volgende {
    padding: 13px 26px;
    border-radius: var(--wf-radius-button, 9px);
    border: none;
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease;
}
.wf-scan-volgende:hover:not(:disabled) { filter: brightness(.93); }
/*  Uitgeschakeld wordt neutraal grijs en niet een lichte merkkleur: anders lijkt de knop nog klikbaar
    en blijft de deelnemer erop drukken. */
.wf-scan-volgende:disabled {
    background: rgba(0, 0, 0, .06);
    color: rgba(0, 0, 0, .34);
    cursor: not-allowed;
    filter: none;
}

/* ── afsluitstap ─────────────────────────────────────────────────────────── */
/*  De laatste stap keert de modal om naar de donkere huisstijlkleur. Dat markeert dat het invullen
    voorbij is; header en voortgang verdwijnen dan, want er valt niets meer af te tellen. */
.wf-scan .modal-content.is-klaar {
    background: var(--brand-tertiary);
    color: var(--brand-on-tertiary);
}
.wf-scan .modal-content.is-klaar .modal-body { padding: clamp(38px, 5.2cqw, 52px) clamp(24px, 4.6cqw, 46px) clamp(28px, 3.4cqw, 40px); }
.wf-scan .modal-content.is-klaar .modal-footer { justify-content: center; border-top: 0; padding: 0 clamp(24px, 4.6cqw, 46px) clamp(34px, 4.6cqw, 46px); }
.wf-scan-klaar { text-align: center; }
.wf-scan-vink {
    width: 56px;
    height: 56px;
    margin: 0 auto 26px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: grid;
    place-items: center;
}
.wf-scan-klaar-titel {
    margin: 0 0 12px;
    font-size: clamp(21px, 3.2cqw, 27px);
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -.015em;
    text-transform: none;
    color: inherit;
}
.wf-scan-klaar-tekst {
    margin: 0 auto;
    font-size: 15px;
    line-height: 1.6;
    max-width: 40ch;
    opacity: .78;
}

/* ── smal scherm ─────────────────────────────────────────────────────────── */
/*  Onder ongeveer 420px passen vijf labels naast elkaar niet meer zonder op elke lettergreep te breken.
    De schaal kantelt dan naar een lijst: bol en label naast elkaar, de richting loopt van boven naar
    beneden. Een container-query en geen media-query, want wat telt is de breedte van de modal. */
@container (max-width: 420px) {
    .wf-scan-schaal { grid-template-columns: 1fr; }
    .wf-scan-schaal::before { display: none; }
    .wf-scan-optie {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 9px 12px;
        border: 1px solid rgba(0, 0, 0, .09);
        border-radius: var(--wf-radius-button, 9px);
        margin-bottom: 6px;
    }
    .wf-scan-lab { text-align: left; font-size: 14px; }
    .wf-scan-optie:has(.wf-scan-in:checked) { border-color: var(--brand-primary); }
    .wf-scan .modal-footer { flex-wrap: wrap; row-gap: 10px; }
    .wf-scan-voortgang { order: 3; flex: 1 0 100%; }
}

/* ── UITSLAG ────────────────────────────────────────────────────────────────────────────────────
   Staat op de afsluitstap, en die is donker (.is-klaar). Alle kleuren blijven afgeleid van
   --brand-primary; er komt geen stoplicht aan te pas. Reden: rood is bij ons de kleur van
   verwijderen, en een rode balk bij "risico" spreekt precies het oordeel uit dat de klant in al haar
   teksten vermijdt. Drie sterktes van dezelfde kleur volstaan, mits de zone er in woorden bij staat —
   en dat doet hij, in .wf-scan-balkwaarde en .wf-scan-zone. */
.wf-scan .wf-scan-uitslag {
    margin: 22px auto 0;
    max-width: 560px;
    text-align: left;
}

.wf-scan .wf-scan-top-titel {
    margin: 0 0 10px;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--brand-on-tertiary) 72%, transparent);
}

/* Top drie ─ genummerd, want de volgorde is de boodschap: hier begin je. */
.wf-scan .wf-scan-top-lijst {
    margin: 0 0 26px;
    padding-left: 1.15em;
    display: grid;
    gap: 8px;
}

.wf-scan .wf-scan-top-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    color: var(--brand-on-tertiary);
}

.wf-scan .wf-scan-top-naam { font-weight: 600; }

.wf-scan .wf-scan-zone {
    flex: none;
    font-size: .8rem;
    text-transform: lowercase;
    opacity: .78;
}

/* Score per thema */
.wf-scan .wf-scan-balken {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px;
}

.wf-scan .wf-scan-balkkop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;          /* op 375px past naam + waarde niet altijd naast elkaar */
    margin-bottom: 5px;
    color: var(--brand-on-tertiary);
}

.wf-scan .wf-scan-balknaam  { font-size: .94rem; }
.wf-scan .wf-scan-balkwaarde {
    flex: none;
    font-size: .82rem;
    font-variant-numeric: tabular-nums;
    opacity: .8;
}

.wf-scan .wf-scan-balkspoor {
    height: 9px;
    border-radius: 999px;
    overflow: hidden;
    background: color-mix(in srgb, var(--brand-on-tertiary) 15%, transparent);
}

.wf-scan .wf-scan-balkvul {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--brand-primary);
    transition: width .5s ease;
}

/* De drie zones als drie sterktes van dezelfde kleur: hoe lager de score, hoe bleker de balk.
   Zo leest een zwak thema visueel als "hier zit weinig", zonder dat het een oordeel wordt. */
.wf-scan .wf-scan-balkrij.is-gezond   .wf-scan-balkvul { background: var(--brand-primary); }
.wf-scan .wf-scan-balkrij.is-aandacht .wf-scan-balkvul { background: color-mix(in srgb, var(--brand-primary) 62%, #fff); }
.wf-scan .wf-scan-balkrij.is-risico   .wf-scan-balkvul { background: color-mix(in srgb, var(--brand-primary) 34%, #fff); }

/* Voorbehoud. Kleiner en rustiger dan de rest: het hoort erbij, maar het is niet de boodschap. */
.wf-scan .wf-scan-voorbehoud {
    margin: 26px 0 0;
    font-size: .82rem;
    line-height: 1.55;
    color: color-mix(in srgb, var(--brand-on-tertiary) 66%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .wf-scan .wf-scan-balkvul { transition: none; }
}

/* De template zet een eigen teken vóór elk lijstitem (Crafto doet dat via een ::before op li in
   .modal-body-content en verwanten). In de uitslag is dat een pijltje voor elke themanaam, en het
   nummer van de top drie verdween erdoor. Hier zetten we die decoratie uit en herstellen we de
   nummering, want de volgorde ís daar de boodschap: hier begin je. */
.wf-scan .wf-scan-balken li::before {
    content: none !important;
    display: none !important;
}

.wf-scan .wf-scan-balken li,
.wf-scan .wf-scan-top-lijst li {
    padding-left: 0;
    background: none;
}

/* De top drie is genummerd, want de volgorde is daar de boodschap: hier begin je.
   Een gewone lijstmarkering kan niet — die items staan op display:flex om de naam en de zone links
   en rechts te zetten, en een flexitem toont geen ::marker meer. Vandaar een eigen teller, die
   meteen het teken van de template overschrijft in plaats van het alleen uit te zetten. */
.wf-scan .wf-scan-top-lijst {
    list-style: none;
    padding-left: 0;
    counter-reset: wfScanTop;
}

.wf-scan .wf-scan-top-item { counter-increment: wfScanTop; }

.wf-scan .wf-scan-top-item::before {
    content: counter(wfScanTop) "." !important;
    display: block !important;
    flex: none;
    min-width: 1.35em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--brand-on-tertiary) 55%, transparent);
}

/* De naam mag de vrije ruimte pakken zodat de zone rechts uitgelijnd blijft. */
.wf-scan .wf-scan-top-naam { flex: 1 1 auto; }

/* ── UITSLAG: opgeruimde versie ─────────────────────────────────────────────────────────────────
   Het eerste ontwerp zette de top drie én alle negen thema's uitgeklapt onder elkaar, met een
   vinkje-in-een-cirkel erboven. Dat paste niet op één scherm, dus kwam er een scrollbalk — en die
   maakte het geheel rommelig. Nu: top drie voluit, de rest achter een inklapper, en de scrollbalk
   dun en in de huisstijl voor de gevallen waarin hij tóch nodig is (kleine schermen, lange lijst). */

/* Dunne, rustige scrollbalk. Niet verbergen: iemand moet kunnen zien dat er meer is. */
.wf-scan .modal-body { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand-primary) 55%, transparent) transparent; }
.wf-scan .modal-body::-webkit-scrollbar { width: 8px; }
.wf-scan .modal-body::-webkit-scrollbar-track { background: transparent; }
.wf-scan .modal-body::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--brand-primary) 55%, transparent);
}
.wf-scan .modal-body::-webkit-scrollbar-thumb:hover { background: var(--brand-primary); }

.wf-scan .modal-content.is-klaar .wf-scan-eyebrow { color: color-mix(in srgb, var(--brand-on-tertiary) 62%, transparent); }

/* De top drie is nu de kop van het scherm; geen eigen tussenkopje meer nodig. */
.wf-scan .wf-scan-top-lijst { margin: 18px 0 22px; }

.wf-scan .wf-scan-geengezorg { margin: 18px 0 22px; color: var(--brand-on-tertiary); }

/* Alle thema's — dicht tenzij iemand het wil zien. */
.wf-scan .wf-scan-alles {
    border-top: 1px solid color-mix(in srgb, var(--brand-on-tertiary) 16%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--brand-on-tertiary) 16%, transparent);
    padding: 12px 0;
    margin-bottom: 20px;
}

.wf-scan .wf-scan-alles > summary {
    cursor: pointer;
    list-style: none;
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand-on-tertiary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-scan .wf-scan-alles > summary::-webkit-details-marker { display: none; }

/* Eigen driehoekje, want de standaard staat links buiten de flexrij en Crafto zet er ook nog iets
   voor. Hij draait open zodra het blok opengaat. */
.wf-scan .wf-scan-alles > summary::after {
    content: "";
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform .2s ease;
    opacity: .7;
}
.wf-scan .wf-scan-alles[open] > summary::after { transform: rotate(180deg); }
.wf-scan .wf-scan-alles > summary:hover { opacity: .85; }
.wf-scan .wf-scan-alles .wf-scan-balken { margin-top: 16px; }

/* ── E-mailblok ─────────────────────────────────────────────────────────────────────────────────
   Staat ONDER de uitslag, niet erboven. De bezoeker heeft zijn antwoord al; dit is een aanbod, geen
   tolpoort. */
.wf-scan .wf-scan-mail { margin: 0 0 4px; }

/* Sinds het aanbod een eigen kaart mét kop is, is dit de UITLEG onder die kop en niet meer de kop
   zelf. Daarom lichter en iets kleiner: twee vette regels boven elkaar vechten om dezelfde aandacht,
   en dan leest de bezoeker geen van beide. */
.wf-scan .wf-scan-mail-label {
    display: block;
    margin-bottom: 9px;
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.5;
    color: color-mix(in srgb, var(--brand-on-tertiary) 78%, transparent);
}

.wf-scan .wf-scan-mail-rij { display: flex; gap: 8px; flex-wrap: wrap; }

.wf-scan .wf-scan-mail-in {
    flex: 1 1 190px;
    min-width: 0;
    padding: 11px 14px;
    border-radius: var(--wf-radius-input, 8px);
    border: 1px solid color-mix(in srgb, var(--brand-on-tertiary) 28%, transparent);
    background: color-mix(in srgb, var(--brand-on-tertiary) 8%, transparent);
    color: var(--brand-on-tertiary);
    font: inherit;
    font-size: .95rem;
}

.wf-scan .wf-scan-mail-in::placeholder { color: color-mix(in srgb, var(--brand-on-tertiary) 45%, transparent); }
.wf-scan .wf-scan-mail-in:focus {
    outline: none;
    border-color: var(--brand-primary);
    background: color-mix(in srgb, var(--brand-on-tertiary) 12%, transparent);
}

.wf-scan .wf-scan-mail-knop {
    flex: 0 0 auto;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--wf-radius-button, 8px);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: filter .35s ease;
}
.wf-scan .wf-scan-mail-knop:hover:not(:disabled) { filter: brightness(.93); }
.wf-scan .wf-scan-mail-knop:disabled { opacity: .6; cursor: default; }

.wf-scan .wf-scan-mail-akkoord {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px;
    font-size: .8rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--brand-on-tertiary) 72%, transparent);
    cursor: pointer;
}
.wf-scan .wf-scan-mail-akkoord input { margin-top: .2em; flex: none; }

.wf-scan .wf-scan-mail-melding {
    margin: 10px 0 0;
    font-size: .84rem;
    color: color-mix(in srgb, var(--brand-on-tertiary) 80%, transparent);
}
.wf-scan .wf-scan-mail-melding.is-gelukt { color: var(--brand-on-tertiary); font-weight: 600; }

.wf-scan .wf-scan-voorbehoud { margin-top: 18px; }

/* De template zet width:100% op élk invoerveld (een gebruikelijke formulier-reset in Crafto). Voor
   een tekstveld is dat prima, voor een selectievakje niet: dat werd 560px breed, waardoor de tekst
   ernaast tot één letter per regel werd geperst en de akkoordregel 927px hoog werd. Vandaar een
   expliciete maat. !important omdat de template-regel uit een andere stylesheet komt en we niet
   afhankelijk willen zijn van de laadvolgorde. */
.wf-scan .wf-scan-mail-akkoord input[type="checkbox"] {
    width: 1.05em !important;
    height: 1.05em !important;
    min-width: 0 !important;
    flex: none;
    margin: .18em 0 0;
    accent-color: var(--brand-primary);
}

/* De top drie kreeg er een advieszin bij. Het item is daardoor niet meer één regel maar een blokje:
   kopregel met naam en zone naast elkaar, advies eronder. */
.wf-scan .wf-scan-top-item {
    display: block;              /* was flex; de kopregel doet dat nu zelf */
    margin-bottom: 14px;
}

.wf-scan .wf-scan-top-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.wf-scan .wf-scan-top-advies {
    display: block;
    margin-top: 3px;
    font-size: .86rem;
    font-weight: 400;
    line-height: 1.5;
    color: color-mix(in srgb, var(--brand-on-tertiary) 78%, transparent);
}

/* Het nummer stond als flexitem naast de tekst; nu het item een blok is, zetten we het ernaast met
   een inspringing in plaats van met flex.
   De selector noemt zowel de lijst als het item, omdat een eerdere regel hierboven
   (.wf-scan .wf-scan-top-lijst li) anders wint op specificiteit en de inspringing terugzet op nul —
   dan staat het nummer ónder de tekst in plaats van ernaast. */
.wf-scan .wf-scan-top-lijst .wf-scan-top-item { position: relative; padding-left: 1.7em; }
.wf-scan .wf-scan-top-lijst .wf-scan-top-item::before { position: absolute; left: 0; top: 0; }

/* ── Vervolgstap: de intake ─────────────────────────────────────────────────────────────────────
   Staat tussen de uitslag en het e-mailveld, en is bewust de opvallendste knop van het scherm. Wie
   net gezien heeft waar het knelt, is op dat moment het meest geneigd om er iets mee te doen; het
   opsturen van documenten is daarna pas de tweede keus.

   Een licht vlak op de donkere afsluitstap, zodat het blok zich losmaakt van de tekst eromheen
   zonder een tweede kleur te introduceren. */
.wf-scan .wf-scan-intake {
    margin: 22px 0;
    padding: 18px 20px;
    border-radius: var(--wf-radius-card, 12px);
    background: color-mix(in srgb, var(--brand-on-tertiary) 9%, transparent);
    text-align: center;
}

.wf-scan .wf-scan-intake-tekst {
    margin: 0 0 12px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--brand-on-tertiary);
}

.wf-scan .wf-scan-intake-knop {
    display: inline-block;
    padding: 13px 26px;
    border-radius: var(--wf-radius-button, 9px);
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    font-weight: 700;
    font-size: .96rem;
    line-height: 1.2;
    text-decoration: none;
    transition: filter .35s ease;
}

.wf-scan .wf-scan-intake-knop:hover,
.wf-scan .wf-scan-intake-knop:focus {
    filter: brightness(.93);
    color: var(--brand-on-primary);
    text-decoration: none;
}

.wf-scan .wf-scan-intake-meta {
    margin: 10px 0 0;
    font-size: .78rem;
    color: color-mix(in srgb, var(--brand-on-tertiary) 62%, transparent);
}

/* Het e-mailveld is nu de tweede keus en mag rustiger: geen gevulde knop meer maar een omlijnde,
   zodat er per scherm maar één knop schreeuwt. */
.wf-scan .wf-scan-mail-knop {
    background: transparent;
    color: var(--brand-on-tertiary);
    border: 1px solid color-mix(in srgb, var(--brand-on-tertiary) 38%, transparent);
}
.wf-scan .wf-scan-mail-knop:hover:not(:disabled) {
    background: color-mix(in srgb, var(--brand-on-tertiary) 10%, transparent);
    filter: none;
}

/* Het e-mailaanbod is een EIGEN KAART onder de intake, niet langer een ingeklapt regeltje met een
   pijltje. Reden: als inklapper las niemand het als een aanbod — je zag een zin, geen aanvraag
   (Jenny, 02-09-2026). Twee kaarten onder elkaar vertellen wat er te kiezen valt: een gesprek, of
   de documenten in de bus.

   Zelfde vorm als .wf-scan-intake hierboven, maar links uitgelijnd: hier staan invulvelden, en een
   gecentreerd formulier leest slechter dan een uitnodiging met één knop. */
.wf-scan .wf-scan-mailblok {
    margin: 22px 0;
    padding: 18px 20px;
    border-radius: var(--wf-radius-card, 12px);
    background: color-mix(in srgb, var(--brand-on-tertiary) 9%, transparent);
}

.wf-scan .wf-scan-mailblok-kop {
    margin: 0 0 10px;
    font-size: .98rem;
    font-weight: 600;
    color: var(--brand-on-tertiary);
}

.wf-scan .wf-scan-mailblok .wf-scan-mail { margin-top: 0; }

/* Het sterretje bij het verplichte vinkje. Rood, net als onder de gewone formulieren van de site,
   zodat "verplicht" er overal hetzelfde uitziet. */
.wf-scan .wf-scan-verplicht { color: #dc3545; }

/* ── Het adviespakket aanvragen ─────────────────────────────────────────────────────────────────
   De naamregel staat boven de adresregel en is optioneel; hij is er voor de melding aan de klant,
   niet om iemand zijn eigen documenten te kunnen sturen. Eigen rij en niet naast het adres, zodat
   het adresveld op een telefoon niet tot een halve regel inkrimpt. */
.wf-scan .wf-scan-mail-naamrij { display: flex; margin-bottom: 8px; }

/* Verschijnt pas na een geslaagde aanvraag: de link naar de eigen adviespagina, voor wie zijn mail
   nu niet openslaat. Een tekstlink en geen knop — de knop hierboven is de hoofdactie geweest. */
.wf-scan .wf-scan-advieslink {
    display: inline-block;
    margin-top: 10px;
    font-size: .88rem;
    font-weight: 600;
    color: var(--brand-on-tertiary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.wf-scan .wf-scan-advieslink:hover { color: var(--brand-on-tertiary); opacity: .8; }

/* ── De losse knop midden in een tekst ([custom:stress-scan-link]) ──────────────────────────────
   Voor plekken waar de volle uitnodigingskaart te veel is. Bewust een slag kleiner en rustiger dan
   de knop op die kaart: hij staat middenin lopende tekst en moet die niet overstemmen. Wel dezelfde
   merkkleur en dezelfde ronding, zodat het herkenbaar dezelfde actie is.

   Het blok eromheen is een <p> en geen <div>: op die manier krijgt hij vanzelf de regelafstand van de
   tekst eromheen mee, in welke template dan ook. */
.wf-scan-linkblok {
    margin: 22px 0;
}

.wf-scan-knop-inline {
    padding: 12px 24px;
    font-size: 15px;
}

/* Op een smal scherm over de volle breedte: een halve knop naast een lege halve regel oogt als een
   fout, en met de duim is een brede knop makkelijker te raken. */
@media (max-width: 575.98px) {
    .wf-scan-knop-inline { display: block; width: 100%; }
}