/* Centered hero with an independent video background. */
#jst-live-session .jst-hero {
  position:relative; min-height:620px; min-height:max(620px,100svh);
  display:grid; place-items:center; isolation:isolate;
  background:#01040b;
}
/* Static gradients on moving layers: no animated blur, hue filter or repainting
   background-position. Only dark blue tones; even the brightest phase stays navy.
   Layer order: ambience (0), video (1), broad transition (2), content (4). */
#jst-live-session .jst-ambience {
  position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; contain:strict;
}
#jst-live-session .jst-ambience-layer {
  position:absolute; inset:-12%; transform-origin:center; animation-play-state:paused;
}
#jst-live-session .jst-ambience-blue {
  background:radial-gradient(ellipse at 26% 24%,#0a2048 0%,#06152f 27%,rgba(3,9,23,.5) 56%,transparent 77%);
  transform:translate3d(-3%,-2%,0) scale(1.04); opacity:.90;
  animation:jst-ambient-blue 10s ease-in-out infinite; animation-play-state:paused;
}
#jst-live-session .jst-ambience-shift {
  background:radial-gradient(ellipse at 70% 22%,rgba(16,51,116,.56) 0%,rgba(9,32,78,.42) 36%,transparent 69%),radial-gradient(ellipse at 24% 42%,rgba(13,51,112,.38) 0%,transparent 63%);
  transform:translate3d(4%,-3%,0) scale(1.03); opacity:.18;
  animation:jst-ambient-shift 14s ease-in-out infinite; animation-play-state:paused;
}
#jst-live-session .jst-hero[data-motion="running"] .jst-ambience-layer { animation-play-state:running; }
@keyframes jst-ambient-blue {
  0%,100% { transform:translate3d(-3%,-2%,0) scale(1.04); opacity:.90; }
  50% { transform:translate3d(5%,4%,0) scale(1.10); opacity:.66; }
}
@keyframes jst-ambient-shift {
  0%,100% { transform:translate3d(4%,-3%,0) scale(1.03); opacity:.18; }
  50% { transform:translate3d(-6%,5%,0) scale(1.09); opacity:.48; }
}
#jst-live-session .jst-hero-shade {
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,.08) 0%,transparent 29%,rgba(0,0,0,.08) 49%,rgba(0,0,0,.48) 72%,rgba(0,0,0,.92) 91%,#000 100%),radial-gradient(ellipse 58% 40% at 50% 50%,rgba(0,3,9,.28),transparent 90%);
}
#jst-live-session .jst-hero-content { position:relative; z-index:4; width:100%; padding:100px 24px 112px; text-align:center; }
#jst-live-session .jst-brand { display:flex; width:fit-content; align-items:center; justify-content:center; min-height:44px; margin:0 auto 46px; }
#jst-live-session .jst-logo { display:block; width:204px; height:auto; }
/* Shared intrinsic width: the date row cannot become wider than the headline. */
#jst-live-session .jst-hero-lockup {
  display:inline-flex; flex-direction:column; align-items:stretch; width:max-content; max-width:100%; vertical-align:top;
  --jst-hero-type-y:0px; transform:translate3d(0,var(--jst-hero-type-y),0); will-change:transform;
}
#jst-live-session #jst-hero-title {
  position:relative; font-family:var(--jst-font); font-size:clamp(80px,11.527778vw,166px); font-weight:800;
  line-height:.843373494; letter-spacing:-.04em; text-transform:uppercase; white-space:nowrap;
  color:#fff; -webkit-text-fill-color:transparent; -webkit-text-stroke:3px rgba(255,255,255,.76); text-shadow:none;
}
/* V13: slower React-Bits-inspired shiny sweep, adapted specifically to the existing outline.
   Each word gets a second transparent copy. A moving mask reveals only a bright
   section of that copy's stroke, so the letter interiors stay transparent. */
