/* burnout-nacht.css: de Fable-bouwer, 21 oktober 05:45 tot 08:30. Alleen op /burn-out, /burn-out/werknemers,
   /burn-out/werkgevers en /burn-out/rekentool, gekoppeld na bouwstenen.css. Elke pagina heeft body.bn.
   Uitgangspunten (DENKPARTNER-1021.md): één beeld per pagina, telefoon vrij op het verloop met één bijkaart,
   geen balk zonder waarde, kaartkop kleiner dan de sectiekop, één tweede knopstijl. */

/* ---- 1. Tweede knop: haarlijn, zelfde hoogte als de hoofdknop ---- */
body.bn .btn.bn-lijn { background: transparent; color: var(--off); border: 1px solid rgb(var(--off-rgb) / 0.28); box-shadow: none; }
body.bn .btn.bn-lijn:hover { background: rgb(var(--gold-rgb) / calc(0.08 * var(--glow))); border-color: var(--accent-line); color: var(--accent-hover); }
body.bn .btn.bn-lijn svg { width: 14px; height: 14px; margin-left: 8px; }
body.bn section.light .btn.bn-lijn { color: var(--light-ink); border-color: rgb(var(--ink-rgb) / 0.3); }
body.bn section.light .btn.bn-lijn:hover { color: var(--light-ink); border-color: var(--gold-ink); background: rgb(var(--ink-rgb) / 0.05); }

/* ---- 2. Opening met productvlak: de telefoon vrij, één kaart ernaast (niet erover) ---- */
body.bn .bn-vis .bs-vis-stage { width: min(520px, 86%); aspect-ratio: 1 / 1; }
body.bn .hero .bn-vis .bs-vis-stage .bs-vtel { left: 2%; top: 50%; width: 42%; transform: translateY(-50%); }
body.bn .bn-vis .gk.bs-vcoach, body.bn .bn-vis .gk.bs-vgetal { left: auto; right: 0; top: 50%; bottom: auto; width: 50%; transform: translateY(-50%); }
body.bn .bn-vis .gk.bs-vgetal b { font-size: 44px; }
body.bn .bn-vis .gk.bs-vgetal p { color: var(--off-dim); }
body.bn .bn-vis .gk.bs-vcoach { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; padding: 16px 18px; }
body.bn .bn-vis .gk.bs-vcoach img { width: 40px; height: 40px; }
body.bn .bn-vis .gk.bs-vcoach p { font-size: 15px; }
@media (max-width: 820px) {
  body.bn .bn-vis .bs-vis-stage { width: min(330px, 88%); aspect-ratio: 1 / 1.1; }
  body.bn .hero .bn-vis .bs-vis-stage .bs-vtel { left: 0; top: 0; width: 56%; transform: none; }
  body.bn .bn-vis .gk.bs-vcoach, body.bn .bn-vis .gk.bs-vgetal { top: auto; bottom: 4%; width: 60%; transform: none; }
}

/* ---- 3. Het vlak "De Aanpak" op de hub: de telefoon midden, de plankaart (zonder balkjes) linksonder ---- */
.bn-stage { position: relative; aspect-ratio: 4 / 5; max-height: 560px; border-radius: 16px; overflow: hidden; border: 1px solid rgb(var(--off-rgb) / 0.08);
  background: radial-gradient(90% 80% at 70% 20%, rgb(var(--gold-rgb) / calc(0.16 * var(--glow))), transparent 62%), radial-gradient(70% 70% at 10% 100%, rgba(13, 45, 13, 0.9), transparent 70%), #031a03; }
.bn-stage picture { display: contents; }
.bn-stage .bn-tel { position: absolute; left: 50%; top: 7%; width: 54%; transform: translateX(-38%); border-radius: 26px; overflow: hidden; border: 5px solid #0d1a0d; background: #011400; box-shadow: 0 30px 70px rgb(var(--shadow-rgb) / calc(0.55 * var(--sh))); }
.bn-stage .bn-tel img { display: block; width: 100%; height: auto; }
.bn-stage .gk { position: absolute; z-index: 2; padding: 16px 18px; border-radius: 16px; color: var(--off); background: rgb(var(--glass-rgb) / calc(0.72 + var(--glass-plus))); border: 1px solid rgb(var(--off-rgb) / 0.14); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); box-shadow: 0 18px 40px rgb(var(--shadow-rgb) / calc(0.4 * var(--sh))); font-family: var(--sans); }
.bn-stage .gk small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--off-dim); margin-bottom: 10px; }
.bn-stage .bn-plan { left: 20px; bottom: 20px; width: min(250px, 64%); }
.bn-fund { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.bn-fund li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.3; color: var(--off); white-space: nowrap; }
.bn-fund i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--fc); }
@media (max-width: 820px) { .bn-stage { max-height: 440px; } .bn-stage .bn-tel { width: 58%; transform: translateX(-30%); } }

/* ---- 4. De route en het verloop: de telefoon vrij op de plaat, zonder lichter paneel ---- */
body.bn .measure .slot.bs-telefoon { background: transparent; border: 0; box-shadow: none; }
body.bn .measure.plaat { background: radial-gradient(90% 70% at 20% 10%, rgb(var(--gold-rgb) / calc(0.12 * var(--glow))), transparent 60%), var(--panel); }
body.bn .measure .panes { max-height: 600px; }
body.bn .measure .step h3 { font-size: var(--fs-kaart); line-height: var(--lh-kaart); }
body.bn .measure .step .btn { margin-top: 12px; }

