/*!
 * Let op: knoppen hier hebben ":root button." ervoor, zodat de standaard (roze) knopstijl van het Hello-thema niet wint.
 * KB Home – onderdelen die Elementor niet zelf kan: de lijn, uitklappers, accenten en lijstjes.
 * Kleuren en lettertypes komen uit Elementor → Site-instellingen (globale kleuren en typografie);
 * pas ze dáár aan, dan volgt deze opmaak vanzelf. Wordt alleen geladen op pagina's van KB Home.
 */

body{
  --kbh-navy:var(--e-global-color-primary);--kbh-tekst:var(--e-global-color-text);--kbh-zacht:var(--e-global-color-secondary);
  --kbh-oranje:var(--e-global-color-accent);--kbh-oranje-t:var(--e-global-color-merk_oranje_tekst);
  --kbh-papier:var(--e-global-color-merk_papier);--kbh-zand:var(--e-global-color-merk_zand);--kbh-rand:var(--e-global-color-merk_lijn);
  --kbh-grijs:var(--e-global-color-merk_lijngrijs);--kbh-blauw:var(--e-global-color-merk_blauw);--kbh-wit:var(--e-global-color-merk_wit);
  --kbh-op-navy:var(--e-global-color-merk_navy_zacht);
  background:var(--kbh-papier);margin:0;-webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth;scroll-padding-top:90px}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  :root *,:root *::before,:root *::after{animation:none!important;transition:none!important}
}
:root :focus-visible{outline:2px solid var(--kbh-oranje);outline-offset:3px}
:root .elementor-widget-text-editor p:last-child{margin-bottom:0}
:root .elementor-widget-text-editor a{color:var(--kbh-oranje-t)}
:root .elementor-widget-text-editor a:hover{color:var(--kbh-navy)}

/* ---------- Header ---------- */
:root .kbh-kop{position:sticky;top:var(--wp-admin--admin-bar--height,0px);z-index:100}
:root .kbh-nav p{margin:0}
:root .kbh-nav a{color:inherit;text-decoration:none;margin-left:26px;white-space:nowrap}
:root .kbh-nav a:hover{color:var(--kbh-wit)}
:root .kbh-kop .elementor-button{white-space:nowrap}
@media (max-width:767px){:root .kbh-kop .elementor-button{white-space:normal;padding:9px 12px!important;font-size:12px!important;line-height:1.25!important;text-align:center;max-width:150px}:root .kbh-kop .kbh-logo img{width:150px!important}}

/* ---------- Ruimte voor het koord ----------
   Desktop: het koord loopt rechts van de tekstkolom (±58% van de breedte).
   Tablet/mobiel: het koord loopt langs de rechterrand, dus daar houden we een baan vrij. */
@media (max-width:1024px){
  :root .kbh-inspring > .e-con-inner,:root .kbh-cta-wrap > .e-con-inner{padding-right:max(36px, calc(7% + 12px))}
}

/* ---------- Decoratie: bogen uit de B van het logo ---------- */
:root .kbh-hero,:root .kbh-cta-groot,:root .kbh-donker{overflow:hidden}
:root .kbh-abs{position:absolute!important;pointer-events:none;z-index:0;margin:0!important}
:root .kbh-hero > .e-con-inner > :not(.kbh-abs),
:root .kbh-donker > .e-con-inner > :not(.kbh-abs),
:root .kbh-cta-groot > :not(.kbh-abs){position:relative;z-index:1}
:root .kbh-bogen{display:block;width:100%;height:auto}
:root .kbh-bogen path,:root .kbh-bogen circle{fill:none;stroke:var(--kbh-oranje);stroke-linecap:round}
:root .kbh-bogen path:nth-child(1){stroke-width:2.5;opacity:.85}
:root .kbh-bogen path:nth-child(2){stroke-width:1.2;opacity:.5}
:root .kbh-bogen path:nth-child(3){stroke-width:1;opacity:.32}
:root .kbh-bogen path:nth-child(4){stroke-width:.8;opacity:.2}
:root .kbh-teken path{stroke-dasharray:2200;stroke-dashoffset:2200;animation:kbh-teken 2.2s cubic-bezier(.5,0,.2,1) forwards}
:root .kbh-teken path:nth-child(2){animation-delay:.15s}
:root .kbh-teken path:nth-child(3){animation-delay:.3s}
:root .kbh-teken path:nth-child(4){animation-delay:.45s}
body.elementor-editor-active .kbh-teken path{stroke-dashoffset:0;animation:none}
@keyframes kbh-teken{to{stroke-dashoffset:0}}
:root .kbh-hero-bogen{right:-180px;top:50%;width:760px!important;transform:translateY(-50%)}
:root .kbh-cta-bogen{right:-300px;bottom:-320px;width:460px!important;opacity:.6} /* alleen in de hoek, nooit door de tekst */
:root .kbh-contact-bogen{right:-320px;top:50%;width:760px!important;transform:translateY(-50%);opacity:.45}
@media (max-width:767px){
  :root .kbh-hero-bogen{right:-420px;opacity:.6}
  :root .kbh-contact-bogen{display:none}
}

