.spielplan {
	--spielplan-akzent: #0095dd;
	--spielplan-rand: #e2e6ea;
	--spielplan-box: #f8f9fb;
}

/* ---------- Kompakte Liste [spielplan] ---------- */

.spielplan .spielplan-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.spielplan .spielplan-eintrag {
	display: flex;
	align-items: center;
	gap: 0.9em;
	margin: 0 0 0.6em;
	padding: 0;
}

.spielplan .spielplan-datum {
	flex: 0 0 4.75em;
	height: 4.75em;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--spielplan-box);
	border: 1px solid var(--spielplan-rand);
	border-radius: 0.5em;
	line-height: 1.1;
	color: #111;
}

.spielplan .spielplan-monat {
	font-size: 0.95em;
	text-transform: uppercase;
}

.spielplan .spielplan-tag {
	font-size: 1.65em;
	font-weight: 500;
}

.spielplan .spielplan-info {
	min-width: 0;
	line-height: 1.35;
}

/* Mannschaft steht in einer eigenen Zeile über dem Spiel */
.spielplan .spielplan-kategorie {
	margin: 0 0 0.15em;
}

.spielplan .spielplan-mannschaft {
	display: inline-block;
	padding: 1px 7px;
	border-radius: 4px;
	background: var(--spielplan-akzent);
	color: #fff;
	font-size: 0.75em;
	font-weight: 700;
}

.spielplan .spielplan-titel {
	color: var(--spielplan-titel, var(--spielplan-akzent));
	font-size: 1.1em;
}

.spielplan .spielplan-zeit,
.spielplan .spielplan-halle {
	color: inherit;
}

.spielplan .spielplan-vermerk {
	display: block;
	font-size: 0.85em;
	font-style: italic;
	opacity: 0.75;
}

.spielplan .spielplan-abgesagt .spielplan-titel,
.spielplan .spielplan-abgesagt .spielplan-z-spiel {
	text-decoration: line-through;
	opacity: 0.7;
}

.spielplan .spielplan-leer,
.spielplan .spielplan-laedt {
	margin: 0;
	opacity: 0.8;
}

/* ---------- Gesamtspielplan [spielplan_gesamt] ---------- */

.spielplan-gesamt .spielplan-haupttitel {
	margin: 0 0 0.6em;
}

.spielplan-gesamt .spielplan-gruppe {
	margin: 1.6em 0 0.5em;
	color: var(--spielplan-titel, var(--spielplan-akzent));
}

.spielplan-gesamt .spielplan-gruppe:first-child {
	margin-top: 0;
}