/* ---- 5. Kaartparen: kaartkop kleiner dan de sectiekop, gelijke hoogte ---- */
body.bn .pair .wrap { align-items: stretch; }
body.bn .pair h2 { font-size: var(--fs-stap); line-height: var(--lh-stap); letter-spacing: var(--ls-stap); margin-bottom: var(--ruimte-lede); text-wrap: balance; }
body.bn .pair .wrap > div { display: flex; flex-direction: column; align-items: flex-start; }
body.bn .pair .wrap > div .textlink, body.bn .pair .wrap > div .btn { margin-top: auto; }
body.bn .pair .lede { margin-bottom: 24px; }

/* ---- 6. Het labbeeld zonder balkjes: de categorieën met een vinkje ---- */
body.bn .bs-labbeeld .bs-cats li { grid-template-columns: minmax(0, 1fr) 18px; align-items: center; }
body.bn .bs-labbeeld .bs-balk { width: 18px; height: 18px; border-radius: 50%; background: var(--check-bg); position: relative; overflow: visible; }
body.bn .bs-labbeeld .bs-balk b { display: none; }
body.bn .bs-labbeeld .bs-balk::after { content: ""; position: absolute; left: 5px; top: 4px; width: 5px; height: 8px; border: solid var(--check-fg); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); }

/* ---- 7. Signalen met beeld: foto links, de twee lijsten rechts ---- */
.bn-signalen .bs-twee-kol { align-items: start; }
.bn-signalen .bn-foto { border-radius: 16px; overflow: hidden; aspect-ratio: 4 / 5; max-height: 520px; border: 1px solid var(--line-2); }
.bn-signalen .bn-foto picture { display: contents; }
.bn-signalen .bn-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-signalen .two { display: grid; grid-template-columns: 1fr; gap: 28px; }
.bn-signalen h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); color: var(--off); margin: 0 0 8px; }
.bn-signalen .list.plain li { padding: 12px 0; font-size: 17px; }
.bn-signalen .note-line { margin-top: 20px; font-size: 14px; color: var(--muted); }
@media (max-width: 820px) { .bn-signalen .bn-foto { max-height: 360px; aspect-ratio: 4 / 3; } }

/* ---- 8. Vier feiten voor de werkgever (in plaats van de alinea van de oude site) ---- */
.bn-feiten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.bn-feiten li { padding-top: 18px; border-top: 1px solid var(--gold-line); }
.bn-feiten b { display: block; font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--accent-text); margin-bottom: 10px; }
.bn-feiten p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.bn-feiten-kop { max-width: 640px; margin-bottom: 40px; }
@media (max-width: 820px) { .bn-feiten { grid-template-columns: 1fr 1fr; gap: 20px; } .bn-feiten b { font-size: 26px; } }

/* ---- 9. De rekentool: eenheid in het veld, het label op het resultaat zichtbaar ---- */
.bn-veld { position: relative; display: block; }
.bn-veld input { width: 100%; }
.bn-veld[data-pre] input { padding-left: 38px; }
.bn-veld[data-pre]::before { content: attr(data-pre); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 17px; color: var(--light-muted); pointer-events: none; }
.bn-veld[data-na]::after { content: attr(data-na); position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--light-muted); pointer-events: none; }
.bn-veld[data-na] input { padding-right: 96px; }
body.bn .calc input { font-variant-numeric: tabular-nums; height: 48px; min-height: 48px; padding-block: 0; } /* zelfde hoogte als de knop */
body.bn .calc .result .label { color: var(--accent-label); }
body.bn .calc h2 { text-wrap: balance; }
body.bn .hero.slim { padding-bottom: 32px; }

/* ---- 10. Cijfers en koppen ---- */
body.bn .numbers .head h2 { text-wrap: balance; max-width: 24ch; }
body.bn .numbers .row b { white-space: nowrap; }
body.bn .doors-head h2 { max-width: 20ch; text-wrap: balance; }
body.bn .voices .quotes { align-items: stretch; }
body.bn .voices .quotes li { display: flex; flex-direction: column; }
body.bn .voices .quotes li span { margin-top: auto; padding-top: 16px; }
body.bn .hero .actions { align-items: center; }

/* ---- 11. De hub: de opening met de bospadfoto iets donkerder aan de tekstkant ---- */
@media (min-width: 821px) { body.bn.bn-hub .hero-media::after { background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0.7) 26%, rgb(var(--bg-rgb) / 0.08) 60%), linear-gradient(180deg, rgb(var(--bg-rgb) / 0) 70%, rgb(var(--bg-rgb) / 0.4) 100%); } }
body.bn.bn-hub .hero-media img { object-position: 50% 28%; }

