/* ==========================================================================
   BWEBS — componenten
   --------------------------------------------------------------------------
   Alleen wat Elementor zelf niet (goed) kan. Kleuren, typografie, spacing en
   knoppen stel je in via Elementor > Site-instellingen, niet hier.

   Breekpunten volgen Elementor's standaard: tablet <= 1024px, mobiel <= 767px.

   Inhoud
     1.  Tokens
     2.  Kleine hulpklassen
     3.  bw-frame      — browserframe rond een screenshot
     4.  bw-scroll     — scrollende screenshot        (vervangt PA Image Scroll)
     5.  bw-compare    — voor/na-slider               (vervangt PA Image Comparison)
     6.  bw-marquee    — logostrip                    (vervangt PA Carousel)
     7.  bw-steps      — stappenrij op haarlijnen     (vervangt PA Icon Box-rij)
     8.  bw-kpis       — cijferrij op haarlijnen      (vervangt PA Counter-rij)
     9.  bw-meter      — resultaatbalken              (vervangt PA Progress Bar)
     10. bw-quote      — editorial quote
     11. bw-hairlist   — lijst met haarlijnen         (vervangt PA Bullet List)
     12. bw-switch     — maand/jaar-schakelaar        (vervangt PA Content Switcher)
     13. bw-sticky     — sticky CTA-balk
     14. bw-hero       — lichtpaars vlak achter de hero-visual
     15. bw-badge      — zwevend bewijskaartje
     16. Toegankelijkheid en reduced motion
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
/* Dezelfde waarden staan als Global Colors in Elementor. Deze variabelen zijn
   voor de componenten hieronder; gebruik in de editor altijd de Global Colors. */
:root{
  --bw-paper:#FFFFFF;
  --bw-bone:#FAF9F6;
  --bw-mist:#F6F4FA;
  --bw-lilac:#F2EEFB;

  --bw-ink:#1B1638;
  --bw-ink-2:#3A3558;
  --bw-body:#565370;
  --bw-muted:#7C7994;

  --bw-line:#E8E5EE;
  --bw-line-2:#F0EEF5;

  --bw-violet:#5B2AC9;
  --bw-violet-700:#4A1FA8;
  --bw-violet-200:#CFBEF6;
  --bw-violet-050:#F3EEFD;

  --bw-dark:#141129;

  --bw-serif:'Fraunces',Georgia,serif;
  --bw-shadow:0 30px 70px -44px rgba(27,22,56,.34);
  --bw-shadow-s:0 16px 40px -30px rgba(27,22,56,.30);
  --bw-ease:cubic-bezier(.22,.61,.36,1);
  --bw-radius:14px;
}

/* --- 2. Kleine hulpklassen ---------------------------------------------- */

/* Serif-accent. Gebruik spaarzaam: casenamen, de quote van Erwin, aanbodnamen. */
.bw-serif{font-family:var(--bw-serif);font-weight:500;letter-spacing:-.025em;line-height:1.1}

/* Korte paarse streep boven een kop. Kan ook met een Elementor Divider. */
.bw-rule{display:block;width:44px;height:2px;background:var(--bw-violet)}

/* Haarlijn boven of onder een container, zonder in Elementor per element
   randen te moeten instellen. */
.bw-line-top{border-top:1px solid var(--bw-line)}
.bw-line-bottom{border-bottom:1px solid var(--bw-line)}

