#msb_matches { border-collapse: collapse; }
#msb_matches tr { border-bottom: 1px solid #000; }
#msb_matches td { border-bottom: 1px solid #000; padding: 5px; }
#msb_matches_input[disabled] { background:#f2f2f2; color:#999; cursor:not-allowed; }
.msb-btn{ display:inline-block; padding:10px 20px; background:#333; color:#fff; border-radius:8px; text-decoration:none; font-size:12pt; }
.msb-icon{ width:32px; height:32px; }
.msb-center{ text-align:center; }

/* Variablen & Basis */
#msb_matches {
	--msb-border-color: #000;
	--msb-row-border: 1px solid var(--msb-border-color);
	--msb-header-border: 3px solid var(--msb-border-color); /* dickerer Strich unten im Header */
	--msb-cell-padding: 6px 10px;
	border-collapse: collapse; /* sicherstellen */
	width: 100%;
}

/* Zellen-Basis */
#msb_matches th,
#msb_matches td {
	padding: var(--msb-cell-padding);
	vertical-align: middle;
}

/* Header: dicker Unterstrich, Standard zentriert */
#msb_matches thead tr { border-bottom: 0; } /* überschreibt generische tr-Grenze */
#msb_matches thead th {
	border-bottom: var(--msb-header-border);
	text-align: center;
	position: sticky; /* Sticky Header */
	top: 0;
	background: #fff; /* Hintergrund, damit Inhalte darunter nicht durchscheinen */
	z-index: 2;
}

/* Body: Standard-Grenzen & Zentrierung */
#msb_matches tbody tr { border-bottom: var(--msb-row-border); }
#msb_matches tbody td {
	border-bottom: var(--msb-row-border);
	text-align: center; /* Default: alles zentriert ... */
}

/* ... außer Stadt & Stück: linksbündig (Header + Daten) */
#msb_matches th.msb-col-stadt,
#msb_matches td.msb-col-stadt,
#msb_matches th.msb-col-stueck,
#msb_matches td.msb-col-stueck {
	text-align: left;
}

/* Datum: Daten fett */
#msb_matches td.msb-col-datum { font-weight: 700; }

/* Stadt: Daten ebenfalls fett */
#msb_matches td.msb-col-stadt { font-weight: 700; }

/* ---------------------------------------------
	 Responsive Tabelle & Controls
	 --------------------------------------------- */

.msb-wrap { width: 100%; --msb-gap: 6px; }

.msb-controls {
	display: grid;
	grid-template-columns: 1fr; /* Suchzeile volle Breite */
	gap: var(--msb-gap);
	margin: 6px 0; /* noch kompakter */
}

