/* Clopen Shop-Ticker – Frontend
   Farben kommen als CSS-Variablen aus den Plugin-Einstellungen. */

/* WICHTIG: Die Farbvariablen werden NICHT hier gesetzt, sondern per var()-Fallback
   verwendet. So gewinnen immer die Werte aus den Plugin-Einstellungen (:root),
   ohne dass eine lokale Definition sie überschreibt. */

.clst {
	--clst-h: 46px;

	position: relative;
	z-index: var(--clst-z, 90);
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(100deg, var(--clst-bg1, #0066ff) 0%, var(--clst-bg2, #0047cc) 100%);
	color: var(--clst-fg, #fff);
	/* Typografie wie die Website: Montserrat. Das Theme stellt die Schrift
	   per @font-face lokal bereit – das Plugin lädt NICHTS nach, keine
	   Google Fonts, kein externer Request. Fehlt Montserrat, greift die
	   Systemschrift. */
	font-family: var(--clst-font, 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.35;
	letter-spacing: .01em;
	-webkit-font-smoothing: antialiased;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 18px -12px rgba(0, 0, 0, .5);
}

.clst *,
.clst *::before,
.clst *::after { box-sizing: border-box; }

/* Abstand von oben: schiebt den Ticker unter einen fixierten Kopfbereich,
   der höher ist als der Versatz des Seiteninhalts. 0 = aus. */
.clst--top,
.clst--below_header,
.clst--custom {
	margin-top: var(--clst-offset, 0px);
}

.clst.is-sticky.clst--top,
.clst.is-sticky.clst--below_header {
	position: sticky;
	/* Klebt unterhalb des Headers, nicht dahinter. */
	top: var(--clst-offset, 0px);
}

/* ---------- Ganz oben über allem ----------
   Fest am Viewport-Rand, mit maximaler Stapelebene. Der Seiteninhalt wird
   per PHP über html{margin-top} nach unten geschoben, damit nichts
   verdeckt wird – siehe assets() in der Frontend-Klasse.
   Bewusst ohne JavaScript: Die Position muss auch dann stimmen, wenn ein
   Optimierungs-Plugin Skripte verzögert. */
.clst.clst--overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	margin-top: 0;
	z-index: 2147483000;
}

/* Unter der WordPress-Adminleiste einordnen, nicht darunter verschwinden. */
body.admin-bar .clst.clst--overlay { top: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar .clst.clst--overlay { top: 46px; }
}

.clst.clst--bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--clst-z, 90);
}

/* Ausblenden */
.clst.is-hidden {
	max-height: 0 !important;
	opacity: 0;
	transform: translateY(-100%);
	transition: max-height .35s ease, opacity .25s ease, transform .35s ease;
	pointer-events: none;
}

/* ---------- Layout ---------- */
.clst-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1280px;
	min-height: var(--clst-h);
	margin: 0 auto;
	padding: 7px 16px;
}

/* ---------- Öffnungsstatus ---------- */
.clst-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 4px 11px 4px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .16);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Verlinkte Statusanzeige: soll wie der Rest aussehen, nicht wie ein Link. */
a.clst-status {
	color: inherit;
	text-decoration: none;
	transition: background .2s ease;
}

a.clst-status:hover,
a.clst-status:focus-visible {
	background: rgba(255, 255, 255, .3);
}

a.clst-status:hover .clst-status-text {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.clst-status-text { font-weight: 700; }

.clst-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #ffc44d;
	flex: 0 0 auto;
}

.clst-status.is-open .clst-dot {
	background: #4ade80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, .8);
	animation: clst-pulse 2.4s infinite;
}

@keyframes clst-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(74, 222, 128, .8); }
	70%  { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

/* ---------- Meldungen ---------- */
.clst-viewport {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 24px;
	display: flex;
	align-items: center;
}

.clst-item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: inherit;
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	inset: 0;
	transition: opacity .5s ease, transform .5s ease;
}

.clst-item.is-active {
	opacity: 1;
	visibility: visible;
	position: relative;
}

/* Fade */
.clst--fade .clst-item { transform: none; }

/* Slide nach oben */
.clst--slide .clst-item { transform: translateY(14px); }
.clst--slide .clst-item.is-active { transform: translateY(0); }
.clst--slide .clst-item.is-leaving { transform: translateY(-14px); }

.clst-icon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	color: var(--clst-accent, #ffffff);
}

.clst-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-weight: 500;
}

a.clst-item:hover .clst-text { text-decoration: underline; text-underline-offset: 3px; }

