/* CM Laufband — Ticker. Anpassbar über CSS-Variablen (z. B. im Divi-Child oder Sektion). */
.cm-laufband {
	--cm-laufband-bg: #1f1f1f;
	--cm-laufband-color: #ffffff;
	--cm-laufband-label-bg: var(--gcid-primary-color, #24A638); /* Divi-5-Primärfarbe (Global Color), Fallback CD-Grün */
	--cm-laufband-label-color: #ffffff;
	--cm-laufband-sep: rgba(255, 255, 255, 0.55);
	--cm-laufband-font-size: 1rem;
	--cm-laufband-height: 2.75rem;
	--cm-laufband-speed: 45s;
	display: flex;
	align-items: stretch;
	width: 100%;
	min-height: var(--cm-laufband-height);
	background: var(--cm-laufband-bg);
	color: var(--cm-laufband-color);
	font-size: var(--cm-laufband-font-size);
	line-height: 1.3;
	overflow: hidden;
	box-sizing: border-box;
}
.cm-laufband__label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 1em;
	background: var(--cm-laufband-label-bg);
	color: var(--cm-laufband-label-color);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	z-index: 1;
}
.cm-laufband__viewport {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	overflow: hidden;
	min-width: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1.5em, #000 calc(100% - 1.5em), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 1.5em, #000 calc(100% - 1.5em), transparent 100%);
}
.cm-laufband__track {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding-left: 1.5em;
	animation: cm-laufband-scroll var(--cm-laufband-speed) linear infinite;
	will-change: transform;
}
.cm-laufband__item {
	color: inherit;
	text-decoration: none;
	padding: 0 0.25em;
}
a.cm-laufband__item:hover,
a.cm-laufband__item:focus-visible {
	text-decoration: underline;
	outline: none;
}
.cm-laufband__sep {
	color: var(--cm-laufband-sep);
	padding: 0 1em;
}
/* Pause: Button (.is-paused) · Hover (aber NICHT direkt nach bewusstem Play = .is-user-play) · Tastaturfokus auf einem Eintrag */
.cm-laufband.is-paused .cm-laufband__track,
.cm-laufband:not(.is-user-play):hover .cm-laufband__track,
.cm-laufband:has(.cm-laufband__item:focus-visible) .cm-laufband__track {
	animation-play-state: paused;
}
.cm-laufband__pause {
	flex: 0 0 auto;
	width: var(--cm-laufband-height);
	background: transparent;
	border: 0;
	border-left: 1px solid rgba(255, 255, 255, 0.15);
	color: inherit;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.cm-laufband__pause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -3px;
}
/* Pause-Icon (zwei Balken) → Play-Dreieck bei gedrückt */
.cm-laufband__pause-icon {
	width: 0.7em;
	height: 0.8em;
	border-left: 0.22em solid currentColor;
	border-right: 0.22em solid currentColor;
	box-sizing: border-box;
}
.cm-laufband__pause[aria-pressed="true"] .cm-laufband__pause-icon {
	width: 0;
	height: 0;
	border-left: 0.75em solid currentColor;
	border-right: 0;
	border-top: 0.45em solid transparent;
	border-bottom: 0.45em solid transparent;
}
@keyframes cm-laufband-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
/* Reduzierte Bewegung: kein Lauf, Einträge als Zeile mit Umbruch, Duplikat weg */
@media (prefers-reduced-motion: reduce) {
	.cm-laufband__track { animation: none; white-space: normal; padding: 0.5em 1em; }
	.cm-laufband__track[aria-hidden="true"] { display: none; }
	.cm-laufband__viewport { -webkit-mask-image: none; mask-image: none; }
	.cm-laufband__pause { display: none; }
}
/* JS hat Bewegung explizit deaktiviert (Nutzerklick) – identisch zu reduced motion, aber Button bleibt */
.cm-laufband.is-static .cm-laufband__track { animation: none; white-space: normal; padding: 0.5em 1em; }
.cm-laufband.is-static .cm-laufband__track[aria-hidden="true"] { display: none; }
.cm-laufband.is-static .cm-laufband__viewport { -webkit-mask-image: none; mask-image: none; }

@media (max-width: 767px) {
	.cm-laufband { --cm-laufband-font-size: 0.9rem; --cm-laufband-height: 2.5rem; }
	.cm-laufband__label { padding: 0 0.75em; }
}
/* Handy: Label ausblenden (Frank 27.08.), Region behält ihr aria-label */
@media (max-width: 480px) {
	.cm-laufband__label { display: none; }
}
.cm-laufband--empty { padding: 0.5em 1em; opacity: 0.8; }