/* =========================================================================
	KW LOBBY · TV-Highlights-Widget (#57)
	Drei Stile: --card (Abendkarte) · --tiles (Metall-Kacheln) · --board (Lichttafel)
	Sender ist der visuelle Held (Sendezeit ist fast immer 20:15).
	========================================================================= */

/* Elementor-Whitespace-Fix: container-type (Tiles) treibt sonst die Huelle ~2x hoch (§-Gotcha). */
.e-con > .elementor-widget.elementor-widget-kw_tv_highlights {
	align-self: flex-start;
	width: 100%;
}

/* ---------- Gemeinsame Basis ---------- */
.kwl-tv {
	/* Akzent fuer GOLD-TEXT: gegen reines Gold-auf-Hell (faellt durch) mit Textfarbe
		gemischt → kontrastsicher in hell (dunkles Bronze) UND dunkel (helles Gold). */
	--kwl-tv-accent-text: color-mix(in srgb, var(--kwl-accent) 60%, var(--kwl-text));
	/* Sekundaertext leicht zur Textfarbe verschoben — sonst faellt --kwl-text-muted
		auf dem warmen Papier/Gold-Hintergrund knapp unter 4.5:1 (gemessen, hell). */
	--kwl-tv-muted: color-mix(in srgb, var(--kwl-text-muted) 78%, var(--kwl-text));
	--kwl-tv-gap: clamp(var(--kwl-space-sm), 1.5vw, var(--kwl-space-md));
	display: grid;
	gap: var(--kwl-tv-gap);
	color: var(--kwl-text);
}

.kwl-tv__header {
	display: grid;
	gap: var(--kwl-space-xs);
}

.kwl-tv__title {
	margin: 0;
	color: var(--kwl-text);
	text-wrap: balance;
}

.kwl-tv__intro {
	margin: 0;
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-tv-muted);
}

.kwl-tv__notice {
	margin: 0;
	padding: var(--kwl-space-sm) var(--kwl-space-md);
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-text);
	background: color-mix(in srgb, var(--kwl-warning, #d97706) 14%, transparent);
	border-radius: var(--kwl-radius-md);
}

.kwl-tv__empty {
	margin: 0;
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-tv-muted);
}

.kwl-tv__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kwl-tv__footer {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-space-xs) var(--kwl-space-md);
	font-size: var(--kwl-fsize-caption);
	letter-spacing: var(--kwl-ls-light);
	text-transform: uppercase;
	color: var(--kwl-tv-muted);
}

.kwl-tv-item__time {
	font-variant-numeric: tabular-nums;
}

/* =========================================================================
	① ABENDKARTE — Letterpress-Hotelkarte
	========================================================================= */
.kwl-tv--card {
	--kwl-tv-paper: #fbf7ef;
	--kwl-tv-paper-edge: #efe7d6;
	max-width: 460px;
	padding: clamp(var(--kwl-space-md), 3vw, var(--kwl-space-xl));
	background:
		linear-gradient(var(--kwl-tv-paper), var(--kwl-tv-paper)) padding-box,
		repeating-linear-gradient(0deg, transparent 0 3px, color-mix(in srgb, var(--kwl-text) 3%, transparent) 3px 4px);
	background-color: var(--kwl-tv-paper);
	border: 1px solid var(--kwl-tv-paper-edge);
	border-radius: var(--kwl-radius-lg);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
		inset 0 0 60px color-mix(in srgb, var(--kwl-accent) 5%, transparent),
		var(--kwl-shadow-lg);
}

.kwl-tv--card .kwl-tv__kicker {
	margin: 0;
	font-size: var(--kwl-fsize-caption);
	font-weight: var(--kwl-fw-semibold);
	letter-spacing: var(--kwl-ls-ultra);
	text-transform: uppercase;
	color: var(--kwl-tv-accent-text);
}

.kwl-tv--card .kwl-tv__title {
	font-size: var(--kwl-fsize-h2);
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-primary);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

.kwl-tv--card .kwl-tv__rule {
	height: 14px;
	margin: var(--kwl-space-sm) 0 var(--kwl-space-xs);
	display: flex;
	align-items: center;
	justify-content: center;
}

.kwl-tv--card .kwl-tv__rule::before,
.kwl-tv--card .kwl-tv__rule::after {
	content: "";
	flex: 1;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kwl-accent) 65%, #fff), var(--kwl-accent-hover), color-mix(in srgb, var(--kwl-accent) 65%, #fff), transparent);
}

.kwl-tv--card .kwl-tv__rule i {
	width: 7px;
	height: 7px;
	margin: 0 var(--kwl-space-sm);
	rotate: 45deg;
	background: linear-gradient(135deg, #fff6e0, var(--kwl-accent), var(--kwl-accent-hover));
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--kwl-accent) 40%, transparent);
}

