/* Belenus Statement Transition — Großstatements im Scrollwechsel, Schlussbild als System. */

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

.bs-track{position:relative}
.bs-stage{
  position:sticky;top:max(var(--bs-header-offset,0px), calc((100vh - var(--bs-stage-h,100vh)) / 2));height:min(var(--bs-stage-h,100vh), calc(100vh - var(--bs-header-offset,0px)));overflow:hidden;
  display:flex;align-items:center;
  max-width:1240px;margin:0 auto;padding:clamp(32px,6vh,80px) clamp(18px,5vw,64px);
}
.bs-bgs{position:sticky;top:max(var(--bs-header-offset,0px), calc((100vh - var(--bs-stage-h,100vh)) / 2));height:min(var(--bs-stage-h,100vh), calc(100vh - var(--bs-header-offset,0px)));width:100%;overflow:hidden;z-index:0}
.bs-bg{position:absolute;left:-6%;right:-6%;top:-8%;bottom:-8%;opacity:0;background-size:cover;background-position:center;transition:opacity 1s ease;will-change:transform}
.bs-bg.bs-bg-final{background-image:radial-gradient(120% 120% at 20% 15%, rgba(143,176,167,.5) 0%, transparent 55%), linear-gradient(160deg, var(--bs-bg) 0%, #0f2420 100%)}
.bs-root[data-theme="light"] .bs-bg.bs-bg-final{background-image:radial-gradient(120% 120% at 20% 15%, rgba(51,96,79,.14) 0%, transparent 55%), linear-gradient(160deg, var(--bs-bg) 0%, #e2ebe6 100%)}
.bs-bg.is-current{opacity:1}
.bs-bg[style*="background-image"]::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,22,19,.45),rgba(10,22,19,.8))}
.bs-root[data-theme="light"] .bs-bg[style*="background-image"]::after{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.58))}
.bs-frame[data-has-bg="1"] .bs-role,.bs-frame[data-has-bg="1"] .bs-line,.bs-frame[data-has-bg="1"] .bs-sub{color:#fff!important;text-shadow:0 2px 14px rgba(0,0,0,.35)}
.bs-root[data-theme="light"] .bs-frame[data-has-bg="1"] .bs-role,.bs-root[data-theme="light"] .bs-frame[data-has-bg="1"] .bs-line,.bs-root[data-theme="light"] .bs-frame[data-has-bg="1"] .bs-sub{color:var(--bs-ink)!important;text-shadow:none}
.bs-frames{position:relative;width:100%;z-index:1}
.bs-frame{
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:clamp(14px,1.8vw,24px);
  opacity:0;visibility:hidden;transition:opacity .45s ease;
}
.bs-frame.is-current{opacity:1;visibility:visible}

.bs-role{
  margin:0;font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--bs-accent);
  transform:translateY(10px);opacity:0;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease;
}
.bs-line{
  margin:0;font-size:clamp(34px,7.4vw,104px);font-weight:700;line-height:.98;letter-spacing:-.035em;
  color:var(--bs-ink);max-width:20em;text-wrap:balance;
  clip-path:inset(0 0 108% 0);
  transition:clip-path .8s cubic-bezier(.16,.84,.24,1);
}
.bs-sub{
  margin:0;font-size:clamp(14.5px,1.3vw,18px);line-height:1.6;color:var(--bs-mute);max-width:32em;text-wrap:pretty;
  transform:translateY(12px);opacity:0;transition:transform .6s cubic-bezier(.2,.7,.2,1) .1s,opacity .45s ease .1s;
}
.bs-frame.is-current .bs-role,.bs-frame.is-current .bs-sub{transform:none;opacity:1}
.bs-frame.is-current .bs-line{clip-path:inset(0 0 -.12em 0)}

/* Schlussbild: alle Akteure als zusammenhängendes System */
.bs-final-h{
  margin:0;font-size:clamp(24px,3.2vw,44px);font-weight:700;line-height:1.08;letter-spacing:-.025em;
  color:var(--bs-ink);max-width:26em;text-wrap:balance;
}
.bs-system{
  position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:clamp(16px,3vw,48px);margin-top:clamp(18px,3vh,36px);
}
.bs-system::before{
  content:"";position:absolute;left:6%;right:6%;top:5px;height:1px;background:var(--bs-line);
}
.bs-actor{position:relative;display:flex;flex-direction:column;gap:12px}
.bs-actor-dot{width:11px;height:11px;border-radius:999px;background:var(--bs-accent)}
.bs-actor-name{margin:0;font-size:clamp(15px,1.4vw,19px);font-weight:600;letter-spacing:-.01em;color:var(--bs-ink)}
.bs-actor-desc{margin:0;font-size:13.5px;line-height:1.55;color:var(--bs-mute);text-wrap:pretty}

.bs-dots{
  position:absolute;left:clamp(18px,5vw,64px);bottom:clamp(20px,3vh,34px);
  display:flex;align-items:center;gap:8px;
}
.bs-dots i{
  display:block;width:22px;height:2px;border-radius:2px;background:var(--bs-line);
  transition:background .3s ease;
}
.bs-dots i.is-on{background:var(--bs-accent)}

@media (max-width:860px){
  .bs-bgs{display:none}
  .bs-track{height:auto!important}
  .bs-stage{position:static;height:auto;padding:clamp(28px,7vw,48px) clamp(18px,6vw,32px);overflow:visible}
  .bs-frames{display:flex;flex-direction:column}
  .bs-frame{
    position:static;transform:none;opacity:1;visibility:visible;
    min-height:auto;padding:34px 0;border-bottom:1px solid var(--bs-line);
  }
  .bs-frame:last-child{border-bottom:0}
  .bs-line{font-size:clamp(30px,9vw,46px);clip-path:none}
  .bs-role,.bs-sub{transform:none;opacity:1}
  .bs-system{grid-auto-flow:row;grid-auto-columns:auto;gap:22px}
  .bs-system::before{left:5px;right:auto;top:6px;bottom:6px;width:1px;height:auto}
  .bs-actor{padding-left:26px}
  .bs-actor-dot{position:absolute;left:0;top:5px}
  .bs-dots{display:none}
  .bs-frame[data-has-bg="1"] .bs-role,.bs-frame[data-has-bg="1"] .bs-line,.bs-frame[data-has-bg="1"] .bs-sub{color:inherit!important;text-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .bs-bgs{display:none}
  .bs-track{height:auto!important}
  .bs-stage{position:static;height:auto;overflow:visible}
  .bs-frames{display:flex;flex-direction:column}
  .bs-frame{position:static;transform:none;opacity:1;visibility:visible;padding:30px 0;transition:none}
  .bs-line{clip-path:none;transition:none}
  .bs-role,.bs-sub{transform:none;opacity:1;transition:none}
  .bs-dots{display:none}
}