/* --- 3. bw-frame — browserframe ----------------------------------------- */
/* Zet deze class op de container die de screenshot omsluit. */
.bw-frame{
  position:relative;
  border:1px solid var(--bw-line);
  border-radius:var(--bw-radius);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--bw-shadow);
}
.bw-frame__bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 14px;
  background:#FBFAFD;
  border-bottom:1px solid var(--bw-line-2);
}
.bw-frame__bar i{width:9px;height:9px;border-radius:50%;background:#E2DFEB;flex:0 0 auto}
.bw-frame__url{
  margin-left:10px;padding:4px 13px;
  font-size:11px;font-weight:600;color:var(--bw-muted);
  background:#fff;border:1px solid var(--bw-line-2);border-radius:999px;
}

/* --- 4. bw-scroll — scrollende screenshot ------------------------------- */
/* Vervangt PA Image Scroll.
   Gebruik: zet de class op de container met daarin één Afbeelding-widget.
   Stel de zichthoogte in met --bw-scroll-h (inline of via Elementor > Geavanceerd
   > Aangepaste CSS: selector{--bw-scroll-h:600px}).

   De afbeelding moet de VOLLEDIGE pagina zijn, dus veel hoger dan het venster.
   Exporteer op ~1400px breed en sla op als WebP, kwaliteit 70-75. */
.bw-scroll{
  --bw-h:var(--bw-scroll-h,432px);
  position:relative;
  overflow:hidden;
  height:var(--bw-h);
  background:#fff;
  cursor:ns-resize;
}
.bw-scroll img{
  display:block;width:100%;height:auto;
  transition:transform 3.6s var(--bw-ease);
  will-change:transform;
}
.bw-scroll:hover img,
.bw-scroll:focus-visible img,
.bw-scroll:focus-within img{
  transform:translateY(calc(-100% + var(--bw-h)));
}
/* Elementor zet de afbeelding in een figure; die mag geen eigen marge hebben. */
.bw-scroll figure{margin:0}

.bw-scroll__hint{
  position:absolute;right:12px;bottom:12px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;
  background:rgba(27,22,56,.82);color:#fff;
  font-size:11.5px;font-weight:700;line-height:1;
  transition:opacity .3s var(--bw-ease);
  pointer-events:none;
}
.bw-scroll:hover .bw-scroll__hint{opacity:0}

/* --- 5. bw-compare — voor/na-slider ------------------------------------- */
/* Vervangt PA Image Comparison. Sleep, of pijltjestoetsen als de knop focus heeft.
   De twee afbeeldingen moeten dezelfde verhouding hebben.
   Stel de verhouding in met --bw-compare-ratio. */
.bw-compare{
  position:relative;
  aspect-ratio:var(--bw-compare-ratio,4/3);
  border:1px solid var(--bw-line);
  border-radius:var(--bw-radius);
  overflow:hidden;
  background:var(--bw-mist);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.bw-compare__layer{position:absolute;inset:0}
.bw-compare__layer img{width:100%;height:100%;object-fit:cover;display:block}
/* Zonder deze regel start de browser een eigen sleepactie op de afbeelding
   en stopt het slepen van de slider halverwege. */
.bw-compare img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.bw-compare__layer--before{clip-path:inset(0 calc(100% - var(--bw-split,50%)) 0 0)}
.bw-compare__layer--after{clip-path:inset(0 0 0 var(--bw-split,50%))}

.bw-compare__handle{
  position:absolute;top:0;bottom:0;left:var(--bw-split,50%);
  width:2px;background:#fff;z-index:3;
  box-shadow:0 0 0 1px rgba(27,22,56,.12);
}
.bw-compare__knob{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:44px;height:44px;padding:0;border:0;border-radius:50%;
  background:#fff;box-shadow:0 10px 24px -10px rgba(27,22,56,.6);
  display:grid;place-items:center;cursor:ew-resize;color:var(--bw-ink);
}
.bw-compare__knob svg{width:19px;height:19px;display:block}
.bw-compare__cap{
  position:absolute;bottom:14px;z-index:4;
  padding:6px 13px;border-radius:999px;
  background:rgba(27,22,56,.8);color:#fff;
  font-size:11.5px;font-weight:800;line-height:1;
}
.bw-compare__cap--l{left:14px}
.bw-compare__cap--r{right:14px}

/* --- 6. bw-marquee — logostrip ------------------------------------------ */
/* Vervangt PA Carousel voor logo's. Geen slider-library, alleen CSS.
   Zet de logo's TWEE KEER achter elkaar in de track, anders springt de lus. */
.bw-marquee{
  position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.bw-marquee__track{
  display:flex;align-items:center;gap:58px;width:max-content;
  animation:bw-marquee 38s linear infinite;
}
.bw-marquee:hover .bw-marquee__track{animation-play-state:paused}
.bw-marquee__track img{max-height:34px;width:auto;opacity:.55;filter:grayscale(1)}
@keyframes bw-marquee{to{transform:translateX(-50%)}}

/* --- 7. bw-steps — stappenrij op haarlijnen ----------------------------- */
/* Vervangt een rij PA Icon Boxes. Zet de class op de container met daarin
   vijf onderliggende containers. */
.bw-steps{
  display:grid;
  grid-template-columns:repeat(var(--bw-steps-cols,5),1fr);
  border-top:1px solid var(--bw-line);
  gap:0;
}
.bw-steps>*{
  display:flex;flex-direction:column;
  padding:38px 34px 0 0;
}
.bw-steps>*+*{padding-left:34px;border-left:1px solid var(--bw-line)}
/* De onderste regel van elke stap lijnt uit op dezelfde hoogte. */
.bw-steps .bw-steps__foot{margin-top:auto;padding-top:22px}

/* --- 8. bw-kpis — cijferrij op haarlijnen ------------------------------- */
/* Vervangt een rij PA Counters. Getallen zonder kaders. */
.bw-kpis{display:grid;grid-template-columns:repeat(var(--bw-kpis-cols,3),1fr)}
.bw-kpis>*{padding:0 26px}
.bw-kpis>*:first-child{padding-left:0}
.bw-kpis>*+*{border-left:1px solid var(--bw-line)}
.bw-kpis .bw-kpis__k{
  font-size:30px;font-weight:800;line-height:1;
  letter-spacing:-.045em;color:var(--bw-ink);
}
.bw-kpis .bw-kpis__v{font-size:14px;line-height:1.55;color:var(--bw-muted);margin-top:10px}
.bw-kpis .bw-kpis__v b{color:var(--bw-ink-2);font-weight:700}

/* --- 9. bw-meter — resultaatbalken -------------------------------------- */
/* Vervangt PA Progress Bar. Statisch: de breedte zet je per regel. */
.bw-meter{border-top:1px solid var(--bw-line)}
.bw-meter__row{padding:26px 0;border-bottom:1px solid var(--bw-line)}
.bw-meter__top{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;margin-bottom:14px;
}
.bw-meter__label{font-size:16px;font-weight:700;color:var(--bw-ink)}
.bw-meter__value{font-size:24px;font-weight:800;letter-spacing:-.04em;color:var(--bw-violet)}
.bw-meter__bar{height:4px;border-radius:999px;background:var(--bw-line-2);overflow:hidden}
.bw-meter__bar span{
  display:block;height:100%;border-radius:999px;background:var(--bw-violet);
  width:var(--bw-meter,50%);
}

/* --- 10. bw-quote — editorial quote ------------------------------------- */
.bw-quote{margin:0;padding-top:30px;border-top:1px solid var(--bw-line)}
.bw-quote p{
  font-family:var(--bw-serif);font-weight:400;
  font-size:23px;line-height:1.42;letter-spacing:-.02em;color:var(--bw-ink);
  margin:0;
}
.bw-quote cite{display:block;margin-top:22px;font-style:normal}
.bw-quote .bw-quote__name{font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--bw-ink)}
.bw-quote .bw-quote__role{font-size:13.5px;color:var(--bw-muted);margin-top:2px}

/* --- 11. bw-hairlist — lijst met haarlijnen ----------------------------- */
/* Vervangt PA Bullet List. Werkt ook op een Elementor Icon List als je de
   class op de widget zet en de standaardranden uitzet. */
.bw-hairlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--bw-line)}
.bw-hairlist>li{
  display:flex;gap:16px;align-items:flex-start;
  padding:22px 0;border-bottom:1px solid var(--bw-line);
}
.bw-hairlist .bw-hairlist__ic{flex:0 0 auto;width:16px;height:16px;margin-top:5px;color:var(--bw-violet)}
.bw-hairlist .bw-hairlist__ic svg{width:16px;height:16px;display:block}
.bw-hairlist b{display:block;font-size:17px;font-weight:700;letter-spacing:-.024em;color:var(--bw-ink);margin-bottom:4px}
.bw-hairlist span{display:block;font-size:15.5px;line-height:1.6;color:var(--bw-body)}

