/* ========================================
   BACK TO TOP BUTTON
======================================== */

.back-to-top {

  position: fixed;

  right: 25px;
  bottom: 25px;

  z-index: 9999;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,0.15);

  border-radius: 2%;

  background: rgba(25,27,32,0.85);

  backdrop-filter: blur(10px);

  color: #fff;

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

  transform: translateY(15px);

  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease;

}


/* Button sichtbar */

.back-to-top.show {

  opacity: 1;

  visibility: visible;

  transform: translateY(0);

}


/* Pfeil */

.back-to-top span {

  display: block;

  font-size: 18px;

  line-height: 1;

  transition:
    transform 0.3s ease;

}


/* Hover */

.back-to-top:hover {

  background: #dc2626;

  border-color: #dc2626;

  box-shadow:
    0 8px 25px rgba(220,38,38,0.3);

}


.back-to-top:hover span {

  transform: translateY(-3px);

}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 600px) {

  .back-to-top {

    right: 16px;
    bottom: 16px;

    width: 44px;
    height: 44px;

  }

}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .back-to-top,
  .back-to-top span {

    transition: none;

  }

}