:root {
    --pr-size: 5em;         /* Durchmesser */
    --pr-thickness: 8px;      /* Linienbreite */
    --pr-inner: #E0B66B;      /* Innenfläche (Beige) */
    --pr-stroke: #b54c56;     /* Ringfarbe (Weiß) */
}

#progress-ring.pr {
    position: fixed;          /* sticky zur Viewport-Ecke */
    right: 24px;
    bottom: 24px;
    width: var(--pr-size);
    height: var(--pr-size);
    display: grid;
    place-items: center;
    z-index: 9999;
    user-select: none;
}

#progress-ring .pr__svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Start oben (12 Uhr) */
}

#progress-ring .pr__bg {
    fill: var(--pr-inner);
    stroke: #ffffff;
    stroke-width: var(--pr-thickness);
}

#progress-ring .pr__fg {
    fill: transparent;
    stroke: var(--pr-stroke);
    stroke-width: var(--pr-thickness);
    transform-origin: 50% 50%;
    transition: stroke-dashoffset .2s linear;
}

#progress-ring .pr__arrow {
    position:absolute;
    display:grid;
    place-items:center;
    width: calc(var(--pr-size)*0.5);
    height: calc(var(--pr-size)*0.5);
    pointer-events:none;
}
.pr__arrow .pr__icon { width:120%; height:120%; margin-top: -0.5em;}
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce){
    #progress-ring .pr__fg { transition: none; }
}
@media (max-width: 650px){
    :root {
        --pr-size: 4em;
    }
}