/* =========================================================
   PIXELCODE Event Countdown
   Basis-Styles + Farbvorlagen. Alle Werte lassen sich im
   Elementor-Stil-Tab überschreiben.
   ========================================================= */

.pxc-ec {
	/* Vorlage „Hell“ */
	--pxc-bg: transparent;
	--pxc-ink: #111114;
	--pxc-muted: #6b6b75;
	--pxc-accent: #e8338e;
	--pxc-on-accent: #fff;
	--pxc-box: #f9e4e5;
	--pxc-box-border: transparent;
	--pxc-pill: #ededef;
	--pxc-pill-border: #e0e0e6;
	--pxc-glow: none;
	--pxc-display: "Big Shoulders Display", "Oswald", Impact, "Arial Narrow", sans-serif;
	--pxc-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	box-sizing: border-box;
	max-width: 1140px;
	margin: 0 auto;
	padding: 40px 16px;
	background: var(--pxc-bg);
	color: var(--pxc-ink);
	font-family: var(--pxc-display);
}

/* Vorlage „Dunkel“ */
.pxc-ec-preset-dark .pxc-ec {
	--pxc-bg: #000;
	--pxc-ink: #fff;
	--pxc-muted: #8d8d98;
	--pxc-box: #1c0d15;
	--pxc-box-border: #3a1828;
	--pxc-pill: #141417;
	--pxc-pill-border: #2a2a31;
	--pxc-glow: 0 0 40px rgba(232, 51, 142, .35);
}

.pxc-ec *,
.pxc-ec *::before,
.pxc-ec *::after { box-sizing: inherit; }

.pxc-ec [hidden] { display: none !important; }

/* ---------- Countdown ---------- */
.pxc-ec__timer {
	display: grid;
	grid-template-columns: auto repeat(var(--pxc-cols, 4), minmax(0, 1fr));
	gap: 26px;
	align-items: center;
	margin-bottom: 28px;
}

.pxc-ec__lead {
	grid-column: var(--pxc-lead-span, auto);
	font-family: var(--pxc-display);
	font-weight: 800;
	font-size: 15px;
	letter-spacing: .22em;
	text-transform: uppercase;
	white-space: nowrap;
	padding-right: 6px;
	color: var(--pxc-ink);
}
.pxc-ec__lead:empty { display: none; }

.pxc-ec__box {
	background: var(--pxc-box);
	border: 2px solid var(--pxc-box-border);
	border-radius: 22px;
	padding: 14px 8px 16px;
	text-align: center;
	min-width: 0;
}

.pxc-ec__num {
	display: block;
	font-family: var(--pxc-display);
	font-weight: 900;
	font-size: clamp(40px, 7vw, 76px);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--pxc-ink);
}

.pxc-ec__unit {
	display: block;
	margin-top: 10px;
	font-family: var(--pxc-mono);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pxc-muted);
}

.pxc-ec__timer.is-live .pxc-ec__num { color: var(--pxc-accent); }

/* ---------- Terminliste ---------- */
.pxc-ec__dates {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pxc-ec__item {
	display: flex;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	min-width: 0;
}
.pxc-ec__item::before,
.pxc-ec__item::marker { content: none; }

.pxc-ec__pill {
	flex: 1 1 auto;
	display: flex;
	align-items: baseline;
	align-items: last baseline; /* Jahr steht auf der Grundlinie des Datums, nicht des Wochentags */
	justify-content: center;
	flex-wrap: wrap;
	gap: 14px;
	padding: 18px 46px 16px;
	border-radius: 999px;
	background: var(--pxc-pill);
	border: 2px solid var(--pxc-pill-border);
	line-height: 1;
	color: var(--pxc-ink);
	text-decoration: none;
	transition: background-color .2s, border-color .2s, opacity .2s, transform .2s;
}
a.pxc-ec__pill,
a.pxc-ec__pill:hover,
a.pxc-ec__pill:focus { text-decoration: none; color: var(--pxc-ink); }
a.pxc-ec__pill:hover { border-color: var(--pxc-accent); }

/* Datum mit Wochentag darüber – Grundlinie bleibt die des Datums */
.pxc-ec__date {
	display: inline-block;
	line-height: 1;
}

.pxc-ec__wd {
	display: block;
	margin-bottom: 6px;
	font-family: var(--pxc-mono);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.2;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-align: left;
	color: var(--pxc-muted);
}

/* Variante: Wochentag vor dem Datum */
.pxc-ec-wd-inline .pxc-ec__wd {
	display: inline-block;
	margin-bottom: 0;
	margin-right: 10px;
	vertical-align: .9em;
}

.pxc-ec__pill.is-next .pxc-ec__wd { color: var(--pxc-on-accent); opacity: .85; }

.pxc-ec__day {
	font-family: var(--pxc-display);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 60px);
	letter-spacing: -.01em;
	color: var(--pxc-ink);
}

.pxc-ec__year {
	font-family: var(--pxc-display);
	font-weight: 800;
	font-size: clamp(22px, 3vw, 30px);
	color: var(--pxc-muted);
}

.pxc-ec__tag {
	align-self: center;
	padding-left: 6px;
	font-family: var(--pxc-mono);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pxc-accent);
}

/* Nächster Termin */
.pxc-ec__pill.is-next {
	background: var(--pxc-accent);
	border-color: var(--pxc-accent);
	box-shadow: var(--pxc-glow);
}
.pxc-ec__pill.is-next .pxc-ec__day,
.pxc-ec__pill.is-next .pxc-ec__year,
.pxc-ec__pill.is-next .pxc-ec__tag { color: var(--pxc-on-accent); }
a.pxc-ec__pill.is-next:hover { filter: brightness(1.08); }

/* Vergangener Termin (bis zum Ausblenden) */
.pxc-ec__pill.is-past { opacity: .45; }

.pxc-ec__empty {
	margin: 0;
	font-family: var(--pxc-mono);
	color: var(--pxc-muted);
}

/* ---------- Responsive Grundwerte (Elementor-Einstellungen überschreiben diese) ---------- */
@media (max-width: 1024px) {
	.pxc-ec__timer {
		grid-template-columns: repeat(var(--pxc-cols, 4), minmax(0, 1fr));
		--pxc-lead-span: 1 / -1;
	}
	.pxc-ec__lead { text-align: center; padding: 0; }
}
@media (max-width: 767px) {
	.pxc-ec__item { flex: 1 1 100%; }
	.pxc-ec { padding: 28px 16px; }
	.pxc-ec__timer { gap: 10px; }
	.pxc-ec__box { border-radius: 16px; padding: 12px 4px 14px; }
	.pxc-ec__unit { font-size: 10px; letter-spacing: .08em; }
	.pxc-ec__dates { gap: 12px; }
	.pxc-ec__pill { padding: 14px 20px 12px; gap: 10px; }
	.pxc-ec__tag { padding-left: 0; font-size: 11px; }
}