.kwl-tv--card .kwl-tv-item {
	padding: var(--kwl-space-md) 0;
	border-top: 1px solid color-mix(in srgb, var(--kwl-accent) 22%, transparent);
}

.kwl-tv--card .kwl-tv-item:first-child {
	border-top: 0;
	padding-top: var(--kwl-space-xs);
}

.kwl-tv--card .kwl-tv-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--kwl-space-sm);
	margin-bottom: var(--kwl-space-xs);
}

.kwl-tv--card .kwl-tv-item__ch-in {
	font-size: var(--kwl-fsize-caption);
	font-weight: var(--kwl-fw-bold);
	letter-spacing: var(--kwl-ls-broad);
	text-transform: uppercase;
	color: var(--kwl-tv-accent-text);
}

.kwl-tv--card .kwl-tv-item__meta {
	display: inline-flex;
	gap: var(--kwl-space-sm);
	align-items: baseline;
	font-size: var(--kwl-fsize-caption);
	color: var(--kwl-tv-muted);
}

.kwl-tv--card .kwl-tv-item__meta::before {
	content: "·";
	color: color-mix(in srgb, var(--kwl-accent) 60%, transparent);
}

.kwl-tv--card .kwl-tv-item__title {
	margin: 0;
	font-size: var(--kwl-fsize-h4);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-tight);
	color: var(--kwl-primary);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	text-wrap: balance;
}

.kwl-tv--card .kwl-tv-item__ep {
	margin: var(--kwl-space-xs) 0 0;
	font-size: var(--kwl-fsize-small);
	font-style: italic;
	color: var(--kwl-tv-muted);
}

.kwl-tv--card .kwl-tv-item__ep-no {
	font-style: normal;
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-tv-accent-text);
}

.kwl-tv--card .kwl-tv-item__synopsis {
	margin: var(--kwl-space-xs) 0 0;
	font-size: var(--kwl-fsize-small);
	line-height: var(--kwl-lh-body);
	color: var(--kwl-tv-muted);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kwl-tv--card .kwl-tv-item__regie {
	margin: var(--kwl-space-xs) 0 0;
	font-size: var(--kwl-fsize-caption);
	color: var(--kwl-tv-muted);
}

.kwl-tv--card .kwl-tv__footer {
	margin-top: var(--kwl-space-md);
	justify-content: center;
}

/* Dark: warmes Papier statt creme */
@media (prefers-color-scheme: dark) {
	.kwl-tv--card {
		--kwl-tv-paper: #1b2433;
		--kwl-tv-paper-edge: #0f1622;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.06),
			inset 0 0 60px color-mix(in srgb, var(--kwl-accent) 7%, transparent),
			var(--kwl-shadow-lg);
	}

	.kwl-tv--card .kwl-tv__title,
	.kwl-tv--card .kwl-tv-item__title {
		color: var(--kwl-text);
		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
	}
}

/* =========================================================================
	② METALL-KACHELN — haptische Material-Tiles
	========================================================================= */
.kwl-tv--tiles {
	container-type: inline-size;
}

.kwl-tv--tiles .kwl-tv__title {
	font-size: var(--kwl-fsize-h3);
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-primary);
}

@media (prefers-color-scheme: dark) {
	.kwl-tv--tiles .kwl-tv__title {
		color: var(--kwl-text);
	}
}

.kwl-tv--tiles .kwl-tv__list {
	display: grid;
	gap: var(--kwl-tv-gap);
	grid-template-columns: 1fr;
}

@container (min-width: 520px) {
	.kwl-tv--tiles .kwl-tv__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (min-width: 840px) {
	.kwl-tv--tiles .kwl-tv__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kwl-tv--tiles .kwl-tv-item {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm);
	padding: var(--kwl-space-md);
	background: var(--kwl-bg);
	border: 1px solid var(--kwl-border);
	border-radius: 18px;
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent),
		inset 0 -10px 22px -18px color-mix(in srgb, var(--kwl-text) 40%, transparent),
		var(--kwl-shadow-md);
	transition: transform var(--kwl-transition), box-shadow var(--kwl-transition);
}

@media (prefers-color-scheme: dark) {
	.kwl-tv--tiles .kwl-tv-item {
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.07),
			inset 0 -10px 22px -18px rgba(0, 0, 0, 0.5),
			var(--kwl-shadow-md);
	}
}

.kwl-tv--tiles .kwl-tv-item__head {
	display: flex;
	flex-direction: column;
	gap: var(--kwl-space-sm);
}

