/* Trickster Spielplan 0.5.1 – eine Termin-Karte für alle Ansichten (auf Basis der Core-Framework-Variablen und -Klassen
   bg-surface, radius-m, overflow-hidden, shadow-m, border-l, btn, btn-cta; keine neuen Farben oder Schriften).
   Varianten: --liste (einspaltig, Bild links ab 600 px, darüber auf schmalen Schirmen) und --kompakt (Bild oben, 1/2/3 Spalten).
   Der EINZIGE Link der Karte ist der Titel-Link; sein ::after deckt die ganze Karte ab (Bild, Button und freie Fläche klicken durch).
   Der Button ist ein nicht fokussierbares span (aria-hidden). Wird nur geladen, wenn ein Shortcode die Karten ausgibt. */

.trickster-spielplan {
	margin-bottom: var(--space-xl, 2.5rem);
	width: 100%;
}

.trickster-spielplan__ueberschrift {
	margin-bottom: var(--space-l, 2rem);
}

.trickster-spielplan__liste {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--space-xl, 3rem); /* W4g: mehr Weißraum zwischen den Karten */
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.trickster-spielplan--kompakt .trickster-spielplan__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.trickster-spielplan--kompakt:not(.trickster-spielplan--spalten-2) .trickster-spielplan__liste {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.trickster-spielplan--liste .trickster-spielplan__liste {
	gap: var(--space-2xl, 4rem); /* Liste: deutlich mehr Abstand; Breite = Standard-Inhaltsbreite der Seite (W4g) */
}

.trickster-spielplan__eintrag {
	display: flex;
	margin: 0;
	padding: 0;
}

/* ---------- Karte ---------- */
.trickster-termin {
	position: relative; /* Bezug für den Link über die ganze Karte */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	color: var(--dark, #212020);
}

.trickster-termin p,
.trickster-termin__titel {
	margin: 0;
}

.trickster-termin__bild {
	position: relative;
	flex: 0 0 auto;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--secondary-l-6, #ffeae6);
}

.trickster-termin__bild img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.trickster-termin__inhalt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-xs, 1rem); /* W4j: mehr Luft zwischen den Angaben */
	min-width: 0;
	padding: var(--space-l, 2rem);
}

/* Liste (W4k, W4m): gestapelt (Bild oben im Querformat 3:2, darunter der Datumsstreifen, dann Angaben und Button) bis der Container breit
   genug ist; dann Zeile Bild | Datumsblock | Angaben (Bild ca. 36 %, Block 9,5 rem). Per Container Query, damit die schmale Spalte der
   Inszenierungsseiten und das Tablet gestapelt bleiben. Die Farbe des Datumsblocks ist eine CSS-Variable (Standard seit 0.5.1: helles Grün
   `--tertiary-l-4`, einheitliche Farbwelt des Termine-Bereichs; vorher Zartrosa `--secondary-l-6`). */
