/**
 * Sticky "Nach oben"-Button, unten rechts.
 *
 * Sichtbarkeit steuert assets/js/zaeske-back-to-top.js ueber die Klasse
 * 'is-visible'. Ohne JS bleibt der Button unsichtbar - er waere dann ohnehin
 * ohne Funktion.
 *
 * Die Masse haengen an Custom Properties, damit sie sich ueber "Zusaetzliches
 * CSS" anpassen lassen, ohne diese Datei anzufassen:
 *
 *   .zsk-top { --zsk-top-size: 48px; --zsk-top-inset: 20px; }
 */

.zsk-top {
  --zsk-top-size: 56px;
  --zsk-top-inset: 32px;
  --zsk-top-bg: #e6007e;
  --zsk-top-fg: #ffffff;
  --zsk-top-dur: 420ms;

  /* Sanft startendes, weich auslaufendes Ein-/Ausblenden. */
  --zsk-top-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  position: fixed;
  right: var(--zsk-top-inset);
  bottom: var(--zsk-top-inset);

  /* Unter dem Intro-Overlay (z-index 2147483000), ueber dem Seiteninhalt. */
  z-index: 900;

  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--zsk-top-size);
  height: var(--zsk-top-size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--zsk-top-bg);
  color: var(--zsk-top-fg);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;

  /* Ausgangszustand: unsichtbar, leicht nach unten versetzt und minimal
     kleiner - daraus wird beim Einblenden eine kurze Aufwaertsbewegung. */
  opacity: 0;
  transform: translateY(12px) scale(0.9);

  /* visibility ohne eigene Dauer, aber mit Verzoegerung: waehrend des
     Ausblendens bleibt der Button sichtbar, danach ist er komplett weg -
     also weder klickbar noch per Tabulator erreichbar. */
  visibility: hidden;
  transition:
    opacity var(--zsk-top-dur) var(--zsk-top-ease),
    transform var(--zsk-top-dur) var(--zsk-top-ease),
    visibility 0s linear var(--zsk-top-dur);
}

.zsk-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  transition-delay: 0s, 0s, 0s;
}

.zsk-top__icon {
  width: 100%;
  height: 100%;
  display: block;
}

/* Tastaturbedienung bekommt dieselbe Rueckmeldung wie die Maus. */
.zsk-top.is-visible:hover,
.zsk-top.is-visible:focus-visible {
  transform: translateY(0) scale(1.08);
}

.zsk-top:focus-visible {
  outline: 2px solid #0e0e0e;
  outline-offset: 3px;
}

/* Waehrend der Intro-Animation ist die Seite gesperrt; der Button hat dort
   nichts zu suchen, auch wenn die Position wiederhergestellt wurde. */
:root.zsk-intro-on .zsk-top {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 767px) {
  .zsk-top {
    --zsk-top-size: 48px;
    --zsk-top-inset: 18px;
  }
}

/* Keine Bewegung fuer alle, die darauf verzichten wollen: nur ein- und
   ausblenden, kein Versatz, keine Skalierung. Der Sprung nach oben laeuft
   dann ebenfalls ohne Scroll-Animation (siehe JS). */
@media (prefers-reduced-motion: reduce) {
  .zsk-top,
  .zsk-top.is-visible,
  .zsk-top.is-visible:hover,
  .zsk-top.is-visible:focus-visible {
    transform: none;
  }

  .zsk-top {
    transition:
      opacity var(--zsk-top-dur) ease,
      visibility 0s linear var(--zsk-top-dur);
  }
}

@media print {
  .zsk-top {
    display: none;
  }
}