/* signalen: foto 5, tekst 7 (de foto staat eerst in de html) */
.bn-signalen .bs-twee-kol { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
@media (max-width: 820px) { .bn-signalen .bs-twee-kol { grid-template-columns: 1fr; } }
body.bn .data .bs-tekst .small { font-size: 14px; line-height: 1.5; color: var(--light-muted); max-width: 52ch; margin: 0 0 24px; }
body.bn .data .bs-tekst .lede { margin-bottom: 16px; }
body.bn.bn-hub .hero h1 { max-width: 20ch; }
body.bn .numbers .head h2 { max-width: 30ch; }
body.bn .hero:has(.bs-vis) .hero-copy h1 { font-size: var(--fs-h1); max-width: 640px; }
@media (max-width: 820px) { body.bn .bn-vis .gk.bs-vgetal b { font-size: 34px; white-space: nowrap; } }
body.bn .hero:has(.bs-vis) .hero-copy .proof { max-width: 640px; }
@media (max-width: 820px) { body.bn.bn-hub .hero-media img { object-position: 50% 22%; } }
body.bn .numbers .head { max-width: 760px; }
body.bn main #cijfers .head h2 { max-width: 32ch; }
body.bn .hero.slim { padding-top: 120px; padding-bottom: 16px; }
body.bn .hero.slim .hero-copy { margin-top: 0; }
@media (max-width: 820px) { body.bn .hero.slim { padding-top: 96px; } }
body.bn .hero.slim h1 { max-width: 16ch; }
/* telefoon: de plaat met het telefoonscherm krijgt dezelfde hoogte als het scherm (460), anders ligt de telefoon over de kop en stap 01 */
@media (max-width: 900px) { body.bn .measure .panes { aspect-ratio: auto !important; height: 460px; max-height: none; } }
/* één labelvorm: de kaartkop in de kaartparen in dezelfde stijl als het gouden label */
body.bn .pair .kaart-kop { font-size: var(--fs-label); font-weight: 600; line-height: var(--lh-label); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--accent-label); margin-bottom: var(--ruimte-label); }
body.bn .hero:has(.bs-vis) .hero-copy .proof { max-width: 720px; }
/* het label "Kosten" op werknemers stond in bruin (#7a5a2c, bedoeld voor crème) op donkergroen: contrast 3,0 */
body.bn section.open .label, body.bn .pay.open .label { color: var(--accent-label); }

/* na de Sonnet-lezer (06:25) */
body.bn .result .rows li[hidden] { display: none; }
body.bn .result .btn { margin-top: 20px; }
body.bn .numbers .row small { font-size: 14px; }
.bn-signalen .btn { margin-top: 24px; }
body.bn .bs-labbeeld .gk { top: 24px; bottom: auto; }
@media (min-width: 821px) { body.bn .hero .bn-vis .bs-vis-comp { padding-right: 64px; } }
body.bn main > .calc.plaat:first-child { margin-top: 108px; }
@media (max-width: 820px) { body.bn main > .calc.plaat:first-child { margin-top: 92px; } }
/* het vlak van De Aanpak vult zijn kolom (was 448 breed in een kolom van 690) */
.bn-stage { aspect-ratio: 5 / 4; max-height: 560px; width: 100%; }
.bn-stage .bn-tel { width: 36%; left: 52%; top: 6%; transform: translateX(-30%); }
@media (max-width: 820px) { .bn-stage { aspect-ratio: 4 / 5; max-height: 440px; } .bn-stage .bn-tel { width: 58%; left: 50%; transform: translateX(-30%); } }
.bn-stage .bn-tel { left: 56%; }
/* de lijnknop in het donkere resultaatvlak van de rekentool (dat in een crème sectie staat) in licht, niet in donker */
body.bn section.light .result .btn.bn-lijn { color: var(--off); border-color: rgb(var(--off-rgb) / 0.28); }
body.bn section.light .result .btn.bn-lijn:hover { color: var(--accent-hover); border-color: var(--accent-line); background: rgb(var(--gold-rgb) / calc(0.08 * var(--glow))); }
/* tussen 821 en 1100 breed: de plankaart smaller en de telefoon verder naar rechts, zodat ze elkaar niet raken */
@media (min-width: 821px) and (max-width: 1100px) { .bn-stage .bn-plan { width: 210px; padding: 14px 16px; } .bn-stage .bn-tel { left: 62%; width: 34%; } .bn-fund li { font-size: 13px; } }
/* Admin 07:50: de kop van de rekentool stond op 80 px in vier regels, de invoervelden vielen onder de vouw */
body.bn #rekentool h1 { margin-bottom: var(--ruimte-lede); }

/* Ryans citaat bij De Aanpak op de hub, in dezelfde vorm als zijn citaat op home (serif, gouden lijn links) */
.bn-citaat { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.4; color: var(--light-ink); margin: 0 0 20px; padding-left: 16px; border-left: 2px solid var(--accent-line); max-width: 30ch; }

