/**
 * HIT Elementor Magic – "Nach oben"-Button
 *
 * Alle einstellbaren Werte kommen als CSS-Variablen aus den Plugin-
 * Einstellungen; die Werte hier sind nur die Rückfallebene.
 */

.hem-scrolltop {
    --hem-st-size: 48px;
    --hem-st-radius: 50%;
    --hem-st-bottom: 24px;
    --hem-st-side: 24px;
    --hem-st-bg: #1d2327;
    --hem-st-color: #ffffff;
    --hem-st-bg-hover: #2271b1;
    --hem-st-color-hover: #ffffff;
    --hem-st-border-color: transparent;
    --hem-st-border-width: 0;
    --hem-st-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

    position: fixed;
    z-index: 9990;
    bottom: var(--hem-st-bottom);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-width: var(--hem-st-size);
    height: var(--hem-st-size);
    padding: 0;
    border: var(--hem-st-border-width) solid var(--hem-st-border-color);
    border-radius: var(--hem-st-radius);
    background: var(--hem-st-bg);
    color: var(--hem-st-color);
    box-shadow: var(--hem-st-shadow);
    cursor: pointer;
    font: inherit;
    line-height: 1;

    /* Erst per JavaScript eingeblendet */
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease,
                background-color 0.25s ease, color 0.25s ease;
}

.hem-scrolltop--right {
    right: var(--hem-st-side);
}

.hem-scrolltop--left {
    left: var(--hem-st-side);
}

/* Sichtbar, sobald weit genug gescrollt wurde */
.hem-scrolltop.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.hem-scrolltop:hover,
.hem-scrolltop:focus-visible {
    background: var(--hem-st-bg-hover);
    color: var(--hem-st-color-hover);
}

.hem-scrolltop:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.hem-scrolltop__icon {
    width: 55%;
    height: 55%;
    max-width: 26px;
    max-height: 26px;
}

/* Mit Beschriftung wird aus dem Kreis eine Pille */
.hem-scrolltop__text {
    padding-right: 16px;
    font-size: 14px;
    white-space: nowrap;
}

.hem-scrolltop__text + .hem-scrolltop__icon,
.hem-scrolltop:has(.hem-scrolltop__text) .hem-scrolltop__icon {
    margin-left: 14px;
}

.hem-scrolltop--desktop-only {
    display: none;
}

@media (min-width: 783px) {
    .hem-scrolltop--desktop-only {
        display: inline-flex;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hem-scrolltop {
        transition: opacity 0.01ms;
        transform: none;
    }

    .hem-scrolltop.is-visible {
        transform: none;
    }
}