.clst-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 6px 14px;
	border-radius: 4px;
	background: var(--clst-accent, #ffffff);
	color: var(--clst-cta-fg, #0066ff);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	white-space: nowrap;
	transition: transform .2s ease, filter .2s ease;
}

.clst-cta svg { width: 14px; height: 14px; }
a.clst-item:hover .clst-cta { transform: translateX(2px); filter: brightness(1.06); }

/* ---------- Lauftext ---------- */
.clst--marquee .clst-viewport { overflow: hidden; }

.clst--marquee .clst-item {
	position: relative;
	inset: auto;
	opacity: 1;
	visibility: visible;
	width: auto;
	flex: 0 0 auto;
	padding-right: 60px;
}

.clst--marquee .clst-text { white-space: nowrap; overflow: visible; }

.clst--marquee .clst-track {
	display: flex;
	align-items: center;
	animation: clst-marquee linear infinite;
	will-change: transform;
}

.clst--marquee.is-paused .clst-track { animation-play-state: paused; }

@keyframes clst-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ---------- Punkte-Navigation ---------- */
.clst-dots {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.clst-dotbtn {
	width: 7px;
	height: 7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .35);
	cursor: pointer;
	transition: background .25s ease, width .25s ease;
}

.clst-dotbtn.is-active {
	width: 18px;
	border-radius: 999px;
	background: var(--clst-accent, #ffffff);
}

.clst-dotbtn:focus-visible { outline: 2px solid var(--clst-fg, #fff); outline-offset: 2px; }

/* ---------- Schließen ---------- */
.clst-close {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: inherit;
	cursor: pointer;
	opacity: .8;
	transition: background .2s ease, opacity .2s ease, transform .2s ease;
}

.clst-close svg { width: 14px; height: 14px; }
.clst-close:hover { background: rgba(255, 255, 255, .24); opacity: 1; transform: rotate(90deg); }
.clst-close:focus-visible { outline: 2px solid var(--clst-fg, #fff); outline-offset: 2px; }

/* ---------- Fortschrittsbalken ---------- */
.clst-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: rgba(255, 255, 255, .12);
}

.clst-progress i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--clst-accent, #ffffff);
	transition: width .18s linear;
}

.clst--static .clst-progress,
.clst--marquee .clst-progress { display: none; }

/* ---------- Ferien- / Schließ-Modus ----------
   Bringt ein EIGENES, festes Farbschema mit. Die Variablen werden hier
   bewusst lokal überschrieben, damit eine helle Schriftfarbe aus den
   Einstellungen (z. B. Vorlage „Weiß“) nicht auf dunklem Grund landet und
   unlesbar wird. Diese eine Meldung muss immer lesbar sein. */

.clst.is-emergency {
	--clst-fg: #ffffff;
	--clst-accent: #ffd400;
	--clst-cta-fg: #14110b;

	background: linear-gradient(100deg, #14110b 0%, #2b2413 100%);
	color: #fff;
}

.clst.is-emergency .clst-item,
.clst.is-emergency .clst-text { color: #fff; }

.clst.is-emergency .clst-icon { color: #ffd400; }

.clst.is-emergency .clst-text {
	font-weight: 500;
	letter-spacing: .03em;
}

.clst.is-emergency .clst-cta {
	background: #ffd400;
	color: #14110b;
	font-weight: 700;
}

.clst.is-emergency .clst-close { background: rgba(255, 255, 255, .2); }
.clst.is-emergency .clst-close:hover { background: rgba(255, 255, 255, .32); }

.clst.is-emergency .clst-progress i { background: #ffd400; }

.clst.is-emergency .clst-status { display: none; }

/* ---------- Mobil ---------- */

@media (max-width: 782px) {
	.clst--top,
	.clst--below_header,
	.clst--custom { margin-top: var(--clst-offset-m, 0px); }

	.clst.is-sticky.clst--top,
	.clst.is-sticky.clst--below_header { top: var(--clst-offset-m, 0px); }
}


@media (max-width: 782px) {
	.clst { font-size: 15px; --clst-h: 42px; }

	.clst-inner {
		gap: 10px;
		padding: 8px 12px;
	}

	/* Status wandert unter den Text, damit die Meldung Platz hat */
	.clst-status {
		padding: 3px 9px 3px 8px;
		font-size: 12px;
	}

	.clst-text { letter-spacing: .04em; }

	.clst-status .clst-status-text {
		max-width: 150px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.clst-dots { display: none; }

	.clst-text {
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.clst-cta {
		padding: 4px 10px;
		font-size: 12px;
	}
}

@media (max-width: 560px) {
	/* Status nur als Punkt + Kurzform */
	.clst-status .clst-status-text { display: none; }
	.clst-status { padding: 6px; }

	.clst-cta-label { display: none; }
	.clst-cta { padding: 6px; }

	.clst-icon { width: 18px; height: 18px; }
}

/* ---------- Zugänglichkeit ---------- */
@media (prefers-reduced-motion: reduce) {
	.clst-item,
	.clst-cta,
	.clst-close,
	.clst-progress i { transition: none !important; }

	.clst--marquee .clst-track { animation: none !important; }
	.clst-status.is-open .clst-dot { animation: none !important; }
}

/* Druckansicht */
@media print { .clst { display: none !important; } }