/* Branchen-Slider (Startseite). Einheitliches Raster nach dem Figma-Entwurf „Energie“ (1440 px), für Karten links gespiegelt:
   Karten 49,17 % breit (708 px) und 494 px hoch, 40 px Abstand, die erste Karte oben bündig mit dem Titel (182 px).
   Kreis 84 px und Segmente 40 px neben den Karten, mittig zwischen den beiden Karten. Text 13 px unter dem Titel, Link 34 px darunter. */
.rx-band--branchen-slider{height:auto}
:where(.rx-bs) p{margin:0}

@media(min-width:768px){
 .rx-bs{--bs-card:49.1667%;position:relative;height:calc(1400 * var(--rx-media-unit,1px))}
 .rx-bs__bg{position:absolute;inset:0;overflow:hidden}
 .rx-bs__bg img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
 .rx-bs__bg--gespiegelt img{transform:scaleX(-1)}
 .rx-bs__tint{position:absolute;left:0;top:0;width:100%;height:calc(693 * var(--rx-media-unit,1px));background:linear-gradient(173.67deg,rgba(1,95,108,.64) 9.3633%,rgba(255,255,255,.64) 101.48%);mix-blend-mode:darken;pointer-events:none}

 /* Titel, Text, Link: Karten rechts an der Inhaltsspalte, Karten links rechts der Mitte */
 .rx-bs__intro{position:absolute;left:13.8889%;top:calc(182 * var(--rx-media-unit,1px));display:flex;flex-direction:column;align-items:flex-start}
 .rx-bs--links .rx-bs__intro{left:calc(50% + 105px)}
 .rx-bs__title{margin:0;max-width:507px;font-weight:700;font-size:80px;line-height:normal;text-transform:uppercase;color:#fff}
 .rx-bs__text{margin-top:13px;max-width:352px;font-size:18px;line-height:26px}
 .rx-bs__link{margin-top:34px}

 /* Kartenfenster: zwei Karten sichtbar, weitere liegen darunter verdeckt */
 .rx-bs__cards{position:absolute;top:calc(182 * var(--rx-media-unit,1px));right:0;width:var(--bs-card);height:calc(1028 * var(--rx-media-unit,1px));overflow:hidden}
 .rx-bs--links .rx-bs__cards{right:auto;left:0}
 .rx-bs__card{position:absolute;left:0;top:0;width:100%;height:calc(494 * var(--rx-media-unit,1px));transform:translateY(calc(var(--bs-i,0) * 534 * var(--rx-media-unit,1px)))}
 .rx-bs__photo{position:absolute;inset:0;overflow:hidden}
 .rx-bs__photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:scale 600ms ease-out}
 /* Hover-Zoom (Figma A13); !important, weil GSAP nach dem Einblenden inline „scale:none“ setzt */
 .rx-bs__card:hover .rx-bs__photo img{scale:1.05!important}
 .rx-bs__shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(217,217,217,0),rgba(0,0,0,.8));pointer-events:none}
 .rx-bs__play{position:absolute;left:calc(50% - 31.562px);top:calc(50% - 31.562px);width:63.124px;height:63.124px}
 /* Text unten links: einzeilige Titel stehen 354 px unter der Kartenoberkante, zweizeilige entsprechend höher */
 .rx-bs__info{position:absolute;left:40px;right:40px;bottom:44px}
 .rx-bs__card-title{font-weight:700;font-size:28px;line-height:normal}
 .rx-bs__meta{margin-top:10.8px;font-size:18px;line-height:26px}

 /* Gelber Kreis mit Zähler und Pfeil, daneben die Fortschrittssegmente */
 .rx-bs__next{position:absolute;top:calc(700 * var(--rx-media-unit,1px) - 100px);right:calc(var(--bs-card) + 84px);width:200px;height:200px;padding:0;border:0;border-radius:50%;background:var(--rx-yellow);color:#1c1c1c;font-family:inherit;cursor:pointer}
 .rx-bs--links .rx-bs__next{right:auto;left:calc(var(--bs-card) + 84px)}
 .rx-bs__next:focus-visible{outline:3px solid #fff;outline-offset:4px}
 .rx-bs__count{position:absolute;left:22px;top:68px;text-align:left}
 .rx-bs__number{display:block;font-weight:700;font-size:40px;line-height:normal;text-transform:uppercase}
 .rx-bs__total{display:block;font-weight:400;font-size:18px;line-height:26px}
 .rx-bs__arrow{position:absolute;left:129px;top:76px;width:48px;height:48px}
 .rx-bs__segs{position:absolute;top:calc(700 * var(--rx-media-unit,1px) - (2px + var(--bs-n,4) * 18px) / 2);right:calc(var(--bs-card) + 40px);width:4px}
 .rx-bs--links .rx-bs__segs{right:auto;left:calc(var(--bs-card) + 40px)}
 .rx-bs__seg{position:relative;display:block;width:4px;height:10px;margin-bottom:8px;border-radius:4px;background:#ce1620;overflow:hidden}
 .rx-bs__seg.is-active{height:20px}
 .rx-bs__seg b{position:absolute;inset:0;background:var(--rx-yellow);border-radius:inherit;transform-origin:top center;transform:scaleY(0)}
 .rx-bs__seg.is-active b{transform:scaleY(1)}
}

.rx-bs__play{padding:0;border:0;background:none;cursor:pointer;transition:scale 600ms ease-out}
.rx-bs__play[disabled]{cursor:default}
.rx-bs__play:not([disabled]):hover{scale:1.1}
.rx-bs__play svg{display:block;width:100%;height:100%;overflow:visible}

/* Handy: Hintergrundbild, Titel, Text und Link, darunter alle Karten untereinander (kein Durchschalten) */
@media(max-width:767px){
 .rx-bs{display:flex;flex-direction:column;gap:28px}
 .rx-bs__bg{position:relative;height:300px;overflow:hidden}
 .rx-bs__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .rx-bs__bg--gespiegelt img{transform:scaleX(-1)}
 .rx-bs__tint,.rx-bs__control,.rx-bs__shade{display:none}
 .rx-bs__title{margin:0;font-weight:700;font-size:30px;line-height:1.15;text-transform:uppercase}
 .rx-bs__text{margin-top:20px;font-size:16px;line-height:24px}
 .rx-bs__link{margin-top:20px}
 .rx-bs__cards{display:flex;flex-direction:column;gap:28px}
 .rx-bs__card{position:relative;transform:none!important}
 .rx-bs__photo{position:relative;height:300px;overflow:hidden}
 .rx-bs__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
 .rx-bs__play{position:absolute;left:calc(50% - 30px);top:120px;width:60px;height:60px}
 .rx-bs__info{margin-top:20px}
 .rx-bs__card-title{font-weight:700;font-size:16px;line-height:24px}
 .rx-bs__meta{margin-top:8px;font-size:16px;line-height:24px}
}
