/* Belenus Scroll Journey — sticky Prozessbühne. */

.bj-root{
  --bj-bg:#22423c;--bj-ink:#f2f5f4;--bj-mute:#a9c4bc;--bj-line:rgba(255,255,255,.16);--bj-accent:#8fb0a7;--bj-header-offset:0px;
  position:relative;box-sizing:border-box;background:var(--bj-bg);color:var(--bj-ink);
  font-family:Poppins,'Helvetica Neue',Arial,sans-serif;
}
.bj-root[data-theme="light"]{--bj-bg:#f2f5f4;--bj-ink:#22423c;--bj-mute:#5b756e;--bj-line:#dbe4e0;--bj-accent:#33604f}
.bj-root *,.bj-root *::before,.bj-root *::after{box-sizing:border-box}

.bj-track{position:relative}
.bj-stage{
  position:sticky;top:var(--bj-header-offset,0px);height:calc(100vh - var(--bj-header-offset,0px));overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-start;gap:var(--bj-title-gap,18px);
  max-width:1400px;margin:0 auto;padding:clamp(8px,1.6vh,22px) clamp(18px,5vw,64px) clamp(32px,6vh,80px);
}
.bj-section-title{
  margin:0 0 0 clamp(20px,3vw,44px);flex:none;font-size:clamp(22px,2.4vw,34px);font-weight:700;letter-spacing:-.02em;
  color:var(--bj-ink);text-wrap:balance;
}
.bj-body{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:start;gap:clamp(28px,5vw,72px);min-height:0;flex:1 1 auto;
}
/* Bewusst kein automatischer Wechsel zu horizontal: Schiene bleibt immer links, lange Labels brechen um. */

/* Schiene mit Phasenknoten */
.bj-rail{position:relative;display:flex;flex-direction:column;justify-content:center;gap:0;padding-left:2px;margin-left:clamp(-28px,-2.4vw,-10px)}
.bj-rail::before{
  content:"";position:absolute;left:5px;top:18px;bottom:18px;width:1px;background:var(--bj-line);
}
.bj-rail::after{
  content:"";position:absolute;left:5px;top:18px;width:1px;height:calc((100% - 36px) * var(--bj-p,0));
  background:var(--bj-accent);transition:height .25s linear;
}
.bj-stop{
  position:relative;display:flex;align-items:center;gap:14px;
  padding:13px 0;background:none;border:0;cursor:pointer;text-align:left;
  font:inherit;color:var(--bj-mute);border-radius:0;box-shadow:none;
}
.bj-stop:hover,.bj-stop:focus,.bj-stop:active{background:none;box-shadow:none;outline:none}
.bj-stop-dot{
  position:relative;flex:none;width:11px;height:11px;border-radius:999px;
  background:var(--bj-bg);border:1px solid var(--bj-line);
  transition:background .3s ease,border-color .3s ease,transform .4s cubic-bezier(.2,.7,.2,1);
}
.bj-stop-label{
  font-size:12.5px;letter-spacing:.01em;white-space:normal;max-width:16em;line-height:1.3;
  opacity:.55;transition:opacity .3s ease,color .3s ease;
}
.bj-stop.is-done .bj-stop-dot{background:var(--bj-accent);border-color:var(--bj-accent)}
.bj-stop.is-active .bj-stop-dot{background:var(--bj-accent);border-color:var(--bj-accent);transform:scale(1.5)}
.bj-stop.is-active .bj-stop-label{opacity:1;color:var(--bj-ink);font-weight:600}
.bj-stop:hover .bj-stop-label{opacity:.85;color:var(--bj-ink)}

/* Panels */
.bj-panels{position:relative;height:min(84vh,760px)}
.bj-panel{
  position:absolute;left:0;right:0;top:0;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(20px,2.4vw,40px);align-items:start;
  opacity:0;visibility:hidden;transition:opacity .45s ease;
}
.bj-panel[data-media]{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center}
.bj-panel[data-media] .bj-list li{padding:8px 0;font-size:13.5px}
.bj-panel[data-media] .bj-text{font-size:clamp(14px,1.05vw,16px)}

/* Großes Motiv je Phase */
.bj-media{
  position:relative;overflow:hidden;border-radius:20px;
  aspect-ratio:4/3;max-height:min(74vh,660px);background:rgba(255,255,255,.05);
  border:1px solid var(--bj-line);
}
.bj-media img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.06);transition:transform 1.2s cubic-bezier(.16,.84,.24,1);
}
.bj-panel.is-current .bj-media img{transform:none}
.bj-media-empty{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  padding:clamp(18px,2vw,26px);
  background:
    repeating-linear-gradient(135deg,var(--bj-line) 0 1px,transparent 1px 16px),
    linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.01));
}
.bj-media-empty b{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bj-accent)}
.bj-media-empty span{font-size:13px;line-height:1.5;color:var(--bj-mute)}
.bj-panel.is-current{opacity:1;visibility:visible}

