/* ============================================================
   FLOATING-NAV.CSS
   (i)-Button immer sichtbar, scrollTop-Button überlagert ihn nur,
   wenn der Footer im Viewport ist (siehe floating-nav.js).
   Beide Buttons liegen exakt übereinander, Sichtbarkeit wird
   ausschließlich über .is-hidden gesteuert.
============================================================ */

.floating-btn {
  position: fixed;
  right: 2.5rem;
  bottom: 2.5rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--green);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 900;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  opacity: 1;
  transform: scale(1);
  transition: opacity var(--trans), transform var(--trans), background-color var(--trans);
  text-decoration: none;
}

.floating-btn:hover {
  background-color: var(--green-light);
}

.floating-btn.is-hidden {
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
}

.floating-btn .fa-info {
  color: var(--gray-darker);
  font-size: 1.2rem;
}

#scrollTop svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--gray-darker);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Beide Buttons an derselben Stelle übereinander - #scrollTop liegt
   per DOM-Reihenfolge oben, ist aber default über .is-hidden weg */
#scrollTop {
  position: fixed;
}