/* @gula-code */
.scroll-up {
    width: 35px;
    height: 35px;
    position: fixed;
    background-color: var( --sitebgcolor );
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    bottom: 20px;
    right: 15px;
    z-index: 10;
	border-radius: 50%;
}
	@media (min-width: 768px) { 
		.scroll-up {
			width: 50px;
			height: 50px;
			position: fixed;
            background-color: var( --sitebgcolor );
			bottom: 40px;
			right: 15px;
			z-index: 10;
			border-radius: 50%;
		}
	}

.triangle {
    position: absolute;
    margin: auto;
    top: 53%;
    margin-top: -4px;
    left: 0;
    right: 0;
    width: 15px;
    height: 15px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    border-right: 2px solid #BABABA;
    border-bottom: 2px solid #BABABA;
}
    @media (min-width: 768px) { 
        .triangle {
            position: absolute;
            margin: auto;
            top: 50%;
            margin-top: -4px;
            left: 0;
            right: 0;
            width: 20px;
            height: 20px;
            -webkit-transform: rotate(-135deg);
            -moz-transform: rotate(-135deg);
            -o-transform: rotate(-135deg);
            -ms-transform: rotate(-135deg);
            transform: rotate(-135deg);
            border-right: 2px solid #BABABA;
            border-bottom: 2px solid #BABABA;
        }
    }

.scroll-up.ist-sichtbar {
    opacity: 1;
    visibility: visible;
}

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