/* Streifen Reveal */
.sr-wrap {
	position: relative;
	width: 100%;
	height: calc(var(--sr-h, 100vh) + var(--sr-scroll, 200vh));
}

.streifen-reveal.sr-pinned {
	position: sticky;
	top: var(--sr-top, 0px);
	height: var(--sr-h, 100vh);
	overflow: hidden;
	box-sizing: border-box;
}

.streifen-reveal.sr-zentriert {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 2rem;
	box-sizing: border-box;
	min-height: var(--sr-h, 100vh);
}

.sr-layer {
	position: absolute;
	inset: 0;
	z-index: 9999;
	overflow: hidden;
	pointer-events: none;
}

.sr-layer.sr-aktiv {
	pointer-events: auto;
}

.sr-stripe {
	position: absolute;
	overflow: hidden;
	will-change: transform;
	backface-visibility: hidden;
}

/* Motiv-Ebene: Kopie des Motivs in voller Containergröße, pro Streifen passend verschoben */
.sr-motiv-box {
	position: absolute;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-sizing: border-box;
	padding: 2rem;
	pointer-events: none;
}

/* Original bleibt für Screenreader lesbar, ist aber optisch ausgeblendet (liegt ja auf den Streifen) */
.streifen-reveal.sr-pinned .sr-motiv-orig {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0 !important;
	padding: 0 !important;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}