/* NEXUS Startseite – Erweiterung (hx): X-Marke dezent im Hero-Hintergrund.
   Der vorhandene Lichtstrahl bildet den Schrägstrich, die beiden Glasflächen ergänzen ihn zum X. */
.hx-x{position:absolute;left:73%;top:50%;width:clamp(560px,66vw,980px);aspect-ratio:1/1;transform:translate(-50%,-50%) rotate(4.8deg);pointer-events:none}
.hx-x svg{display:block;width:100%;height:100%;overflow:visible}
.hx-sh polygon{fill:url(#hxGlass);stroke:rgba(170,205,255,.13);stroke-width:1.6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Einblenden: der Hero ist beim Laden sichtbar, daher reine CSS-Animation. Die Glasflächen gleiten von außen an den Strahl heran */
.hx-pos-a{animation:hxDriftA 14s ease-in-out 3.4s infinite}
.hx-pos-b{animation:hxDriftB 14s ease-in-out 3.4s infinite}
.hx-sh-a{animation:hxInA 1.9s cubic-bezier(.2,.7,.2,1) 1.2s both}
.hx-sh-b{animation:hxInB 1.9s cubic-bezier(.2,.7,.2,1) 1.2s both}
@keyframes hxInA{from{opacity:0;transform:translate(-46px,-46px)}}
@keyframes hxInB{from{opacity:0;transform:translate(46px,46px)}}
@keyframes hxDriftA{50%{transform:translate(-9px,-9px)}}
@keyframes hxDriftB{50%{transform:translate(9px,9px)}}
@media(max-width:900px){.hx-x{width:clamp(460px,120vw,720px)}}
@media(max-width:560px){.hx-x{opacity:.65}}
@media(prefers-reduced-motion:reduce){
  .hx-x *{animation:none!important}
}