/* ZL Praxis-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. */

.zlpt {
	--zlpt-h: 32px; /* Inhaltshöhe ohne Innenabstand */

	position: relative;
	z-index: var(--zlpt-z, 90);
	box-sizing: border-box;
	width: 100%;
	overflow: hidden;
	background: linear-gradient(100deg, var(--zlpt-bg1, #80644c) 0%, var(--zlpt-bg2, #735a42) 100%);
	color: var(--zlpt-fg, #fff);
	/* Typografie exakt wie die Website:
	   body { font-family: 'Roboto'; font-size: 16px; letter-spacing: 1px; }
	   Roboto wird vom Theme per @font-face lokal bereitgestellt – wir laden
	   nichts nach, keine Google Fonts, kein externer Request. Fehlt Roboto
	   (z. B. auf einer Testinstallation), greift die Systemschrift. */
	font-family: var(--zlpt-font, 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif);
	font-size: 16px;
	line-height: 1.35;
	letter-spacing: .0625em; /* entspricht 1px bei 16px – wie body im Theme */
	-webkit-font-smoothing: antialiased;
	box-shadow: 0 1px 0 rgba(0, 0, 0, .06), 0 6px 18px -12px rgba(0, 0, 0, .5);
}


.zlpt *,
.zlpt *::before,
.zlpt *::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. */
.zlpt--top,
.zlpt--below_header,
.zlpt--custom {
	margin-top: var(--zlpt-offset, 0px);
}

.zlpt.is-sticky.zlpt--top,
.zlpt.is-sticky.zlpt--below_header {
	position: sticky;
	/* Klebt unterhalb des Headers, nicht dahinter. */
	top: var(--zlpt-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. */
.zlpt.zlpt--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 .zlpt.zlpt--overlay { top: 32px; }

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

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

/* Ausblenden */
.zlpt.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;
}

/* Abstand zum nächsten Seitenbereich.
   Nicht im Overlay-Modus: Dort liegt der Balken fest über der Seite, ein
   Außenabstand bliebe wirkungslos. Der Abstand steckt dort im Freiraum,
   den PHP über html{margin-top} erzeugt. */
.zlpt:not(.zlpt--overlay):not(.zlpt--bottom) {
	margin-bottom: var(--zlpt-gap, 0px);
}

/* ---------- Layout ---------- */
.zlpt-inner {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1280px;
	margin: 0 auto;

	/* content-box, damit ein größerer Innenabstand die Höhe wirklich
	   vergrößert. Bei border-box würde er nur die min-height auffressen. */
	box-sizing: content-box;
	min-height: var(--zlpt-h);
	padding: var(--zlpt-pad, 7px) 16px;
}

/* ---------- Öffnungsstatus ---------- */
.zlpt-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: 13px;
	font-weight: 300; /* wie .day-time .time im Theme */
	letter-spacing: .0625em;
	white-space: nowrap;
}

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

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

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

.zlpt-status-text { font-weight: 400; }

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

.zlpt-status.is-open .zlpt-dot {
	background: #8fae74;
	box-shadow: 0 0 0 0 rgba(143, 174, 116, .75);
	animation: zlpt-pulse 2.4s infinite;
}

@keyframes zlpt-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(143, 174, 116, .75); }
	70%  { box-shadow: 0 0 0 7px rgba(143, 174, 116, 0); }
	100% { box-shadow: 0 0 0 0 rgba(143, 174, 116, 0); }
}

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

.zlpt-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;
}

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

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

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

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

.zlpt-text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Das Theme arbeitet viel mit 300. Auf farbigem Grund wirkt Light zu
	   dünn, deshalb hier 400 – wie .day-time .day (Tagesnamen). */
	font-weight: 400;
}

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

.zlpt-cta {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex: 0 0 auto;
	padding: 6px 14px;
	border-radius: 5px; /* wie a.button-brand im Theme */
	background: var(--zlpt-accent, #e1ded7);
	color: var(--zlpt-cta-fg, #735a42);
	font-size: 12px;
	font-weight: 400; /* wie .topic-button a im Theme */
	text-transform: uppercase;
	letter-spacing: .14em;
	white-space: nowrap;
	transition: transform .2s ease, filter .2s ease;
}

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

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

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

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

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

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

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

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

.zlpt-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;
}

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

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

/* ---------- Schließen ---------- */
.zlpt-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;
}

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

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

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

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

/* ---------- Notdienst ----------
   Der Notdienst bringt ein EIGENES, festes Farbschema mit. Die Variablen
   werden hier bewusst lokal überschrieben, damit eine helle Schriftfarbe aus
   den Einstellungen (z. B. Braun bei der Vorlage „CI Hell“) nicht auf dem
   roten Grund landet und unlesbar wird. Diese eine Meldung muss immer
   lesbar sein – sie ist der Notfall. */

.zlpt.is-emergency {
	--zlpt-fg: #ffffff;
	--zlpt-accent: #ffffff;
	--zlpt-cta-fg: #8a3f3f;

	background: linear-gradient(100deg, #8a3f3f 0%, #a24e4e 100%);
	color: #fff;
}

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

.zlpt.is-emergency .zlpt-icon { color: #fff; }

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

.zlpt.is-emergency .zlpt-cta {
	background: #fff;
	color: #8a3f3f;
	font-weight: 700;
}

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

.zlpt.is-emergency .zlpt-progress i { background: #fff; }

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

/* ---------- Urlaubs-Modus ----------
   Gleiche Idee wie beim Notdienst, nur in ruhigem CI-Braun statt Rot: Eine
   geplante Schließzeit ist kein Notfall und soll auch nicht so aussehen.
   Die Variablen werden ebenfalls lokal überschrieben, damit eingestellte
   Schriftfarben nicht auf dem braunen Grund untergehen. */

.zlpt.is-vacation {
	--zlpt-fg: #ffffff;
	--zlpt-accent: #E1DED7;
	--zlpt-cta-fg: #5c4636;

	background: linear-gradient(100deg, #5c4636 0%, #6b5342 100%);
	color: #fff;
}

.zlpt.is-vacation .zlpt-item,
.zlpt.is-vacation .zlpt-text { color: #fff; }

.zlpt.is-vacation .zlpt-icon { color: #E1DED7; }

.zlpt.is-vacation .zlpt-text {
	font-weight: 400;
	letter-spacing: .03em;
}

.zlpt.is-vacation .zlpt-cta {
	background: #E1DED7;
	color: #5c4636;
	font-weight: 700;
}

.zlpt.is-vacation .zlpt-close { background: rgba(255, 255, 255, .18); }
.zlpt.is-vacation .zlpt-close:hover { background: rgba(255, 255, 255, .3); }

.zlpt.is-vacation .zlpt-progress i { background: #E1DED7; }

/* Der Öffnungsstatus würde der Urlaubsmeldung widersprechen. */
.zlpt.is-vacation .zlpt-status { display: none; }

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

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

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


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

	.zlpt:not(.zlpt--overlay):not(.zlpt--bottom) {
		margin-bottom: var(--zlpt-gap-m, 0px);
	}

	.zlpt-inner {
		gap: 10px;
		padding: var(--zlpt-pad-m, 8px) 12px;
	}

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

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

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

	.zlpt-dots { display: none; }

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

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

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

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

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

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

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

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