/* =============================================================================
 * Speaker-Laufband (content_element/speaker_ticker + content_element/speaker)
 * ========================================================================== */

.content-speaker-ticker {
	overflow: hidden;
	padding: 10px 0;
}

.speaker-ticker {
	overflow: hidden;
}

.speaker-ticker__track {
	display: flex;
	width: max-content;
	animation: speaker-ticker-scroll var(--speaker-ticker-duration, 40s) linear infinite;
}

/* Pause nur bei echter Maus bzw. Tastaturfokus – auf Touch-Geräten bliebe
   der :hover-Zustand nach dem Antippen sonst hängen und das Band stehen. */
@media (hover: hover) and (pointer: fine) {
	.speaker-ticker:hover .speaker-ticker__track {
		animation-play-state: paused;
	}
}

.speaker-ticker:has(:focus-visible) .speaker-ticker__track {
	animation-play-state: paused;
}

.speaker-ticker__group,
.speaker-ticker__set {
	display: flex;
	flex-shrink: 0;
	align-items: center;
}

.speaker-ticker__set > .content-speaker {
	flex-shrink: 0;
	margin: 0;
	padding-right: 60px;
}

.speaker {
	display: flex;
	align-items: center;
	gap: 14px;
	color: inherit;
	text-decoration: none;
}

.speaker__image {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border: 4px solid var(--accentColor, #004070);
	border-radius: 50%;
	overflow: hidden;
}

.speaker__image figure,
.speaker__image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Breite je Eintrag = längster Teil: der Name (einzeilig) oder die Position
   (bis max. 240px, danach Umbruch) – lange Namen ragen so nicht mehr in den
   nächsten Eintrag. */
.speaker__text {
	display: grid;
	width: min-content;
}

.speaker__name {
	font-family: IBMPlexSans-Bold, sans-serif;
	font-size: 24px;
	line-height: 1.25;
	color: #ef7d00; /* Orange aus dem AI.COND-Banner */
	white-space: nowrap;
}

.speaker__position {
	width: max-content;
	max-width: 240px;
	font-size: 20px;
	line-height: 1.5;
	color: var(--customColor2, #706f6f);
}

a.speaker:hover .speaker__name,
a.speaker:focus-visible .speaker__name {
	text-decoration: underline;
}

@keyframes speaker-ticker-scroll {
	from {
		transform: translateX(0) translateZ(0);
	}

	to {
		transform: translateX(-50%) translateZ(0);
	}
}

/* Ohne Animation: Reihe von Hand scrollbar, Duplikat ausblenden */
@media (prefers-reduced-motion: reduce) {
	.speaker-ticker {
		overflow-x: auto;
	}

	.speaker-ticker__track {
		animation: none;
	}

	.speaker-ticker__set[aria-hidden="true"] {
		display: none;
	}
}

/* =============================================================================
 * smart phones  (s / small screens)
 * ========================================================================== */

@media only screen and (max-width: 767px) {

	.speaker-ticker__set > .content-speaker {
		padding-right: 40px;
	}

	.speaker__image {
		width: 72px;
		height: 72px;
		border-width: 3px;
	}

	.speaker__name {
		font-size: 19px;
	}

	.speaker__position {
		font-size: 16px;
	}

	.speaker__position {
		max-width: 200px;
	}

}