.msb-search { width: 100%; }
.msb-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid #d0d7de;
	border-radius: 12px; /* abgerundete Ecken */
	font-size: 14px;
	line-height: 1.4;
	background: #fff;
}
.msb-input:focus { outline: none; border-color: #0969da; box-shadow: 0 0 0 3px rgba(9,105,218,0.15); }

/* Entferne unerwünschte WP-Absatzabstände im Such-/Toggle-Bereich */
.msb-wrap p,
.msb-controls p,
.msb-search p,
.msb-toggles p { margin: 0; }
.msb-controls > p,
.msb-toggles > p { margin: 0; padding: 0; display: contents; }

/* Such-Hilfe (animiertes Ein-/Ausblenden) */
.msb-search { position: relative; }
.msb-search-help {
	font-size: 12px;
	line-height: 1.35;
	color: #475569;
	margin-top: 2px;
	opacity: 0;
	transform: translateY(-4px);
	max-height: 0;
	overflow: hidden;
	transition: opacity .25s ease, transform .25s ease, max-height .35s ease, padding .2s ease;
	/* Collapsed: kein Padding/Border => kein visueller Leerraum */
	padding: 0; border: 0; box-shadow: none; background: transparent; border-radius: 8px;
}

/* Verhindere Absatz-Leerraum auch direkt in der Suche */
.msb-search > p { margin: 0; padding: 0; display: contents; }

/* Sichtbar wenn Input Fokus hat oder Inhalt besitzt */
.msb-search:focus-within .msb-search-help,
.msb-input:not(:placeholder-shown) + .msb-search-help {
	opacity: 1;
	transform: translateY(0);
	max-height: 160px;
	padding: 6px 10px 7px;
	background: linear-gradient(90deg,#f8fafc,#fff);
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

@supports selector(:has(*)) {
	/* Alternativer Trigger: Container zeigt Hilfe sobald Input Wert hat (für ältere Browser fallback weiter oben) */
	.msb-search:has(.msb-input[value]:not(.msb-input[value=""])) .msb-search-help { opacity:1; transform:translateY(0); max-height:160px; padding:6px 10px 7px; background:linear-gradient(90deg,#f8fafc,#fff); border:1px solid #e2e8f0; box-shadow:0 1px 2px rgba(0,0,0,0.04); }
}

.msb-toggles {
	display: flex;
	flex-direction: column; /* mobil: untereinander */
	gap: var(--msb-gap); /* gleicher Abstand wie zur Suche */
}

@media (min-width: 768px) {
	.msb-toggles { flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--msb-gap); }
}

.msb-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px; /* größere Klickfläche */
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	user-select: none;
}
.msb-check input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #2563eb; /* moderne Checkbox-Farbe (sofern unterstützt) */
}

/* Verstecke unerwünschte <br> die z.B. durch wpautop entstehen können */
.msb-toggles br { display: none !important; }
#msb_matches td.msb-col-datum br { display: none !important; }

/* Tabelle responsiv umfließen lassen */
.msb-table-wrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Desktop-Standard: Datum normal zeigen, mobiles Datum verbergen; Tag-Spalte sichtbar */
#msb_matches .msb-date-desktop { display: inline; }
#msb_matches .msb-date-mobile { display: none; }
#msb_matches td.msb-col-tag { display: table-cell; }

/* Button in der Tabelle: immer volle Spaltenbreite */
#msb_matches td a.msb-btn { display: block; width: 100%; text-align: center; }

/* Desktop: Button schmaler gestalten */
@media (min-width: 769px) {
	#msb_matches td a.msb-btn { padding: 6px 10px; font-size: 13px; }
}

/* ---------------------------------------------
	Mobile Card Layout (unter ca. Tablet-Breite)
	Breakpoint: max-width 768px
	--------------------------------------------- */
@media (max-width: 768px) {
	#msb_matches { border: 0; }
	#msb_matches thead { display: none; }
	#msb_matches tbody { display: flex; flex-direction: column; gap: 12px; }
	#msb_matches tbody tr {
		display: grid;
		grid-template-columns: 1fr; /* mobil: alles untereinander auf voller Breite */
		background: #fff;
		border: 1px solid #e2e8f0;
		border-radius: 12px;
		padding: 8px 10px 6px;
		box-shadow: 0 1px 2px rgba(0,0,0,0.05);
		position: relative;
	}
	#msb_matches tbody tr:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.08); }
	#msb_matches tbody td {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		text-align: left !important; /* überschreibt zentrierte Defaults */
		border: 0;
		padding: 4px 6px;
		font-size: 14px;
		background: transparent;
	}
	#msb_matches tbody td:before {
		content: attr(data-label);
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .5px;
		color: #64748b;
		font-weight: 600;
		display: block;
		line-height: 1; /* kompakt */
		margin-bottom: 2px; /* etwas Abstand zum Wert */
	}

	/* Mobile Switch: kombiniertes Datum anzeigen, Tag-Spalte ausblenden */
	#msb_matches tbody tr .msb-date-desktop { display: none; }
	#msb_matches tbody tr .msb-date-mobile { display: block; line-height: 1.25; }
	#msb_matches tbody tr td.msb-col-tag { display: none; }

	/* Labels bei leeren Werten in Stadt/Stück ausblenden */
	#msb_matches tbody tr td.msb-col-stadt:empty:before,
	#msb_matches tbody tr td.msb-col-stueck:empty:before { content: none; display: none; }
	/* Labels für Option & Freier Termin ausblenden (5. & 6. Spalte) */
	#msb_matches tbody tr > td:nth-child(5):before,
	#msb_matches tbody tr > td:nth-child(6):before { content: none; display: none; }

	/* Alternativ über data-label (falls Spaltenreihenfolge sich ändert):
	#msb_matches tbody td[data-label*="Option"]:before,
	#msb_matches tbody td[data-label*="freier"]:before { content: none; display:none; }
	*/
	/* Ganze Karte klickbarer machen, falls freier Termin vorhanden */
	#msb_matches tbody td a.msb-btn { width: 100%; text-align: center; display: block; }

	/* Stadt & Datum können hervorgehoben werden */
	#msb_matches tbody td.msb-col-datum { font-size: 15px; }
	#msb_matches tbody td.msb-col-stadt { font-size: 15px; }

/* kein zusätzlicher Fallback nötig; bereits 1 Spalte bei ≤768px */
}