.trickster-spielplan--liste {
	container-type: inline-size;
	--trickster-datumblock-bg: var(--tertiary-l-4, #c4e8ab);
}

.trickster-termin--liste .trickster-termin__bild {
	aspect-ratio: 3 / 2;
	max-height: 22rem;
	width: 100%;
}

.trickster-termin--liste .trickster-termin__inhalt {
	padding: var(--space-l, 2rem);
	gap: var(--space-s, 1.25rem);
}

/* Datumsblock: gestapelt ein Streifen (eine Zeile „Fr. 13. November 2026“, Tag groß), darüber Bild, darunter Angaben */
.trickster-termin__datumblock {
	position: relative;
	z-index: 2; /* wie die Textzeilen: Text markierbar; Klick geht per karten.js an den Titel-Link */
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: var(--space-xs, 1rem) var(--space-l, 2rem);
	background: var(--trickster-datumblock-bg, var(--tertiary-l-4, #c4e8ab));
	color: var(--dark, #212020);
}

.trickster-termin__datumzeit {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5em;
	font-weight: 700;
	line-height: 1.2;
}

.trickster-termin__dwt,
.trickster-termin__dmonat {
	font-size: var(--text-m, 1.15rem);
}

.trickster-termin__dtag {
	font-size: var(--text-2xl, 2.4rem);
	font-weight: 800;
	line-height: 1;
}

.trickster-termin__djahr {
	font-size: var(--text-m, 1.15rem);
	font-weight: 600;
}

@container (min-width: 62rem) {
	.trickster-termin--liste {
		flex-direction: row;
	}

	.trickster-termin--liste .trickster-termin__bild {
		flex: 0 0 36%;
		width: auto;
		max-height: none;
		aspect-ratio: auto;
		min-height: 16rem;
	}

	.trickster-termin--liste .trickster-termin__bild img {
		position: absolute;
		inset: 0;
	}

	.trickster-termin--liste .trickster-termin__datumblock {
		display: flex;
		flex: 0 0 9.5rem;
		align-items: center;
		justify-content: center;
		padding: var(--space-m, 1.5rem) var(--space-xs, 1rem);
		text-align: center;
	}

	.trickster-termin--liste .trickster-termin__datumzeit {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: center;
		gap: 0.2rem;
	}

	.trickster-termin--liste .trickster-termin__dtag {
		font-size: var(--text-3xl, 3.5rem);
		line-height: 1;
	}

	.trickster-termin--liste .trickster-termin__dmonat {
		overflow-wrap: anywhere;
	}

	.trickster-termin--liste .trickster-termin__djahr {
		font-size: var(--text-s, 0.95rem);
	}

	.trickster-termin--liste .trickster-termin__inhalt {
		justify-content: center;
		padding: var(--space-l, 2.5rem) var(--space-xl, 3rem);
	}
}

/* Zeilenlänge im Textbereich höchstens ca. 65 Zeichen */
.trickster-termin--liste .trickster-termin__inhalt > p,
.trickster-termin--liste .trickster-termin__titel {
	max-width: 65ch;
}

/* Button im Lesefluss direkt unter den Angaben, linksbündig (Liste) */
.trickster-termin--liste .trickster-termin__aktion {
	margin-top: var(--space-xs, 1rem) !important;
	padding-top: 0;
}

/* Typografie Liste: eine Stufe kräftiger */
.trickster-termin--liste .trickster-termin__titel {
	font-size: var(--text-xl, 2rem);
	line-height: 1.15;
}

.trickster-termin--liste .trickster-termin__art {
	font-size: var(--text-s, 0.95rem);
}

.trickster-termin--liste .trickster-termin__uhrzeit {
	font-size: var(--text-l, 1.4rem);
	line-height: 1.3;
}

.trickster-termin--liste .trickster-termin__ort,
.trickster-termin--liste .trickster-termin__preis,
.trickster-termin--liste .trickster-termin__ticket {
	font-size: var(--text-m, 1.15rem);
	line-height: 1.5;
}

/* Datum: eine Zeile „So., 8. November 2026“ in normaler Schreibweise auf --secondary-l-6; die volle Form steht für Screenreader im Text */
.trickster-termin__datum time {
	display: inline-block;
	padding: 0.3rem 0.8rem;
	border-radius: 0.5rem;
	background: var(--secondary-l-6, #ffeae6);
	font-size: var(--text-s, 0.875rem);
	font-weight: 700;
	line-height: 1.3;
}

.trickster-termin__art {
	font-size: var(--text-s, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.trickster-termin__titel {
	font-size: var(--text-l, 1.5rem);
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: manual; /* kein Silbentrennen im Kartentitel */
	-webkit-hyphens: manual;
}

.trickster-termin__link {
	color: inherit;
	text-decoration: none;
}

.trickster-termin__link::after {
	content: "";
	position: absolute;
	inset: 0; /* ganze Karte klickbar, ohne weiteren Link; Text bleibt markierbar */
	z-index: 1;
}

/* Textzeilen liegen über der Klickfläche des Links, damit sich Text markieren lässt (assets/js/karten.js leitet Klicks darauf weiter) */
.trickster-termin__inhalt > p:not(.trickster-termin__aktion) {
	position: relative;
	z-index: 2;
}

.trickster-termin:hover .trickster-termin__link {
	text-decoration: underline;
}

.trickster-termin:hover {
	box-shadow: 0 0.4rem 1.4rem rgba(33, 32, 32, 0.25);
}

.trickster-termin__uhrzeit {
	font-weight: 600;
}

.trickster-termin__ort,
.trickster-termin__preis,
.trickster-termin__ticket {
	font-size: var(--text-s, 0.875rem);
}

.trickster-termin__status {
	padding: 0.1rem 0.7rem;
	border: 3px solid var(--dark, currentColor);
	border-radius: 999px;
	background: var(--light, #fff);
	font-size: var(--text-s, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.trickster-termin__status--abgesagt,
.trickster-termin__status--verschoben {
	background: var(--secondary-l-6, #ffeae6);
}

.trickster-termin__aktion {
	margin-top: auto !important; /* Button unten in der Karte */
	padding-top: var(--space-xs, 1rem);
}

.trickster-termin .trickster-termin__cta.btn,
.trickster-termin .trickster-termin__cta.btn-cta {
	padding: var(--space-xs, 1rem) var(--space-m, 1.5rem) !important; /* W4m: großzügiger (vorher .small: space-2xs / space-xs); Core Framework setzt .btn-cta.small mit !important */
	background: var(--dark, #212020) !important; /* Core Framework setzt .btn-cta mit !important */
	border-color: var(--dark, #212020);
	color: var(--light, #fff);
	box-shadow: none;
}

.trickster-termin .trickster-termin__cta .trickster-termin__extern {
	color: inherit; /* Extern-Symbol bleibt weiß (currentColor) */
}

/* Hover/Fokus der Karte: Button invertiert (hell mit dunklem Rand), Titel unterstrichen */
.trickster-termin:hover .trickster-termin__cta.btn,
.trickster-termin:hover .trickster-termin__cta.btn-cta,
.trickster-termin:has(.trickster-termin__link:focus-visible) .trickster-termin__cta.btn,
.trickster-termin:has(.trickster-termin__link:focus-visible) .trickster-termin__cta.btn-cta {
	background: var(--light, #fff) !important;
	color: var(--dark, #212020);
}

.trickster-termin__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	pointer-events: none; /* Klicks gehen an den Titel-Link darunter (::after) */
}

.trickster-termin__extern {
	flex: 0 0 auto;
	width: 1em;
	height: 1em;
}

.trickster-termin__credit {
	font-size: 0.8125rem;
}

/* Fokus: sichtbarer Ring um die ganze Karte (WCAG 2.4.7, 1.4.11), dunkel gegen helle Flächen (≥ 3:1) */
.trickster-termin__link:focus,
.trickster-termin__link:focus-visible {
	outline: none;
	text-decoration: underline;
}

.trickster-termin:focus-within {
	outline: 4px solid var(--dark, #212020);
	outline-offset: 3px;
}

@supports selector(:has(*)) {
	.trickster-termin:focus-within {
		outline: none;
	}

	.trickster-termin:has(.trickster-termin__link:focus-visible) {
		outline: 4px solid var(--dark, #212020);
		outline-offset: 3px;
	}
}

/* Vergangene Termine: gleiche Karte, Button ohne CTA-Hervorhebung (.btn statt .btn-cta, kein Zusatz in der Farbe) */
.trickster-termin--vergangen .trickster-termin__bild {
	filter: grayscale(0.4);
}

/* Leerzustand und Paginierung */
.trickster-spielplan__leer {
	display: flex;
	flex-direction: column;
	gap: var(--space-s, 1rem);
	font-size: var(--text-l, 1.5rem);
}

.trickster-spielplan__leer p {
	margin: 0;
}

/* Link im Leerzustand wie der Template-Link „.link-01-static“ („Vergangene Aufführungen ansehen“): Größe wie Fließtext,
   dunkle 5-px-Unterstreichung, beim Hovern ohne. Fokus bleibt der globale 3-px-Ring (Kontrast dunkel auf hellgrün). */
.trickster-spielplan__leer .trickster-spielplan__leer-link {
	font-size: var(--text-m, 1.19rem);
	font-weight: 700;
	color: var(--dark, #212020);
	text-decoration-line: underline;
	text-decoration-color: var(--dark, #212020);
	text-decoration-thickness: 5px;
	text-underline-offset: 0.25em;
	transition: text-decoration-color 300ms;
}

.trickster-spielplan__leer .trickster-spielplan__leer-link:hover {
	text-decoration: none;
}

.trickster-spielplan__seiten {
	margin-top: var(--space-l, 2rem);
}

.trickster-spielplan__seiten .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin: 0 0.25rem 0.5rem 0;
	padding: 0 0.75rem;
	box-sizing: border-box;
	border: 2px solid var(--dark, #212020);
	border-radius: 0.5rem;
	color: var(--dark, #212020);
	font-weight: 700;
	text-decoration: none;
}

.trickster-spielplan__seiten a.page-numbers:hover {
	background: var(--secondary-l-6, #ffeae6);
}

.trickster-spielplan__seiten .page-numbers.current {
	background: var(--dark, #212020);
	color: var(--light, #fff);
}

.trickster-spielplan__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
	.trickster-termin {
		transition: box-shadow 0.15s ease;
	}
}