/* R4X v2167 - Zentrale interaction stability + stronger compass hover */

/* The generic .cockpit-card:hover shorthand removed all layered hero
   backgrounds. Preserve the recommendation background and add only a
   controlled, non-flickering highlight. */
body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero{
  isolation:isolate;
  contain:paint;
  transition:border-color .18s ease;
}
body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background:rgba(255,255,255,.028);
  opacity:0;
  transition:opacity .18s ease;
}
body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero > *:not(.cockpit-next__compass){
  position:relative;
  z-index:1;
}
body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero > .cockpit-next__compass{
  z-index:1;
}
body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero::before{
  z-index:2;
}

@media (hover:hover) and (pointer:fine){
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero:hover{
    border-color:rgba(212,175,55,.52);
  }
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero:hover::after{
    opacity:1;
  }
  body.cockpit[data-page="zentrale"] .cockpit-next__compass{
    transition:opacity .28s ease, transform .68s cubic-bezier(.18,.82,.2,1);
    transform-origin:50% 50%;
  }
  body.cockpit[data-page="zentrale"] .cockpit-next--hero:hover .cockpit-next__compass{
    opacity:1;
  }
}

/* Touch devices must not keep a sticky desktop hover state. */
@media (hover:none), (pointer:coarse){
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero:hover{
    border-color:rgba(212,175,55,.38);
  }
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero:hover::after{
    opacity:0;
  }
}

@media (prefers-reduced-motion:reduce){
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero,
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero::after,
  body.cockpit[data-page="zentrale"] .cockpit-next__compass{
    transition:none !important;
  }
}

/* R4X v2168 - Zentrale performance layer */
@supports (content-visibility:auto){
  body.cockpit[data-page="zentrale"] .cockpit-cluster:not(.cockpit-cluster--start){
    content-visibility:auto;
    contain-intrinsic-size:auto 620px;
  }
  body.cockpit[data-page="zentrale"] #r4x-cockpit-footer-mount{
    content-visibility:auto;
    contain-intrinsic-size:auto 360px;
  }
}

/* Fixed translucent layers are expensive during viewport resizing. An almost
   opaque fill looks the same in this dark UI but avoids repeated backdrop blur. */
body.cockpit[data-page="zentrale"] .cockpit-nav,
body.cockpit[data-page="zentrale"] .cockpit-tab,
body.cockpit[data-page="zentrale"] .r4x-mobile-nav{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background-color:rgba(10,10,12,.985) !important;
}

/* Recommendation hover stays on the compositor: do not rebuild the layered
   gradient background and do not apply a live SVG filter. */
@media (hover:hover) and (pointer:fine){
  body.cockpit[data-page="zentrale"] .cockpit-card.cockpit-next--hero:hover{
    border-color:rgba(212,175,55,.52);
  }
  body.cockpit[data-page="zentrale"] .cockpit-next__compass{
    backface-visibility:hidden;
    transform:translateZ(0);
    filter:none !important;
  }
  body.cockpit[data-page="zentrale"] .cockpit-next--hero:hover .cockpit-next__compass{
    transform:translateZ(0) rotate(9deg) scale(1.055);
    filter:none !important;
  }
}