/* Gemeinsamer Seiten-Hero (Energie, Über uns, Case, Webinare, Jobs, Kontakt, Social Media).
   Maße aus Figma (1440 px): Titel 80 px bei 460 px von oben, Text 10 px darunter, Button 32 px darunter.
   Auf dem Handy gelten die allgemeinen Hero-Regeln aus responsive.css (.rx-band--hero), wie bisher. */
.rx-band--seiten-hero{height:auto}
.rx-hero__photo{position:absolute;inset:0;overflow:hidden}
.rx-hero__photo img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.rx-hero__title,.rx-hero__big{text-transform:uppercase}
.rx-hero__big{font-weight:900}
.rx-hero__highlight{color:var(--rx-yellow)}
/* Figma: Text mit 80 % Deckkraft; als Farbe statt opacity, damit die Einblend-Animation (endet bei opacity 1) sie nicht aufhebt */
.rx-hero__text{color:rgb(255 255 255 / .8)}
.rx-hero__play{padding:0;border:0;background:none;cursor:pointer}
.rx-hero__play[disabled]{cursor:default}
.rx-hero__play img{display:block;width:100%;height:100%}

@media(min-width:768px){
 .rx-hero{position:relative;box-sizing:border-box;min-height:var(--hero-h,845px);padding:var(--hero-top,460px) 0 0 200px}

 /* Abdunklung wie im Figma-Export: weich gezeichnete Verläufe, multipliziert */
 .rx-hero__shade{position:absolute;left:0;mix-blend-mode:multiply;filter:blur(5.05px);pointer-events:none}
 .rx-hero__shade--left{top:calc(246 * var(--rx-media-unit,1px));width:729px;height:calc(599 * var(--rx-media-unit,1px));background:linear-gradient(to bottom,#fff,#525252)}
 .rx-hero__shade--top{top:0;width:100%;height:calc(116 * var(--rx-media-unit,1px));background:linear-gradient(to bottom,#525252,#fff);opacity:.84}

 .rx-hero__content{position:relative;display:flex;flex-direction:column;align-items:flex-start}
 .rx-hero__title{margin:0;max-width:900px;font-weight:700;font-size:80px;line-height:normal;text-transform:uppercase}
 .rx-hero__text{margin:10px 0 0;max-width:363px;font-size:18px;line-height:26px}
 .rx-hero--text-breit .rx-hero__text{max-width:430px}
 .rx-hero__button{margin-top:32px}

 /* Play-Knopf in der Bildmitte */
 .rx-hero__play{position:absolute;left:calc(50% - 64.283px);top:359px;width:128.566px;height:128.566px}

 /* Variante: großer zentrierter Titel (Über uns) */
 .rx-hero--zentriert{padding-left:0}
 .rx-hero--zentriert .rx-hero__content{align-items:center}
 .rx-hero__big{width:967px;margin:0;text-align:center;font-size:128px;line-height:normal}
}

/* Breite Fenster: Text an der Inhaltsspalte, Abdunklung links wächst mit */
@media(min-width:1441px){
 .rx-hero{padding-left:13.8889%}
 .rx-hero--zentriert{padding-left:0}
 .rx-hero__shade--left{width:50.625%}
 .rx-hero__play{top:calc(50% - 64.283px)}
}

@media(max-width:767px){
 /* Foto und Play-Knopf beziehen sich auf die ganze Sektion (allgemeine Hero-Regeln) */
 .rx-hero{position:static}
 .rx-hero__shade{display:none}
 /* wie bisher: Titel 44 px mit 20 px Abstand, Text 16/24 px mit 10 px Abstand (allgemeine Hero-Regeln) */
 .rx-hero__title,.rx-hero__big{margin:0 0 20px;line-height:1.1}
 .rx-hero__text{margin:0 0 10px;font-weight:400;font-size:16px;line-height:24px}
 .rx-hero__button{margin-top:0}
}