/* Logo-onderstreping: lijn met punt */
:root .kbh-streep{position:relative;height:2px;width:0;max-width:420px;background:var(--kbh-oranje);margin:6px 0 8px;animation:kbh-streep 1.1s .3s cubic-bezier(.6,0,.2,1) forwards}
:root .kbh-streep::after{content:"";position:absolute;right:-16px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--kbh-oranje);opacity:0;animation:kbh-punt .3s 1.35s forwards}
body.elementor-editor-active .kbh-streep{width:min(420px,70%);animation:none}
body.elementor-editor-active .kbh-streep::after{opacity:1;animation:none}
@keyframes kbh-streep{to{width:min(420px,70%)}}
@keyframes kbh-punt{to{opacity:1}}
:root .kbh-h1 .elementor-heading-title{max-width:15ch}

/* ---------- Citaat met logo-streepje ---------- */
:root .kbh-citaat{margin-top:22px}
:root .kbh-citaat .elementor-heading-title{position:relative;padding-top:26px;max-width:30ch}
:root .kbh-citaat .elementor-heading-title::before{content:"";position:absolute;top:0;left:0;width:64px;height:2px;background:var(--kbh-oranje)}
:root .kbh-citaat .elementor-heading-title::after{content:"";position:absolute;top:-3px;left:72px;width:8px;height:8px;border-radius:50%;background:var(--kbh-oranje)}

/* ---------- Lees verder ---------- */
:root .kbh-meer.kbh-dicht{overflow:hidden;max-height:0;margin-top:-16px;transition:max-height .45s ease,margin-top .45s ease}
:root .kbh-meer.kbh-dicht.kbh-open{margin-top:0}
:root .kbh-akk .kbh-meer.kbh-dicht{margin-top:0}
:root .kbh-meer h3{font-family:var(--e-global-typography-kbt_h4-font-family),Georgia,serif;font-weight:var(--e-global-typography-kbt_h4-font-weight);font-size:var(--e-global-typography-kbt_h4-font-size);line-height:var(--e-global-typography-kbt_h4-line-height);color:var(--kbh-navy);margin:1.4em 0 .4em}
:root .kbh-meer h4{font-family:var(--e-global-typography-secondary-font-family),Arial,sans-serif;font-weight:var(--e-global-typography-secondary-font-weight);font-size:var(--e-global-typography-secondary-font-size);line-height:var(--e-global-typography-secondary-line-height);letter-spacing:var(--e-global-typography-secondary-letter-spacing);text-transform:uppercase;color:var(--kbh-zacht);margin:.6em 0 .3em}
:root button.kbh-lees{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:none;border:0;border-bottom:2px solid var(--kbh-oranje);border-radius:0;box-shadow:none;text-transform:none;letter-spacing:normal;padding:6px 0;font-family:var(--e-global-typography-accent-font-family),Arial,sans-serif;font-weight:var(--e-global-typography-accent-font-weight);font-size:var(--e-global-typography-accent-font-size);line-height:var(--e-global-typography-accent-line-height);color:var(--kbh-navy);cursor:pointer}
:root button.kbh-lees:hover,:root button.kbh-lees:focus,:root button.kbh-lees:active{background:none;border:0;border-bottom:2px solid var(--kbh-oranje);color:var(--kbh-oranje-t)}
:root .kbh-plus{position:relative;width:12px;height:12px;flex:none}
:root .kbh-plus::before,:root .kbh-plus::after{content:"";position:absolute;left:0;top:5px;width:12px;height:2px;background:var(--kbh-oranje);transition:transform .3s}
:root .kbh-plus::after{transform:rotate(90deg)}
:root [aria-expanded="true"] > .kbh-plus::after{transform:rotate(0)}
/* In de editor: uitklaptekst open, met stippellijn */
body.elementor-editor-active .kbh-meer{outline:1px dashed color-mix(in srgb,var(--kbh-oranje) 70%,transparent);outline-offset:6px}

