/* =========================================================
   HERO SLIDESHOW
   Bild und Inhalt wechseln synchron.
   Gilt für Large, Small und Filtered Hero.
   ========================================================= */


/* =========================================================
   HINTERGRUNDBILDER
   ========================================================= */

.hero[data-hero-slideshow] .hero-slideshow-slide {
	opacity: 0;

	transition:
		opacity 1.6s ease-in-out;

	pointer-events: none;
}


.hero[data-hero-slideshow] .hero-slideshow-slide.is-active {
	opacity: 1;
}


/* =========================================================
   CONTENTBOX
   Die äußere Box bleibt dauerhaft an derselben Position.
   Nur die Inhalte innerhalb der Box wechseln.
   ========================================================= */

.hero[data-hero-slideshow] > .hero-content {
	background-color: rgba(0, 0, 0, 0.40);

	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);

	box-shadow:
		0 4px 20px
		rgba(0, 0, 0, 0.08);

	border-radius: var(--card-border-radius);

	color: #ffffff;
}


/* =========================================================
   CONTENT STACK
   Alle Slides liegen deckungsgleich übereinander.
   Die Höhe richtet sich nach dem höchsten Inhalt.
   ========================================================= */

.hero[data-hero-slideshow] .hero-slideshow-content-stack {
	display: grid;

	width: 100%;
}


.hero[data-hero-slideshow] .hero-slideshow-content {
	grid-area: 1 / 1;

	display: flex;
	align-items: center;

	min-width: 0;

	opacity: 0;

	z-index: 0;

	pointer-events: none;

	transition:
		opacity 1.1s ease;
}


.hero[data-hero-slideshow] .hero-slideshow-content-inner {
	width: 100%;

	transform: translateY(3rem);

	transition:
		transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}


/* =========================================================
   AKTIVER CONTENT
   Neuer Inhalt fährt von unten hoch und blendet ein.
   ========================================================= */

.hero[data-hero-slideshow] .hero-slideshow-content.is-active {
	opacity: 1;

	z-index: 2;

	pointer-events: auto;
}


.hero[data-hero-slideshow]
.hero-slideshow-content.is-active
.hero-slideshow-content-inner {
	transform: translateY(0);
}


/* =========================================================
   AUSGEHENDER CONTENT
   Alter Inhalt bleibt an seiner Position und blendet
   gemeinsam mit dem alten Hintergrundbild aus.
   ========================================================= */

.hero[data-hero-slideshow] .hero-slideshow-content.is-leaving {
	opacity: 0;

	z-index: 1;

	pointer-events: none;
}


.hero[data-hero-slideshow]
.hero-slideshow-content.is-leaving
.hero-slideshow-content-inner {
	transform: translateY(0);
}


/* =========================================================
   AI OVERLAY
   ========================================================= */

.hero[data-hero-slideshow] .hero-slideshow-ai-overlay {
	opacity: 0;

	transition:
		opacity 0.35s ease;

	pointer-events: none;
}


.hero[data-hero-slideshow] .hero-slideshow-ai-overlay.is-active {
	opacity: 1;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.hero[data-hero-slideshow] .hero-slideshow-slide,
	.hero[data-hero-slideshow] .hero-slideshow-content,
	.hero[data-hero-slideshow] .hero-slideshow-content-inner,
	.hero[data-hero-slideshow] .hero-slideshow-ai-overlay {
		transition: none;
	}


	.hero[data-hero-slideshow] .hero-slideshow-content-inner {
		transform: none;
	}

}