#jst-live-session #jst-hero-title > span { position:relative; display:inline-block; }
#jst-live-session #jst-hero-title > span::after {
  content:attr(data-shiny); position:absolute; inset:0; z-index:1; pointer-events:none;
  color:transparent; -webkit-text-fill-color:transparent; -webkit-text-stroke:3px #fff8ee;
  text-shadow:0 0 9px rgba(255,255,255,.34),0 0 20px rgba(255,158,63,.20);
  -webkit-mask-image:linear-gradient(110deg,transparent 0%,transparent 40%,rgba(0,0,0,.32) 45%,#000 50%,rgba(0,0,0,.32) 55%,transparent 60%,transparent 100%);
  mask-image:linear-gradient(110deg,transparent 0%,transparent 40%,rgba(0,0,0,.32) 45%,#000 50%,rgba(0,0,0,.32) 55%,transparent 60%,transparent 100%);
  -webkit-mask-size:260% 100%; mask-size:260% 100%;
  -webkit-mask-position:170% 0; mask-position:170% 0;
  animation:jst-outline-shine 8.5s cubic-bezier(.35,0,.65,1) infinite;
}
#jst-live-session #jst-hero-title > span:nth-child(2)::after { animation-delay:.14s; }
@keyframes jst-outline-shine {
  0%,10% { -webkit-mask-position:170% 0; mask-position:170% 0; }
  50%,100% { -webkit-mask-position:-70% 0; mask-position:-70% 0; }
}
@supports not (-webkit-text-stroke:3px #fff) {
  #jst-live-session #jst-hero-title { -webkit-text-fill-color:#fff; }
  #jst-live-session #jst-hero-title > span::after { display:none; }
}
#jst-live-session .jst-hero-facts {
  display:flex; align-items:baseline; justify-content:space-between; gap:24px; width:100%; margin-top:33px;
  color:#fff; font-size:clamp(28px,4.3vw,62px); font-weight:400; line-height:1.12; letter-spacing:-.045em;
  font-variant-numeric:lining-nums tabular-nums;
}
#jst-live-session .jst-hero-facts > * { display:block; white-space:nowrap; }
/* Shared original 170 x 40 px pill buttons. */
#jst-live-session .jst-button {
  display:inline-flex; justify-content:center; align-items:center; gap:8px; width:170px; height:40px; min-width:170px;
  padding:12px; border:1px solid transparent; border-radius:100px; color:#111; background:#fff;
  font-family:var(--jst-font); font-size:14px; font-weight:500; line-height:16px; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; cursor:pointer; transition:background .18s ease,border-color .18s ease;
}
#jst-live-session .jst-button > span { display:block; flex:0 0 auto; }
#jst-live-session .jst-button:not(:disabled):hover { background:#e9edf5; }
#jst-live-session .jst-button:focus-visible { outline-color:#fff; }
#jst-live-session .jst-button:disabled { opacity:1; cursor:default; }

/* Kompakter Hero-CTA; der Button nutzt das JST-Orange. */
#jst-live-session .jst-hero-cta {
  display:flex; align-items:center; gap:20px; width:min(100%,420px); min-height:56px;
  margin:36px auto 0; padding:8px; border:0; border-radius:100px; background:#fff;
  color:#292929; color-scheme:light; text-align:left;
}
#jst-live-session .jst-cta-prompt {
  flex:1 1 0; min-width:0; padding-left:12px; font-size:16px; line-height:1.3; font-weight:400; letter-spacing:-.012em;
}
#jst-live-session .jst-hero-cta .jst-cta-button {
  flex:0 0 170px; width:170px; min-width:170px; height:40px; min-height:40px;
  padding:12px; border-radius:100px; border-color:#ff5700;
  background:#ff5700; color:#fff; font-size:14px; line-height:16px; font-weight:500; letter-spacing:-.01em;
  text-align:center;
}
#jst-live-session .jst-hero-cta .jst-cta-button:hover { border-color:#e74f00; background:#e74f00; }
#jst-live-session .jst-hero-cta .jst-cta-button:active { border-color:#cf4700; background:#cf4700; }
#jst-live-session .jst-hero-cta .jst-cta-button:focus-visible { outline:3px solid rgba(255,87,0,.4); outline-offset:3px; }
/* Centered fixed background video.
   Stack: ambience 0, video 1, shade 2, text 4.
   Screen blending keeps the clip's black background from covering the blue ambience. */
