/* Volle Bildschirmbreite, ohne die schrägen Kanten oben/unten abzuschneiden */
.esl-fullbleed {
	position: relative;
	width: 100vw;
	max-width: none;
	left: 50%;
	margin-left: -50vw;
	box-sizing: border-box;
	overflow-x: clip;
	overflow-y: visible;
	padding: 7vw 0;
}
.esl-canvas {
	position: relative;
	width: 100%;
	padding: 0;
}

/* Breiter als der Viewport, damit der geneigte Balken beide Ränder erreicht */
.esl-row {
	position: relative;
	width: 120vw;
	left: -10vw;
	transform: rotate(var(--esl-angle, 0deg));
	transform-origin: center center;
	margin: 0;
}
.esl-bar {
	width: 100%;
	box-sizing: border-box;
	background: var(--esl-bg, #000);
	color: var(--esl-color, #fff);
	overflow: hidden;
}
.esl-viewport {
	display: block;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.esl-track {
	display: flex;
	width: max-content;
	align-items: center;
	white-space: nowrap;
	transform: translate3d(0, 0, 0);
	will-change: transform;
	animation: esl-text-scroll var(--esl-speed, 24s) linear infinite;
}
.esl-group {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	white-space: nowrap;
}
.esl-copy {
	display: inline-block;
	flex: 0 0 auto;
	box-sizing: border-box;
	color: var(--esl-color, #fff);
	font-size: var(--esl-font-size, 28px);
	font-weight: var(--esl-font-weight, 700);
	line-height: 1.2;
	white-space: nowrap;
}
.esl-gap {
	display: inline-block;
	flex: 0 0 var(--esl-gap, 90px);
	width: var(--esl-gap, 90px);
}
.esl-pause-hover:hover .esl-track {
	animation-play-state: paused;
}

/* Vier Wiederholungen – ein Viertel der Spur ergibt eine nahtlose Schleife */
@keyframes esl-text-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-25%, 0, 0); }
}
@media (max-width: 767px) {
	.esl-fullbleed { padding: 12vw 0; }
	.esl-row { width: 140vw; left: -20vw; }
	.esl-copy { font-size: min(var(--esl-font-size, 28px), 5vw); }
}
@media (prefers-reduced-motion: reduce) {
	.esl-track { animation: none !important; transform: none; }
}