/* ---------- Accordeon (Leiderschap) ---------- */
:root .kbh-akk{border-bottom:1px solid var(--kbh-rand)}
:root .kbh-akk-kop{border-top:1px solid var(--kbh-rand);padding:20px 34px 20px 0;cursor:pointer}
:root .kbh-akk-kop .elementor-heading-title{position:relative}
:root .kbh-akk-kop .elementor-heading-title::before,:root .kbh-akk-kop .elementor-heading-title::after{content:"";position:absolute;right:-30px;top:50%;width:14px;height:2px;margin-top:-1px;background:var(--kbh-oranje);transition:transform .3s}
:root .kbh-akk-kop .elementor-heading-title::after{transform:rotate(90deg)}
:root .kbh-akk-kop[aria-expanded="true"] .elementor-heading-title::after{transform:rotate(0)}
:root .kbh-akk-tekst p:last-child{margin-bottom:20px}

/* ---------- CTA-vlakken ---------- */
:root .kbh-cta-groot{box-shadow:inset 0 4px 0 var(--kbh-oranje)}
:root .kbh-cta-rechts{border-left:1px solid rgba(255,255,255,.1)}
@media (max-width:1024px){:root .kbh-cta-rechts{border-left:0;border-top:1px solid rgba(255,255,255,.1)}}
:root .kbh-cta-klein{box-shadow:inset 4px 0 0 var(--kbh-oranje)}
:root .kbh-stappen ol{list-style:none;margin:0;padding:0;counter-reset:kbhs}
:root .kbh-stappen li{counter-increment:kbhs;position:relative;padding:0 0 24px 48px}
:root .kbh-stappen li::before{content:counter(kbhs);position:absolute;left:0;top:-3px;width:32px;height:32px;border-radius:50%;background:var(--kbh-oranje);color:var(--kbh-navy);display:grid;place-items:center;font-family:var(--e-global-typography-accent-font-family),Arial,sans-serif;font-weight:var(--e-global-typography-accent-font-weight);font-size:14px}
:root .kbh-stappen li:not(:last-child)::after{content:"";position:absolute;left:15.5px;top:34px;bottom:2px;width:1px;background:color-mix(in srgb,var(--kbh-oranje) 45%,transparent)}
:root .kbh-stappen li:last-child{padding-bottom:4px}
:root .kbh-stappen strong{display:block;color:var(--kbh-wit);font-weight:600}
:root .kbh-donker a,:root .kbh-kaart a{color:var(--kbh-wit)}
:root .kbh-donker a:hover,:root .kbh-kaart a:hover{color:var(--kbh-oranje)}

/* ---------- Dilemma's ---------- */
:root .kbh-dilemmas ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1px;background:var(--kbh-rand);border:1px solid var(--kbh-rand);max-width:980px}
:root .kbh-dilemmas li{margin:0;background:var(--kbh-wit)}
:root .kbh-dilemmas li a{position:relative;display:block;height:100%;padding:24px 24px 30px;text-decoration:none;color:var(--kbh-navy);font-family:var(--e-global-typography-kbt_h4-font-family),Georgia,serif;font-weight:var(--e-global-typography-kbt_h4-font-weight);font-size:var(--e-global-typography-kbt_h4-font-size);line-height:var(--e-global-typography-kbt_h4-line-height);transition:background .2s;box-sizing:border-box}
:root .kbh-dilemmas li a::after{content:"";position:absolute;left:24px;bottom:15px;height:2px;width:0;background:var(--kbh-oranje);transition:width .3s}
:root .kbh-dilemmas li a:hover{background:var(--kbh-papier);color:var(--kbh-navy)}
:root .kbh-dilemmas li a:hover::after{width:40px}
:root .kbh-dilemmas.kbh-ingeklapt li:nth-child(n+7){display:none}

