/* =========================================================
   Wechselnde Hinweise in der Kopfleiste  [hof_ticker]
   Shortcode: inc/topbar-ticker.php, Skript: assets/js/topbar-ticker.js

   Farbe und Schrift erbt die Leiste vom Avada-Textelement, in dem
   der Shortcode steht (weiss, 12px) - hier steht nur das Verhalten.

   Alle Hinweise liegen im selben Rasterfeld uebereinander. Die
   Leiste ist dadurch immer so hoch wie der laengste Hinweis und
   springt beim Wechsel nicht.
   ========================================================= */

/* min-height und margin-block ersetzen den Absatzabstand, den der
   bisherige Text hatte (siehe unten) - die Leiste bleibt knapp
   45px hoch. */
.hof-ticker {
	width: 100%;
	min-height: 32px;
	margin-block: 6px;
	display: flex;
	align-items: center;
}

.hof-ticker__list {
	display: grid;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

.hof-ticker__item {
	grid-area: 1 / 1;
	margin: 0;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transform: translateX(24px);
	transition:
		opacity 0.45s ease,
		transform 0.45s ease,
		visibility 0s linear 0.45s;
}

.hof-ticker__item.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity 0.45s ease,
		transform 0.45s ease,
		visibility 0s;
}

/* Der gehende Hinweis gleitet zur anderen Seite hinaus */
.hof-ticker__item.is-leaving {
	transform: translateX(-24px);
}

/* Wischen nach rechts (zurueck): Richtungen tauschen */
.hof-ticker[data-dir="prev"] .hof-ticker__item {
	transform: translateX(-24px);
}

.hof-ticker[data-dir="prev"] .hof-ticker__item.is-active {
	transform: none;
}

.hof-ticker[data-dir="prev"] .hof-ticker__item.is-leaving {
	transform: translateX(24px);
}

/* Optional linksbuendig: [hof_ticker align="left"] */
.hof-ticker--left .hof-ticker__item {
	text-align: left;
}

/* Links in der Leiste: Textfarbe der Leiste, Unterstreichung erst
   beim Hover. Avada faerbt Links sonst olivgruen. */
.hof-ticker a,
.hof-ticker a:visited {
	color: inherit;
	text-decoration: none;
}

.hof-ticker a:hover,
.hof-ticker a:focus-visible {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Absatzabstand des Avada-Textelements entfernen, damit die Leiste
   ihre Hoehe behaelt. :has() begrenzt das auf Textelemente mit
   Ticker; aeltere Browser behalten den bisherigen Abstand. */
.fusion-text:has(.hof-ticker) > p {
	margin: 0;
}

.fusion-text:has(.hof-ticker) > p:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.hof-ticker__item,
	.hof-ticker__item.is-active {
		transform: none !important;
		transition: none;
	}
}