/* ==========================================================================
   HBG-2026 · Design system humanbehaviourgroup.nl
   Gedestilleerd uit de vier maatstaf-prototypes (home, about, kennisbank,
   salespage) en de mockup v3, conform de skill hbg-redesign-stijl
   (besluiten Peter, 7 en 8 augustus 2026).
   Regels: koppen navy op licht, warm cream op donker (nooit hard wit),
   Plus Jakarta Sans 700 voor koppen, DISC-kleuren alleen functioneel.
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */
:root{
  --navy:#2C4353; --navy2:#3A5468; --gold:#B3940D; --gold-light:#EAD690;
  /* Goud als kleine tekst op lichte achtergrond: donkerder voor WCAG AA
     (#7E6A08 haalt >= 4,5:1 op wit, paper, paper2, creamtint en cream).
     Decoratief goud en goud op donker blijven --gold / --gold-light. */
  --gold-tekst:#7E6A08;
  --cream:#F6EFDD; --paper:#FBFAF5; --paper2:#F3F3F0; --creamtint:#F8F3E7;
  --sage:#9E9A7F;
  --disc-d:#C0392B; --disc-i:#B3940D; --disc-s:#3F8A66; --disc-c:#1E6FA0;
  --ink:#16222B; --ink2:#1D2C37;
  --tekst:#4A5A64; --muted:#71808A; --lijn:#E9E6DC;
  --donker-tekst:#C3CDC6; --donker-sub:#9AA8A0; --donker-link:#B7C2BB;
  --shadow:0 12px 34px rgba(44,67,83,.10),0 3px 8px rgba(44,67,83,.05);
  --shadow-donker:0 18px 46px rgba(10,20,28,.30);
  --radius-knop:14px; --radius-kaart:20px; --radius-paneel:22px;
  /* Organische hoek: panelen krijgen één afwijkende hoek */
  --radius-organisch:22px 22px 22px 64px;
  /* Hoeveel de hero-beeldkaart over de donker-licht-rand omhoog schuift
     (stijlbesluit Peter 10 aug 2026, hero-standaard A4 "donkere kroon") */
  --kroon-overlap:64px;
}

/* ==========================================================================
   02 · RESET EN BASIS
   ========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',-apple-system,'Segoe UI',sans-serif;background:var(--paper);color:var(--tekst);font-size:16.5px;line-height:1.7}
img{max-width:100%}
a{color:var(--navy)}
.wrap{max-width:1140px;margin:0 auto;padding:0 26px}
.smal{max-width:820px}

/* ==========================================================================
   03 · TYPOGRAFIE EN HULPELEMENTEN
   Koppen: Plus Jakarta Sans 700, licht negatieve spatiëring, navy op licht.
   ========================================================================== */
h1,h2,h3{font-weight:700;letter-spacing:-.015em;line-height:1.14;color:var(--navy)}
h2.kop{font-size:clamp(26px,3.4vw,38px);max-width:26ch;margin-bottom:12px}
p.intro{color:var(--muted);max-width:62ch;margin-bottom:30px}
.label{display:inline-block;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tekst);margin-bottom:12px;font-weight:700}
/* Goudmarkering onder het kernwoord van een kop */
.goud-onder{background:linear-gradient(transparent 66%,var(--gold-light) 66%)}
.verwachting{font-size:13.5px;color:var(--donker-sub)}

/* ==========================================================================
   04 · KNOPPEN EN TEKSTLINKS
   Op LICHT: primair navy of goud, secundair cream of tekstlink. Min 48px.
   Op DONKER (stijlbesluit Peter 10 aug 2026): donker goud #B3940D vervalt
   daar (vlak-contrast op navy maar 3,5:1 — dof). Primair cream met
   navy-tekst, actieknop licht goud (.lichtgoud, #EAD690 + ink, max één per
   donker vlak), secundair outline cream (nooit als enige CTA).
   Knoptekst op navy: warm cream (merkregel: nooit hard wit); op goud/licht
   goud is de knoptekst ink voor WCAG AA.
   ========================================================================== */
