/*
 * MatchTogether · „Nach oben“-Button (eingebunden über partials/page-footer.php)
 *
 * Rechts unten mit Abstand zu den Rändern; sitzt automatisch über fixierten
 * Leisten am unteren Rand (--to-top-lift, gesetzt von assets/js/to-top.js).
 * Goldener Ring = Scrollfortschritt, im Uhrzeigersinn ab 12 Uhr.
 * Eigene Werte statt der allgemeinen button-Regel aus shared.css.
 */
.to-top {
    position: fixed;
    right: calc(16px + env(safe-area-inset-right));
    bottom: calc(16px + var(--to-top-lift, 0px) + env(safe-area-inset-bottom));
    z-index: 1050; /* über Seitenleiste (110) und „Eigene Medien“ (1000), unter Modals (2000+) */

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(16, 40, 59, .55);
    color: rgba(250, 250, 248, .9);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;

    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility 0s linear .35s,
        bottom .25s ease;
}

.to-top[hidden] {
    display: none;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition:
        opacity .35s ease,
        transform .35s ease,
        visibility 0s,
        bottom .25s ease;
}

.to-top i {
    font-size: 1.55rem;
    line-height: 1;
}

.to-top-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start bei 12 Uhr */
    pointer-events: none;
}

.to-top-ring circle {
    fill: none;
    stroke: #FFD34A;
    stroke-width: 3;
    stroke-dasharray: 100;
    stroke-dashoffset: 100; /* 0 % – unsichtbar */
}

.to-top:hover {
    background: rgba(16, 40, 59, .75);
    color: #FAFAF8;
}

.to-top:focus-visible {
    outline: 2px solid #FFD34A;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .to-top,
    .to-top.is-visible {
        transition: none;
    }
}