/* ════════════════════════════════════════════════════════════════════
   backtotop.css
   Back-to-Top Button für MyKeyZ Creative Cave
   Einbinden in alle Pages: <link rel="stylesheet" href="assets/css/backtotop.css" />

   VERWENDUNG:
   - Erscheint automatisch nach 300px Scroll (via backtotop.js)
   - Klick scrollt sanft zurück nach oben (scroll-behavior: smooth in html)
   - Passend zum bestehenden Rot/Dunkel-Design
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   BACK-TO-TOP BUTTON
   Position: fixed unten rechts, über dem Toast (z-index: 150)
   ════════════════════════════════════════════════════════════════════ */
#back-to-top {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 150;                           /* Unter Toast (200), über allem anderen */

  /* ── Grösse & Form ── */
  width: 44px;
  height: 44px;
  border-radius: 12px;

  /* ── Rot-Design passend zur Seite ── */
  background: rgba(224, 48, 48, 0.12);    /* Zartes Rot-Füll */
  border: 1.5px solid rgba(224, 48, 48, 0.45);
  color: #e03030;                         /* Roter Pfeil */

  /* ── Layout: Pfeil zentrieren ── */
  display: flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;

  /* ── Versteckt bis JS class="visible" setzt ── */
  opacity: 0;
  pointer-events: none;                   /* Nicht klickbar wenn unsichtbar */
  transform: translateY(12px);           /* Leicht versetzt nach unten */

  /* ── Sanfte Ein/Ausblend-Animation ── */
  transition: opacity 0.3s ease, transform 0.3s ease,
              background 0.2s, border-color 0.2s;
}

/* ── Sichtbar wenn JS class="visible" setzt ── */
#back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ── Hover-Effekt ── */
#back-to-top:hover {
  background: rgba(224, 48, 48, 0.22);
  border-color: rgba(224, 48, 48, 0.75);
  transform: translateY(-2px);            /* Kleiner Hüpfer nach oben */
}

/* ── Aktiv (gedrückt) ── */
#back-to-top:active {
  transform: translateY(0);
}