/* ==========================================================================
   MODUL SPIELPLAN – Kachel-Leiste [borosen_spielplan]  (NEU 1.8.0)
   --------------------------------------------------------------------------
   ┌────────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ → wischen
   │ @ FC Bayern    │ │ vs Real Betis│ │ vs Elversberg│ │ @ Gladbach   │
   │ Sa 31.10. 18:30│ │ ✿ (Rose)     │ │              │ │              │
   └────────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
   GEÄNDERT (1.8.2): nur noch die kommenden Spiele, ohne "Nächstes Spiel"
   (das letzte Ergebnis gibt es mit [borosen_spielplan letztes="1"]).
   - Heimspiel gelb, Auswärtsspiel schwarz – wie die Trikots.
   - Dunkles Design: ohne Rahmen – Heimspiel hellgrau (#333), Auswärtsspiel
     dunkel (#1E1E1E); Gelb nur als Akzent ("vs"), siehe Theme Abschnitt 15.
   - "Borosen dabei": große, leise Rose angeschnitten in der Ecke.
   - Computer: vier Kacheln sichtbar; am Handy seitlich wischen, die Leiste
     startet beim nächsten Spiel (spielplan.js).
   ========================================================================== */

/* Farbwerte – auch für den Kartenkopf der Ticketwünsche (.voting-game) */
.borosen-spielplan,
.voting-game {
	--sp-heim-grund: var(--wp--preset--color--bvb-gelb, #FFD800);
	--sp-heim-text: #1A1A1A;
	--sp-heim-leise: #4D4D4D;
	--sp-heim-rand: transparent;
	--sp-heim-akzent: #1A1A1A;
	--sp-heim-rose: rgba(26, 26, 26, 0.09);
	--sp-ausw-grund: #1A1A1A;
	--sp-ausw-text: #F9F9F9;
	--sp-ausw-leise: #BDBDBD;
	--sp-ausw-rand: transparent;
	--sp-ausw-akzent: var(--wp--preset--color--bvb-gelb, #FFD800);
	--sp-ausw-rose: rgba(255, 216, 0, 0.18);
	--sp-abstand: 15px;
}
.borosen-spielplan {
	margin: 0;
}
/* GEÄNDERT (1.9.1): Dunkles Design ohne Rahmen – Heimspiel auf dem helleren
   Grau der Palette (Mittelgrau #333), Auswärtsspiel dunkel (#1E1E1E).
   "vs" bleibt gelb, das Heimspiel ist dadurch weiterhin klar erkennbar. */
:root[data-farbschema="dunkel"] :is(.borosen-spielplan, .voting-game) {
	--sp-heim-grund: var(--wp--preset--color--mittelgrau, #333333);
	--sp-heim-text: #F9F9F9;
	--sp-heim-leise: #BDBDBD;
	--sp-heim-rand: transparent;
	--sp-heim-akzent: var(--wp--preset--color--bvb-gelb, #FFD800);
	--sp-heim-rose: rgba(255, 216, 0, 0.11);
	--sp-ausw-grund: var(--borosen-flaeche-dunkel, #1E1E1E);
	--sp-ausw-rand: transparent;
	--sp-ausw-akzent: #F9F9F9;
	--sp-ausw-rose: rgba(255, 216, 0, 0.11);
}

/* Leiste: vier Kacheln sichtbar, weitere seitlich */
.borosen-spielplan__liste {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 3 * var(--sp-abstand)) / 4);
	gap: var(--sp-abstand);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.borosen-spielplan__liste::-webkit-scrollbar {
	display: none;
}

/* Eine Kachel */
.borosen-spiel {
	--grund: var(--sp-heim-grund);
	--text: var(--sp-heim-text);
	--leise: var(--sp-heim-leise);
	--rand: var(--sp-heim-rand);
	--akzent: var(--sp-heim-akzent);
	--rose: var(--sp-heim-rose);
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-height: 0; /* GEÄNDERT (1.8.1): kompakter – Höhe ergibt sich aus dem Inhalt */
	margin: 0;
	padding: 16px 18px;
	border-radius: var(--borosen-rundung, 25px);
	background: var(--grund);
	box-shadow: inset 0 0 0 2px var(--rand);
	color: var(--text);
	scroll-snap-align: start;
}
.borosen-spiel--auswaerts {
	--grund: var(--sp-ausw-grund);
	--text: var(--sp-ausw-text);
	--leise: var(--sp-ausw-leise);
	--rand: var(--sp-ausw-rand);
	--akzent: var(--sp-ausw-akzent);
	--rose: var(--sp-ausw-rose);
}
.borosen-spiel__art {
	min-height: 1.2em;
	color: var(--leise);
	font-size: 0.8125rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.borosen-spiel__wettbewerb {
	color: var(--leise);
	font-size: 0.9375rem;
	line-height: 1.3;
}
.borosen-spiel__gegner {
	margin-top: 8px; /* GEÄNDERT (1.8.1): vorher "auto" – großer Leerraum über dem Gegner */
	font-size: var(--borosen-fs-gross, 1.375rem);
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: break-word;
	hyphens: auto;
}
.borosen-spiel__ort {
	color: var(--akzent);
	text-decoration: none;
	cursor: default;
}
/* GEÄNDERT (1.8.1): Auf der gelben Heimspiel-Kachel ist "vs" grau – sonst
   unterscheidet es sich nicht vom Gegner (im dunklen Design bleibt es gelb) */
.borosen-spiel--heim .borosen-spiel__ort {
	color: var(--leise);
}
:root[data-farbschema="dunkel"] .borosen-spiel--heim .borosen-spiel__ort {
	color: var(--akzent);
}
.borosen-spiel__zeit {
	font-size: 1rem;
}
.borosen-spiel__hinweis {
	color: var(--leise);
	font-size: 0.8125rem;
}

/* NEU (1.9.3): Etikett "Frauen" bzw. "U23" oben rechts in der Ecke – so
   stehen Wettbewerb, Gegner und Termin genau wie bei den Profis. Kleine Pille
   in der Akzentfarbe der Kachel (gelbe Kachel: schwarz, schwarze: gelb). */
.borosen-spiel__mannschaft {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 0.05rem 0.55rem;
	border-radius: 999px;
	background: var(--akzent);
	color: var(--grund);
	font-size: 0.8125rem;
	font-weight: 800;
	line-height: 1.5;
}
:root[data-farbschema="dunkel"] .borosen-spiel__mannschaft {
	color: #1A1A1A;
}
/* Platz für das Etikett, damit der Wettbewerb nicht darunter läuft */
.borosen-spiel--mit-etikett .borosen-spiel__wettbewerb {
	padding-right: 4.25rem;
}

/* Ergebnis: Mannschaften wie auf der Anzeigetafel, darunter die Tore.
   BVB und seine Tore fett (im dunklen Design gelb) – so ist ein 1 : 2
   auswärts sofort als Sieg lesbar, ohne Etikett. */
.borosen-spiel__ergebnis {
	display: grid;
	gap: 4px;
	margin-top: 8px;
}
.borosen-spiel__teams {
	font-size: 1rem;
	line-height: 1.25;
	overflow-wrap: break-word;
	hyphens: auto;
}
.borosen-spiel__teams b,
.borosen-spiel__tore b {
	font-weight: 800;
}
.borosen-spiel__tore {
	font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
	font-weight: 300;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.borosen-spiel--auswaerts .borosen-spiel__tore b,
:root[data-farbschema="dunkel"] .borosen-spiel__tore b {
	color: var(--akzent);
}

/* "Borosen dabei": große, leise Rose in der Ecke
   (GEÄNDERT 1.8.3: ohne sichtbaren Text – der steht nur für Screenreader da) */
.borosen-spiel--dabei::after {
	content: "";
	position: absolute;
	z-index: -1;
	right: -58px;
	bottom: -64px;
	width: 140px; /* GEÄNDERT (1.8.3): weiter in die Ecke – nicht unter dem Text */
	aspect-ratio: 1;
	background-color: var(--rose);
	-webkit-mask: url('../../assets/rose-linie.svg') center / contain no-repeat;
	        mask: url('../../assets/rose-linie.svg') center / contain no-repeat;
	pointer-events: none;
}

/* Fußzeile: links die Quelle, rechts für Mitglieder "Ticketwünsche abgeben"
   (GEÄNDERT 1.8.3: vorher ein Link in jeder Kachel) */
.borosen-spielplan__fuss {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 1rem;
	margin-top: 8px;
}
.borosen-spielplan__link {
	margin-left: auto;
	color: var(--borosen-text-leise, #4D4D4D);
	font-size: 0.8125rem;
}
.borosen-spielplan__link:hover {
	color: var(--wp--preset--color--soft-schwarz, #1A1A1A);
}
.borosen-spielplan__quelle {
	margin: 0;
	color: var(--borosen-text-leise, #4D4D4D);
	font-size: 0.8125rem;
}
.borosen-spielplan__quelle a {
	color: inherit;
}

/* Tablet: drei Kacheln sichtbar */
@media (max-width: 887px) {
	.borosen-spielplan__liste {
		grid-auto-columns: calc((100% - 2 * var(--sp-abstand)) / 3);
	}
}
/* Handy: eine Kachel plus Anschnitt der nächsten – zeigt, dass man wischen kann */
@media (max-width: 600px) {
	.borosen-spielplan__liste {
		grid-auto-columns: 78%;
		margin-inline: -16px;
		padding-inline: 16px;
		scroll-padding-inline: 16px;
	}
	.borosen-spiel {
		min-height: 0;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.borosen-spielplan__liste {
		scroll-behavior: smooth;
	}
}