/* Back to top button using global CSS variables */

/* Button */
#btt{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 9999;

  width: 46px;
  height: 46px;
  border-radius: 14px;

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

  background: var(--c-primary);
  color: var(--c-bg);

  box-shadow: 0 10px 24px var(--c-muted);
  border: 1px solid rgba(255,255,255,.14);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}

#btt.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#btt:hover{
  transform: translateY(-2px);
}

/* SVG arrow */
#btt svg{
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor; /* nimmt Arrow-Farbe aus color */
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  #btt{
    transition: none;
  }
}