/* Back-to-Top-Button — WCAG 2.2 AA konform.
   - 2.5.5 Target Size: 48x48 px (min 24)
   - 1.4.3 Kontrast Icon: 9.68:1 (#fff auf #164384)
   - 1.4.11 Non-Text Kontrast Rand: 2-px-Weissring, 16.4:1 gegen Footer #0b1f3f,
     >=21:1 gegen weisses Body
   - 2.4.7 Focus Visible: gelb-blauer Doppelring
   - 3.2.5 Change on Request: erscheint durch Scrollen, verschiebt nichts.
*/
.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--blue, #164384);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Weisser 2-px-Ring als sichtbare Buttonkante gegen dunkle Hintergruende (WCAG 1.4.11). */
  box-shadow: 0 0 0 2px #fff, 0 6px 20px rgba(15,49,104,.25);
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--blue-dark, #0f3168);
  transform: translateY(-2px);
}

.back-to-top:focus-visible {
  outline: 3px solid var(--blue, #164384);
  outline-offset: 3px;
  /* Fokus: weisser Ring bleibt fuer die Kante erhalten, gelber Ring fuer Fokussichtbarkeit. */
  box-shadow: 0 0 0 2px #fff, 0 0 0 8px var(--yellow, #FBB809), 0 6px 20px rgba(15,49,104,.25);
}

.back-to-top svg { display: block; }

/* Reduced Motion: kein Fade/Slide, sofort da wenn sichtbar. */
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: none; transform: none; }
  .back-to-top.is-visible { transform: none; }
  .back-to-top:hover,
  .back-to-top:focus-visible { transform: none; }
}

/* Kleinere Screens: Button naeher an Kante, gleiche Groesse (Target Size bleibt >= 44). */
@media (max-width: 480px) {
  .back-to-top {
    right: 16px;
    bottom: 16px;
  }
}