.knop{display:inline-block;background:var(--navy);color:var(--cream) !important;border:0;border-radius:var(--radius-knop);padding:14px 26px;font-size:16px;font-weight:600;min-height:48px;cursor:pointer;text-decoration:none;font-family:inherit;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.knop:hover{transform:translateY(-2px);background:var(--navy2);box-shadow:0 10px 24px rgba(44,67,83,.24)}
.knop.goud{background:var(--gold);color:var(--ink) !important}
.knop.goud:hover{background:#a3870c}
.knop.cream{background:var(--cream);color:var(--navy) !important}
.knop.lichtgoud{background:var(--gold-light);color:var(--ink) !important}
.knop.lichtgoud:hover{background:#E3CB79}
.knop.outline-cream{background:transparent;border:1.5px solid rgba(246,239,221,.65);color:var(--cream) !important;padding:12.5px 24.5px}
.knop.outline-cream:hover{background:rgba(246,239,221,.12);box-shadow:none}
.tekstlink{font-weight:600;color:var(--navy);text-decoration:none;border-bottom:2px solid var(--gold-light);padding-bottom:2px}
.tekstlink:hover{border-bottom-color:var(--gold)}

/* ==========================================================================
   05 · SITE-NAV (navigatie v3, besluit Peter 9 aug 2026)
   Compacte witte navigatie (66px, sticky). Logo 48px hoog via de bijgesneden
   kopie hbg-logo-nav.webp (zelfde logo, lege marge eraf). Vier korte
   doelgroep-items + Aanbod-uitklap (native details) + CTA; nav-typografie
   14px zodat 5 items + CTA op één regel passen op 1280px. Geen taakzinnen
   in de balk. Mobiel: één regel met logo, compacte CTA en hamburger die een
   gelaagd paneel opent (doelgroep-items, Aanbod, sectie van de actieve
   voordeur, service, CTA).
   ========================================================================== */
.site-nav{background:#fff;position:sticky;top:0;z-index:52;box-shadow:0 1px 0 var(--lijn)}
.site-nav .wrap{display:flex;align-items:center;gap:16px;padding:9px 26px;min-height:66px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{height:48px;width:auto;display:block}
.nav-links{display:flex;align-items:center;gap:15px;margin-left:auto}
/* Zes menu-items (menu3): iets krapper zodra de balk het nodig heeft */
@media(max-width:1180px){.nav-links{gap:11px}.nav-links>a:not(.knop){font-size:13.5px}.nav-links .knop{padding:10px 13px}}
.nav-links>a:not(.knop),.nav-links summary{color:var(--navy);text-decoration:none;font-size:14px;font-weight:600;position:relative;padding:6px 0;white-space:nowrap;cursor:pointer;list-style:none}
.nav-links summary::-webkit-details-marker{display:none}
.nav-links>a:not(.knop)::after,.nav-links summary::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2.5px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav-links>a:not(.knop):hover::after,.nav-links>a.act::after,.nav-links summary:hover::after,.nav-links summary.act::after,.nav-links details[open] summary::after{transform:scaleX(1)}
.nav-links .knop{font-size:14px;padding:10px 16px;min-height:42px;white-space:nowrap;flex-shrink:0}
.nav-links summary .pijl{color:var(--gold-tekst);font-size:11px;transition:transform .2s ease;display:inline-block}
.nav-links details[open] summary .pijl{transform:rotate(180deg)}
/* Aanbod-uitklap VERVALLEN (menu3, 10 aug 2026): Aanbod is een gewoon
   menu-item met sectiemenu geworden. Regels blijven staan voor eventuele
   gecachte pagina's, maar worden niet meer gegenereerd. */
.nav-aanbod{position:relative}
.nav-aanbod .uitklap{position:absolute;right:0;top:calc(100% + 10px);background:#fff;border:1px solid var(--lijn);border-radius:14px;box-shadow:0 18px 40px rgba(22,34,43,.16);padding:6px 0;min-width:220px;z-index:55}
.nav-aanbod .uitklap a{display:block;padding:11px 18px;color:var(--tekst);text-decoration:none;font-weight:600;font-size:15px}
.nav-aanbod .uitklap a:hover{background:var(--paper2);color:var(--navy)}
.nav-aanbod .uitklap a.act{color:var(--navy);background:var(--paper2);box-shadow:inset 3px 0 0 var(--gold)}
.knop-kop{display:none;margin-left:auto;padding:11px 14px;font-size:14px;min-height:44px;white-space:nowrap}
.hamburger{display:none;margin-left:8px;background:none;border:1.5px solid var(--lijn);border-radius:12px;min-width:48px;min-height:48px;cursor:pointer;font-family:inherit;color:var(--navy);flex-shrink:0}
.hamburger .lijntjes{display:inline-flex;flex-direction:column;gap:5px;vertical-align:middle}
.hamburger .lijntjes i{display:block;width:20px;height:2.5px;border-radius:2px;background:var(--navy);transition:transform .2s ease,opacity .2s ease}
.hamburger[aria-expanded="true"] .lijntjes i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.hamburger[aria-expanded="true"] .lijntjes i:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] .lijntjes i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* Mobiel menupaneel: gelaagd (hoofditems, sectie van de actieve voordeur,
   servicelaag met Kies je pad en Inloggen, CTA over de volle breedte) */
.paneel{display:none;background:#fff;border-top:1px solid var(--lijn)}
.paneel.open{display:block}
.paneel .laag{padding:14px 26px;border-bottom:1px solid var(--lijn)}
.paneel .laag:last-child{border-bottom:0}
.paneel .kopje{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-tekst);font-weight:700;margin-bottom:8px}
.paneel a{display:block;padding:11px 0;color:var(--navy);text-decoration:none;font-weight:600;font-size:17px;border-bottom:1px solid var(--paper2)}
.paneel a:last-child{border-bottom:0}
.paneel a.act{color:var(--gold-tekst)}
.paneel .laag.sectie{background:var(--paper2)}
.paneel .laag.sectie a{font-size:15.5px;font-weight:600;color:var(--tekst)}
.paneel .laag.service a{font-size:15px;color:var(--tekst)}
.paneel .laag.actie{padding:18px 26px}
.paneel .laag.actie .knop{display:block;text-align:center}
/* --------------------------------------------------------------------------
   05b · TWEELAAGS MOBIEL MENU (besluit Peter, menu2 10 aug 2026)
   Laag 1: de vier ingangen als native details-accordeons (werken zonder JS),
   plus Aanbod en Over HBG. Laag 2 (JS): vervangt laag 1 door het sectiemenu
   van de gekozen ingang met de terugregel "← Terug naar hoofdmenu | <ingang>".
   -------------------------------------------------------------------------- */
.paneel .m-hoofd[hidden],.paneel .m-laag2[hidden]{display:none}
.paneel details.m-ingang{border-bottom:1px solid var(--paper2)}
.paneel .m-ingang summary{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;color:var(--navy);font-weight:600;font-size:17px;cursor:pointer;list-style:none;min-height:48px}
.paneel .m-ingang summary::-webkit-details-marker{display:none}
.paneel .m-ingang summary .pijl{color:var(--gold-tekst);font-size:13px;transition:transform .2s ease;flex-shrink:0}
.paneel .m-ingang[open] summary .pijl{transform:rotate(90deg)}
.paneel .m-sub{padding:2px 0 12px 14px;border-left:3px solid var(--acc,var(--gold));margin:0 0 10px 2px}
.paneel .m-sub a{font-size:15.5px;color:var(--tekst)}
.paneel .m-sub a.m-hub{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-tekst)}
.paneel .voordeur-org .m-sub a.m-hub,.paneel .m-sub.voordeur-org a.m-hub{color:var(--disc-d)}
.paneel .voordeur-prof .m-sub a.m-hub,.paneel .m-sub.voordeur-prof a.m-hub{color:var(--disc-s)}
.paneel .voordeur-partner .m-sub a.m-hub,.paneel .m-sub.voordeur-partner a.m-hub{color:var(--disc-c)}
.paneel .voordeur-ind .m-sub a.m-hub,.paneel .m-sub.voordeur-ind a.m-hub{color:var(--gold-tekst)}
.paneel .m-laag2 .m-terug{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-bottom:1px solid var(--paper2);font-family:inherit;font-size:15px;font-weight:700;color:var(--navy);padding:13px 0;cursor:pointer;text-align:left;min-height:48px}
.paneel .m-laag2 .m-terug .pijl{color:var(--gold-tekst)}
.paneel .m-laag2 .m-terug .m-titel{color:var(--gold-tekst);font-weight:600}
.paneel .m-laag2 .m-sub{padding-top:8px;margin-bottom:4px}
/* Disclijn direct onder de nav: sticky mee (nav + disclijn = 71px), het
   sectiemenu zelf blijft los meescrollen (menu-footer-voorstel 2.1/3). */
.disclijn-nav{position:sticky;top:66px;z-index:51}

/* ==========================================================================
   06 · DISCLIJN
   5px hoog, vier gelijke segmenten in vaste volgorde d, i, s, c.
   ========================================================================== */
.disclijn{display:flex;height:5px}
.disclijn span{flex:1}
.disclijn .d{background:var(--disc-d)}
.disclijn .i{background:var(--disc-i)}
.disclijn .s{background:var(--disc-s)}
.disclijn .c{background:var(--disc-c)}

/* ==========================================================================
   07 · SECTIEMENU EN VOORDEUR-ACCENTEN
   Eén sectiemenu per voordeur; de accentkleur komt van de voordeur-class.
   Desktop: één regel, het voordeurlabel is zelf de link naar de hub (deed
   voorheen "Home"), plus maximaal 5 sectielinks. Mobiel: de doelgroep-pil
   (voordeur + automatisch bepaalde huidige plek) opent een zwevend paneel
   met dezelfde links; sluit bij Escape of tik buiten (hbg-dynamiek.js).
   voordeur-org = rood (D) · voordeur-ind = goud (I) ·
   voordeur-prof = groen (S) · voordeur-partner = blauw (C).
   Zonder voordeur-class (bijv. kennisbank, merkpagina's — besluit V62) is
   er geen sectiemenu op de pagina.
   ========================================================================== */
.voordeur-org{--acc:var(--disc-d)}
.voordeur-ind{--acc:var(--disc-i)}
.voordeur-prof{--acc:var(--disc-s)}
.voordeur-partner{--acc:var(--disc-c)}
/* Losse accentclasses voor kaarten en details */
.acc-d{--acc:var(--disc-d)} .acc-i{--acc:var(--disc-i)}
.acc-s{--acc:var(--disc-s)} .acc-c{--acc:var(--disc-c)}
/* Sticky (besluit Peter 10 aug, avond): het sectiemenu blijft onder de
   sticky nav (66px) en disclijn (5px) staan tijdens het scrollen. */
.sectiemenu{position:sticky;top:71px;z-index:50;background:var(--paper2);border-bottom:1px solid var(--lijn);--acc:var(--gold)}
/* Voordeur-accent wint van de gouden standaard (zelfde specificiteit als
   .sectiemenu zou anders op bronvolgorde verliezen — fix 9 aug 2026) */
.sectiemenu.voordeur-org{--acc:var(--disc-d)}
.sectiemenu.voordeur-ind{--acc:var(--disc-i)}
.sectiemenu.voordeur-prof{--acc:var(--disc-s)}
.sectiemenu.voordeur-partner{--acc:var(--disc-c)}
.sectiemenu.voordeur-aanbod{--acc:var(--gold)}
.sectiemenu.voordeur-over{--acc:var(--navy)}
.sectiemenu .regel{display:flex;gap:22px;align-items:center;padding:11px 26px;font-size:14.5px;max-width:1140px;margin:0 auto;flex-wrap:wrap}
.sectiemenu .regel::before{content:"";width:22px;height:3px;border-radius:2px;background:var(--acc);flex-shrink:0}
.sectiemenu .hublabel{color:var(--acc);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11.5px;text-decoration:none}
.sectiemenu .hublabel:hover{text-decoration:underline}
.sectiemenu .regel a:not(.hublabel){color:var(--tekst);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;font-weight:600}
.sectiemenu .regel a:not(.hublabel):hover,.sectiemenu .regel a.act{border-bottom-color:var(--acc);color:var(--navy)}
/* Mobiel: doelgroep-pil (voordeur plus huidige plek) in plaats van de
   horizontaal scrollende strook */
.sectiemenu details{display:none;position:relative;padding:8px 16px}
.sectiemenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:9px;padding:9px 18px;background:#fff;border:1.5px solid var(--acc);border-radius:999px;font-size:13.5px;font-weight:700;color:var(--navy);min-height:44px;max-width:100%}
.sectiemenu summary::-webkit-details-marker{display:none}
.sectiemenu summary .stip{flex-shrink:0;width:14px;height:3px;border-radius:2px;background:var(--acc)}
.sectiemenu summary .plek{color:var(--acc);white-space:nowrap}
.sectiemenu summary .pijl{color:var(--acc);transition:transform .2s ease}
.sectiemenu details[open] summary .pijl{transform:rotate(180deg)}
.sectiemenu .paneel-links{position:absolute;left:16px;right:16px;top:calc(100% - 2px);background:#fff;border:1px solid var(--lijn);border-radius:16px;box-shadow:0 18px 40px rgba(22,34,43,.18);padding:6px 0;z-index:40}
.sectiemenu .paneel-links a{display:block;padding:12px 20px;color:var(--tekst);text-decoration:none;font-weight:600;font-size:15.5px}
.sectiemenu .paneel-links a.act{color:var(--navy);background:var(--paper2);box-shadow:inset 3px 0 0 var(--acc)}
/* "andere ingang kiezen": opent het keuzepaneel (de enige plek met
   taakzinnen); zonder JS een gewone link naar /kies-je-pad.html */
.sectiemenu .regel a.wissel{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600;text-decoration:underline;text-underline-offset:3px;border-bottom:0;padding:4px 0}
.sectiemenu .regel a.wissel:hover{color:var(--navy);border-bottom:0}
.sectiemenu .paneel-links .tussenkop{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-tekst);font-weight:700;padding:10px 20px 4px;border-top:1px solid var(--paper2);margin-top:5px}
.sectiemenu .paneel-links a.wissel-rij{font-size:14px;color:var(--tekst)}

/* ==========================================================================
   07b · KIES-STRIP (hubs, eerste bezoek — nav v3)
   Compacte strip "Voor wie kijk je?" zonder taakzinnen; opent het
   keuzepaneel en verdwijnt zodra er een route gekozen is (het inline
   head-script zet data-hbg-route vóór de eerste paint).
   ========================================================================== */
.kies-strip{background:var(--creamtint);border-bottom:1px solid var(--lijn)}
.kies-strip .wrap{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;padding:12px 26px}
.kies-strip p{font-size:13.5px;font-weight:700;color:var(--navy);margin:0}
.kies-strip .kies-knop{display:inline-flex;align-items:center;background:var(--navy);color:var(--cream);border-radius:999px;padding:8px 18px;font-size:13.5px;font-weight:600;text-decoration:none;min-height:40px;transition:background .2s ease}
.kies-strip .kies-knop:hover{background:var(--navy2)}
.kies-strip .strip-noot{font-size:12px;color:var(--muted)}
html[data-hbg-route] .kies-strip{display:none}

/* ==========================================================================
   07c · KEUZEPANEEL EN VOORKEUREN-PANEEL (overlays, nav v3)
   Keuzepaneel: de ENIGE plek met de vier taakzinnen. Voorkeuren-paneel:
   taal, ingang en DISC-kleur met resetknoppen. Beide site-breed in de
   paginavoet gerenderd (hidden); hbg-dynamiek.js opent en sluit ze.
   ========================================================================== */
.kz-schil,.vk-schil{position:fixed;inset:0;background:rgba(22,34,43,.45);z-index:82;display:none;align-items:flex-end;justify-content:center;padding:18px}
.kz-schil.open,.vk-schil.open{display:flex}
.kz-schil[hidden],.vk-schil[hidden]{display:none}
@media(min-width:700px){.kz-schil.open,.vk-schil.open{align-items:center}}
.kz-paneel,.vk-paneel{background:#fff;border-radius:var(--radius-organisch);max-width:460px;width:100%;padding:24px 26px;box-shadow:0 24px 60px rgba(10,20,28,.35);max-height:88vh;overflow:auto}
.kz-paneel h2,.vk-paneel h2{font-size:19px;margin-bottom:4px}
.kz-paneel>p,.vk-paneel>p{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.kz-rij{display:block;width:100%;text-align:left;background:#fff;border:1.5px solid var(--lijn);border-radius:14px;padding:12px 16px;margin-bottom:8px;cursor:pointer;font-family:inherit;text-decoration:none;transition:border-color .2s ease}
.kz-rij:hover{border-color:var(--navy)}
.kz-rij .taak{display:block;font-size:15px;font-weight:700;color:var(--navy)}
.kz-rij .ingang{display:block;font-size:12.5px;color:var(--muted);font-weight:600;margin-top:2px}
.kz-rij .ingang.acc-d{color:var(--disc-d)}
.kz-rij .ingang.acc-i{color:var(--gold-tekst)}
.kz-rij .ingang.acc-s{color:var(--disc-s)}
.kz-rij .ingang.acc-c{color:var(--disc-c)}
.kz-rij.kz-geen .taak{font-weight:600;color:var(--tekst)}
.kz-sluit,.vk-sluit{margin-top:8px;width:100%;text-align:center}
.vk-rij{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--paper2);flex-wrap:wrap}
.vk-rij .wat{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-tekst);font-weight:700;width:104px;flex-shrink:0}
.vk-rij .waarde{font-size:14.5px;color:var(--navy);font-weight:600;flex:1;min-width:120px}
.vk-rij .waarde small{display:block;font-weight:500;color:var(--muted);font-size:12px}
.vk-rij button{font-family:inherit;font-size:12.5px;font-weight:600;border:1.5px solid var(--lijn);background:#fff;color:var(--navy);border-radius:999px;padding:6px 14px;cursor:pointer;min-height:36px;flex-shrink:0;transition:border-color .2s ease}
.vk-rij button:hover{border-color:var(--navy)}

/* ==========================================================================
   08 · DONKERE HERO
   Elke pagina begint met een donker filmisch vlak: gradiënt navy → ink met
   radiale gloed, ademende organische baan en goudmarkering in de kop.
   ========================================================================== */
.hero-donker{background:radial-gradient(ellipse 75% 90% at 80% 8%,rgba(58,84,104,.55),transparent 62%),linear-gradient(155deg,var(--navy) 0%,#22394A 48%,var(--ink) 100%);color:var(--cream);position:relative;overflow:hidden;padding:64px 0 58px}
.hero-donker .baan{position:absolute;right:-160px;top:-130px;width:480px;height:480px;border-radius:58% 42% 55% 45%/52% 48% 56% 44%;background:rgba(246,239,221,.05);animation:adem 15s ease-in-out infinite alternate}
.hero-donker h1{color:var(--cream);font-size:clamp(33px,4.6vw,52px);max-width:20ch}
.hero-donker .label{color:var(--gold-light)}
.hero-donker p.sub{font-size:18px;color:var(--donker-tekst);max-width:52ch;margin:20px 0 28px}
.hero-donker p.intro-zin{font-size:18px;color:var(--donker-tekst);max-width:56ch;margin:18px 0 0}
.hero-donker .goud-onder{background:linear-gradient(transparent 66%,rgba(179,148,13,.45) 66%)}
.hero-donker .duo{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;position:relative;z-index:2}
.hero-donker .trust{font-size:13.5px;color:var(--donker-sub);margin-top:22px}
.hero-donker .kruimel{color:#8FA0A8;font-size:13.5px;margin-bottom:16px}
.hero-illustratie{background:rgba(246,239,221,.07);border:1px solid rgba(246,239,221,.14);border-radius:30px 30px 30px 90px;padding:30px;display:flex;align-items:center;justify-content:center}
.hero-illustratie img{max-width:100%;height:auto}
/* Foto zonder passe-partout in de filmische hero (about) */
.hero-illustratie.vol{padding:0;overflow:hidden}
.hero-illustratie.vol img{width:100%;height:100%;object-fit:cover;display:block}
@keyframes adem{
  0%{border-radius:58% 42% 55% 45%/52% 48% 56% 44%;transform:rotate(0) scale(1)}
  100%{border-radius:45% 55% 48% 52%/58% 42% 50% 50%;transform:rotate(6deg) scale(1.06)}
}

/* --------------------------------------------------------------------------
   08b · DONKERE KROON (hero-standaard A4, stijlbesluit Peter 10 aug 2026)
   Compact donker vlak met alleen kruimelpad, gouden label en de kop; de
   subtekst, knoppen en de beeldkaart staan op licht in .hero-inhoud direct
   eronder. De beeldkaart schuift met --kroon-overlap over de donker-licht-
   rand omhoog. De volle filmische hero (.hero-donker) blijft bestaan voor
   de verhaalpagina's home (missiestory), about en methode.
   -------------------------------------------------------------------------- */
.hero-kroon{background:radial-gradient(ellipse 75% 90% at 80% 8%,rgba(58,84,104,.55),transparent 62%),linear-gradient(155deg,var(--navy) 0%,#22394A 48%,var(--ink) 100%);color:var(--cream);position:relative;overflow:hidden;padding:40px 0 36px}
.hero-kroon .baan{position:absolute;right:-190px;top:-200px;width:430px;height:430px;border-radius:58% 42% 55% 45%/52% 48% 56% 44%;background:rgba(246,239,221,.05);animation:adem 15s ease-in-out infinite alternate}
.hero-kroon .kruimel{color:#8FA0A8;font-size:13.5px;margin-bottom:12px;position:relative;z-index:2}
.hero-kroon .label{color:var(--gold-light)}
.hero-kroon h1{color:var(--cream);font-size:clamp(30px,4.2vw,46px);max-width:24ch;position:relative;z-index:2}
.hero-kroon .goud-onder{background:linear-gradient(transparent 66%,rgba(179,148,13,.45) 66%)}
.hero-kroon .check-circle{margin-bottom:14px}
.hero-kroon.gecentreerd{text-align:center}
.hero-kroon.gecentreerd h1{margin-left:auto;margin-right:auto;max-width:26ch}
/* Lichte inhoudszone direct onder de kroon */
.hero-inhoud{background:var(--paper);padding:30px 0 46px;border-bottom:1px solid var(--lijn)}
.hero-inhoud p.sub{font-size:18px;color:var(--tekst);max-width:56ch;margin:0 0 24px}
.hero-inhoud .trust{font-size:13.5px;color:var(--muted);margin-top:20px}
.hero-acties{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.hero-duo{display:grid;grid-template-columns:1.15fr 1fr;gap:46px;align-items:start}
.hero-inhoud.gecentreerd{text-align:center}
.hero-inhoud.gecentreerd p.sub{margin-left:auto;margin-right:auto}
.hero-inhoud.gecentreerd .hero-acties{justify-content:center}
/* Beeldkaart: schuift over de donker-licht-rand de kroon in */
.hero-kaart{margin:calc(-1*var(--kroon-overlap) - 30px) 0 0;border-radius:24px 24px 24px 70px;overflow:hidden;background:#fff;border:1px solid var(--lijn);box-shadow:var(--shadow);position:relative;z-index:3}
.hero-kaart img{width:100%;height:100%;min-height:250px;max-height:380px;object-fit:cover;display:block}
.hero-kaart.past img{object-fit:contain;background:#fff;padding:18px;min-height:0}
.hero-kaart figcaption{font-size:12.5px;color:var(--muted);padding:8px 16px;border-top:1px solid var(--lijn)}
/* Klein beeld in een gecentreerde lichte herozone (bedankpagina's) */
.hero-mini{width:110px;height:auto;display:block;margin:0 auto 14px}
/* Byline met portret (kennisbank-hero) */
.byline{display:flex;gap:16px;align-items:center;margin-top:26px;position:relative;z-index:2}
.byline img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:2px solid rgba(246,239,221,.6)}
.byline .wie{font-size:14px;color:var(--donker-tekst)}
.byline .wie b{color:var(--cream);font-size:15px;display:block}
/* Byline als regel (moneypage/artikel op licht) */
.byline-regel{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:12px 0;margin:22px 0}
.byline-regel b{color:var(--navy);font-weight:700}

/* ==========================================================================
   09 · MISSIESTORY (homepage-hero)
   Donker filmisch vlak met scènechip, dots, play/pauze en pijltjestoetsen.
   ========================================================================== */
.missie{background:radial-gradient(ellipse 80% 90% at 78% 20%,rgba(58,84,104,.6),transparent 60%),linear-gradient(155deg,var(--navy) 0%,#22394A 45%,var(--ink) 100%);color:var(--cream);position:relative;overflow:hidden;padding:44px 0 40px}
.missie .koplijn{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:26px}
.missie .label{font-size:13px;letter-spacing:.2em;color:var(--gold-light);margin-bottom:0}
.missie .hint{color:#8FA0A8;font-size:14.5px;margin-left:auto}
.missie .controls{display:flex;gap:10px;align-items:center}
.missie .controls button{background:transparent;border:1.5px solid rgba(246,239,221,.5);color:var(--cream);border-radius:999px;min-width:46px;min-height:46px;font-size:16px;cursor:pointer;font-family:inherit;transition:background .2s ease}
.missie .controls button:hover{background:rgba(179,148,13,.3)}
.missie .controls .speel{padding:0 22px;font-weight:700;background:var(--cream);color:var(--ink);border-color:var(--cream)}
.scene-chip{display:inline-block;background:var(--cream);color:var(--ink);font-weight:700;font-size:14px;letter-spacing:.08em;border-radius:999px;padding:8px 18px;margin-bottom:18px}
.missie h1{color:var(--cream);font-size:clamp(38px,5.4vw,64px);max-width:14ch;position:relative;z-index:2}
.missie p.sub{color:var(--donker-tekst);font-size:18px;max-width:52ch;margin:18px 0 26px;position:relative;z-index:2}
.missie .onder{display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:relative;z-index:2}
.geluid{background:transparent;border:1.5px solid rgba(246,239,221,.4);color:var(--cream);border-radius:999px;padding:11px 20px;font-size:15px;cursor:pointer;font-family:inherit}
.dots{display:flex;gap:7px;align-items:center}
.dots i{width:9px;height:9px;border-radius:50%;background:rgba(246,239,221,.3);transition:all .3s ease}
.dots i.act{background:var(--gold);width:22px;border-radius:5px;box-shadow:0 0 12px rgba(179,148,13,.8)}
.teller{color:#8FA0A8;font-size:14.5px}
.constellatie{position:absolute;right:2%;top:8%;width:420px;height:340px;z-index:1;pointer-events:none}
.constellatie .cirkel-num{font-size:34px;font-weight:700;fill:var(--gold-light)}

/* ==========================================================================
   10 · SECTIES EN KAARTEN
   Lichte secties wisselen wit, off-white (zacht) en creamtint af.
   Accentkaarten (metacc) krijgen een gekleurde bovenrand via --acc.
   ========================================================================== */
section.blok{padding:72px 0;position:relative;overflow:hidden}
.blok.zacht{background:var(--paper2)}
.blok.creamtint{background:var(--creamtint)}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.kaarten.k2{grid-template-columns:repeat(2,1fr)}
.kaarten.k4{grid-template-columns:repeat(4,1fr)}
.kaart{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-kaart);padding:28px;transition:transform .25s ease,box-shadow .25s ease}
.kaart:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.kaart h3{font-size:19px;margin:6px 0 8px}
.kaart p{font-size:15px;color:var(--muted)}
.kaart .tag{font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--gold-tekst)}
.kaart .mini{font-size:14.5px;font-weight:600;color:var(--navy);margin-top:14px;display:inline-block;border-bottom:2px solid var(--gold-light);text-decoration:none;padding-bottom:1px}
.kaart img.thumb{width:100%;height:150px;object-fit:cover;border-radius:14px;margin-bottom:14px;background:var(--paper2)}
.kaart img.thumb.past{object-fit:contain;padding:10px}
.kaart.metacc{border-top:4px solid var(--acc)}
.kaart.metacc .tag{color:var(--acc)}
/* Pijnpuntkaart (salespage): rode bovenrand en rode kop */
.kaart.pijn{border-top:4px solid var(--disc-d)}
.kaart.pijn h3{color:var(--disc-d)}

/* ==========================================================================
   11 · DUO, CHECKS EN BEELDKADER
   ========================================================================== */
.duo{display:grid;grid-template-columns:1.15fr 1fr;gap:46px;align-items:center}
.checks{list-style:none;margin-top:18px;font-size:15.5px}
.checks li{padding:6px 0 6px 30px;position:relative}
.checks li::before{content:"✓";position:absolute;left:0;color:var(--disc-s);font-weight:700}
/* Wel/niet-lijst (voor wie is dit wel en niet) */
.checks2{list-style:none;font-size:15.5px}
.checks2 li{padding:7px 0 7px 30px;position:relative}
.checks2 li.wel::before{content:"✓";position:absolute;left:0;color:var(--disc-s);font-weight:700}
.checks2 li.niet::before{content:"✕";position:absolute;left:0;color:var(--disc-d);font-weight:700}
.beeldkader{border-radius:28px 28px 28px 80px;overflow:hidden;box-shadow:var(--shadow);background:#fff;border:1px solid var(--lijn);padding:26px;display:flex;align-items:center;justify-content:center}
.beeldkader img{max-width:100%;height:auto}
.beeldkader.vol{padding:0}
.beeldkader.vol img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   12 · BAND-DONKER EN STATS
   Donkere banden (zelfde navy-ink gradiënt) voor KIA en tussensecties.
   ========================================================================== */
.band-donker{background:linear-gradient(150deg,var(--navy),var(--ink));color:var(--cream);position:relative;overflow:hidden}
.band-donker .gloed{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(179,148,13,.20),transparent 65%)}
.band-donker h2{color:var(--cream)}
.band-donker p{color:var(--donker-tekst)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stats b{display:block;font-size:42px;font-weight:700;color:var(--gold-light);letter-spacing:-.02em}
.stats span{font-size:14px;color:#AEBBB4}

/* ==========================================================================
   13 · QUOTE-BLOKKEN EN STATEMENT
   ========================================================================== */
.quote-blok{background:#fff;border:1px solid var(--lijn);border-radius:24px 24px 24px 70px;padding:40px;box-shadow:var(--shadow);max-width:760px;margin:0 auto;text-align:center}
.quote-blok p{font-size:20px;font-weight:600;color:var(--navy);line-height:1.5}
.quote-blok small{display:block;margin-top:14px;color:var(--muted)}
/* Quote met portret (artikel) */
.quote-blok.metfoto{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;text-align:left;padding:32px;border-radius:var(--radius-organisch)}
.quote-blok.metfoto img{width:82px;height:82px;border-radius:50%;object-fit:cover}
.quote-blok.metfoto p{font-size:16.5px}
.quote-blok.metfoto small{margin-top:8px}
/* Groot missiestatement */
.statement{background:#fff;border:1px solid var(--lijn);border-radius:24px 24px 24px 72px;padding:40px;box-shadow:var(--shadow);max-width:820px;margin:0 auto;text-align:center}
.statement p.groot{font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--navy);line-height:1.4}
.statement small{display:block;margin-top:12px;color:var(--muted)}
.quote-groot{font-size:clamp(22px,2.8vw,30px);font-weight:700;color:var(--navy);line-height:1.4;max-width:26ch}
.quote-groot .goud-onder{background:linear-gradient(transparent 66%,var(--gold-light) 66%)}

/* ==========================================================================
   14 · FOTOGRID
   Echte mensen uit de beeldbank, met onderschrift op donkere verloop.
   ========================================================================== */
.fotogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.fotogrid figure{border-radius:18px;overflow:hidden;position:relative;background:var(--paper2)}
.fotogrid img{width:100%;height:210px;object-fit:cover;display:block;transition:transform .4s ease}
.fotogrid figure:hover img{transform:scale(1.05)}
.fotogrid figcaption{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(22,34,43,.82));color:var(--cream);font-size:13px;padding:26px 14px 12px;font-weight:600}

/* ==========================================================================
   15 · NEXTSTEP
   Donkere afsluitband met één zachte en één harde CTA plus verwachting.
   ========================================================================== */
.nextstep{background:linear-gradient(150deg,var(--navy),var(--ink));border-radius:26px;color:var(--cream);padding:50px;display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;position:relative;overflow:hidden;box-shadow:var(--shadow-donker)}
.nextstep h2{color:var(--cream);font-size:30px}
.nextstep p{color:var(--donker-tekst);font-size:15px;margin-top:10px;max-width:50ch}
.nextstep .acties{display:flex;flex-direction:column;gap:12px;position:relative;z-index:2}
.nextstep .gloed{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(179,148,13,.22),transparent 65%)}

/* ==========================================================================
   16 · UITGELICHT (de lichtbundel uit het logo)
   Donker vlak, bovenaan het gezicht uit het logo met stralen en gloed,
   daaronder een zachte lichtkegel op de uitgelichte inhoud.
   Maximaal één bundel per pagina.
   ========================================================================== */
.uitgelicht{background:linear-gradient(150deg,var(--navy),var(--ink));border-radius:26px;position:relative;overflow:hidden;padding:0 40px 46px;box-shadow:var(--shadow-donker);text-align:center;color:var(--cream)}
.uitgelicht .lampje{position:relative;display:inline-block;margin-top:30px;width:38px;height:46px;background:url("/img/hbg/hbg-lamp-gezicht.webp") center/contain no-repeat;filter:drop-shadow(0 0 16px rgba(234,214,144,.9))}
.uitgelicht .lampje::before{content:"";position:absolute;inset:-30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23EAD690' stroke-width='4.5' stroke-linecap='round'%3E%3Cline x1='50' y1='2' x2='50' y2='15'/%3E%3Cline x1='81' y1='12' x2='73' y2='23'/%3E%3Cline x1='19' y1='12' x2='27' y2='23'/%3E%3Cline x1='97' y1='40' x2='84' y2='43'/%3E%3Cline x1='3' y1='40' x2='16' y2='43'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat}
.uitgelicht .bundel{position:absolute;top:52px;left:50%;transform:translateX(-50%);width:min(680px,90%);height:calc(100% - 52px);background:linear-gradient(180deg,rgba(234,214,144,.30),rgba(234,214,144,.07) 65%,transparent);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);pointer-events:none}
.uitgelicht .inhoud{position:relative;z-index:2;max-width:620px;margin:30px auto 0}
.uitgelicht .inhoud .u-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);font-weight:700}
.uitgelicht .inhoud h2{color:var(--cream);font-size:clamp(24px,3vw,32px);margin:10px 0 12px}
.uitgelicht .inhoud p{color:#D6DCD2;font-size:15.5px}
.uitgelicht .inhoud .knop{margin-top:20px}

/* ==========================================================================
   17 · ROUTEWIJZER EN ROUTEKAARTEN
   Eén vraag wijst de bezoeker de juiste voordeur; de keuze wordt in de
   cookie hbg_route onthouden (zie hbg-dynamiek.js).
   ========================================================================== */
/* Licht component (reviewronde 8 aug: de donkere versie was te donker en te
   weinig uitnodigend). Cream/paper-vlak met navy kop; de drie routes zijn
   lichte kaart-knoppen met het voordeur-kleuraccent via --acc (zet per knop
   een accentclass: acc-d = HR/organisaties rood, acc-c = distributeurs
   blauw, acc-i = voor jezelf goud). Donkere variant blijft als .wijzer.donker
   beschikbaar voor elders. */
.wijzer{background:var(--creamtint);border:1px solid var(--lijn);border-radius:var(--radius-paneel);color:var(--tekst);padding:30px 34px 32px;display:flex;gap:18px 24px;align-items:center;flex-wrap:wrap;box-shadow:var(--shadow)}
.wijzer h2{color:var(--navy)}
.wijzer .vraag{font-weight:700;font-size:22px;color:var(--navy);letter-spacing:-.015em}
.wijzer .sub{color:var(--tekst);font-size:15.5px;margin-top:6px;max-width:64ch}
.wijzer .spacer{flex:1}
.wijzer-opties{--acc:var(--gold);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;margin-top:6px}
.wijzer-opties button{display:flex;align-items:center;gap:12px;text-align:left;background:#fff;border:1.5px solid var(--lijn);border-left:5px solid var(--acc);border-radius:14px;color:var(--navy);font-weight:700;font-size:15.5px;line-height:1.35;padding:15px 18px;min-height:56px;cursor:pointer;font-family:inherit;box-shadow:0 2px 8px rgba(44,67,83,.06);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.wijzer-opties button::after{content:"\2192";margin-left:auto;flex-shrink:0;color:var(--acc);font-size:19px;font-weight:700;transition:transform .2s ease}
.wijzer-opties button:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:var(--shadow)}
.wijzer-opties button:hover::after{transform:translateX(4px)}
.wijzer-advies{width:100%;background:#fff;border:1px solid var(--gold);border-left:5px solid var(--gold);border-radius:14px;padding:20px 24px;font-size:15px;color:var(--tekst);box-shadow:0 0 22px rgba(179,148,13,.18)}
.wijzer-advies b{color:var(--navy)}
/* Donkere variant (het oorspronkelijke ontwerp), voor donkere secties elders */
.wijzer.donker{background:linear-gradient(150deg,var(--navy),var(--ink));border:0;color:var(--cream);box-shadow:var(--shadow-donker)}
.wijzer.donker h2,.wijzer.donker .vraag{color:var(--cream)}
.wijzer.donker .sub{color:#AEBBC2;font-size:14.5px}
.wijzer.donker .wijzer-opties{display:flex;gap:9px;flex-wrap:wrap;margin-left:auto;width:auto;margin-top:0}
.wijzer.donker .wijzer-opties button{background:rgba(246,239,221,.1);border:1.5px solid rgba(246,239,221,.4);border-left-width:1.5px;color:var(--cream);border-radius:999px;padding:12px 20px;font-size:14.5px;font-weight:600;min-height:48px;box-shadow:none;display:inline-block;text-align:center}
.wijzer.donker .wijzer-opties button::after{content:none}
.wijzer.donker .wijzer-opties button:hover{background:rgba(179,148,13,.35);transform:translateY(-2px)}
.wijzer.donker .wijzer-advies{background:rgba(179,148,13,.16);border:1px solid rgba(179,148,13,.5);color:#E9E4D2;box-shadow:none}
.wijzer.donker .wijzer-advies b{color:var(--gold-light)}
/* Voordeur-kaarten op de homepage */
.routekaarten{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.routekaart{background:#fff;border:1px solid var(--lijn);border-radius:18px 18px 18px 52px;padding:30px;position:relative;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;cursor:pointer}
.routekaart:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--gold)}
.routekaart .baan{position:absolute;right:-60px;bottom:-70px;width:190px;height:190px;border-radius:58% 42% 55% 45%/52% 48% 56% 44%;background:var(--cream);transition:transform .4s ease}
.routekaart:hover .baan{transform:scale(1.15) rotate(8deg)}
.routekaart .rlabel{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tekst);font-weight:700;margin-bottom:10px}
.routekaart h3{font-size:23px;max-width:18ch;margin-bottom:8px;position:relative;z-index:2}
.routekaart p{color:var(--muted);font-size:15px;max-width:44ch;position:relative;z-index:2}
.routekaart .pijl{position:relative;z-index:2;display:inline-block;margin-top:16px;font-weight:700;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:2px}
.routekaart.metacc{border-top:4px solid var(--acc)}
.routekaart.metacc .rlabel{color:var(--acc)}
.routekaart.metacc .baan{background:color-mix(in srgb,var(--acc) 12%,#fff)}

/* ==========================================================================
   18 · RAW-10-STRIP
   Doorklikbare strip met de tien RAW-stappen.
   ========================================================================== */
.raw-strip{background:var(--paper2);border-top:1px solid var(--lijn);border-bottom:1px solid var(--lijn);padding:24px 0}
.raw-strip .flow{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center}
.raw-strip button{background:none;border:0;cursor:pointer;font-family:inherit;font-size:15.5px;font-weight:700;color:var(--navy);padding:6px 2px;min-height:48px;border-bottom:2.5px solid transparent;border-radius:0;transition:border-color .2s ease}
.raw-strip button:hover,.raw-strip button[aria-pressed=true]{border-bottom-color:var(--gold)}
.raw-strip button i{font-style:normal;color:var(--gold-tekst);font-size:12px;font-weight:700;margin-right:4px;vertical-align:2px}
.raw-strip .pijl{color:var(--sage)}
.raw-strip .detail{text-align:center;color:var(--muted);font-size:15px;margin-top:14px}
.raw-strip .detail b{color:var(--navy)}
/* Rijke variant (reviewronde 8 aug, homepage): eigen sectie-opmaak in plaats
   van een dun stripje. Stappen als lichte chips; de actieve stap "brandt"
   (navy chip met gouden gloed — lamp-regel: één brandend element per frame).
   Detailpaneel met ruimte voor 2-3 zinnen per stap. */
.raw-strip.rijk{background:transparent;border:0;padding:0}
.raw-strip.rijk .flow{justify-content:flex-start;gap:8px}
.raw-strip.rijk button{background:#fff;border:1.5px solid var(--lijn);border-radius:999px;padding:10px 16px;min-height:48px;font-size:14.5px;transition:transform .2s ease,border-color .2s ease,background .2s ease,box-shadow .2s ease}
.raw-strip.rijk button:hover{border-color:var(--gold);transform:translateY(-2px)}
.raw-strip.rijk button[aria-pressed=true]{background:var(--navy);color:var(--cream);border-color:var(--gold);box-shadow:0 0 18px rgba(179,148,13,.5)}
.raw-strip.rijk button[aria-pressed=true] i{color:var(--gold-light)}
.raw-strip.rijk .pijl{display:none}
.raw-strip.rijk .detail{text-align:left;background:#fff;border:1px solid var(--lijn);border-left:4px solid var(--gold);border-radius:0 16px 16px 0;padding:22px 26px;margin-top:16px;font-size:15.5px;line-height:1.65;color:var(--tekst);min-height:132px}
.raw-klik{font-size:12.5px;color:var(--gold-tekst);font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.raw-duo{align-items:start}
.raw-duo .beeldkader{position:sticky;top:96px}

/* ==========================================================================
   19 · KIA (Kennis, Inzicht, Actie)
   Twee vormen: donkere band met drie knoppen, en interactieve accentkaarten.
   ========================================================================== */
.kia-band{background:var(--navy);color:var(--cream)}
.kia-band .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.kia-band button{background:transparent;border:0;border-left:1px solid rgba(246,239,221,.12);color:var(--cream);text-align:left;padding:24px 26px;cursor:pointer;font-family:inherit;position:relative;transition:background .2s ease}
.kia-band button:first-child{border-left:0}
.kia-band button:hover{background:rgba(246,239,221,.05)}
.kia-band button::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.kia-band button[aria-pressed=true]::after{transform:scaleX(1)}
.kia-band .num{color:var(--gold);font-weight:700;margin-right:8px}
.kia-band b{font-size:18px;font-weight:700;color:var(--cream)}
.kia-band span{display:block;color:#AEBBC2;font-size:14.5px;margin-top:3px}
.kia-uitleg{background:var(--ink2);color:#C9D3D8;font-size:15px;padding:16px 0}
/* Interactieve KIA-kaarten (aboutpagina) */
.kia-interactief button.kaart{text-align:left;cursor:pointer;font-family:inherit;font-size:inherit}
.kia-interactief button.kaart[aria-pressed=true]{box-shadow:0 0 0 2px var(--acc),var(--shadow)}
.kia-detail{background:var(--creamtint);border-left:4px solid var(--gold);border-radius:0 14px 14px 0;padding:20px 24px;margin-top:16px;color:var(--tekst)}

/* ==========================================================================
   20 · KEUZEHULP (uit de mockup, template 7)
   Vragen leiden naar een advies met gloed-effect; geen contactgegevens
   vooraf. Staat op een lamp-voet (zie sectie 25).
   Stijlbesluit Peter 10 aug 2026 (C3-licht): het standaardpaneel is LICHT
   (creamtint-kaart, navy koppen, gouden accent; het advies "gaat aan" met
   de gouden gloed — lamp-regel). Goud blijft hier het accent; het DISC-
   accent per doelgroep in interactieve componenten (C2) is afgewezen.
   Regel: nooit twee donkere vlakken direct op elkaar. De donkere uitvoering
   blijft beschikbaar als .keuzehulp.donker voor donkere secties elders.
   ========================================================================== */
.keuzehulp{background:var(--creamtint);border:1px solid var(--lijn);border-radius:22px 22px 64px 22px;padding:40px;box-shadow:var(--shadow);position:relative;overflow:hidden;z-index:2;color:var(--tekst)}
.keuzehulp h3{font-size:24px;color:var(--navy);margin-bottom:6px}
.keuzehulp .kh-sub{color:var(--muted);font-size:15px;margin-bottom:22px}
.kh-stap{font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-tekst);margin-bottom:10px;font-weight:700}
.kh-vraag{font-size:21px;font-weight:700;color:var(--navy);margin-bottom:16px;letter-spacing:-.01em}
.kh-opties{display:flex;gap:10px;flex-wrap:wrap}
.kh-opties button{background:#fff;border:1.5px solid var(--lijn);color:var(--navy);font-weight:600;border-radius:999px;padding:13px 20px;font-size:15px;min-height:48px;cursor:pointer;font-family:inherit;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.kh-opties button:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 16px rgba(179,148,13,.25)}
.kh-uitslag{background:#fff;border:1px solid var(--gold);border-left:5px solid var(--gold);border-radius:14px;padding:24px;margin-top:8px;box-shadow:0 0 22px rgba(179,148,13,.18)}
.kh-uitslag b{color:var(--navy)}
.kh-uitslag p{color:var(--tekst);font-size:15px}
.kh-reset{background:none;border:0;color:var(--muted);font-size:13.5px;cursor:pointer;margin-top:14px;text-decoration:underline;font-family:inherit}
/* Donkere variant (het oorspronkelijke ontwerp), alleen voor plekken zonder
   donkere hero of donker vlak erboven */
.keuzehulp.donker{background:linear-gradient(155deg,var(--navy),var(--ink2));border:0;box-shadow:var(--shadow-donker);color:var(--cream)}
.keuzehulp.donker h3{color:var(--cream)}
.keuzehulp.donker .kh-sub{color:#AEBBC2}
.keuzehulp.donker .kh-stap{color:var(--gold-light)}
.keuzehulp.donker .kh-vraag{color:var(--cream)}
.keuzehulp.donker .kh-opties button{background:rgba(246,239,221,.08);border:1.5px solid rgba(246,239,221,.4);color:var(--cream);font-weight:500;transition:transform .2s ease,background .2s ease}
.keuzehulp.donker .kh-opties button:hover{transform:translateY(-2px);background:rgba(179,148,13,.3);border-color:rgba(246,239,221,.4);box-shadow:none}
.keuzehulp.donker .kh-uitslag{background:rgba(179,148,13,.15);border:1px solid rgba(179,148,13,.5);border-left-width:1px;border-radius:14px;box-shadow:none}
.keuzehulp.donker .kh-uitslag b{color:var(--gold-light)}
.keuzehulp.donker .kh-uitslag p{color:#C9D3D8}
.keuzehulp.donker .kh-reset{color:#AEBBC2}

/* ==========================================================================
   21 · VIDEO-FRAME
   Donker kader met disclijn, poster, brandende play-knop, meta-balk met
   ondertiteld-badge en transcript-uitklap. Staat op een lamp-voet.
   ========================================================================== */
.video-frame{background:linear-gradient(150deg,var(--navy),var(--ink));border-radius:22px 22px 22px 70px;overflow:hidden;box-shadow:var(--shadow-donker);margin:34px 0 0;color:var(--cream)}
.video-frame .disclijn{height:4px}
.video-frame .scherm{position:relative;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 35% 40%,rgba(58,84,104,.7),transparent 70%)}
.video-frame .scherm img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.video-frame .play{position:relative;z-index:2;width:76px;height:76px;border-radius:50%;background:rgba(246,239,221,.95);color:var(--navy);border:0;font-size:24px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform .2s ease,box-shadow .2s ease}
.video-frame .play:hover{transform:scale(1.08);box-shadow:0 0 34px rgba(234,214,144,.75)}
.video-frame .meta{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:16px 24px;font-size:13.5px;color:#AEBBB4;background:rgba(0,0,0,.25)}
.video-frame .meta b{color:var(--cream);font-size:14.5px}
.video-frame .badge{border:1px solid rgba(246,239,221,.4);border-radius:6px;padding:2px 8px;font-size:11.5px;letter-spacing:.06em}
.video-frame .spacer{flex:1}
.video-frame details{border-top:1px solid rgba(246,239,221,.14);padding:0 24px}
.video-frame summary{cursor:pointer;padding:13px 0;font-weight:600;color:var(--gold-light);font-size:14px;list-style:none}
.video-frame details p{padding:0 0 16px;font-size:14.5px;color:var(--donker-tekst)}

/* ==========================================================================
   22 · PRESENTATIE-FRAME
   Donker kader met disclijn, slides, dots (actieve dot brandt), pijltjes
   en teller. Staat op een lamp-voet.
   ========================================================================== */
.pres-frame{background:linear-gradient(150deg,var(--navy),var(--ink));border-radius:22px;box-shadow:var(--shadow-donker);overflow:hidden;color:var(--cream)}
.pres-frame .disclijn{height:4px}
.pres-frame .slide{padding:52px 56px;min-height:290px;position:relative;overflow:hidden}
.pres-frame .slide .gloed{position:absolute;right:-100px;bottom:-140px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(179,148,13,.22),transparent 65%)}
.pres-frame .slide-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light);font-weight:700;margin-bottom:14px}
.pres-frame .slide h3{color:var(--cream);font-size:clamp(24px,3vw,34px);max-width:20ch;margin-bottom:12px}
.pres-frame .slide p{color:var(--donker-tekst);max-width:54ch;font-size:16px}
.pres-frame .balk{display:flex;align-items:center;gap:14px;padding:16px 24px;background:rgba(0,0,0,.25);border-top:1px solid rgba(246,239,221,.12)}
.pres-frame .balk button{background:transparent;border:1.5px solid rgba(246,239,221,.5);color:var(--cream);border-radius:999px;min-width:44px;min-height:44px;font-size:15px;cursor:pointer;font-family:inherit;transition:background .2s ease,box-shadow .2s ease}
.pres-frame .balk button:hover{background:rgba(179,148,13,.3);box-shadow:0 0 18px rgba(234,214,144,.5)}
.pres-frame .dots{margin:0 auto}
.pres-frame .dots i{width:9px;height:9px;border-radius:50%;background:rgba(246,239,221,.3);transition:all .3s ease;cursor:pointer;position:relative}
/* Tikdoel: de dot zelf blijft klein, het tikgebied is 48px via pseudo-element */
.pres-frame .dots i::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:48px;height:48px}
.pres-frame .dots i.act{background:var(--gold);width:22px;border-radius:5px;box-shadow:0 0 12px rgba(179,148,13,.8)}
.pres-frame .teller{font-size:13.5px;color:#8FA0A8}

/* ==========================================================================
   23 · ANTWOORD-INTERACTIE-FRAME
   Vraagchips die "aangaan" (gloed + stralen), antwoordpaneel met expert en
   verdiepingslink. Staat op een lamp-voet.
   ========================================================================== */
.antwoord-frame{background:#fff;border:1px solid var(--lijn);border-radius:22px;padding:32px;box-shadow:var(--shadow);margin:34px 0 0}
.antwoord-frame h3{font-size:20px;margin-bottom:4px}
.antwoord-frame .sub{color:var(--muted);font-size:14.5px;margin-bottom:18px}
.vraag-chips{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}
.vraag-chips button{background:var(--paper2);border:1.5px solid var(--lijn);border-radius:999px;padding:11px 18px;font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer;font-family:inherit;min-height:44px;transition:all .2s ease}
.vraag-chips button:hover{border-color:var(--gold);transform:translateY(-2px)}
.vraag-chips button[aria-pressed=true]{background:var(--navy);color:var(--cream);border-color:var(--gold);box-shadow:0 0 18px rgba(179,148,13,.4)}
.antwoord-paneel{background:var(--cream);border-radius:16px;padding:22px 26px}
.antwoord-paneel p{color:var(--tekst)}
.antwoord-paneel .expert{display:flex;gap:10px;align-items:center;margin-top:14px;font-size:13px;color:var(--muted)}
.antwoord-paneel .expert img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.antwoord-paneel .expert b{color:var(--navy)}
.verdieping{display:inline-block;background:#fff;border:1.5px solid var(--gold);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:700;color:var(--navy);text-decoration:none;transition:transform .2s ease,background .2s ease,box-shadow .2s ease}
.verdieping:hover{transform:translateY(-2px);background:var(--gold-light);box-shadow:0 0 22px rgba(179,148,13,.45)}

/* ==========================================================================
   24 · RAPPORT-MOCKUP MET DISC-STAAFJES
   Voorbeeldrapporten tonen we als mockup met vier staafjes in de vaste
   volgorde D, I, S, C.
   ========================================================================== */
.rapport-mockup{background:#fff;border-radius:18px;box-shadow:var(--shadow-donker);padding:26px;color:var(--tekst);position:relative;z-index:2;transform:rotate(1.5deg)}
.rapport-mockup .rm-kop{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--lijn);padding-bottom:12px;margin-bottom:16px}
.rapport-mockup .rm-kop b{font-size:15px;color:var(--navy)}
.rapport-mockup .rm-kop i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--gold-tekst);text-transform:uppercase}
.disc-rij{display:grid;grid-template-columns:26px 1fr 42px;gap:12px;align-items:center;margin-bottom:11px;font-size:13.5px;font-weight:700}
.disc-rij .staaf{height:10px;border-radius:5px;background:var(--paper2);overflow:hidden}
.disc-rij .staaf i{display:block;height:100%;border-radius:5px}
.disc-rij span:last-child{text-align:right;color:var(--muted)}
/* Dashboard-mockup (salespage-hero) */
.suite-mockup{background:#fff;border-radius:20px 20px 20px 64px;box-shadow:var(--shadow-donker);padding:22px;color:var(--tekst);transform:rotate(1.2deg)}
.suite-mockup .kop{display:flex;gap:6px;margin-bottom:14px}
.suite-mockup .kop i{width:10px;height:10px;border-radius:50%;background:var(--lijn)}
.suite-mockup .rij{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.suite-mockup .tegel{border:1px solid var(--lijn);border-radius:12px;padding:14px;font-size:12.5px;font-weight:700;color:var(--navy)}
.suite-mockup .tegel b{display:block;font-size:20px;font-weight:700}
.suite-mockup .balk{height:8px;border-radius:4px;background:var(--paper2);margin-top:8px;overflow:hidden;display:block}
.suite-mockup .balk i{display:block;height:100%;border-radius:4px}

/* ==========================================================================
   25 · LAMP-VORMTAAL
   Drie vaste elementen uit het logo: de lamp-voet (drie gouden streepjes
   in aflopende breedte onder elk groot frame), stralen en gloed voor het
   actieve element (maximaal één brandend element per frame) en het gouden
   gezicht als merkstip.
   ========================================================================== */
.lamp-voet{display:flex;flex-direction:column;align-items:center;gap:4px;margin:10px auto 0;width:120px}
.lamp-voet i{display:block;height:4px;border-radius:2px;background:var(--gold)}
.lamp-voet i:nth-child(1){width:64px;opacity:.9}
.lamp-voet i:nth-child(2){width:50px;opacity:.65}
.lamp-voet i:nth-child(3){width:34px;opacity:.4}
.stralen{position:relative}
.stralen::before{content:"";position:absolute;inset:-26px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg stroke='%23EAD690' stroke-width='4.5' stroke-linecap='round'%3E%3Cline x1='50' y1='2' x2='50' y2='15'/%3E%3Cline x1='81' y1='12' x2='73' y2='23'/%3E%3Cline x1='19' y1='12' x2='27' y2='23'/%3E%3Cline x1='97' y1='40' x2='84' y2='43'/%3E%3Cline x1='3' y1='40' x2='16' y2='43'/%3E%3C/g%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:0;transform:scale(.7);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.stralen:hover::before,.stralen[aria-pressed=true]::before,.stralen.aan::before{opacity:1;transform:scale(1)}
.licht-aan{box-shadow:0 0 0 2px var(--gold),0 0 28px rgba(179,148,13,.45) !important}
/* Merkstip: het gouden gezicht uit het logo, bij frametitels en inzichten */
.merkstip{display:inline-block;width:20px;height:24px;background:url("/img/hbg/hbg-lamp-gezicht.webp") center/contain no-repeat;margin-right:12px;vertical-align:-3px}

/* ==========================================================================
   26 · ARTIKEL-ELEMENTEN (kennisbank en money pages)
   ========================================================================== */
.artikel p{margin-bottom:18px}
.artikel h2{margin-top:38px}
/* Antwoordblok: 40-80 woorden direct na de eerste vraagkop */
.antwoordblok{background:var(--cream);border-left:4px solid var(--gold);border-radius:0 16px 16px 0;padding:24px 28px;margin:0 0 30px}
.antwoordblok b{color:var(--navy)}
/* Inhoudsopgave-chips */
.toc{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 34px}
.toc a{background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none;transition:border-color .2s ease}
.toc a:hover{border-color:var(--gold)}
/* Illustratiekader */
.illustratie{background:#fff;border:1px solid var(--lijn);border-radius:var(--radius-organisch);padding:26px;margin:30px 0;text-align:center;box-shadow:var(--shadow)}
.illustratie img{max-width:420px;width:100%}
.illustratie figcaption{font-size:13.5px;color:var(--muted);margin-top:10px}
/* Bronnen en lees-ook */
.bron-lijst{font-size:14px;color:var(--muted);border-top:1px solid var(--lijn);padding-top:18px;margin-top:34px}
.bron-lijst b{color:var(--navy)}
.leesook{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.leesook a{background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:9px 16px;font-size:13.5px;font-weight:600;color:var(--navy);text-decoration:none}
.leesook a:hover{border-color:var(--gold)}
/* FAQ */
.faq details{background:#fff;border:1px solid var(--lijn);border-radius:14px;margin-bottom:8px;padding:0 20px;transition:border-color .2s ease}
.faq details[open]{border-color:var(--gold)}
.faq summary{cursor:pointer;padding:16px 0;font-weight:700;color:var(--navy);list-style:none}
.faq p{padding-bottom:16px;color:var(--muted);font-size:15px}
/* Prijstabel */
.prijs-tabel{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--lijn);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);font-size:15px}
.prijs-tabel th{background:var(--navy);color:var(--cream);text-align:left;padding:13px 18px;font-weight:700}
.prijs-tabel td{padding:13px 18px;border-top:1px solid var(--lijn)}
/* Uitkomstenlijst (na deze training kun je ...) */
.uitkomsten{list-style:none;font-size:16px}
.uitkomsten li{padding:7px 0 7px 24px;position:relative}
.uitkomsten li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:3px;background:var(--gold);border-radius:2px}
/* Founderkaart (aboutpagina) */
.founder{display:grid;grid-template-columns:300px 1fr;gap:40px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:24px;padding:30px;margin-bottom:18px;transition:box-shadow .25s ease}
.founder:hover{box-shadow:var(--shadow)}
.founder img{width:100%;height:300px;object-fit:cover;border-radius:20px 20px 20px 64px}
.founder h3{font-size:24px}
.founder .rol{color:var(--gold-tekst);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;margin:4px 0 12px}
.founder p{color:var(--muted);font-size:15.5px}
.founder blockquote{margin-top:14px;padding-left:16px;border-left:3px solid var(--gold-light);color:var(--navy);font-weight:600;font-size:15.5px}
.founder .acties{margin-top:18px}

/* ==========================================================================
   27 · FOOTER (nav v3, besluit Peter 9 aug 2026)
   Eén variant, site-breed: Start hier-strook (korte labels, geen
   taakzinnen) · vijf linkkolommen (Programma's, Analyses & tools, Kennis,
   Downloads, Praktisch), op mobiel inklapbaar via native details/summary ·
   missieregel · juridische regel · disclijn als afsluiting. Partners,
   inloggen en contact staan in de footer. De markerparameters variant=A/B/C
   blijven geldig: B zet de eigen voordeur voorop in de Start hier-strook,
   C krijgt daarboven een compacte salespage-strook.
   ========================================================================== */
.footer-groot{background:var(--ink);color:var(--donker-sub);font-size:14.5px}
.footer-groot a{color:var(--donker-link);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.footer-groot a:hover{color:var(--gold-light);border-bottom-color:var(--gold)}
/* Kies-je-pad-strook */
.footer-groot .pad-strook{background:var(--ink2);border-bottom:1px solid rgba(246,239,221,.1)}
.footer-groot .pad-strook .wrap{display:flex;gap:8px 24px;flex-wrap:wrap;align-items:center;padding:13px 26px}
.footer-groot .pad-strook b{color:var(--gold-light);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.footer-groot .pad-strook a{color:var(--donker-link);text-decoration:none;font-size:14px;border-bottom:0}
.footer-groot .pad-strook a:hover,.footer-groot .pad-strook a.act{color:var(--gold-light)}
/* Optionele salespage-strook (variant=C) */
.footer-groot .salesstrook{display:flex;gap:14px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:16px 26px;border-bottom:1px solid rgba(246,239,221,.12)}
.footer-groot .salesstrook span{color:var(--cream);font-weight:600;font-size:15px}
/* Vijf linkkolommen */
.footer-groot .boven{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;padding:34px 26px 26px;max-width:1140px;margin:0 auto}
.fkol h4{color:var(--cream);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:12px}
.fkol ul{list-style:none}
.fkol li{margin-bottom:8px;font-size:13.5px}
.fkol summary{display:none}
/* "volgt"-regel: item staat vast in de footer maar het pad is nog niet
   live (buiten ring 1); niet klikbaar tot de livegang */
.fkol .volgt{color:#7E8E96}
.fkol .volgt em{font-style:normal;font-size:10px;letter-spacing:.08em;text-transform:uppercase;border:1px solid #4A5A64;border-radius:999px;padding:1px 7px;margin-left:5px;vertical-align:1px}
.fkol .dwnl-noot{font-size:11.5px;color:#7E8E96;margin-top:9px;line-height:1.45}
/* Missieregel */
.missieregel{border-top:1px solid rgba(246,239,221,.12)}
.missieregel .wrap{display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap;padding:16px 26px;max-width:1140px;margin:0 auto}
.missieregel .flogo{background:#fff;border-radius:10px;padding:6px;display:inline-flex;flex-shrink:0}
.missieregel .flogo img{height:34px;display:block}
.missieregel p{color:var(--donker-link);font-size:14px;line-height:1.45;max-width:64ch}
/* Juridische regel */
.footer-groot .onder{border-top:1px solid rgba(246,239,221,.12);padding:14px 26px;display:flex;gap:10px 24px;flex-wrap:wrap;justify-content:space-between;font-size:12.5px;color:#7E8E96;max-width:1140px;margin:0 auto}
.footer-groot .onder a{color:var(--donker-sub);border-bottom:0}

/* ==========================================================================
   28 · STICKY CTA-BALK
   Vast onderin (salespages). JS toont de balk na de eerste schermhoogte en
   zet de class heeft-sticky-cta op body voor de onderruimte.
   ========================================================================== */
body.heeft-sticky-cta{padding-bottom:74px}
.sticky-cta{position:fixed;left:0;right:0;bottom:0;background:rgba(22,34,43,.97);border-top:1px solid rgba(246,239,221,.15);z-index:60;padding:12px 0;transition:transform .3s ease,opacity .3s ease}
.sticky-cta.uit{transform:translateY(110%);opacity:0;pointer-events:none}
.sticky-cta .wrap{display:flex;gap:16px;align-items:center}
.sticky-cta span{color:var(--cream);font-weight:600;font-size:14.5px}
.sticky-cta .spacer{flex:1}
.sticky-cta .knop{padding:11px 20px;min-height:44px;font-size:15px}

/* ==========================================================================
   29 · GEDRAGSLIJN EN ONTHULLING
   Gedragslijn: verticale voortgangslijn die per sectie ([data-lijn]) van
   fasekleur wisselt: spanning rood, verbinding goud, beweging groen,
   richting blauw. Alleen transform/opacity; JS werkt via scaleY.
   Onthulling: secties komen met .onthul in beeld via IntersectionObserver.
   ========================================================================== */
.gedragslijn{position:fixed;left:0;top:0;width:4px;height:100vh;background:rgba(44,67,83,.08);z-index:50}
.gedragslijn i{position:absolute;left:0;top:0;width:100%;height:100vh;background:var(--gold);transform:scaleY(0);transform-origin:top;transition:background .4s ease}
.onthul{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.in-beeld .onthul,.onthul.in-beeld{opacity:1;transform:none}
.in-beeld .onthul:nth-child(2){transition-delay:.08s}
.in-beeld .onthul:nth-child(3){transition-delay:.16s}
/* Ademende organische baan als losse hulpclass */
.adem{animation:adem 14s ease-in-out infinite alternate}

/* ==========================================================================
   30 · MOBIEL
   Breekpunten 960/900/860/820/700/640/600px. 960px is het nav-breekpunt
   (hamburger + doelgroep-pil, uit de mockup); sectiemenu wordt op mobiel
   geen horizontale scroll meer maar een uitklap; fijnslijpen op 375px.
   ========================================================================== */
@media(max-width:960px){
  .nav-links{display:none}
  .hamburger{display:inline-flex;align-items:center;justify-content:center}
  .knop-kop{display:inline-block}
  .site-nav .wrap{gap:12px;padding:9px 16px}
  /* Menu3 (10 aug 2026): de mobiele sectiemenu-pil is vervallen; op mobiel
     loopt alle navigatie via het tweelaags hamburgerpaneel. */
  .sectiemenu{display:none}
  .footer-groot .boven{grid-template-columns:1fr 1fr;gap:26px;padding:28px 26px 22px}
}
@media(min-width:961px){
  .knop-kop{display:none}
}
@media(max-width:900px){
  .constellatie{opacity:.3}
  .gedragslijn{display:none}
}
@media(max-width:860px){
  .hero-donker .duo,.duo,.hero-duo{grid-template-columns:1fr}
  /* Mobiel staat de beeldkaart ná de tekst: geen overlap de kroon in */
  .hero-kaart{margin-top:8px;max-width:520px}
  .hero-kaart img{min-height:0;max-height:300px}
  .kaarten,.kaarten.k4{grid-template-columns:1fr 1fr}
  .wijzer-opties{margin-left:0}
  section.blok{padding:52px 0}
  .sticky-cta span{display:none}
}
@media(max-width:820px){
  .kaarten.k2{grid-template-columns:1fr}
  .wijzer-opties{grid-template-columns:1fr}
  .raw-duo{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .fotogrid{grid-template-columns:1fr 1fr}
  .nextstep{grid-template-columns:1fr}
  .routekaarten{grid-template-columns:1fr}
  .kia-band .wrap{grid-template-columns:1fr}
  .kia-band button{border-left:0;border-top:1px solid rgba(246,239,221,.12)}
  .kia-band button:first-child{border-top:0}
}
@media(max-width:700px){
  .pres-frame .slide{padding:34px 26px}
  .quote-blok.metfoto{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* Footerkolommen worden inklapbare details/summary-rijen, alle drie dicht
     (JS-gestuurd via zetFooterKolommen in hbg-dynamiek.js; zonder JS staan
     ze open zoals het HTML-attribuut default meegeeft) */
  .footer-groot .boven{display:block;padding:0}
  .fkol{border-top:1px solid rgba(246,239,221,.1)}
  .fkol:first-child{border-top:0}
  .fkol summary{display:flex;list-style:none;cursor:pointer;align-items:center;padding:14px 26px;color:var(--cream);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  .fkol summary::-webkit-details-marker{display:none}
  .fkol summary .pijl{margin-left:auto;color:var(--gold-light);transition:transform .2s ease}
  .fkol details[open] summary .pijl{transform:rotate(180deg)}
  .fkol h4{display:none}
  .fkol ul{padding:0 26px 14px}
  .missieregel p{font-size:13.5px}
}
@media(max-width:600px){
  .kaarten,.kaarten.k4{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
  .founder img{height:260px}
}
@media(max-width:375px){
  body{font-size:16px}
  .wrap{padding:0 18px}
  .hero-donker{padding:44px 0 40px}
  .hero-donker h1{font-size:30px}
  .hero-kroon{padding:32px 0 28px}
  .hero-kroon h1{font-size:27px}
  .hero-inhoud{padding:24px 0 38px}
  .hero-inhoud p.sub{font-size:17px}
  .missie h1{font-size:34px}
  .knop{padding:13px 20px;font-size:15px;display:block;text-align:center}
  .knop+.knop,.knop+.tekstlink{margin-left:0 !important;margin-top:10px;display:inline-block}
  .nextstep,.uitgelicht,.keuzehulp{padding-left:22px;padding-right:22px}
  .fotogrid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .stats b{font-size:34px}
}

/* ==========================================================================
   31 · PREFERS-REDUCED-MOTION
   Gloed mag, beweging niet: alles direct in eindstaat.
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
  .onthul{opacity:1;transform:none}
  .sticky-cta.uit{transform:none;opacity:1;pointer-events:auto}
}

/* ==========================================================================
32 · PDF-mini · directe downloadlink naast een juridische pagina in de footer
========================================================================== */
.footer-groot .onder a.pdf-mini{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid rgba(246,239,221,.28);border-radius:999px;padding:1px 7px;margin-left:3px;opacity:.85}
.footer-groot .onder a.pdf-mini:hover{opacity:1;border-color:var(--gold)}

/* ==========================================================================
   33 · MISSIESTORY-ANIMATIE (missieanim, 9 aug 2026)
   De vijf scènes lopen automatisch (6,5s per scène, hbg-dynamiek.js).
   Alles alleen transform en opacity. Elke scène een eigen beeld (foto in
   organisch kader, mockup of de constellatie) en een fase-gloed die
   mee-ademt met de gedragslijn (spanning rood, verbinding goud, beweging
   groen, richting blauw) — subtiel, goud blijft betekenis. De actieve dot
   is de voortgangsbalk: hij vult zich in de scèneduur (lamp-regel: één
   brandend element per frame = deze dot). Bij prefers-reduced-motion
   speelt er niets automatisch en staan alle overgangen direct in eindstaat.
   ========================================================================== */
/* Tekstwissel: fade + lichte verschuiving */
.missie .scene-tekst{position:relative;z-index:2;transition:opacity .24s ease,transform .24s ease}
.missie .scene-tekst.wissel{opacity:0;transform:translateY(10px)}
/* Scènebeelden rechts; zelfde plek als de constellatie */
.scene-beelden{position:absolute;right:2%;top:8%;width:420px;height:340px;z-index:1;pointer-events:none}
.missie .scene-beeld{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.missie .scene-beeld.act{opacity:1;transform:none}
.sb-kader{position:absolute;inset:14px 8px;margin:0;overflow:hidden;border:1px solid rgba(246,239,221,.22);box-shadow:var(--shadow-donker)}
.sb-kader img{width:100%;height:100%;object-fit:cover;display:block}
.sb-vorm2{border-radius:58% 42% 55% 45%/52% 48% 56% 44%}
.sb-vorm3{border-radius:45% 55% 48% 52%/58% 42% 50% 50%}
.sb-vorm5{border-radius:52% 48% 44% 56%/46% 54% 58% 42%}
.sb-mockup{position:absolute;inset:30px 8px;margin:0;background:#fff;border-radius:18px 18px 18px 52px;padding:12px;box-shadow:var(--shadow-donker)}
.sb-mockup img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:10px 10px 10px 40px;display:block}
/* Fase-gloed per scène (kruisvervaging via opacity) */
.scene-gloed{position:absolute;right:-140px;top:-160px;width:560px;height:560px;border-radius:50%;opacity:0;transition:opacity .9s ease;pointer-events:none}
.gloed-spanning{background:radial-gradient(circle,rgba(192,57,43,.20),transparent 65%)}
.gloed-verbinding{background:radial-gradient(circle,rgba(179,148,13,.16),transparent 65%)}
.gloed-beweging{background:radial-gradient(circle,rgba(63,138,102,.20),transparent 65%)}
.gloed-richting{background:radial-gradient(circle,rgba(30,111,160,.22),transparent 65%)}
.missie[data-fase="spanning"] .gloed-spanning,.missie[data-fase="verbinding"] .gloed-verbinding,
.missie[data-fase="beweging"] .gloed-beweging,.missie[data-fase="richting"] .gloed-richting{opacity:1}
/* Voortgang: de actieve dot vult zich in de scèneduur (duur = SCENE_MS in
   hbg-dynamiek.js; hier gelijk houden). Pauze = dot vol goud, geen animatie. */
.missie .dots i{position:relative;overflow:hidden}
.missie .dots i{cursor:pointer;pointer-events:auto}
.missie .dots i.act{background:rgba(179,148,13,.35)}
.missie .dots i.act::after{content:"";position:absolute;top:0;left:0;bottom:0;width:100%;border-radius:inherit;background:var(--gold);transform:scaleX(1);transform-origin:left}
.missie.speelt .dots i.act::after{animation:dot-voortgang 6.5s linear forwards}
@keyframes dot-voortgang{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Play/pauze/hervat-knop: vaste minimale breedte tegen versprongen tekst */
.missie .controls .speel{min-width:112px}
/* Mobiel: fotokaders uit (tekst leidt), fase-gloed en constellatie blijven */
@media(max-width:900px){
  .scene-beelden{display:none}
  .missie .constellatie{opacity:0}
  .missie .constellatie.act{opacity:.3}
}

/* ==========================================================================
   RITME-vijfhoek op de homepage (besluit Peter 10 aug 2026)
   Vijf gelijkwaardige onderdelen op de punten, pijlen op een buitenboog.
   Stond eerst inline in index.html; hier zodat de cache-busting klopt.
   ========================================================================== */
.ritme-hoek{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:38px;align-items:center;margin-top:26px}
.ritme-figuur{position:relative;width:100%;max-width:460px;margin:0 auto;aspect-ratio:1/1}
.ritme-figuur svg{width:100%;height:100%;overflow:visible}
.ritme-pijl{stroke:var(--gold);stroke-width:3;fill:none;marker-end:url(#ritmepijl);opacity:.5;transition:opacity .3s,stroke-width .3s}
.ritme-pijl.aan{opacity:1;stroke-width:4.4}
.ritme-knop{position:absolute;transform:translate(-50%,-50%);background:#fff;border:2px solid var(--lijn);border-radius:999px;padding:11px 16px;font:inherit;font-size:14.5px;font-weight:700;color:var(--navy);cursor:pointer;box-shadow:0 6px 18px rgba(22,34,43,.10);transition:transform .28s,box-shadow .28s,border-color .28s,background .28s;white-space:nowrap}
.ritme-knop:hover{transform:translate(-50%,-50%) scale(1.06)}
.ritme-knop .nr{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--paper2);color:var(--muted);font-size:12.5px;margin-right:7px;transition:background .28s,color .28s}
.ritme-knop.aan{background:var(--navy);color:var(--cream);border-color:var(--navy);transform:translate(-50%,-50%) scale(1.1);box-shadow:0 12px 30px rgba(22,34,43,.26)}
.ritme-knop.aan .nr{background:var(--gold-light);color:var(--ink)}
.ritme-uitleg{background:#fff;border:1px solid var(--lijn);border-radius:18px;padding:24px 26px;min-height:210px}
.ritme-uitleg .tag{color:var(--gold-tekst);font-weight:800;letter-spacing:.13em;text-transform:uppercase;font-size:12.5px}
.ritme-uitleg h3{margin:8px 0 10px;font-size:24px;color:var(--navy)}
.ritme-uitleg p{margin:0;color:var(--tekst)}
.ritme-uitleg .volgende{margin-top:16px;font-size:14.5px;color:var(--muted)}
.ritme-hint{font-size:14px;color:var(--muted);margin:0 0 6px}
@media(max-width:860px){.ritme-hoek{grid-template-columns:1fr}.ritme-figuur{max-width:330px}.ritme-knop{font-size:12.5px;padding:8px 11px}.ritme-knop .nr{width:18px;height:18px;font-size:11px;margin-right:5px}}
@media(prefers-reduced-motion:reduce){.ritme-knop,.ritme-pijl{transition:none}}

/* Bouwregel onder de copyrightregel: laat zien welke build je bekijkt.
   Kwam er op verzoek van Peter, omdat previews bleven hangen in cache. */
.bouwteller{opacity:.7;font-size:12px;letter-spacing:.04em}

/* ==========================================================================
   Rekentool op /myhbg.html (besluit Peter 10 aug 2026)
   Lijst met aanvinkbare tools plus een uitkomstpaneel ernaast.
   ========================================================================== */
.rekenhoek{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:24px}
.rekenlijst{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.rekenrij{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--lijn);border-radius:12px;padding:9px 12px;font-size:14.5px;cursor:pointer}
.rekenrij:hover{border-color:var(--sage)}
.rekenrij input[type=checkbox]{width:17px;height:17px;accent-color:var(--navy);flex:none;cursor:pointer}
.rekenrij .rt-naam{flex:1;color:var(--tekst)}
.rekenrij .rt-prijs{color:var(--muted);white-space:nowrap}
.rekenrij .rt-prijs input{width:52px;border:1px solid var(--lijn);border-radius:8px;padding:3px 6px;font:inherit;font-size:14px;color:var(--navy);text-align:right;margin-left:2px}
.rekenuitkomst{background:var(--navy);color:var(--cream);border-radius:var(--radius-paneel);padding:26px 24px;position:sticky;top:96px}
.rekenuitkomst .ru-blok{margin-bottom:18px}
.rekenuitkomst .ru-label{display:block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-light);font-weight:800}
.rekenuitkomst .ru-groot{display:block;font-size:44px;line-height:1.1;margin:4px 0 2px}
.rekenuitkomst .ru-mid{display:block;font-size:28px;line-height:1.2;margin:4px 0 2px}
.rekenuitkomst .ru-noot{display:block;font-size:13.5px;color:var(--donker-sub)}
.rekenuitkomst .ru-slot{font-size:14.5px;color:var(--donker-tekst);margin:0 0 16px}
.rekenuitkomst .ru-fijn{font-size:12.5px;color:var(--donker-sub);margin:12px 0 0}
@media(max-width:900px){.rekenhoek{grid-template-columns:1fr}.rekenlijst{grid-template-columns:1fr}.rekenuitkomst{position:static}}