/* Bildmodus: Hintergrund */
.bj-panel-bg{
  grid-template-columns:minmax(0,1fr)!important;
  background-size:cover;background-position:center;border-radius:20px;overflow:hidden;
  padding:clamp(28px,5vw,64px);align-items:flex-end!important;
}
.bj-panel-bg::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(10,22,19,.15) 0%,rgba(10,22,19,.78) 100%);
}
.bj-panel-bg .bj-head{position:relative;z-index:1;max-width:38em}
.bj-panel-bg .bj-num,.bj-panel-bg .bj-title,.bj-panel-bg .bj-text,.bj-panel-bg .bj-list-h,.bj-panel-bg .bj-list li,.bj-panel-bg .bj-footer-text{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.bj-panel>*{transform:translateY(16px);opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1),opacity .45s ease}
.bj-panel.is-current>*{transform:none;opacity:1}
.bj-panel.is-current>*:nth-child(2){transition-delay:.08s}

.bj-panel[data-list-only]{align-items:stretch}
.bj-panel[data-list-only] .bj-head{align-self:stretch;justify-content:flex-start}
.bj-panel[data-list-only] .bj-head .bj-title{margin-top:auto;margin-bottom:auto}
.bj-panel[data-list-only] .bj-list-col{margin-left:clamp(8px,1.5vw,24px)}
.bj-panel-desc{grid-column:1/-1;margin-top:clamp(10px,1.6vh,20px)}

.bj-head{display:flex;flex-direction:column;gap:14px;min-width:0}
.bj-footer-text{margin:2px 0 0;font-size:clamp(13.5px,1.05vw,15.5px);line-height:1.6;color:var(--bj-mute);text-wrap:pretty}
.bj-head .bj-list{margin-top:4px}
.bj-num{margin:0;font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--bj-accent)}
.bj-title{margin:0;font-size:clamp(28px,3.6vw,54px);font-weight:700;line-height:1.06;letter-spacing:-.02em;text-wrap:balance;color:var(--bj-ink)}
.bj-text{margin:0;font-size:clamp(14.5px,1.15vw,17px);line-height:1.62;color:var(--bj-mute);max-width:32em;text-wrap:pretty}

.bj-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:0;border-top:1px solid var(--bj-line)}
.bj-list li{
  display:flex;align-items:baseline;gap:12px;padding:11px 0;
  border-bottom:1px solid var(--bj-line);
  font-size:14px;line-height:1.4;color:var(--bj-ink);
}
.bj-list li::before{
  content:"";flex:none;width:5px;height:5px;border-radius:999px;background:var(--bj-accent);transform:translateY(-2px);
}
.bj-list-h{margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bj-mute)}

.bj-count{
  position:absolute;right:clamp(18px,5vw,64px);bottom:clamp(20px,3vh,34px);
  font-size:12px;letter-spacing:.14em;color:var(--bj-mute);font-variant-numeric:tabular-nums;
}

@media (max-width:980px){
  /* Einspaltig passen Bild, Text und Liste nicht gleichzeitig in eine 100vh-Bühne:
     das Motiv wird flach und die Liste rückt kompakter. */
  .bj-panel{grid-template-columns:minmax(0,1fr)}
  .bj-panel[data-media]{grid-template-columns:minmax(0,1fr);align-items:start;gap:clamp(14px,2vw,22px)}
  .bj-media{aspect-ratio:21/9;max-height:24vh;border-radius:14px}
  .bj-panel[data-media] .bj-title{font-size:clamp(24px,3.4vw,34px)}
  .bj-panel[data-media] .bj-list li{padding:6px 0;font-size:13px}
  .bj-panel[data-media] .bj-list li:nth-child(n+5){display:none}
}
@media (max-width:860px){
  .bj-track{height:auto!important}
  .bj-stage{position:static;height:auto;display:block;padding:clamp(28px,7vw,48px) clamp(18px,6vw,32px);overflow:visible}
  .bj-section-title{margin-bottom:14px}
  .bj-body{display:block}
  .bj-rail{
    position:sticky;top:0;z-index:3;flex-direction:row;justify-content:flex-start;
    gap:0;padding:14px 20px 8px 0;margin:0 0 8px;background:var(--bj-bg);
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;align-items:flex-start;
  }
  .bj-rail::-webkit-scrollbar{display:none}
  .bj-rail::before{left:5px;right:5px;top:19px;bottom:auto;width:auto;height:1px}
  .bj-rail::after{left:5px;top:19px;bottom:auto;width:calc((100% - 10px) * var(--bj-p,0));height:1px}
  .bj-stop{flex-direction:column;gap:8px;padding:0 16px 0 0}
  .bj-stop-label{font-size:11px}
  .bj-panels{height:auto;display:flex;flex-direction:column;gap:0}
  .bj-panel{position:static;transform:none;opacity:1;visibility:visible;padding:26px 0 34px;border-bottom:1px solid var(--bj-line)}
  .bj-panel>*{transform:none;opacity:1}
  .bj-count{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bj-track{height:auto!important}
  .bj-stage{position:static;height:auto;display:block;overflow:visible}
  .bj-body{display:block}
  .bj-rail{display:none}
  .bj-panels{height:auto;display:flex;flex-direction:column}
  .bj-panel{position:static;transform:none;opacity:1;visibility:visible;padding:26px 0;transition:none}
  .bj-panel>*{transform:none;opacity:1;transition:none}
  .bj-count{display:none}
}