/* Subtile, professionelle Hologramm-Bewegung für Kopf- und Fußlogo. */
.brand > img,
.footer .logo-mark {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  backface-visibility: visible;
  will-change: transform, filter;
  animation: kv-logo-hologram 9s cubic-bezier(.45, 0, .2, 1) infinite;
}

.brand > img {
  filter:
    drop-shadow(-4px 0 9px rgba(31, 120, 255, .38))
    drop-shadow(4px 0 9px rgba(255, 137, 34, .3));
}

.footer .logo-mark {
  filter:
    drop-shadow(-5px 0 12px rgba(31, 120, 255, .42))
    drop-shadow(5px 0 12px rgba(255, 137, 34, .34));
}

/* Größere Markenpräsenz in Navigation und Footer. */
html body .nav .brand > img {
  width: 64px !important;
  height: 64px !important;
  flex: 0 0 64px !important;
}

html body .footer .logo-mark {
  width: 115px !important;
  height: 115px !important;
  margin-bottom: 24px !important;
}

.brand:hover > img,
.brand:focus-visible > img {
  animation-duration: 3.8s;
}

@keyframes kv-logo-hologram {
  0%, 100% {
    transform: perspective(760px) rotateY(-10deg) rotateX(1deg) translateZ(0);
    opacity: .96;
  }
  25% {
    transform: perspective(760px) rotateY(0deg) rotateX(-1deg) translateZ(4px);
    opacity: 1;
  }
  50% {
    transform: perspective(760px) rotateY(10deg) rotateX(1deg) translateZ(0);
    opacity: .97;
  }
  75% {
    transform: perspective(760px) rotateY(0deg) rotateX(-1deg) translateZ(4px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand > img,
  .footer .logo-mark {
    animation: none !important;
    transform: none !important;
    will-change: auto;
  }
}

@media (max-width: 920px) {
  html body .nav .brand > img {
    width: 52px !important;
    height: 52px !important;
    flex: 0 0 52px !important;
  }

  html body .footer .logo-mark {
    width: 90px !important;
    height: 90px !important;
  }
}