/* Wettfakten Visual Story v1.4.4 */

:root{
  --wfvs-bg:var(--wf-bg,#0B1219);
  --wfvs-surface:var(--wf-surface,#0E1620);
  --wfvs-border:var(--wf-border,#1C2937);
  --wfvs-border-strong:var(--wf-border-strong,#24384A);
  --wfvs-text:var(--wf-text-body,#C4CDD6);
  --wfvs-muted:var(--wf-muted,#6F8293);
  --wfvs-heading:var(--wf-heading,#F4F8FB);
  --wfvs-green:var(--wf-green,#1D9E75);
  --wfvs-green-soft:var(--wf-green-soft,#5DCAA5);
  --wfvs-sticky-top:108px;
  --wfvs-phone-width:312px;
  --wfvs-rail-left:auto;
  --wfvs-rail-top:120px;
}

.wft-text.wfvs-enhanced{overflow:visible;}

.wfvs-beat{
  position:relative;
  min-width:0;
  min-height:clamp(360px,52vh,560px);
  padding:0 0 clamp(48px,8vh,90px);
}
.wfvs-beat:last-child{padding-bottom:0;}
.wfvs-beat > h3:first-child{margin-top:0;}
.wfvs-beat-plain{min-height:0;padding:0;}
.wfvs-mobile-visual{display:none;}

.wfvs-global-rail{
  --wfvs-entry-y:72px;
  --wfvs-entry-opacity:0;
  --wfvs-entry-scale:.985;
  position:fixed;
  z-index:49;
  top:var(--wfvs-rail-top);
  left:var(--wfvs-rail-left);
  width:var(--wfvs-phone-width);
  opacity:0;
  pointer-events:none;
  visibility:hidden;
  transform:translate3d(0,var(--wfvs-entry-y),0) scale(var(--wfvs-entry-scale));
  transform-origin:center center;
  transition:visibility 0s linear .01s;
  will-change:opacity,transform;
}
.wfvs-global-rail.is-visible{
  opacity:var(--wfvs-entry-opacity,1);
  visibility:visible;
  transform:translate3d(0,var(--wfvs-entry-y,0px),0) scale(var(--wfvs-entry-scale,1));
  transition:visibility 0s;
}

/* Beim Einfahren von unten wird der grosszuegige Phone-Schatten geclippt.
   Dadurch taucht das Device nicht optisch vor seiner Headline auf. */
.wfvs-global-rail.is-entering{overflow:hidden;}
.wfvs-global-rail-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.wfvs-phone{
  --wfvs-scale:1;
  position:relative;
  width:min(100%,312px);
  aspect-ratio:390 / 844;
  padding:7px;
  border-radius:47px;
  background:linear-gradient(145deg,#45535E 0%,#161D23 11%,#030608 48%,#141D24 86%,#4C5964 100%);
  border:1px solid rgba(170,190,205,.20);
  box-shadow:0 30px 68px rgba(0,0,0,.48),0 8px 20px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.045);
  transform:scale(var(--wfvs-scale));
  transition:transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .52s ease, opacity .28s ease;
  will-change:transform;
}
.wfvs-phone.is-swoop{--wfvs-scale:1.008;}

.wfvs-phone .wfvs-button{
  position:absolute;display:block;background:#1D2730;border:1px solid rgba(255,255,255,.05);pointer-events:none;
}
.wfvs-phone .wfvs-button-vol-up{left:-4px;top:110px;width:4px;height:46px;border-radius:3px 0 0 3px;}
.wfvs-phone .wfvs-button-vol-down{left:-4px;top:165px;width:4px;height:62px;border-radius:3px 0 0 3px;}
.wfvs-phone .wfvs-button-power{right:-4px;top:145px;width:4px;height:82px;border-radius:0 3px 3px 0;}

.wfvs-phone-bezel{
  position:relative;width:100%;height:100%;padding:3px;border-radius:40px;background:#020405;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), inset 0 0 18px rgba(0,0,0,.75);
}
.wfvs-phone-screen{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:37px;background:#0A0F14;border:1px solid rgba(255,255,255,.022);isolation:isolate;
}

.wfvs-status{
  position:absolute;z-index:18;left:0;right:0;top:0;height:34px;display:flex;align-items:flex-start;justify-content:space-between;
  padding:8px 16px 0 16px;color:#F4F8FB;font-size:11px;font-weight:600;letter-spacing:.01em;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.28);
}
.wfvs-time{min-width:34px;}
.wfvs-status-right{display:flex;align-items:center;gap:6px;}
.wfvs-signal{display:flex;align-items:flex-end;gap:2px;height:10px;}
.wfvs-signal span{display:block;width:2px;background:#F4F8FB;border-radius:2px;opacity:.95;}
.wfvs-signal span:nth-child(1){height:4px;opacity:.65;}
.wfvs-signal span:nth-child(2){height:6px;opacity:.75;}
.wfvs-signal span:nth-child(3){height:8px;opacity:.88;}
.wfvs-signal span:nth-child(4){height:10px;}
.wfvs-battery{display:flex;align-items:center;gap:4px;}
.wfvs-battery-icon{position:relative;width:21px;height:11px;border:1.5px solid rgba(244,248,251,.92);border-radius:3px;box-sizing:border-box;}
.wfvs-battery-icon::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:5px;border-radius:0 2px 2px 0;background:#F4F8FB;}
.wfvs-battery-fill{position:absolute;left:1px;top:1px;bottom:1px;width:78%;border-radius:1.5px;background:#F4F8FB;}
.wfvs-battery-pct{font-size:10px;line-height:1;}

.wfvs-island{
  position:absolute;z-index:20;left:50%;top:10px;width:31.5%;height:24px;transform:translateX(-50%);border-radius:999px;
  background:radial-gradient(circle at 28% 35%, rgba(255,255,255,.042), transparent 34%), linear-gradient(180deg,#020304 0%, #040608 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.016),0 1px 4px rgba(0,0,0,.15);pointer-events:none;
}
.wfvs-island::after{
  content:"";position:absolute;right:8px;top:8px;width:7px;height:7px;border-radius:50%;background:#0E1820;box-shadow:0 0 0 1px rgba(44,78,98,.12);
}

/* Screenshot-Bereich kantig */
.wfvs-shot-viewport{
  position:absolute;z-index:1;top:34px;left:0;right:0;bottom:46px;overflow:hidden;border-radius:0;background:#0A0F14;
}
.wfvs-shot{
  display:block;position:absolute;z-index:1;top:0;left:0;max-width:none;opacity:1;transform-origin:center center;
  transform:translate3d(0,var(--wfvs-shot-y,0px),0) scale(1);
  transition:opacity .34s ease, transform .56s cubic-bezier(.2,.8,.2,1), filter .34s ease;
  will-change:transform,opacity;
}
.wfvs-shot.is-fit-width{width:100%;height:auto;min-height:0;}
.wfvs-shot.is-contained{width:100%;height:100%;object-fit:contain;object-position:top center;left:0;}
.wfvs-phone.is-changing .wfvs-shot{
  opacity:0;transform:translate3d(0,calc(var(--wfvs-shot-y,0px) + 10px),0) scale(1.01);filter:blur(.15px);
}

.wfvs-browserbar{
  position:absolute;z-index:18;left:12px;right:12px;bottom:10px;height:30px;display:flex;align-items:center;justify-content:center;
  gap:8px;padding:0 14px;border-radius:999px;background:rgba(8,13,18,.88);border:1px solid rgba(255,255,255,.05);
  box-shadow:0 8px 20px rgba(0,0,0,.18);pointer-events:none;text-align:center;
}
.wfvs-browser-lock{
  width:10px;height:10px;border:1.4px solid var(--wfvs-green-soft);border-radius:2px;position:relative;box-sizing:border-box;flex:0 0 auto;
}
.wfvs-browser-lock::before{
  content:"";position:absolute;left:1.5px;top:-5px;width:4px;height:5px;border:1.4px solid var(--wfvs-green-soft);border-bottom:0;border-radius:4px 4px 0 0;box-sizing:border-box;
}
.wfvs-browser-domain{
  min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#E7EDF3;font-size:11px;font-weight:500;letter-spacing:.01em;text-align:center;
}

.wfvs-phone-screen::after{
  content:"";position:absolute;z-index:8;inset:0;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.022),transparent 18%,transparent 78%,rgba(255,255,255,.012));mix-blend-mode:screen;
}
.wfvs-caption{
  width:min(100%,312px);min-height:18px;margin:0;color:var(--wfvs-muted);font-family:var(--wf-mono,monospace);font-size:10px;line-height:1.5;letter-spacing:.02em;text-align:center;
  transition:opacity .25s ease,transform .25s ease;
}
.wfvs-caption:empty{visibility:hidden;}

/* Desktop: klare Zweispalten-Story.
   Die bestehende H2, Staerken-Box und der komplette Fliesstext bleiben links.
   Rechts wird bewusst Platz fuer genau EIN sticky Smartphone reserviert. */
@media (min-width:1080px){
  :root{
    --wfvs-phone-width:clamp(292px,20vw,330px);
  }

  .wfvs-mobile-visual{display:none !important;}

  .wft-abschnitt.wfvs-section-active{
    box-sizing:border-box;
    overflow:visible;
    padding-right:clamp(370px,34%,500px);
  }

  .wft-abschnitt.wfvs-section-active > .wft-h2,
  .wft-abschnitt.wfvs-section-active > .wft-staerken,
  .wft-abschnitt.wfvs-section-active > .wft-text{
    width:100%;
    max-width:none;
    box-sizing:border-box;
  }

  .wfvs-global-rail{
    display:block !important;
    right:auto;
    width:var(--wfvs-phone-width);
  }

  .wfvs-global-rail .wfvs-phone,
  .wfvs-global-rail .wfvs-caption{
    width:100%;
  }
}

@media (max-width:1079px){
  .wft-abschnitt.wfvs-section-active{padding-right:0;}
  .wfvs-global-rail{display:none !important;}
  .wfvs-mobile-visual{display:flex;flex-direction:column;align-items:center;gap:9px;margin:24px auto 0;}
  .wfvs-mobile-visual .wfvs-phone{width:min(76vw,255px);transform:none;}
  .wfvs-mobile-visual .wfvs-caption{width:min(82vw,310px);}
  .wfvs-beat{min-height:0;padding-bottom:44px;}
  .wfvs-beat:last-child{padding-bottom:10px;}
}
@media (max-width:560px){
  .wfvs-mobile-visual .wfvs-phone{width:min(80vw,238px);padding:6px;border-radius:40px;}
  .wfvs-mobile-visual .wfvs-phone-bezel{border-radius:34px;}
  .wfvs-mobile-visual .wfvs-phone-screen{border-radius:31px;}
  .wfvs-island{top:9px;height:22px;}
}
@media (prefers-reduced-motion:reduce){
  .wfvs-phone,.wfvs-shot,.wfvs-caption,.wfvs-global-rail{transition:none !important;animation:none !important;}
}