/* ---------- Kunnen / Mogen / Durven ---------- */
:root .kbh-kmd-kol{border-top:1px solid var(--kbh-rand);background:linear-gradient(var(--kbh-oranje),var(--kbh-oranje)) no-repeat 0 -1px / 48px 3px}
:root .kbh-kmd-kol + .kbh-kmd-kol{border-left:1px solid var(--kbh-rand);background-position:26px -1px}
@media (max-width:767px){:root .kbh-kmd-kol + .kbh-kmd-kol{border-left:0;background-position:0 -1px}}

/* ---------- Lijsten ---------- */
:root .kbh-principes ul{list-style:none;margin:10px 0 0;padding:0}
:root .kbh-principes li{position:relative;padding:14px 0 14px 34px;border-bottom:1px solid var(--kbh-rand)}
:root .kbh-principes li::before{content:"";position:absolute;left:0;top:26px;width:16px;height:2px;background:var(--kbh-oranje)}
:root .kbh-principes li::after{content:"";position:absolute;left:20px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--kbh-oranje)}
:root .kbh-feiten ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
:root .kbh-feiten li{border:1px solid var(--kbh-rand);background:var(--kbh-papier);padding:7px 13px;font-family:var(--e-global-typography-secondary-font-family),Arial,sans-serif;font-weight:var(--e-global-typography-secondary-font-weight);font-size:var(--e-global-typography-secondary-font-size);line-height:1.4;color:var(--kbh-navy)}

/* ---------- Foto met oranje cirkel ---------- */
:root .kbh-foto .elementor-widget-image{position:relative}
:root .kbh-foto .elementor-widget-image::before{content:"";position:absolute;right:-18px;bottom:-18px;width:62%;aspect-ratio:1;border-radius:50%;background:var(--kbh-oranje);z-index:0}
:root .kbh-foto img{position:relative;z-index:1;width:100%;height:auto;display:block}

/* ---------- Vraagstukken, praktijk ---------- */
:root .kbh-vraag{border-top:2px solid var(--kbh-navy)}
:root .kbh-case{border-top-color:var(--kbh-navy)!important}

/* ---------- Footer ---------- */
:root .kbh-voet a{color:var(--kbh-op-navy)}
:root .kbh-voet a:hover{color:var(--kbh-oranje)}

/* ---------- Kaartfoto bij contact ---------- */
:root .kbh-kaartfoto{margin:-30px -30px 10px!important;width:calc(100% + 60px)!important;max-width:none!important}
:root .kbh-kaartfoto img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}


