body .Scrollgeschwindigkeit2 { --speed: .2; }
body .Scrollgeschwindigkeit3 { --speed: .3; }
body .Scrollgeschwindigkeit4 { --speed: .4; }
body .Scrollgeschwindigkeit5 { --speed: .5; }
.Scrollanimation.BildLangsamScrollen {
	--speed: .1;
	overflow: hidden;
	&.BildAusrichtungLinks figure img.clone { object-position: left; }
	&.BildAusrichtungRechts figure img.clone { object-position: right; }
	&.BildNichtBegrenzen figure { 
		overflow: visible; 
		img.clone { left: 0; object-fit: contain; }
	}
	figure { 
		position: relative;
		overflow: hidden;
		img, video {
			&:not(.clone) {
				position: relative;
				opacity: 0;
			}
			&.clone {
				position: absolute;
				top: 0;
				left: 0;
				transform: translate3d(0px, 
					calc( 
						min( 
							var(--scrolled-pixels, 0),
							( var(--vh, 0) + var(--scrolled-pixels, 0) ) - var(--top, 0)
						) *
						var(--speed, 0) *
						1px 
					)
					, 0px)
				;
				margin-top: 
					calc( 
						min( 
							var(--top, 0),
							var(--vh, 0)
						) * 
						var(--speed, 0) *
						-1px 
					)
				;
				min-height: 100%;
				height:
					calc(
						(
							min( var(--h, 0), var(--vw) ) +
							(
								min( 
									var(--top, 0),
									var(--vh, 0)
								) * 
								var(--speed, 0)
							)
						) *
						1px
					)
				;
				/* margin-bottom: 
					calc(
						(
							( 
								( 
									var(--vh, 0)
								) *
								var(--speed, 0) *
								.2
							)
						) *
						1px 
					)
				; */
				object-fit: cover;
			}
		}
	}
	/* &.elementInTopViewPort img {
		margin-bottom: 0;
	} */
}

.mod_article .Scrollanimation.BildLangsamScrollenNachRechts {
	--speed: 0.05;
	overflow: hidden;
	figure { 
		position: relative;
		overflow: hidden;
		img {
			&:not(.clone) {
				position: relative;
				opacity: 0;
			}
			&.clone {
				position: absolute;
				top: 0;
				display: block;
				transform: translate3d(
					calc( 
						min( 
							var(--scrolled-pixels, 0),
							( var(--vh, 0) + var(--scrolled-pixels, 0) ) - var(--top, 0) 
						) *
						var(--speed, 0) * 
						-1px
					) 
					, 0px, 0px)
				;
				width: 
					calc(
						(
							min( var(--w, 0), var(--vw) ) +
							( var(--vh, 0) * var(--speed, 0) ) +
							( var(--h, 0) * var(--speed, 0) )
						) *
						1px
					)
				;
				max-width: none;
				height: calc( var(--h) * 1px );
				object-fit: cover;
			}
		}
	}
	/* &.volleBreite figure {
		width: 100vw;
		img {
			width:
				calc(
					(
						var(--vw) +
						( var(--vh, 0) * var(--speed, 0) ) +
						( var(--h, 0) * var(--speed, 0) )
					) *
					1px
				)
			;
		}
	} */
}
/************************************************************* scroll_progress_bar *************************************************************/
body::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 10px;
    width: 5px;
    z-index: 3;
    background: linear-gradient(45deg, var(--color_1, #999) -22%, transparent);
    height: calc(var(--scrolled-percent, 0)* 1%);
    border-radius: 0 0 20px 20px;
	@media(max-width:1023px){ left: 2px; }
}
body::before {
	content: '';
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	height: 5px;
	z-index: 4;
	background: var(--color_1, #999);
	width: calc( var(--scrolled-percent, 0) * 1% );
}