/* inRostock Newsticker – Laufband */

.inrnt-newsticker {
	--inrnt-fg: #ffffff;
	--inrnt-label-bg: #e2001a;
	--inrnt-label-fg: #ffffff;
	--inrnt-sep: rgba(255, 255, 255, 0.7);
	--inrnt-height: 44px;

	display: flex;
	align-items: stretch;
	width: 100%;
	height: var(--inrnt-height);
	box-sizing: border-box;
	/* Roter Verlauf laut Vorgabe (8-stellige Hex-Werte = Farbe inkl. Alpha). */
	background: transparent linear-gradient(270deg, #C8001000 0%, #C800108D 20%, #C80010 51%, #C8001072 84%, #C8001002 100%) 0% 0% no-repeat padding-box;
	color: var(--inrnt-fg);
	font-size: 15px;
	line-height: 1.2;
	overflow: hidden;
}

/* Smartphone: flacher und kleinere Schrift. --inrnt-height steuert zugleich
   das Schieben/Überlagern, daher passt sich beides automatisch an. */
@media (max-width: 600px) {
	.inrnt-newsticker {
		--inrnt-height: 32px;
		font-size: 12.5px;
	}
	.inrnt-item {
		padding: 0 5px;
	}
	.inrnt-sep {
		padding: 0 8px;
	}
}

/* --- Modi ------------------------------------------------------------- */

/* Normal: der Ticker liegt im Fluss und schiebt die folgenden Inhalte um
   seine Höhe (44px) nach unten. */
.inrnt-newsticker.inrnt-mode-normal {
	position: relative;
}

/* Overlay: bei soliden Headern wird der Ticker absolut auf den oberen Rand des
   ersten Abschnitts gelegt – dessen Hintergrund/Bild liegt dann hinter dem
   Ticker (kein weißer Streifen). Der Abschnitt bekommt per JS padding-top. */
.inrnt-newsticker.inrnt-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 30;
}

/* Auto (vor JS): wie normal (schiebt) – sichere Variante, falls JS fehlt.
   Das JS ersetzt die Klasse zur Laufzeit durch -normal oder -transparent. */
.inrnt-newsticker.inrnt-mode-auto {
	position: relative;
}

/* Transparent: der Ticker ist eine fixierte Leiste GANZ OBEN. Das JS schiebt
   Header (top) und Seiteninhalt (padding-top des Wrappers) um die Tickerhöhe
   nach unten, sodass nichts hinter dem Ticker liegt. */
.inrnt-newsticker.inrnt-mode-transparent {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Hoch, damit der Ticker vor dem Header sichtbar ist. Bei offenem Mobile-Menü
	   wird er per JS (Klasse inrnt-sticky-hidden) ausgeblendet. */
	z-index: 100000;
}

/* Volle Breite: CSS-Fallback (geht von einem zentrierten Eltern-Container aus).
   Steckt der Ticker in einer Spalte/asymmetrisch, korrigiert das JS die linke
   Position pixelgenau und überschreibt diese Werte per Inline-Style. */
.inrnt-newsticker.inrnt-fullbleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Bei aktivem Sticky-Header ausblenden (Klasse wird per JS gesetzt). */
.inrnt-newsticker.inrnt-sticky-hidden {
	display: none;
}

/* --- Aufbau ----------------------------------------------------------- */

.inrnt-label {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0 14px;
	background: var(--inrnt-label-bg);
	color: var(--inrnt-label-fg);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}

.inrnt-viewport {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	height: 100%;
}

/* Lückenloses Endlos-Laufband: der Inhalt wird per JS so oft dupliziert, dass
   er den Viewport plus eine Satzbreite füllt. Animiert wird um genau EINE
   Satzbreite (--inrnt-loop). Am Endpunkt liegt der nächste Satz exakt an der
   Startposition – der Neustart ist unsichtbar, es gibt weder Sprung noch
   Lücke. */
.inrnt-track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	will-change: transform;
	animation: inrnt-scroll var(--inrnt-duration, 30s) linear infinite;
}

.inrnt-track-inner {
	display: inline-flex;
	align-items: center;
}

.inrnt-newsticker:hover .inrnt-track,
.inrnt-newsticker:focus-within .inrnt-track {
	animation-play-state: paused;
}

.inrnt-item {
	padding: 0 6px;
	font-weight: 600;
}

a.inrnt-item {
	color: inherit;
	text-decoration: none;
}

a.inrnt-item:hover,
a.inrnt-item:focus {
	text-decoration: underline;
}

.inrnt-sep {
	padding: 0 12px;
	color: var(--inrnt-sep);
	font-weight: 700;
}

@keyframes inrnt-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(var(--inrnt-loop, -100%)); }
}

@media (prefers-reduced-motion: reduce) {
	.inrnt-track {
		animation: none !important;
		transform: none !important;
	}
	.inrnt-viewport {
		overflow-x: auto;
	}
}