/* --- 12. bw-switch — maand/jaar-schakelaar ------------------------------ */
/* Vervangt PA Content Switcher. */
.bw-switch{display:inline-flex;border-bottom:1px solid var(--bw-line)}
.bw-switch button{
  border:0;background:none;cursor:pointer;
  padding:10px 22px 12px;margin-bottom:-1px;
  font-family:inherit;font-size:15px;font-weight:700;color:var(--bw-muted);
  border-bottom:2px solid transparent;
  transition:color .22s var(--bw-ease),border-color .22s var(--bw-ease);
}
.bw-switch button:first-child{padding-left:0}
.bw-switch button:hover{color:var(--bw-ink)}
.bw-switch button[aria-pressed="true"]{color:var(--bw-ink);border-bottom-color:var(--bw-violet)}

/* --- 13. bw-sticky — sticky CTA-balk ------------------------------------ */
/* Verschijnt na een aantal pixels scrollen en verdwijnt bij de contactsectie.
   Elementor kan een container sticky maken, maar niet dit gedrag. */
.bw-sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  background:#fff;border-top:1px solid var(--bw-line);
  box-shadow:0 -20px 44px -34px rgba(27,22,56,.5);
  transform:translateY(110%);
  transition:transform .4s var(--bw-ease);
}
.bw-sticky.is-visible{transform:translateY(0)}
.bw-sticky__close{
  background:none;border:0;cursor:pointer;line-height:1;
  font-size:23px;color:var(--bw-muted);padding:4px 8px;
}
.bw-sticky__close:hover{color:var(--bw-ink)}