/* Echte Tabelle: Überschriften und Texte stehen immer in denselben Spalten */
.spielplan-gesamt .spielplan-gesamtliste {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.spielplan-gesamt .spielplan-gesamtliste th,
.spielplan-gesamt .spielplan-gesamtliste td {
	padding: 0.55em 0.8em;
	border: 0;
	border-bottom: 1px solid var(--spielplan-rand);
	background: none;
	text-align: left;
	vertical-align: baseline;
	line-height: 1.35;
}

.spielplan-gesamt .spielplan-gesamtliste th {
	background: var(--spielplan-box);
	color: #111;
	font-size: 0.8em;
	font-weight: 700;
	text-transform: uppercase;
}

.spielplan-gesamt .spielplan-gesamtliste th:last-child,
.spielplan-gesamt .spielplan-z-ergebnis {
	text-align: right;
}

.spielplan-gesamt .spielplan-z-datum,
.spielplan-gesamt .spielplan-z-zeit,
.spielplan-gesamt .spielplan-z-ergebnis {
	white-space: nowrap;
}

.spielplan-gesamt .spielplan-z-spiel {
	width: 100%;
	font-weight: 600;
}

.spielplan-gesamt .spielplan-z-ergebnis {
	font-weight: 700;
}

.spielplan-gesamt .spielplan-z-spiel .spielplan-mannschaft {
	margin-right: 0.4em;
	vertical-align: 0.1em;
}

.spielplan-gesamt .spielplan-vorbei {
	opacity: 0.85;
}

/* ---------- Abo-Button ---------- */

.spielplan-abo .spielplan-abo-button {
	display: inline-block;
	padding: 12px 26px;
	border-radius: 50px;
	background: #0095dd;
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.spielplan-abo .spielplan-abo-button:hover {
	background: #0077b3;
	color: #fff;
}

.spielplan-abo .spielplan-abo-hinweis {
	margin: 12px 0 0;
	font-size: 0.9em;
}

.spielplan-abo .spielplan-abo-hinweis input {
	width: 100%;
	max-width: 520px;
	margin-top: 4px;
}

/* ---------- Smartphone und schmale Bildschirme ---------- */

.spielplan {
	overflow-wrap: break-word;
}

@media (max-width: 640px) {

	/* Kompakte Liste */
	.spielplan .spielplan-eintrag {
		gap: 0.75em;
		margin-bottom: 0.9em;
	}
	.spielplan .spielplan-datum {
		flex-basis: 3.9em;
		height: 3.9em;
	}
	.spielplan .spielplan-tag {
		font-size: 1.4em;
	}
	.spielplan .spielplan-titel {
		font-size: 1em;
		font-weight: 600;
	}
	.spielplan .spielplan-zeit,
	.spielplan .spielplan-halle {
		font-size: 0.92em;
	}

	/* Gesamtspielplan: jede Zeile wird eine übersichtliche Karte
	   Zeile 1: Datum, Uhrzeit, Ergebnis   Zeile 2: Spiel   Zeile 3: Halle */
	.spielplan-gesamt .spielplan-gruppe {
		margin-top: 1.4em;
		font-size: 1.25em;
	}
	.spielplan-gesamt .spielplan-gesamtliste,
	.spielplan-gesamt .spielplan-gesamtliste tbody {
		display: block;
	}
	.spielplan-gesamt .spielplan-gesamtliste thead {
		display: none;
	}
	.spielplan-gesamt .spielplan-gesamtliste tr.spielplan-zeile {
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"datum zeit ergebnis"
			"spiel spiel spiel"
			"ort ort ort";
		align-items: baseline;
		gap: 0.2em 0.8em;
		padding: 0.75em 0.2em;
		border-bottom: 1px solid var(--spielplan-rand);
	}
	.spielplan-gesamt .spielplan-gesamtliste td {
		display: block;
		min-width: 0;
		padding: 0;
		border: 0;
		white-space: normal;
		text-align: left;
	}
	.spielplan-gesamt .spielplan-gesamtliste td:empty {
		display: none;
	}
	.spielplan-gesamt .spielplan-z-datum {
		grid-area: datum;
		font-size: 0.9em;
		font-weight: 700;
		white-space: nowrap;
	}
	.spielplan-gesamt .spielplan-z-zeit {
		grid-area: zeit;
		font-size: 0.9em;
		white-space: nowrap;
	}
	.spielplan-gesamt .spielplan-z-spiel {
		grid-area: spiel;
		width: auto;
		font-size: 1.05em;
		line-height: 1.3;
	}
	.spielplan-gesamt .spielplan-z-ort {
		grid-area: ort;
		font-size: 0.88em;
		opacity: 0.85;
	}
	.spielplan-gesamt .spielplan-z-ergebnis {
		grid-area: ergebnis;
		justify-self: end;
		font-size: 0.95em;
		font-weight: 700;
		white-space: nowrap;
		text-align: right;
	}

	/* Abo-Button über die ganze Breite, leicht zu treffen */
	.spielplan-abo .spielplan-abo-button {
		display: block;
		text-align: center;
	}
}

@media (max-width: 380px) {
	.spielplan .spielplan-datum {
		flex-basis: 3.4em;
		height: 3.4em;
	}
	.spielplan .spielplan-tag {
		font-size: 1.25em;
	}
}