/* Waarom ELIMA?: Ryans zes vlakken met icoontjes (08:15) */
.bn-waarom-sectie .wrap > h2 { margin-bottom: var(--ruimte-inhoud); }
.bn-waarom { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.bn-waarom li { padding: 24px 24px 26px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--panel); display: grid; gap: 10px; align-content: start; }
.bn-waarom .bn-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgb(var(--gold-rgb) / calc(0.14 * var(--glow))); color: var(--accent-text); margin-bottom: 6px; }
.bn-waarom .bn-ico svg { width: 20px; height: 20px; }
.bn-waarom h3 { font-family: var(--serif); font-weight: 400; font-size: var(--fs-kaart); line-height: var(--lh-kaart); margin: 0; color: var(--off); }
.bn-waarom p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (max-width: 900px) { .bn-waarom { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .bn-waarom li { padding: 18px 18px 20px; } .bn-waarom p { font-size: 14px; } }
@media (max-width: 480px) { .bn-waarom { gap: 10px; } .bn-waarom li { padding: 16px 14px 18px; gap: 6px; } .bn-waarom .bn-ico { width: 32px; height: 32px; border-radius: 10px; margin-bottom: 2px; } .bn-waarom .bn-ico svg { width: 17px; height: 17px; } .bn-waarom p { font-size: 13.5px; line-height: 1.45; } }

/* ===== Richting A (Ryan, 21 oktober): op de beelden hooguit één echt element uit de app of één feit ===== */
/* Werknemers, opening: de tegel Uitgerustheid rechts naast de telefoon (waar de coachkaart stond) */
body.bn .bn-vis .gk.gk-ui-score { left: auto; right: 2%; top: 50%; bottom: auto; transform: translateY(-50%); width: 208px; }
/* Werknemers, labfoto: het feit linksboven, de buisjes blijven vrij */
body.bn .bs-labbeeld .gk.gk-feit { left: 24px; top: 24px; bottom: auto; }
/* Hersteltraject (hub): de plankaart is weg en de telefoon staat midden in het vlak (met een kaart ernaast stond hij rechts van het midden) */
.bn-stage:not(:has(.gk)) .bn-tel { left: 50%; transform: translateX(-50%); }
@media (max-width: 820px) {
  body.bn .bn-vis .gk.gk-ui-score { right: 0; top: auto; bottom: 4%; transform: none; width: 48%; }
}
/* De tegel valt over de rand van de telefoon, zoals op /traject (admin, 21 oktober) */
@media (min-width: 821px) { body.bn .bn-vis .gk.gk-ui-score { right: 22%; } }
/* Koppen en ruimte (21 oktober avond): een knop direct onder de lede staat op de inhoudsafstand (40, telefoon 32); de lede houdt 16 tot een citaat of kleine tekst */
body.bn .data .bs-tekst .lede + .btn { margin-top: calc(var(--ruimte-inhoud) - 16px); }
/* Ryans nieuwe kop (22 oktober) is langer: geen vaste regelbreuk meer, evenwichtige regels en niet over de foto */
body.bn.bn-hub .hero h1 { max-width: 11em; text-wrap: balance; }
/* Burn-out naar de stijl van home (Ryan 30 oktober, _research/BURNOUT-STIJL-1030.md): één tekstlaag per blok in volle kleur, vinkjes van home in plaats van icoontegels in dozen, geen doos om de cijfers */
body.bn main > section.bn-aanpak p.lede, body.bn main > section.bn-aanpak p.bn-tekst2 { max-width: 34em; font-size: 18px; line-height: 27px; font-weight: 400; color: rgb(var(--off-rgb)); }
body.bn .bn-aanpak .bn-tekst2 { margin: 16px 0 0; }
body.bn .bn-aanpak .btn { margin-top: 32px; }
.bn-waarom { gap: 36px 48px; }
.bn-waarom li { grid-template-columns: 20px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 0; border: 0; border-radius: 0; background: none; }
.bn-waarom .bn-vink { grid-row: span 2; width: 20px; height: 20px; margin-top: 3px; color: var(--gold); }
.bn-waarom h3 { font-size: 22px; line-height: 1.25; }
.bn-waarom p { font-size: 16px; line-height: 24px; color: rgb(var(--off-rgb)); }
body.bn .numbers .row { border: 0; background: none; padding: 0; }
@media (max-width: 900px) { .bn-waarom { gap: 28px 32px; } .bn-waarom li { padding: 0; } .bn-waarom p { font-size: 16px; } }
@media (max-width: 820px) {
  body.bn main > section.bn-aanpak p.lede, body.bn main > section.bn-aanpak p.bn-tekst2 { font-size: 16px; line-height: 24px; }
  .bn-waarom { grid-template-columns: 1fr; gap: 20px; }
  .bn-waarom h3 { font-size: 20px; }
}
/* "Zo werkt het": minder tekst onder elkaar (Ryan 30 oktober): één zin, de vinkjes van home, het team als chips in de chipstijl van home */
body.bn .bn-vinkjes { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 8px; }
body.bn .bn-vinkjes li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 24px; color: rgb(var(--off-rgb)); }
body.bn .bn-vinkjes svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--gold); }
body.bn main > section.bn-aanpak p.bn-team { margin: 32px 0 12px; font-size: 14px; line-height: 20px; color: var(--off-dim); }
body.bn .bn-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 34em; }
body.bn .bn-chips li { padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 13px; line-height: 1.3; color: var(--off-dim); white-space: nowrap; }
@media (max-width: 820px) { body.bn .bn-vinkjes { margin-top: 24px; } body.bn main > section.bn-aanpak p.bn-team { margin-top: 24px; } }
/* Alle burn-out-pagina's: lopende tekst zoals home (18/27, volle kleur; telefoon 16/24). Kleine noten en namen blijven gedimd */
body.bn main > section:not(.hero) p.lede, body.bn .measure .steps p, body.bn .pay .list span, body.bn .bn-signalen .list li { font-size: 18px; line-height: 27px; color: rgb(var(--off-rgb)); }
body.bn main > section.light:not(.hero) p.lede { color: var(--light-ink); }
@media (max-width: 820px) { body.bn main > section:not(.hero) p.lede, body.bn .measure .steps p, body.bn .pay .list span, body.bn .bn-signalen .list li { font-size: 16px; line-height: 24px; } }

