/* Theme-nah, Elementor/Hello-freundlich, responsiv */
.tls-terminliste {
	width: 100%;

	/* ✅ FIX: harte Spaltenbreite, damit Spalte 2 immer bündig bleibt */
	--tls-datecol-width: 18ch; /* wenn du möchtest: 17ch oder 19ch */

	--tls-col-gap: 1.2em;

	/* gleiche Höhe der "Top-Zeile" (Datum/Ort), damit Uhrzeit & Sub exakt fluchten */
	--tls-toprow-height: 2.05em;

	/* Button-Farbe: bevorzugt Elementor Accent, sonst Orange */
	--tls-btn-bg: var(--e-global-color-accent, #f28c00);

	/* Datum-Pille */
	--tls-pill-bg: rgba(0, 0, 0, 0.08);
}

.tls-terminliste__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tls-terminliste__item {
	margin: 0;
	padding: 0.7em 0.6em 0.7em 0;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

.tls-terminliste__item:last-child {
	border-bottom: 0;
}

/* ✅ Grid: Datumspalte ist FIX (kein Mitwachsen mehr) */
.tls-termin__grid {
	display: grid;
	grid-template-columns: var(--tls-datecol-width) 1fr max-content;
	column-gap: var(--tls-col-gap);
	row-gap: 0;
	align-items: start;
}

/* ✅ Datumspalte als 2-Zeilen-Raster */
.tls-termin__datecol {
	display: grid;
	grid-template-rows: var(--tls-toprow-height) auto;
	align-items: start;

	/* wichtig: wirklich fixieren */
	width: var(--tls-datecol-width);
}

/* ✅ Ort+Sub als 2-Zeilen-Raster (gleiche Top-Row-Höhe) */
.tls-termin__placewrap {
	display: grid;
	grid-template-rows: var(--tls-toprow-height) auto;
	align-items: start;
	min-width: 0;

	margin: 0 !important;
	padding: 0 !important;
}

/* Hervorhebung */
.tls-termin__date,
.tls-termin__place {
	font-weight: 700;
}

/* Datum niemals umbrechen lassen */
.tls-termin__date {
	white-space: nowrap;

	/* falls Datum doch länger ist: sauber abschneiden statt Layout zu verschieben */
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Ort */
.tls-termin__place {
	min-width: 0;
	line-height: 1.2;
	margin: 0 !important;
	padding: 0 !important;
}

/* Uhrzeit unter Datum RECHTS, exakt Zeile 2 */
.tls-termin__timeunder {
	grid-row: 2;
	justify-self: end;
	text-align: right;

	font-weight: 600;
	opacity: 0.92;
	font-size: 0.95em;
	line-height: 1.15;
	white-space: nowrap;

	margin: 0 !important;
	padding: 0 !important;
}

/* Sub/Bemerkung in Zeile 2, fluchtet mit Uhrzeit */
.tls-termin__sub {
	grid-row: 2;

	opacity: 0.82;
	font-weight: 400;
	font-size: 0.95em;
	line-height: 1.15;

	margin: 0 !important;
	padding: 0 !important;
}

/* Action rechts */
.tls-termin__action {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	padding-right: 0.4em;
}

/* Button */
.tls-termin__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	padding: 0.55em 1.05em;
	border-radius: 8px;
	background: var(--tls-btn-bg);

	color: #ffffff !important;
	text-decoration: none !important;

	font-weight: 700;
	white-space: nowrap;
	line-height: 1;
}

.tls-termin__more:hover,
.tls-termin__more:focus {
	filter: brightness(0.92);
	color: #ffffff !important;
	text-decoration: none !important;
}

/* ✅ Datum-Pille: IMMER volle feste Breite -> kein Versatz mehr */
.tls--datepill .tls-termin__date {
	display: inline-flex;
	align-items: center;

	width: 100%;
	box-sizing: border-box;

	padding: 0.28em 0.75em;
	border-radius: 999px;
	background: var(--tls-pill-bg);

	line-height: 1.15;
}

/* Mobile: untereinander */
@media (max-width: 520px) {
	.tls-terminliste__item {
		padding-right: 0;
	}

	.tls-termin__grid {
		grid-template-columns: 1fr;
		row-gap: 0.12em;
	}

	.tls-termin__datecol,
	.tls-termin__placewrap {
		grid-template-rows: auto auto;
		width: auto; /* auf Mobile darf die Datumspalte wieder flexibel sein */
	}

	.tls-termin__action {
		justify-content: flex-start;
		padding-right: 0;
		margin-top: 0.25em;
	}

	.tls-termin__timeunder {
		justify-self: start;
		text-align: left;
	}

	/* Mobile: Pille nicht zwangsläufig volle Breite */
	.tls--datepill .tls-termin__date {
		width: auto;
	}
}