/* --- 14. bw-hero — lichtpaars vlak achter de visual --------------------- */
/* Zet deze class op de hero-container. Let op: gebruik op deze container
   GEEN achtergrondoverlay in Elementor, die gebruikt hetzelfde pseudo-element
   niet, maar houd het simpel en laat de overlay leeg. */
.bw-hero{position:relative;overflow:hidden}
.bw-hero::after{
  content:"";position:absolute;z-index:0;
  right:0;top:0;bottom:74px;width:47%;
  background:var(--bw-lilac);
  border-bottom-left-radius:28px;
  pointer-events:none;
}
.bw-hero>*{position:relative;z-index:1}

/* --- 15. bw-badge — zwevend bewijskaartje ------------------------------- */
/* Hangt aan de linkeronderhoek van het browserframe.
   In Elementor kan dit ook met absolute positionering; deze class houdt het
   op alle schermen voorspelbaar. */
.bw-badge{
  position:absolute;left:-38px;bottom:-30px;z-index:6;
  display:flex;align-items:center;gap:14px;max-width:262px;
  padding:15px 19px;
  background:#fff;border:1px solid var(--bw-line);border-radius:var(--bw-radius);
  box-shadow:var(--bw-shadow-s);
}
.bw-badge__ic{flex:0 0 auto;color:var(--bw-violet)}
.bw-badge__ic svg{width:22px;height:22px;display:block}
.bw-badge__t{font-size:15px;font-weight:800;letter-spacing:-.026em;color:var(--bw-ink)}
.bw-badge__s{font-size:12.5px;line-height:1.45;color:var(--bw-muted);margin-top:3px}

/* --- 16. Toegankelijkheid en reduced motion ----------------------------- */
.bw-scroll:focus-visible,
.bw-compare__knob:focus-visible,
.bw-switch button:focus-visible{
  outline:2.5px solid var(--bw-violet);
  outline-offset:3px;
}

@media (prefers-reduced-motion:reduce){
  .bw-scroll img{transition:none}
  .bw-marquee__track{animation:none}
  .bw-sticky{transition:none}
}

/* --- Responsive (Elementor-breekpunten) --------------------------------- */
@media (max-width:1024px){
  .bw-hero::after{
    right:0;left:0;top:auto;bottom:0;width:100%;height:54%;
    border-radius:0;
  }
  .bw-badge{position:static;max-width:none;margin-top:18px}
  .bw-steps{grid-template-columns:repeat(2,1fr);border-top:0}
  .bw-steps>*{border-top:1px solid var(--bw-line);padding:32px 28px 32px 0}
  .bw-steps>*+*{padding-left:0;border-left:0}
  .bw-kpis{grid-template-columns:1fr}
  .bw-kpis>*{padding:20px 0}
  .bw-kpis>*:first-child{padding-top:0}
  .bw-kpis>*+*{border-left:0;border-top:1px solid var(--bw-line)}
}

@media (max-width:767px){
  .bw-steps{grid-template-columns:1fr}
  /* Mobiele hoogte: zet desnoods --bw-scroll-h-m per element. */
  .bw-scroll{--bw-h:var(--bw-scroll-h-m,300px)}
  .bw-marquee__track{gap:38px}
  .bw-quote p{font-size:20px}
  .bw-meter__value{font-size:21px}
  .bw-switch button{padding:10px 16px 12px;font-size:14px}
}