/* scroll-next-fab.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   Runder Pfeil-Knopf unten in der Mitte (js/scroll-next-fab.js). Mit <html data-fab="pfeil"> werden außerdem
   der Hilfe-Knopf („?", #help-button) und der Chat-Knopf (#chat-fab-btn) ausgeblendet.
   Farben aus der aktiven Farbwelt (--accent, --text-on-accent), kein Rahmen. Mindestgröße 48 px (Touch).
   Gesehen im Mockup: mockups/mockup-kirsch-pfeil.html, mockup-sw-pfeil.html */

:root[data-fab="pfeil"] #help-button,
:root[data-fab="pfeil"] #chat-fab-btn,
:root[data-fab="pfeil"] #chat-fab-badge { display: none; }

.scroll-next-fab { display: none; }
:root[data-fab="pfeil"] .scroll-next-fab { display: flex; }
.scroll-next-fab {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4);
    cursor: pointer;
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease, transform .15s ease, background .15s ease;
}
.scroll-next-fab.is-visible { opacity: 1; visibility: visible; }
.scroll-next-fab:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
    .scroll-next-fab:hover { background: var(--accent-hover); transform: translateX(-50%) translateY(-2px); }
    .scroll-next-fab:active { background: var(--accent-active); transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-next-fab { transition: none; }
}