#btn_to_top {
    display: none;
    position: fixed;
    right: 1.6rem;
    bottom: 2.5rem;
    border-radius: 50%;
    padding: .5rem;
    background: var(--bs-body-bg);
    z-index: 10;
    box-shadow: rgba(0, 0, 0, .2) 0 3px 3px -2px,
    rgba(0, 0, 0, .14) 0 3px 4px 0,
    rgba(0, 0, 0, .12) 0 1px 8px 0;
    opacity: 0;
    cursor: pointer;
}

#btn_to_top .topBtn {
    border-radius: 50%;
    height: 4.5rem;
    width: 4.5rem;
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#btn_to_top .topBtn:after {
    --svg-fill-color: var(--primary-color, #fff);
    content: "";
    display: block;
    width: 2.8rem;
    height: 2.8rem;
    background-image: var(--svg-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

/* hier dein SVG-Base64-Code */
#btn_to_top .topBtn:after {
    --svg-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMwIDMyIj48cGF0aCBkPSJNMjguNzgxIDE4cTAgLjkwNi0uNjg4IDEuNjI1bC0xLjMxMyAxLjMxM3EtLjY4OC42ODgtMS42MjUuNjg4LS45NjkgMC0xLjYyNS0uNjg4bC01LjI1LTUuMjE5djEyLjU2M3EwIC45MzgtLjY1NiAxLjUzMS0uNjg4LjU2My0xLjYyNS41NjNoLTIuMjgxcS0uOTM4IDAtMS42MjUtLjU2My0uNjU2LS41OTQtLjY1Ni0xLjUzMVYxNS43MTlsLTUuMjUgNS4yMTlxLS42NTYuNjg4LTEuNjI1LjY4OHQtMS41OTQtLjY4OGwtMS4zNDQtMS4zMTNRLjkzNiAxOC45MzcuOTM2IDE4dC42ODgtMS42MjVMMTMuMjQ5IDQuNzVxLjYyNS0uNjU2IDEuNTk0LS42NTZ0MS42MjUuNjU2bDExLjYyNSAxMS42MjVxLjY4OC42ODguNjg4IDEuNjI1Ii8+PC9zdmc+");
}

#btn_to_top:hover .topBtn:after {
    filter: brightness(1.4);
}

#btn_to_top.start {
    display: block;
    animation: btnToTopStart .3s cubic-bezier(.69, .08, .5, 1.31) forwards;
}
#btn_to_top.start .topBtn {
    animation: btnToTopStart .3s .3s cubic-bezier(.69, .08, .5, 1.31) forwards;
}
#btn_to_top.end {
    animation: btnToTopEnd .3s .3s cubic-bezier(.69, .08, .5, 1.31) backwards;
    pointer-events: none;
}
#btn_to_top.end .topBtn {
    animation: btnToTopEnd .3s cubic-bezier(.69, .08, .5, 1.31) backwards;
}

@keyframes btnToTopStart {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
@keyframes btnToTopEnd {
    from { transform: scale(1); opacity: 1; }
    to   { transform: scale(0); opacity: 0; }
}