/* Sender = graviertes Navy-Namensschild, vollbreit + zentriert (in BEIDEN Modi dunkel — Material, kein Token-Flip). */
.kwl-tv--tiles .kwl-tv-item__ch {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 1.9rem;
	padding: 0.32rem 0.7rem;
	border-radius: 9px;
	background: linear-gradient(180deg, #0a3a68, #00315d);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		inset 0 -2px 4px rgba(0, 0, 0, 0.45),
		0 1px 1px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	position: relative;
}

/* Metallic = Lichtreflex auf der Metall-Platte (nicht in der Schrift). Startet verdeckt links. */
.kwl-tv--tiles .kwl-tv-item__ch::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(105deg, transparent 30%, rgba(255, 244, 214, 0.45) 50%, transparent 70%);
	transform: translateX(-130%);
	pointer-events: none;
}

/* Eingravierte, solide Gold-Schrift (kontrastsicher auf Navy, ~6.5:1). */
.kwl-tv--tiles .kwl-tv-item__ch-in {
	font-size: var(--kwl-fsize-caption);
	font-weight: var(--kwl-fw-extrabold);
	letter-spacing: var(--kwl-ls-broad);
	text-transform: uppercase;
	text-align: center;
	line-height: var(--kwl-lh-snug);
	color: #e8c882;
	text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Zeit + Dauer mittig unter dem Namensschild. */
.kwl-tv--tiles .kwl-tv-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-xs) var(--kwl-space-sm);
	font-size: var(--kwl-fsize-caption);
	color: var(--kwl-tv-muted);
}

.kwl-tv--tiles .kwl-tv-item__dur {
	flex-shrink: 0;
	font-size: var(--kwl-fsize-caption);
	font-weight: var(--kwl-fw-semibold);
	font-variant-numeric: tabular-nums;
	color: var(--kwl-tv-muted);
	padding: 0.2rem 0.5rem;
	border-radius: 7px;
	background: color-mix(in srgb, var(--kwl-accent) 12%, transparent);
	box-shadow: inset 0 1px 2px color-mix(in srgb, var(--kwl-text) 14%, transparent);
}

.kwl-tv--tiles .kwl-tv-item__title {
	margin: var(--kwl-space-xs) 0 0;
	font-size: var(--kwl-fsize-h4);
	font-weight: var(--kwl-fw-bold);
	line-height: var(--kwl-lh-tight);
	color: var(--kwl-primary);
	text-wrap: balance;
}

@media (prefers-color-scheme: dark) {
	.kwl-tv--tiles .kwl-tv-item__title {
		color: var(--kwl-text);
	}
}

.kwl-tv--tiles .kwl-tv-item__ep {
	margin: 0;
	font-size: var(--kwl-fsize-caption);
	color: var(--kwl-tv-muted);
}

.kwl-tv--tiles .kwl-tv-item__ep-no {
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-tv-accent-text);
}

.kwl-tv--tiles .kwl-tv-item__synopsis {
	margin: var(--kwl-space-xs) 0 0;
	font-size: var(--kwl-fsize-small);
	line-height: var(--kwl-lh-body);
	color: var(--kwl-tv-muted);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kwl-tv--tiles .kwl-tv-item__regie {
	margin: auto 0 0;
	padding-top: var(--kwl-space-xs);
	font-size: var(--kwl-fsize-caption);
	color: var(--kwl-tv-muted);
	display: flex;
	align-items: center;
	gap: var(--kwl-space-xs);
}

.kwl-tv--tiles .kwl-tv-item__regie::before {
	content: "";
	width: 5px;
	height: 5px;
	rotate: 45deg;
	background: var(--kwl-accent);
}

@media (hover: hover) {
	.kwl-tv--tiles .kwl-tv-item:hover {
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, #fff 70%, transparent),
			var(--kwl-shadow-hover);
	}
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.kwl-tv--tiles .kwl-tv-item:hover {
		transform: translateY(-3px);
	}

	.kwl-tv--tiles .kwl-tv-item:hover .kwl-tv-item__ch::after {
		transform: translateX(130%);
		transition: transform 0.6s var(--kwl-ease-soft);
	}
}

/* =========================================================================
	③ LICHTTAFEL — Split-Flap / Solari-Tafel (in BEIDEN Modi dunkel)
	========================================================================= */
.kwl-tv--board {
	--kwl-tv-board-fg: #ece3cf;
	--kwl-tv-board-amber: #d8b76a;
	padding: var(--kwl-space-md);
	border-radius: var(--kwl-radius-lg);
	background: radial-gradient(120% 80% at 50% -10%, #2a3445 0%, #151c28 55%, #0d131d 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		inset 0 0 0 1px rgba(255, 255, 255, 0.04),
		inset 0 6px 18px rgba(0, 0, 0, 0.55),
		var(--kwl-shadow-lg);
}

.kwl-tv--board .kwl-tv__header {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm);
	margin-bottom: var(--kwl-space-sm);
}

.kwl-tv--board .kwl-tv__beacon {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--kwl-tv-board-amber);
	box-shadow: 0 0 8px 1px color-mix(in srgb, var(--kwl-tv-board-amber) 70%, transparent);
}

