.fx-karte { position:relative; isolation:isolate; overflow:hidden; }
.fx-karte:hover { transform:none; box-shadow:0 1px 2px rgba(var(--schatten-rgb),.04),0 10px 34px -12px rgba(var(--schatten-rgb),.13); }
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .fx-karte::before {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
    border-radius:inherit; opacity:0; transition:opacity 240ms var(--zug);
    background-image:linear-gradient(rgba(var(--tinte-rgb),.07) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--tinte-rgb),.07) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(180px circle at var(--fx-card-x,50%) var(--fx-card-y,50%),black,transparent);
  }
  .fx-karte::after {
    content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit;
    background:radial-gradient(150px circle at var(--fx-card-x,50%) var(--fx-card-y,50%),var(--gelb),transparent);
    opacity:0; transition:opacity 240ms var(--zug);
  }
  .fx-karte.fx-grid-aktiv::before { opacity:1; }
  .fx-karte.fx-grid-aktiv::after { opacity:.075; }
}