#jst-live-session .jst-hero-video-layer {
  --jst-video-opacity:.78; --jst-video-fit:cover;
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; user-select:none; mix-blend-mode:screen;
  opacity:var(--jst-video-opacity);
  -webkit-mask-image:radial-gradient(ellipse 85% 88% at 50% 50%,#000 40%,rgba(0,0,0,.85) 64%,transparent 95%);
  mask-image:radial-gradient(ellipse 85% 88% at 50% 50%,#000 40%,rgba(0,0,0,.85) 64%,transparent 95%);
}
#jst-live-session .jst-hero-video {
  position:absolute; inset:0; display:block; width:100%; height:100%;
  object-fit:var(--jst-video-fit); object-position:50% 50%; background:transparent;
  pointer-events:none;
}
@media print { #jst-live-session .jst-hero-video-layer { display:none !important; } }

#jst-live-session .jst-hero-supporting { max-width:64ch; margin:24px auto 0; color:#f1f3f8; font-size:18px; line-height:1.45; text-align:center; }
#jst-live-session .jst-hero-supporting p + p { margin-top:10px; }
@media(max-width:600px) {
  #jst-live-session .jst-hero { min-height:max(540px,100svh); }
  #jst-live-session .jst-hero-content { padding:60px 24px 80px; }
  #jst-live-session .jst-brand { margin-bottom:36px; }
  #jst-live-session .jst-logo { width:174px; }
  #jst-live-session #jst-hero-title { font-size:clamp(66px,20.75vw,112px); line-height:.96; white-space:normal; }
  #jst-live-session #jst-hero-title > span { display:block; }
  #jst-live-session .jst-hero-facts { font-size:clamp(17px,4.9vw,29px); gap:10px; margin-top:22px; letter-spacing:-.035em; }
  #jst-live-session .jst-hero-cta { gap:12px; margin-top:28px; }
  #jst-live-session .jst-cta-prompt { padding-left:8px; font-size:14px; }
  #jst-live-session .jst-hero-supporting { font-size:16px; }
}
@media(max-width:374px) {
  #jst-live-session .jst-hero-content { padding-inline:18px; }
  #jst-live-session .jst-hero-facts { font-size:17px; gap:9px; }
}
@media(max-height:740px) and (max-width:600px) {
  #jst-live-session .jst-hero-content { padding-block:44px 54px; }
  #jst-live-session .jst-brand { margin-bottom:28px; }
  #jst-live-session #jst-hero-title { font-size:clamp(60px,19vw,94px); }
}
@media(max-height:680px) and (min-width:601px) {
  #jst-live-session .jst-hero { min-height:100svh; }
  #jst-live-session .jst-hero-content { padding-block:44px 52px; }
  #jst-live-session .jst-brand { margin-bottom:32px; }
  #jst-live-session #jst-hero-title { font-size:clamp(66px,10vw,112px); }
  #jst-live-session .jst-hero-facts { font-size:clamp(24px,3.5vw,44px); margin-top:24px; }
  #jst-live-session .jst-hero-cta { margin-top:28px; }
}
@media(max-height:450px) and (min-width:601px) {
  #jst-live-session .jst-hero-content { padding-block:24px; }
  #jst-live-session .jst-brand { margin-bottom:20px; }
  #jst-live-session .jst-logo { width:150px; }
  #jst-live-session #jst-hero-title { font-size:62px; }
  #jst-live-session .jst-hero-facts { font-size:23px; margin-top:18px; }
  #jst-live-session .jst-hero-cta { margin-top:22px; }
}
@media(prefers-reduced-motion:reduce) {
  #jst-live-session .jst-hero-lockup { --jst-hero-type-y:0px !important; transform:none !important; will-change:auto; }
  #jst-live-session #jst-hero-title > span::after { display:none !important; }
}
@media(forced-colors:active) { #jst-live-session #jst-hero-title { -webkit-text-fill-color:CanvasText; -webkit-text-stroke:0; } }
@media print {
  #jst-live-session .jst-brand,#jst-live-session .jst-hero-shade,#jst-live-session .jst-hero-cta,#jst-live-session .jst-ambience,#jst-live-session .jst-hero-video-layer { display:none !important; }
  #jst-live-session .jst-hero { min-height:0; background:#fff; }
  #jst-live-session .jst-hero-content { padding:30px 20px; }
  #jst-live-session #jst-hero-title { font-size:65px; -webkit-text-fill-color:#111; -webkit-text-stroke:0; }
  #jst-live-session .jst-hero-facts { color:#333; font-size:24px; }
}