.kwl-tv--board .kwl-tv__title {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-small);
	font-weight: var(--kwl-fw-bold);
	letter-spacing: var(--kwl-ls-ultra);
	text-transform: uppercase;
	color: var(--kwl-tv-board-amber);
}

.kwl-tv--board .kwl-tv__list {
	display: grid;
	gap: 0.3rem;
}

.kwl-tv--board .kwl-tv-item {
	display: grid;
	grid-template-columns: 4.3rem 8rem 1fr;
	gap: var(--kwl-space-sm);
	align-items: center;
	transform-origin: top center;
}

.kwl-tv--board .kwl-tv-item__head,
.kwl-tv--board .kwl-tv-item__meta {
	display: contents;
}

.kwl-tv--board .kwl-tv-item__ch,
.kwl-tv--board .kwl-tv-item__time,
.kwl-tv--board .kwl-tv-item__title {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: var(--kwl-fsize-small);
	color: var(--kwl-tv-board-fg);
	background: linear-gradient(180deg, #141b26 0 calc(50% - 0.5px), #0b1019 calc(50% + 0.5px) 100%);
	border-radius: 5px;
	padding: 0.34rem 0.5rem;
	letter-spacing: var(--kwl-ls-subtle);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 1px rgba(0, 0, 0, 0.5);
	text-shadow: 0 0 6px rgba(216, 183, 106, 0.18);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.kwl-tv--board .kwl-tv-item__time {
	order: -1;
	text-align: center;
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-tv-board-amber);
}

.kwl-tv--board .kwl-tv-item__ch-in {
	color: #cdd6e2;
}

.kwl-tv--board .kwl-tv-item__title {
	margin: 0;
	font-size: var(--kwl-fsize-small);
	font-weight: var(--kwl-fw-regular);
	line-height: var(--kwl-lh-snug);
}

.kwl-tv--board .kwl-tv__footer {
	margin-top: var(--kwl-space-sm);
	color: #7c8597;
}

@media (max-width: 520px) {
	.kwl-tv--board .kwl-tv-item {
		grid-template-columns: 3.6rem 1fr;
	}

	.kwl-tv--board .kwl-tv-item__title {
		grid-column: 1 / -1;
	}
}

/* Dezente Falt-Animation beim Erscheinen (rein dekorativ). */
@media (prefers-reduced-motion: no-preference) {
	.kwl-tv--board .kwl-tv-item {
		animation: kwl-tv-flap 0.55s both var(--kwl-ease-entrance);
	}

	.kwl-tv--board .kwl-tv-item:nth-child(1) { animation-delay: 0.02s; }
	.kwl-tv--board .kwl-tv-item:nth-child(2) { animation-delay: 0.08s; }
	.kwl-tv--board .kwl-tv-item:nth-child(3) { animation-delay: 0.14s; }
	.kwl-tv--board .kwl-tv-item:nth-child(4) { animation-delay: 0.20s; }
	.kwl-tv--board .kwl-tv-item:nth-child(5) { animation-delay: 0.26s; }
	.kwl-tv--board .kwl-tv-item:nth-child(6) { animation-delay: 0.32s; }
	.kwl-tv--board .kwl-tv-item:nth-child(7) { animation-delay: 0.38s; }
	.kwl-tv--board .kwl-tv-item:nth-child(8) { animation-delay: 0.44s; }
	.kwl-tv--board .kwl-tv-item:nth-child(9) { animation-delay: 0.50s; }
	.kwl-tv--board .kwl-tv-item:nth-child(10) { animation-delay: 0.56s; }
	.kwl-tv--board .kwl-tv-item:nth-child(11) { animation-delay: 0.62s; }
	.kwl-tv--board .kwl-tv-item:nth-child(12) { animation-delay: 0.68s; }

	@keyframes kwl-tv-flap {
		from { transform: rotateX(-82deg); opacity: 0; }
		to { transform: rotateX(0); opacity: 1; }
	}
}

/* ---------- Placeholder (Editor) ---------- */
.kwl-tv--placeholder {
	padding: var(--kwl-space-lg);
	border: 2px dashed var(--kwl-border);
	border-radius: var(--kwl-radius-lg);
	text-align: center;
}

/* ---------- High-Contrast / forced-colors ---------- */
@media (forced-colors: active) {
	.kwl-tv--card,
	.kwl-tv--tiles .kwl-tv-item,
	.kwl-tv--board {
		border: 1px solid CanvasText;
	}

	.kwl-tv--tiles .kwl-tv-item__ch {
		background: Canvas;
		border: 1px solid CanvasText;
	}

	.kwl-tv--tiles .kwl-tv-item__ch-in,
	.kwl-tv--board .kwl-tv-item__time,
	.kwl-tv__kicker {
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
	}
}