/* back-to-top.css  -  Modul: Back-to-Top-Button (Styling)
   Eigenstaendiges Feature-Modul, per system/config/modules.php zuschaltbar.
   Laedt nach main.css und liest die globalen :root-Variablen (--edge, --gnoise). */
/* ---- Back-to-Top ---- */
.totop { position: fixed; right: calc(var(--edge) + 18px); bottom: 18px; z-index: 90; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; background: var(--gnoise), rgba(28,31,40,.48); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.35); border-radius: 12px; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .3s, background-color .2s; pointer-events: none; }
.totop.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.totop:hover { background: var(--gnoise), rgba(28,31,40,.48); }
/* Der Chevron hebt beim Hover leicht an und nimmt damit die Richtung vorweg, in
   die der Knopf die Seite schickt. Bewegt wird das Icon, nie der Knopf: der
   traegt sein eigenes translateY fuer das Einblenden, ein zweites Transform auf
   derselben Box wuerde es ueberschreiben. */
.totop svg { width: 18px; height: 18px; stroke: #fff; transition: transform .3s cubic-bezier(.16,1,.3,1); }
@media (hover: hover) and (pointer: fine) { .totop:hover svg { transform: translateY(-3px); } }
.totop:focus-visible svg { transform: translateY(-3px); }
@media (min-width: 768px) { .totop { right: calc(var(--edge) + 40px); bottom: 40px; } }
html.rmo .totop { transition: opacity .3s; }
html.rmo .totop svg { transition: none; }
html.rmo .totop:hover svg, html.rmo .totop:focus-visible svg { transform: none; }