/* Start-Hero mit Video-Slider (Startseite). Maße aus Figma (1440 px): Bild bzw. Video über die ganze Sektion (845 px), Play-Knopf 50,6 px
   in der Mitte, Titel 80 px bei 555 px (48 px rechts der Inhaltsspalte), bei 682 px Case-Name und Zahlen, Fortschrittsbalken bei 781 px
   über die Inhaltsspalte (1040 px, 24 px Abstand). Auf dem Handy gelten die allgemeinen Hero-Regeln (responsive.css, .rx-band--hero). */
.rx-band--start-hero{height:auto}
:where(.rx-sh) p{margin:0}
.rx-sh__media{position:absolute;inset:0;overflow:hidden}
.rx-sh__media img,.rx-sh__video{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.rx-sh__video{opacity:0;transition:opacity .6s ease;pointer-events:none}
.rx-sh__video.is-active.is-ready{opacity:1}
.rx-sh__title{font-weight:700;text-transform:uppercase}
.rx-sh__highlight{color:var(--rx-yellow)}
.rx-sh__play{padding:0;border:0;background:none;cursor:pointer;transition:scale 600ms ease-out}
.rx-sh__play[disabled]{cursor:default}
.rx-sh__play:not([disabled]):hover{scale:1.1}
.rx-sh__play svg{display:block;width:100%;height:100%;overflow:visible}
/* Läuft der Slider, sind die Videos selbst zu sehen; der Play-Knopf entfällt */
.rx-sh.is-running .rx-sh__play{display:none}
.rx-sh__caption{transition:opacity .28s ease}
.rx-sh__caption.is-swapping{opacity:0}
.rx-sh__bars{display:flex;gap:2.3077%}
.rx-sh__bar{position:relative;flex:1 1 0;height:4px;background:#ce1620}
.rx-sh__fill{position:absolute;inset:0;background:var(--rx-yellow);transform-origin:left center;transform:scaleX(0)}
/* Ohne Slider (kein Skript oder keine Videodatei): gelbe Markierung 50 px wie im Entwurf */
.rx-sh:not(.is-running) .rx-sh__bar:first-child .rx-sh__fill{right:auto;width:50px;transform:none}
.rx-sh.is-running .rx-sh__bar{cursor:pointer}
.rx-sh.is-running .rx-sh__bar::before{content:"";position:absolute;inset:-14px 0}
.rx-sh__bar:focus-visible{outline:2px solid #fff;outline-offset:4px}

@media(min-width:768px){
 .rx-sh{position:relative;height:calc(845 * var(--rx-media-unit,1px))}
 .rx-sh__play{position:absolute;left:calc(50% - 25px);top:calc(50% - 24.5px);width:50.627px;height:50.627px}
 .rx-sh__title{position:absolute;left:calc(13.8889% + 48px);top:calc(555 * var(--rx-media-unit,1px));margin:0;font-size:80px;line-height:normal;white-space:nowrap}
 .rx-sh__caption{position:absolute;left:13.8889%;top:calc(682 * var(--rx-media-unit,1px));display:flex;flex-direction:column;gap:4px;width:257px;padding:6px 0}
 .rx-sh__case{font-weight:700;font-size:20px;line-height:normal}
 .rx-sh__stats{font-size:16px;line-height:26px;white-space:nowrap}
 .rx-sh__bars{position:absolute;left:13.8889%;top:calc(781 * var(--rx-media-unit,1px));width:72.2222%}
}

@media(max-width:767px){
 /* Bild und Play-Knopf beziehen sich auf die ganze Sektion (allgemeine Hero-Regeln), Balken am unteren Rand */
 .rx-sh{position:static}
 .rx-sh__title{margin:0 0 20px;line-height:1.1}
 .rx-sh__case{font-weight:700;font-size:16px;line-height:24px}
 .rx-sh__stats{font-size:16px;line-height:24px}
 .rx-sh__bars{position:absolute;left:24px;right:24px;bottom:28px;z-index:2;gap:8px}
}
