/* =============================================================================
   "So arbeiten wir" — five steps along one line (inc/bmx-process.php).

   A thin line on the start side fills in the brand blue as the reader moves
   down; the step it has reached turns dark, the steps ahead stay light, and
   each step's text rises in once. bmx-process.js adds
   .is-js to the section (motion allowed), .is-on / .is-seen to steps and the
   line's scale. No script or reduced motion: the finished state.

   White section, ink type, one accent (#3B55E6). No cards, no icons, no
   glow, no gradient.
   ============================================================================= */

@font-face{
  font-family:'Geist Mono';
  src:url(../fonts/geist-mono.woff2) format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

/* ---- Chrome's dark toolbar — owner's rule for every browser picture.
   Shared: inc/bmx-areas.php uses it. ---- */
.bpx-bar{
  display:flex; align-items:center; gap:10px; height:30px; padding:0 10px;
  background:#35363a; border-bottom:1px solid #1f2023; color:#c4c7c5;
  font:400 11px/1 'Inter',system-ui,sans-serif;
}
.bpx-bar svg{ display:block; flex:none; width:13px; height:13px; fill:currentColor; }
.bpx-bar-nav{ display:flex; gap:9px; }
.bpx-bar-nav .is-off{ opacity:.42; }
.bpx-omni{
  flex:1; min-width:0; display:flex; align-items:center; gap:8px;
  height:21px; padding:0 10px; border-radius:999px; background:#282828; color:#e8eaed;
}
.bpx-omni .bpx-star{ margin-inline-start:auto; }
.bpx-url{ min-width:0; direction:ltr; unicode-bidi:isolate; display:grid; }
.bpx-url-i{ grid-area:1 / 1; min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
[dir="rtl"] .bpx-bar-nav svg{ transform:scaleX(-1); }

/* ---- the section ---- */
.bpl{
  --bpl-ink:#0A1016;
  --bpl-soft:#3D4652;
  --bpl-muted:#5F6B79;
  --bpl-faint:#B4BCC6;
  --bpl-line:#E3E6EB;
  --bpl-accent:#3B55E6;
  --bpl-mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bpl-e:cubic-bezier(.2,.65,.2,1);
  --bpl-pad:clamp(16px,3.2vw,48px);
  background:#fff; color:var(--bpl-ink);
  padding-block:clamp(5rem,10vw,9rem);
}
.bpl-in{ max-width:1240px; margin-inline:auto; padding-inline:var(--bpl-pad); }

.bpl-head{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:1.1rem; margin-bottom:clamp(3.5rem,7vw,6rem); }
.bpl-eye{
  margin:0; font:500 12px/1 var(--bpl-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--bpl-muted);
}
.bpl .bpl-head h2{
  margin:0; font-family:var(--font-head,inherit); font-weight:700; color:var(--bpl-ink);
  font-size:clamp(2.6rem,6vw,5rem); line-height:1; letter-spacing:-.035em;
}
.bpl-lede{ margin:0; max-width:44ch; color:var(--bpl-muted); font-size:clamp(1.05rem,1.4vw,1.2rem); line-height:1.55; }
@media (min-width:1024px){
  .bpl-head{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); column-gap:clamp(32px,5vw,80px); align-items:end; }
  .bpl-eye{ grid-column:1 / -1; }
  .bpl-lede{ padding-bottom:.5rem; }
}

/* ---- the line and the steps ---- */
.bpl-flow{ position:relative; padding-inline-start:clamp(28px,4vw,64px); }
.bpl-rail{
  position:absolute; inset-block:.4rem; inset-inline-start:0; width:2px;
  background:var(--bpl-line); border-radius:2px; overflow:hidden;
}
.bpl-beam{ position:absolute; inset:0; display:block; background:var(--bpl-accent); transform-origin:50% 0; }
.bpl-steps{ list-style:none; margin:0; padding:0; }
.bpl-step{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:1rem; padding-block:clamp(1.8rem,3.4vw,3rem); }
.bpl-step:first-child{ padding-top:0; }
.bpl-no{
  display:block; margin-bottom:.9rem;
  font:500 12px/1 var(--bpl-mono); letter-spacing:.12em; color:var(--bpl-accent);
}
.bpl .bpl-title{
  margin:0; font-family:var(--font-head,inherit); font-weight:700; color:var(--bpl-ink);
  font-size:clamp(1.9rem,3.6vw,3.2rem); line-height:1.04; letter-spacing:-.03em;
}
.bpl-lead{ margin:0; max-width:36ch; color:var(--bpl-soft); font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.5; }
.bpl-facts{
  list-style:none; margin:1.5rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:.7rem 2rem; color:var(--bpl-muted); font-size:.98rem; line-height:1.4;
}
.bpl-facts b{ font-weight:600; color:var(--bpl-ink); margin-inline-end:.3em; }

@media (min-width:1024px){
  .bpl-step{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:clamp(32px,5vw,88px);
    align-items:start; padding-block:clamp(2.6rem,4.4vw,4rem);
  }
  .bpl-body{ padding-top:1.9rem; }
}

/* ---- the close ---- */
.bpl-end{
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:2rem; border-top:1px solid var(--bpl-line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1.2rem 2rem;
}
.bpl-end p{
  margin:0; font-family:var(--font-head,inherit); font-weight:600; color:var(--bpl-ink);
  font-size:clamp(1.3rem,2.2vw,1.75rem); letter-spacing:-.02em;
}
.bpl-cta{
  display:inline-flex; align-items:center; gap:10px; padding:.95rem 1.35rem; border-radius:6px;
  background:var(--bpl-ink); color:#fff; font-weight:600; text-decoration:none;
  transition:background-color .25s var(--bpl-e);
}
.bpl-cta svg{ width:17px; height:17px; flex:none; transition:transform .3s var(--bpl-e); }
.bpl-cta:hover, .bpl-cta:focus-visible{ background:var(--bpl-accent); color:#fff; }
.bpl-cta:hover svg{ transform:translateX(3px); }
.bpl-cta:focus-visible{ outline:2px solid var(--bpl-accent); outline-offset:3px; }
[dir="rtl"] .bpl-cta svg{ transform:scaleX(-1); }
[dir="rtl"] .bpl-cta:hover svg{ transform:scaleX(-1) translateX(3px); }

/* ---- motion (script on, motion allowed) ---- */
.bpl.is-js .bpl-beam{ transform:scaleY(0); will-change:transform; }
.bpl.is-js .bpl-no, .bpl.is-js .bpl-title{ transition:color .55s var(--bpl-e); }
.bpl.is-js .bpl-step:not(.is-on) .bpl-no,
.bpl.is-js .bpl-step:not(.is-on) .bpl-title{ color:var(--bpl-faint); }
.bpl.is-js .bpl-lead{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--bpl-e), transform .8s var(--bpl-e); }
.bpl.is-js .bpl-facts li{
  opacity:0; transform:translateY(12px);
  transition:opacity .6s var(--bpl-e), transform .6s var(--bpl-e);
  transition-delay:calc(.18s + var(--i,0) * .08s);
}
.bpl.is-js .bpl-step.is-seen .bpl-lead,
.bpl.is-js .bpl-step.is-seen .bpl-facts li{ opacity:1; transform:none; }

/* Arabic joins its letters: no tracking */
:lang(ar) .bpl{ --bpl-mono:var(--font-body,system-ui,sans-serif); }
:lang(ar) .bpl-eye, :lang(ar) .bpl-no{ letter-spacing:0; }

@media (prefers-reduced-motion:reduce){
  .bpl *{ transition:none !important; }
  .bpl.is-js .bpl-beam{ transform:none; }
  .bpl.is-js .bpl-lead, .bpl.is-js .bpl-facts li{ opacity:1; transform:none; }
  .bpl.is-js .bpl-step .bpl-no{ color:var(--bpl-accent); }
  .bpl.is-js .bpl-step .bpl-title{ color:var(--bpl-ink); }
}