/* scroll-fab.css — Basisklasse für den app-weiten Scroll-/Chat-FAB
 * Ausgelagert aus components.css (2026-06-18), damit schlanke Seiten
 * ohne combined-all.css (z. B. index.html) den FAB ebenfalls korrekt
 * stylen können. components.css importiert diese Datei weiterhin, daher
 * bleibt sie die EINZIGE Quelle (kein Duplikat / keine Drift).
 *
 * Genutzt von:
 *   • js/scroll-to-top.js  (#scroll-to-top-btn + #chat-fab-btn, dynamisch erstellt)
 *   • #btn-scroll-to-top   (calendar-pages, reagiert auf .grid-scroll)
 * Stack-Position: 152px über dem Chat-FAB (92px) am unteren rechten Rand.
 * Sichtbar via .is-visible Klasse (JS-gesteuert).
 */

.scroll-up-fab {
    position: fixed;
    bottom: 152px;
    right: 24px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--neutral-0);          /* WP-4 */
    border: 2px solid var(--neutral-800);  /* WP-4: #333 → --neutral-800 (#343a40) */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    z-index: 998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--neutral-800);             /* WP-4 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease,
                transform 0.12s ease, box-shadow 0.12s ease;
}

.scroll-up-fab.is-visible {
    opacity: 1;
    visibility: visible;
}

@media (hover: hover) and (pointer: fine) {
    .scroll-up-fab:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
    }
    .scroll-up-fab:active {
        transform: translateY(0);
    }
}

@media (prefers-color-scheme: dark) {
    .scroll-up-fab {
        background: var(--neutral-800);                        /* WP-4: #1f2937 exact */
        border-color: rgba(255, 255, 255, 0.55); /* sichtbar auf dunklem BG, analog zu Help-Button */
        color: var(--neutral-100);                                /* WP-4: #f3f4f6 → --neutral-100 (#f1f3f5) */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    }
}