/* Scroll-Reveal — Startzustand greift nur bei aktivem JS (.tsch-js). */

.tsch-js [data-tsch-reveal],
.tsch-js [data-tsch-reveal-group] > * {
	opacity: 0;
	transition: opacity 600ms ease, transform 600ms ease;
}

.tsch-js [data-tsch-reveal="up"],
.tsch-js [data-tsch-reveal-group="up"] > *    { transform: translateY(24px); }
.tsch-js [data-tsch-reveal="down"],
.tsch-js [data-tsch-reveal-group="down"] > *  { transform: translateY(-24px); }
.tsch-js [data-tsch-reveal="left"],
.tsch-js [data-tsch-reveal-group="left"] > *  { transform: translateX(-32px); }
.tsch-js [data-tsch-reveal="right"],
.tsch-js [data-tsch-reveal-group="right"] > * { transform: translateX(32px); }
.tsch-js [data-tsch-reveal="zoom"]            { transform: scale(0.96); }

.tsch-js [data-tsch-reveal].tsch-reveal--in,
.tsch-js [data-tsch-reveal-group] > .tsch-reveal--in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.tsch-js [data-tsch-reveal],
	.tsch-js [data-tsch-reveal-group] > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Auf schmalen Displays stapeln die Spalten ohnehin — seitliche Reveals
   ergeben dort keinen Sinn und schieben den Inhalt kurz über den Rand. */
@media (max-width: 720px) {
	.tsch-js [data-tsch-reveal="left"],
	.tsch-js [data-tsch-reveal="right"],
	.tsch-js [data-tsch-reveal-group="left"] > *,
	.tsch-js [data-tsch-reveal-group="right"] > * {
		transform: translateY(24px);
	}
}