/* ==========================================================================
   Scroll-Reveals & Micro-Interactions — AUSSCHLIESSLICH transform, nie opacity.
   Die ".js"-Klasse wird synchron per Inline-Script im <head> gesetzt (siehe
   header.php). Ohne sie (kein JS / Headless ohne JS-Ausführung) bleibt jeder
   Endzustand ganz regulär im Server-HTML sichtbar — kein leerer Render.
   ========================================================================== */

.js .reveal-up,
.js .reveal-stagger > * {
	transform: translateY(0);
}

.js .reveal-up.reveal-armed,
.js .reveal-stagger > .reveal-armed {
	transform: translateY(28px);
	transition: transform 640ms var(--ease-out);
}

.js .reveal-up.reveal-armed.is-visible,
.js .reveal-stagger > .reveal-armed.is-visible {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .reveal-up.reveal-armed,
	.js .reveal-stagger > .reveal-armed {
		transform: none;
		transition: none;
	}
}

/* Hero-Overlay: sanfte Einblendung beim Laden (eigener, sofort startender
   Trigger statt IntersectionObserver, siehe main.js initHeroReveal). */
.js .hero-slider__overlay {
	transform: translateY(18px);
	transition: transform 720ms var(--ease-out);
}

.js .hero-slider__overlay.is-visible {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.js .hero-slider__overlay {
		transform: none;
		transition: none;
	}
}

/* Karten/Reihen: Press-Feedback */
.service-row,
.usp-item {
	transition: transform 180ms var(--ease-out);
}

.service-row:active {
	transform: scale(0.99);
}

/* Slide-Hintergründe: sanfter Crossfade-Zoom zwischen aktiven Slides */
.hero-slide {
	transition: transform 1400ms var(--ease-out);
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.hero-slide {
		transition: none;
		transform: none;
	}
}