/* ---------- Het lijnenspel van /home2 (uit kbv2.css, 1.6.1) ---------- */
.kbh-root{position:relative;--kbv2-accent:var(--kbh-oranje);--kbv2-contour:#D5D8D7;--kbv2-warmline:#B7AEA1}
/* Lagen: sectie-achtergrond + patroon < koord (z 1) < inhoud (z 2) < header */
.kbh-root > .kb-v2-thread-w{position:absolute;inset:0;z-index:1;pointer-events:none}
.kbh-root .kb-v2-thread{position:absolute;inset:0;width:100%;height:100%;overflow:visible;display:block}
.kbh-root .kbh-sectie > .e-con-inner > *,.kbh-root .kbh-cta-wrap > .e-con-inner > *{position:relative;z-index:2}
.kbh-root .kbh-sectie > .e-con-inner > .kbh-abs{position:absolute!important;z-index:0}
.kbh-root .kbh-kop{z-index:100}
.kbh-root .kb-v2-thread-path{fill:none;stroke:var(--kbv2-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kbh-root .kb-v2-thread--m{display:none}
.kbh-root.kb-v2-thread-ready .kb-v2-thread-path{stroke-dasharray:var(--kbv2-len,none) var(--kbv2-len,0px);stroke-dashoffset:var(--kbv2-off,0px)}
.kbh-root .kb-v2-thread-strand{fill:none;stroke:var(--kbv2-warmline);stroke-width:.75;stroke-opacity:.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kbh-root .kb-v2-thread-way{fill:none;stroke-width:.75;stroke-linecap:round;vector-effect:non-scaling-stroke}
.kbh-root .kb-v2-thread-trace{fill:none;stroke:#8F8678;stroke-width:.8;stroke-opacity:.42;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kbh-root .kb-v2-thread-halo{fill:none;stroke:var(--kbv2-accent);stroke-width:1;stroke-opacity:.45;vector-effect:non-scaling-stroke}
.kbh-root .kb-v2-thread-node{fill:var(--kbv2-accent)}
.kbh-root .kb-v2-thread-node-g{opacity:0;transition:opacity .6s ease}
.kbh-root .kb-v2-thread-node-g.is-on{opacity:1}
@media (max-width:1024px){
  .kbh-root .kb-v2-thread--d{display:none}
  .kbh-root .kb-v2-thread--m{display:block}
  .kbh-root .kb-v2-thread--m .kb-v2-thread-path{stroke-width:1.6}
}
@media (prefers-reduced-motion:reduce){
  .kbh-root.kb-v2-thread-ready .kb-v2-thread-path{stroke-dasharray:none;stroke-dashoffset:0}
  .kbh-root .kb-v2-thread-node-g{transition:none}
}
@media (forced-colors:active){.kbh-root .kb-v2-thread-path{stroke:CanvasText}}
@media print{.kbh-root .kb-v2-thread-w{display:none!important}}

/* ---------- Artikelen (berichtpagina's) ---------- */
:root .kbh-art-label a{color:inherit;text-decoration:none}
:root .kbh-art-label a:hover{text-decoration:underline}
:root .kbh-art-kop{position:relative;overflow:hidden}
:root .kbh-art-kop .elementor-widget-text-editor p,:root .kbh-art-blad .elementor-widget-text-editor p,:root .kbh-art-cta .elementor-widget-text-editor p{margin:0}
:root .kbh-art-beeld{position:relative}
:root .kbh-art-beeld img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
:root .kbh-art-beeld::before{content:"";position:absolute;left:-56px;top:42%;width:72px;height:1.5px;background:var(--kbh-oranje);z-index:2}
:root .kbh-art-beeld::after{content:"";position:absolute;left:10px;top:calc(42% - 5px);width:12px;height:12px;border-radius:50%;background:var(--kbh-oranje);z-index:2}
@media (max-width:1024px){:root .kbh-art-beeld img{aspect-ratio:16/9}:root .kbh-art-beeld::before{display:none}:root .kbh-art-beeld::after{left:16px;top:16px}}
:root .kbh-art-blad{position:relative;z-index:1;margin-top:-32px}
@media (max-width:767px){:root .kbh-art-blad{margin-top:0}}
:root .kbh-art-h2 .elementor-heading-title::before{content:"";display:block;width:32px;height:2px;background:var(--kbh-oranje);margin:0 0 14px}
:root .kbh-art-vraag{border-top:2px solid var(--kbh-oranje)}
:root .kbh-art-kaart{text-decoration:none;transition:border-color .2s}
:root .kbh-art-kaart:hover{border-color:var(--kbh-oranje)!important}
:root .kbh-art-kaart .elementor-heading-title{transition:color .2s}
:root .kbh-art-kaart:hover .elementor-heading-title{color:var(--kbh-oranje-t)}
:root .kbh-art-verder p::after{content:" \2192"}

/* ---------- Homepage: artikelen die al geschreven zijn kleuren oranje ---------- */
:root .kbh-dilemmas li a.kbh-klaar{color:var(--kbh-oranje-t)}
:root .kbh-dilemmas li a.kbh-klaar::before{content:"Lees het artikel";display:block;margin:0 0 8px;font-family:var(--e-global-typography-secondary-font-family),sans-serif;font-weight:var(--e-global-typography-secondary-font-weight);font-size:12px;line-height:1.4;letter-spacing:1.5px;text-transform:uppercase;color:var(--kbh-oranje-t)}
:root .kbh-dilemmas li a.kbh-klaar::after{width:40px}
:root .kbh-dilemmas li a.kbh-klaar:hover{color:var(--kbh-navy)}