/* ==========================================================================
   Kundenstimmen als Endlos-Laufband (Startseite 244, Kunden 255)
   --------------------------------------------------------------------------
   Die vier Stimmen bleiben vier einzelne Divi-Textmodule, damit sie im
   Builder bearbeitbar bleiben. claysen-stimmen-slider.js schiebt sie zur
   Laufzeit in eine Spur und legt Kopien an. Diese Datei macht aus der
   Rasterspalte die Buehne dafuer.

   Rollback: require_once-Zeile fuer claysen-stimmen-slider.php aus der
   functions.php entfernen. Ohne das Skript bleibt das Raster unveraendert.
   ========================================================================== */

/* --- Die Spalte war ein Raster, jetzt traegt sie nur noch das Band -------- */
body.cl-divi-rebuild .et_pb_column.cl-testimonials-grid.cs-aktiv,
body.cl-divi-rebuild .et_pb_column.ku-testi-grid.cs-aktiv,
.cl-testimonials-grid.cs-aktiv,
.ku-testi-grid.cs-aktiv {
	display: block !important;
	grid-template-columns: none !important;
	gap: 0 !important;
	max-width: none !important;
	margin: 32px 0 0 !important;
	padding: 0 !important;
}

/* Volle Breite. 50 % beziehen sich auf die Spalte, 50vw auf das Fenster —
   die Differenz zieht das Band genau bis an die Fensterkanten. */
.cs-marquee {
	--cs-breite: 400px;
	--cs-luecke: 22px;
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	overflow: hidden;
	/* Platz fuer den Hover-Schatten der Karten, sonst schneidet overflow ihn ab */
	padding: 10px 0 18px;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}

/* Ein Abschnitt mit 100vw-Kind kann bei sichtbarem Scrollbalken um dessen
   Breite ueberstehen. clip schneidet das ab, ohne einen Scrollbereich zu
   erzeugen (anders als hidden). */
body.cl-divi-rebuild .cl-testi-sec.et_pb_section,
body.cl-divi-rebuild .ku-testimonials.et_pb_section {
	overflow-x: clip;
}

.cs-track {
	display: flex;
	align-items: stretch;
	width: max-content;
	animation: cs-lauf var(--cs-dauer, 60s) linear infinite;
	will-change: transform;
}

/* Der Abstand haengt an der Karte, nicht an gap: die Spur besteht aus zwei
   gleichen Haelften und -50 % trifft die Naht nur dann exakt, wenn jede
   Karte ihren Abstand selbst mitbringt. Mit gap fehlte an der Naht ein
   halber Abstand und das Band ruckte einmal pro Runde. */
.cs-track > .cl-testimonial,
.cs-track > .ku-testi {
	flex: 0 0 var(--cs-breite, 400px);
	width: var(--cs-breite, 400px) !important;
	margin: 0 var(--cs-luecke, 22px) 0 0 !important;
	box-sizing: border-box;
}

.cs-track > .cl-testimonial .et_pb_text_inner,
.cs-track > .ku-testi .et_pb_text_inner {
	height: 100%;
}

/* Die Startseiten-Zeile zentriert ihren Text. Das Anfuehrungszeichen der
   Karte sitzt aber links — zentrierter Flattersatz daneben sieht verrutscht
   aus. Im Band deshalb linksbuendig, so wie auf der Kundenseite. */
.cs-track > .cl-testimonial,
.cs-track > .cl-testimonial .et_pb_text_inner,
.cs-track > .cl-testimonial .cl-testimonial-quote,
.cs-track > .cl-testimonial .cl-testimonial-name {
	text-align: left;
}

@keyframes cs-lauf {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Zum Lesen anhalten — mit der Maus und beim Tabben. cs-ruht setzt das
   Skript, solange der Abschnitt ausserhalb des Bildes liegt: eine laufende
   Transformation kostet auch dann Rechenzeit, wenn niemand hinsieht.
   Klasse statt style-Attribut, sonst schlaegt der Inline-Wert die
   Hover-Regel und das Band liesse sich nicht mehr anhalten. */
.cs-marquee:hover .cs-track,
.cs-marquee:focus-within .cs-track,
.cs-marquee.cs-ruht .cs-track {
	animation-play-state: paused;
}

@media (max-width: 980px) {
	.cs-marquee { --cs-breite: 360px; --cs-luecke: 18px; }
}

/* Auf dem Handy und bei reduzierter Bewegung laeuft nichts von allein:
   ein Zitat braucht laenger zum Lesen als die Karte zum Durchlaufen.
   Stattdessen wischen, die Karten rasten einzeln ein. */
@media (prefers-reduced-motion: reduce), (pointer: coarse) {
	.cs-marquee {
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.cs-marquee::-webkit-scrollbar { display: none; }
	.cs-track {
		animation: none;
		padding: 0 max(20px, calc(50vw - var(--cs-breite, 400px) / 2 - var(--cs-luecke, 22px)));
		/* Nicht auf gleiche Hoehe ziehen: sichtbar ist immer nur eine Karte,
		   und die laengste Stimme wuerde allen anderen ein leeres Drittel
		   verpassen. Jede Karte so hoch wie ihr Text, mittig im Band. */
		align-items: center;
	}
	.cs-track > .cl-testimonial,
	.cs-track > .ku-testi { scroll-snap-align: center; }
}

@media (max-width: 600px) {
	.cs-marquee { --cs-breite: min(84vw, 340px); --cs-luecke: 14px; }
}