/* Werkgevers, "Zo verloopt het" als uitklapbare kopjes (Sanjay, 11 nov; Ryan: "hoofdkopjes die je kan uitklappen, geen bom informatie") */
body.bn :is(#verloop, #aanpak) .steps-klap { gap: 0; row-gap: 0; margin-top: 28px; }
body.bn :is(#verloop, #aanpak) .steps-klap > li { margin: 0; padding: 14px 0; align-items: flex-start; border-bottom: 1px solid rgb(255 255 255 / .12); }
body.bn :is(#verloop, #aanpak) .steps-klap > li .n { padding-top: 10px; }
body.bn :is(#verloop, #aanpak) .steps-klap details { flex: 1; min-width: 0; }
body.bn :is(#verloop, #aanpak) .steps-klap summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 6px 0; }
body.bn :is(#verloop, #aanpak) .steps-klap summary::-webkit-details-marker { display: none; }
body.bn :is(#verloop, #aanpak) .steps-klap summary h3 { margin: 0; }
body.bn :is(#verloop, #aanpak) .steps-klap summary svg { width: 20px; height: 20px; flex: none; color: var(--gold); }
body.bn :is(#verloop, #aanpak) .steps-klap details[open] summary svg { transform: rotate(45deg); }
body.bn :is(#verloop, #aanpak) .steps-klap summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 4px; }
body.bn :is(#verloop, #aanpak) .steps-klap details p { margin: 10px 0 4px; }
body.bn :is(#verloop, #aanpak) .verloop-cta { margin-top: 32px; }

/* Werkgevers-hero: foto in plaats van telefoon, verzuimkaart als compact glasvlak linksonder (Ryan 11 nov: "die plakkaat moet iets beter") */
body.bn .bn-vis .bs-vis-stage .bs-vfoto { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 70px rgb(0 0 0 / .35); }
body.bn .bn-vis .bs-vis-stage .bs-vfoto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
body.bn .bn-vis .gk.bs-vgetal.op-foto { left: 20px; right: auto; top: auto; bottom: 20px; width: auto; min-width: 228px; transform: none; padding: 14px 18px 12px; border-radius: 18px; background: rgb(var(--glass-rgb) / .58); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); }
body.bn .bn-vis .gk.bs-vgetal.op-foto small { margin-bottom: 4px; }
body.bn .bn-vis .gk.bs-vgetal.op-foto b { display: block; font-size: 36px; line-height: 1.1; }
body.bn .bn-vis .gk.bs-vgetal.op-foto p { font-size: 13px; margin-top: 4px; }
@media (max-width: 820px) {
  body.bn .bn-vis .gk.bs-vgetal.op-foto { left: auto; right: 12px; bottom: 12px; min-width: 0; width: auto; padding: 10px 12px 8px; }
  body.bn .bn-vis .gk.bs-vgetal.op-foto b { font-size: 24px; }
  /* Ryan 12 nov ("Ja, dat is goed", na vergelijking met Oura): op de telefoon de titel op een schermvullende foto, donker vlak
     voordat de tekst begint, menu doorzichtig over de foto, label rustig, cijfers als rijen zonder kaders, geen infovlak. */
  body.bn main .hero:has(.op-foto) { display: block; }
  body.bn main .hero-media.bs-vis:has(.bs-vfoto) { height: 580px; padding: 0; background: var(--bg); }
  body.bn main .hero-media.bs-vis:has(.bs-vfoto)::after { display: block; z-index: 2; background: linear-gradient(180deg, rgb(var(--bg-rgb) / .5) 0%, rgb(var(--bg-rgb) / 0) 15%, rgb(var(--bg-rgb) / 0) 30%, rgb(var(--bg-rgb) / .6) 44%, rgb(var(--bg-rgb) / .93) 56%, var(--bg) 70%); }
  body.bn main .hero-media.bs-vis:has(.bs-vfoto) .bs-vis-comp { position: absolute; inset: 0; display: block; padding: 0; }
  body.bn main .hero-media.bs-vis .bs-vis-stage:has(.bs-vfoto) { width: 100%; height: 100%; aspect-ratio: auto; margin: 0; }
  body.bn .bn-vis .bs-vis-stage .bs-vfoto { border-radius: 0; box-shadow: none; }
  body.bn .bn-vis .bs-vis-stage .bs-vfoto img { object-position: 38% 22%; }
  body.bn main .hero-media.bs-vis:has(.bs-vfoto) .gk.bs-vgetal.op-foto { display: none; }
  body.bn main .hero:has(.op-foto) .hero-copy { position: relative; z-index: 3; margin-top: -262px !important; padding-top: 0 !important; }
  body.bn main .hero:has(.op-foto) .hero-copy .label { color: var(--muted); }
  /* cijfers als lijst zoals Apple Gezondheid: tekst links, cijfer rechts, dunne lijn tussen de rijen (Ryan 12 nov, popup "B") */
  body.bn main .hero:has(.op-foto) .hero-stats { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 0; padding-top: 0; margin-top: 36px; }
  body.bn main .hero:has(.op-foto) .hero-stats li { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 0; border: 0; border-top: 1px solid var(--line-2); }
  body.bn main .hero:has(.op-foto) .hero-stats li:last-child { border-bottom: 1px solid var(--line-2); }
  body.bn main .hero:has(.op-foto) .hero-stats b { font-size: 28px; text-align: right; }
  body.bn main .hero:has(.op-foto) .hero-stats span { font-size: 15px; color: var(--off); }
  /* /burn-out: bij deze foto valt het gezicht anders onder het logo; de foto begint daarom net onder het menu */
  body.bn.bn-hub main .hero-media.bs-vis:has(.bs-vfoto) .bs-vis-comp { inset: 64px 0 0 0; }
  body.bn.bn-hub .bn-vis .bs-vis-stage .bs-vfoto img { object-position: 30% 0%; }
  html:has(body.bn main > .hero:first-child .op-foto) .bar:not(.floating):not(.open) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: transparent; }
  body.bn .bn-vis .gk.bs-vgetal.op-foto small { font-size: 11px; }
  body.bn .bn-vis .gk.bs-vgetal.op-foto p { font-size: 12px; }
}
body.bn .hero .hero-stats b { white-space: nowrap; }

/* Werkgevers-hero: meer lucht tussen de blokken (Ryan 11 nov: "iets meer ruimte tussen alle blokken", het voelde krampachtig) */
body.bn .hero:has(.op-foto) .hero-copy h1 { margin-top: 20px; }
body.bn .hero:has(.op-foto) .hero-copy .lede { margin-top: 28px; }
body.bn .hero:has(.op-foto) .hero-copy .actions { margin-top: 40px; }
body.bn .hero:has(.op-foto) .hero-copy .hero-stats { margin-top: 56px; }
@media (max-width: 820px) {
  body.bn .hero:has(.op-foto) .hero-copy .lede { margin-top: 20px; }
  body.bn .hero:has(.op-foto) .hero-copy .actions { margin-top: 28px; }
  body.bn .hero:has(.op-foto) .hero-copy .hero-stats { margin-top: 40px; }
}

/* Werkgevers, drie kaarten (privacy, vergoeding, wij blijven betrokken) op een licht blok (Ryan 11 nov: "geen kleurenverschil" / "mag wel een lichtblok") */
body.bn #afspraken.afspraken-licht { background: var(--light-bg); color: var(--light-ink); }
body.bn #afspraken.afspraken-licht .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body.bn #afspraken.afspraken-licht .wrap > div { background: rgb(255 255 255 / .6); border: 1px solid var(--light-line); box-shadow: none; }
body.bn #afspraken.afspraken-licht h2 { color: var(--light-ink); font-size: 30px; line-height: 1.15; max-width: none; }
body.bn #afspraken.afspraken-licht .lede { color: var(--light-muted); }
body.bn #afspraken.afspraken-licht .textlink { color: var(--gold-ink); }
@media (max-width: 1080px) { body.bn #afspraken.afspraken-licht .wrap { grid-template-columns: 1fr; gap: 16px; } }
@media (max-width: 820px) { body.bn #afspraken.afspraken-licht h2 { font-size: 26px; } }

/* Hub-hero in de werkgevers-opbouw (11 nov): geen donkere waas van de oude volle foto over de ingelijste foto */
@media (min-width: 821px) { body.bn.bn-hub .hero-media.bs-vis::after { background: linear-gradient(90deg, var(--bg) 0%, rgb(var(--bg-rgb) / 0) 18%); } }

/* Hub-hero: titel iets kleiner, omdat hij meer woorden heeft (Ryan 11 nov) */
body.bn.bn-hub .hero:has(.op-foto) .hero-copy h1 { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.06; max-width: 620px; }
@media (max-width: 820px) { body.bn.bn-hub .hero:has(.op-foto) .hero-copy h1 { font-size: 38px; } }

/* Hub, "Zo werkt het Hersteltraject" als drie kaarten (Ryan 12 nov, popup A; opmaak van "Onze aanpak" op /traject, concept/traject-voorstel-4/voorstel.css r9-10 en 104-115) */
body.bn #aanpak.bn-aanpak3 { background: var(--light-bg); color: var(--light-ink); }
body.bn #aanpak.bn-aanpak3 .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
body.bn #aanpak.bn-aanpak3 .bn-aanpak3-kop { display: flex; flex-direction: column; align-items: center; }
body.bn #aanpak.bn-aanpak3 h2 { margin: 14px 0 0; color: var(--light-ink); text-wrap: balance; }
body.bn .bn-stap3 { list-style: none; margin: 48px 0 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; text-align: left; }
body.bn .bn-stap3 li { min-width: 0; }
body.bn .bn-kfoto { position: relative; margin: 0 0 20px; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: rgb(var(--ink-rgb) / 0.08); }
body.bn .bn-kfoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.bn .bn-kchip { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 12px; font-size: 14px; line-height: 1.2; color: var(--off); background: rgb(var(--glass-rgb) / 0.62); border: 1px solid rgb(var(--off-rgb) / 0.14); -webkit-backdrop-filter: blur(20px) saturate(1.3); backdrop-filter: blur(20px) saturate(1.3); }
body.bn .bn-kchip svg { width: 16px; height: 16px; color: var(--gold); }
body.bn .bn-kfoto .bn-kchip img.bn-kchip-merk { width: 16px; height: 16px; object-fit: contain; }
body.bn .bn-stap3 h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--light-ink); }
body.bn .bn-stap3 p { margin: 0; font-size: 16px; line-height: 24px; color: var(--light-ink); }
@media (max-width: 820px) { body.bn .bn-stap3 { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; } }
body.bn .bn-stap3 li:nth-child(1) .bn-kfoto img { object-position: 30% 88%; } /* Ryan 12 nov: de bloedbuisjes moeten helemaal te zien zijn */

/* Afstanden op de telefoon gelijkgetrokken (Ryan 12 nov: "veel dingen zijn op elkaar geplot"; meting _research/SPACING-MOBIEL-BURNOUT-1112.md) */
body.bn #aanpak.bn-aanpak3 h2 { margin-top: 0; }
@media (max-width: 820px) {
  body.bn main > .measure.plaat { margin-top: 40px; }
  body.bn .faq-groups h3 { margin-bottom: 16px; }
  body.bn .result .btn { margin-top: 28px; }
  body.bn #afspraken.afspraken-licht .wrap, body.bn .pair .wrap { gap: 24px; }
  body.bn main > .hero.hero .hero-copy h1 { margin-top: 16px; }
  body.bn main > .hero.hero .hero-copy .lede { margin-top: 16px; }
  body.bn main > .hero.hero .hero-copy .actions { margin-top: 28px; }
  body.bn .bn-signalen h3 { margin-bottom: 14px; }
  body.bn .bn-signalen .note-line { margin-top: 28px; }
  body.bn .bn-waarom { gap: 28px; }
}
body.bn.bn-hub .hero .gk.bs-vgetal.op-foto { display: none; } /* Ryan 12 nov: geen vlak in de foto op /burn-out; de 66 dagen komen in de zin onder de titel */

/* Hub, twee ingangen in dezelfde maat als de drie kaarten van De Aanpak (Ryan 12 nov: "spacing, grootte ... kloppen totaal niet") */
body.bn.bn-hub #ingang .bs-kop-rij { display: flex; justify-content: center; text-align: center; }
body.bn.bn-hub #ingang .bs-kop-rij h2 { max-width: 16em; margin-inline: auto; text-wrap: balance; }
body.bn.bn-hub #ingang .bs-deuren.twee { max-width: 864px; margin: 48px auto 0; gap: 32px; }
body.bn.bn-hub #ingang .bs-deuren b { font-size: 22px; line-height: 1.25; justify-content: flex-start; }
body.bn.bn-hub #ingang .bs-deuren span { margin-top: 8px; font-size: 16px; line-height: 24px; }
@media (max-width: 820px) { body.bn.bn-hub #ingang .bs-deuren.twee { grid-template-columns: 1fr; gap: 28px; margin-top: 32px; } }
body.bn .bn-vis .gk.bs-vgetal.op-foto.leeg { display: none !important; } /* lege kaart: alleen voor de opbouw van de foto-hero (werknemers) */
@media (max-width: 820px) { body.bn.bn-wn .bn-vis .bs-vis-stage .bs-vfoto img { position: relative; top: -130px; height: calc(100% + 130px); object-position: 45% 50%; } } /* Ryan 13 nov: foto op de telefoon iets hoger, zodat ouder en kind goed in beeld zijn */

/* Hub: één blok "Voor werkgevers" in plaats van twee ingangen (Ryan 13 nov, twee pagina's) */
body.bn #werkgevers.bn-wg-blok .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
body.bn .bn-wg-foto { margin: 0; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); }
body.bn .bn-wg-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
body.bn #werkgevers.bn-wg-blok h2 { margin: 16px 0 0; }
body.bn #werkgevers.bn-wg-blok .lede { margin-top: 16px; max-width: 30em; }
body.bn #werkgevers.bn-wg-blok .btn { margin-top: 28px; }
@media (max-width: 820px) { body.bn #werkgevers.bn-wg-blok .wrap { grid-template-columns: 1fr; gap: 28px; } }
body.bn #afspraken.afspraken-licht.afspraken-twee .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 960px; } /* hub: twee kaarten (Ryan 13 nov: "naast je arts" hoeft niet) */
@media (max-width: 1080px) { body.bn #afspraken.afspraken-licht.afspraken-twee .wrap { grid-template-columns: 1fr; } }

/* Cijfers in de opening: ingetogen zoals Superpower/Function, wel in goud (Ryan 13 nov: "meer richting optie A, maar met de gouden kleuren") */
body.bn .hero .hero-stats b { font-family: var(--sans); font-size: 20px; font-weight: 600; letter-spacing: 0; color: var(--accent-text); }
body.bn .hero .hero-stats span { font-size: 13px; color: var(--muted); margin-top: 2px; }
@media (max-width: 820px) { body.bn main .hero:has(.op-foto) .hero-stats b { font-size: 18px; } body.bn main .hero:has(.op-foto) .hero-stats span { font-size: 14px; color: var(--off); } }
@media (min-width: 1100px) { body.bn .hero .hero-stats { width: max-content; max-width: none; } } /* kwaliteitsreview 13 nov: lijn boven de cijfers even breed als de cijfers (zoals de homepage) */
/* Ryan 13 nov (rust en cleanheid): geen tel-nummers in de stappen; de stap vult de hele breedte */
body.bn #verloop .steps-klap > li { display: block; }
body.bn #verloop .steps-klap details { width: 100%; }
/* Kwaliteitslat: kaarten niet hoger dan hun inhoud (reviewkaarten op de burn-outpagina's, 14 nov) */
body.bn .voices.open .quotes { align-items: start; }
body.bn .voices.open .quotes li > span:last-child { margin-top: 8px; }
body.bn .voices.open .quotes blockquote, body.bn .voices.open .quotes blockquote p { margin: 0; }
body.bn .voices.open .quotes li { gap: 20px; }
body.bn .voices.open .quotes li > span:last-child { margin-top: 0; }

/* Werkgevers: uitleg vóór de rekentool (Ryan 14 nov): kop met drie kaarten eronder, geen foto, geen groen glas, ruim opgezet */
body.bn main > #investering { padding: 104px 0 96px; }
body.bn #investering h2 { margin: 16px 0 0; max-width: 16em; }
body.bn .bn-invest-kaarten { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
body.bn .bn-invest-kaarten li { display: flex; flex-direction: column; padding: 36px 32px 38px; border-radius: 20px; background: rgb(var(--off-rgb) / .045); border: 1px solid rgb(var(--off-rgb) / .06); }
body.bn .bn-invest-kaarten b { font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1.1; color: var(--accent-text); }
body.bn .bn-invest-kaarten h3 { margin: 22px 0 0; font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--off); }
body.bn .bn-invest-kaarten p { margin: 12px 0 0; font-size: 16px; line-height: 25px; color: rgb(var(--off-rgb) / .8); max-width: none; }
@media (max-width: 1100px) and (min-width: 821px) { body.bn .bn-invest-kaarten li { padding: 30px 26px 32px; } }
@media (max-width: 820px) {
  body.bn main > #investering { padding: 80px 0 64px; }
  body.bn .bn-invest-kaarten { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  body.bn .bn-invest-kaarten li { padding: 28px 24px 30px; }
  body.bn .bn-invest-kaarten b { font-size: 30px; }
  body.bn .bn-invest-kaarten h3 { margin-top: 16px; font-size: 20px; }
}

/* Rekentool (Ryan 14 nov: letterspacing, blok aanpakken; 104 px was "gigantisch").
   Bedrag volgt de schaal: iets groter dan de kop (52) en kleiner dan de paginatitel (66); telefoon 46 bij kop 38.
   Donkere kop op licht vlak oogt strakker dan licht op donker: iets meer regel- en letterruimte.
   Zin "Het Hersteltraject pakt de oorzaak aan" weg (Ryan: "zo random"). */
body.bn .calc h2 { line-height: 1.12; letter-spacing: -0.004em; }
body.bn .calc .result .out { font-size: 60px; line-height: 1.05; letter-spacing: -0.01em; margin: 22px 0 14px; font-variant-numeric: lining-nums; }
body.bn .calc .result .rows li { border-top: 0; padding-top: 0; }
body.bn .calc .result .per { margin-bottom: 28px; }
body.bn .calc .result .per, body.bn .calc .result .claim, body.bn .calc .result .rows li span { text-wrap: balance; }
body.bn .calc .result .claim { max-width: none !important; }
body.bn .calc .result .rows { margin-bottom: 4px; }
/* Laptop: kop en uitleg over de volle breedte, daaronder invoer en uitkomst naast elkaar en op dezelfde bovenrand */
@media (min-width: 821px) {
  body.bn .calc .wrap { align-items: start; row-gap: 0; }
  body.bn .calc .wrap > div:first-child { display: contents; }
  body.bn .calc .wrap > div:first-child > .label, body.bn .calc .wrap > div:first-child > h2, body.bn .calc .wrap > div:first-child > h1, body.bn .calc .wrap > div:first-child > .lede { grid-column: 1 / -1; }
  body.bn .calc .wrap > div:first-child > h2, body.bn .calc .wrap > div:first-child > h1 { max-width: none; text-wrap: balance; }
  body.bn .calc .fields { grid-column: 1; grid-row: 4; }
  body.bn .calc .result { grid-column: 2; grid-row: 4; }
  body.bn .calc .foot { grid-row: 5; margin-top: 40px; }
  /* Ryan 14 nov: hoogtes moeten kloppen. Invoer even hoog als de kaart en uitgelijnd op de inhoud ervan:
     eerste label op de hoogte van 'Geschatte verzuimkosten', onderkant laatste veld op de onderkant van de knop. */
  body.bn .calc .fields { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding-block: var(--bn-kaart-pad, 40px); }
  body.bn .calc .result { padding: var(--bn-kaart-pad, 40px); align-self: stretch; }
  body.bn .calc .result .btn { margin-top: 30px; }
}
@media (max-width: 820px) {
  body.bn .calc h2 { line-height: 1.14; }
  body.bn .calc .result .out { font-size: 46px; margin: 14px 0 10px; }
  body.bn .calc .result .per { margin-bottom: 22px; }
}

/* Glas op een foto: neutraal donker in plaats van groen (Ryan 14 nov: "een stuk beter", "onthoud dit"). Alleen in de donkere modus.
   Alleen het vlak met het gouden bedrag in de werkgevers-hero. De kleine labels in de hoek van de hubfoto's blijven groen (Ryan: "juist wel nice met het groene"). */
:root:not([data-theme="light"]) body.bn .bn-vis .gk.bs-vgetal.op-foto { background: rgb(12 13 12 / .38); border-color: rgb(244 242 236 / .14); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: none; }