/* ===================================
   Scroll-Button (hoch/runter)
   Ein Knopf unten rechts, der die Richtung wechselt: in der oberen
   Seitenhaelfte springt er ans Ende, in der unteren an den Anfang.

   Bewusst mit Fallback-Werten fuer alle Farben (var(--x, #hex)): die Datei
   laeuft auch im Portal und im Admin-Dashboard, und dort sind die
   --jima-*-Variablen aus global-nav-footer.css nicht definiert.
   =================================== */

.jima-scroll {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 900; /* unter Modals und Overlays (>= 1000), ueber dem Inhalt */

    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--jima-gold, #D4AF37);
    border-radius: 50%;

    background: var(--jima-brown, #2A2520);
    color: var(--jima-gold, #D4AF37);
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}

.jima-scroll:hover {
    background: var(--jima-gold, #D4AF37);
    color: var(--jima-brown, #2A2520);
    transform: translateY(-2px);
}

/* Nur bei Tastaturnavigation einen Ring zeigen, nicht bei jedem Mausklick. */
.jima-scroll:focus-visible {
    outline: 2px solid var(--jima-gold, #D4AF37);
    outline-offset: 3px;
}

.jima-scroll svg {
    width: 20px;
    height: 20px;
    display: block;
    transition: transform 0.25s ease;
}

/* Richtungswechsel: dasselbe Symbol gedreht, damit die Drehung sichtbar
   macht, dass sich das Ziel geaendert hat. */
.jima-scroll[data-richtung="hoch"] svg {
    transform: rotate(180deg);
}

/* Ausgeblendet, solange die Seite zu kurz zum Scrollen ist. visibility statt
   display, damit die Ein- und Ausblendung weich laeuft und der Knopf fuer
   die Tastatur wirklich weg ist. */
.jima-scroll[hidden] {
    display: none;
}

.jima-scroll.is-versteckt {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Das Cookie-Banner (#cookieConsentBanner, z-index 99999, rund 220px hoch)
   liegt ueber dem Knopf und faengt dessen Klicks ab — ein Klick auf die
   Knopfposition traf in Wirklichkeit "Alle akzeptieren". Solange das Banner
   steht, tritt der Knopf zurueck; es wird per .remove() aus dem DOM geworfen,
   danach greift die Regel nicht mehr.

   Gleiches Muster wie in js/site-preferences.js, das das Banner seinerseits
   per body:has(.modal-overlay) ausblendet — deshalb hier kein eigener
   JS-Mechanismus. */
body:has(#cookieConsentBanner) .jima-scroll {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Im Kundenportal sitzt .portal-toast auf bottom:24px/right:24px — also
   genau hier. Der Knopf rueckt hoch, damit die Meldung darunter einfahren
   kann. Im Admin-Dashboard stehen die Toasts oben rechts, dort passt es. */
body.portal-body .jima-scroll {
    bottom: 96px;
}

@media (max-width: 640px) {
    .jima-scroll {
        right: 16px;
        bottom: 16px;
        width: 44px;   /* nicht kleiner: 44px ist das Mindestmass fuer
                          Tippziele (WCAG 2.5.8) */
        height: 44px;
    }

    body.portal-body .jima-scroll {
        bottom: 88px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jima-scroll,
    .jima-scroll svg {
        transition: none;
    }

    .jima-scroll:hover {
        transform: none;
    }
}