/* Animationen: Elemente bis zum Start von GSAP verstecken (nur wenn JS läuft) */
.hm-js:not(.hm-ready) [data-anim]:not([data-anim="parallax"]) {
	opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
	.hm-js [data-anim] {
		opacity: 1 !important;
	}
}

/* Hero-Video: füllt das nächste Elternelement mit position: relative */
.hm-hero-video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.hm-hero-video__poster,
.hm-hero-video__media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hm-hero-video__media {
	opacity: 0;
	transition: opacity 0.8s ease;
}

.hm-hero-video.is-playing .hm-hero-video__media {
	opacity: 1;
}

.hm-hero-video__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--hm-overlay, 0.35));
}

/* Wort-Morph (data-anim="morph") */
.hm-morph {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
}

.hm-morph__word {
	display: inline-block;
}

.hm-morph__word:not(.is-final) {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.hm-morph__ch {
	display: inline-block;
	white-space: pre;
	will-change: transform, opacity;
}

.hm-morph__sub {
	display: block;
	font-size: 0.2em;
	letter-spacing: 0.8em;
	margin-right: -0.8em; /* gleicht den Abstand nach dem letzten Buchstaben aus */
	margin-top: 0.15em;
}

/* Unterzeile als Hochstellung rechts (data-anim-sub-pos="sup"):
   hängt außen rechts am letzten Wort, Oberkante bündig mit der Versalhöhe.
   Gilt für Schriften mit gleichen Maßen wie Saira / Saira Stencil One
   (Versalien beginnen 0,16 em unter der Zeilenoberkante bei line-height 1);
   anpassbar über --hm-morph-sup-size und --hm-morph-sup-offset. */
.hm-morph--sup .hm-morph__sub {
	position: absolute;
	top: 0;
	left: 100%;
	font-size: var(--hm-morph-sup-size, 0.32em);
	line-height: 1;
	letter-spacing: 0.08em;
	margin: var(--hm-morph-sup-offset, 0.34em) 0 0 0.06em;
	white-space: nowrap;
}

.hm-morph__sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
