/* SV Wittendorf – Nächstes Spiel, Ticket-Variante 2c aus „Nächstes Spiel Varianten“ (inc/svw-spielplan.php → svw_print_naechstes_spiel_item)
   Vorherige Varianten: backup/css/svw-naechstes-spiel-4a-2026-09-29.css (graue Karte), backup/css/svw-naechstes-spiel-startseite-dark-2026-09-29.css (rotes Feld) */
.svw-ns { --ns-accent: #c8102e; --ns-ink: #15171c; }
.svw-ns__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 20px;
}
/* Überschrift nutzt die Standard-Titelklassen des Themes (gdlr-item-title-wrapper / gdlr-item-title), Schrift und Farbe kommen aus style.css und der Theme-Option */
.svw-ns__title { margin: 0; padding: 0; }
.svw-ns__ticker {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: #25d366;
	color: #fff;
	font-family: 'Barlow', 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-decoration: none;
	border-radius: 999px;
	transition: background .2s ease;
}
.svw-ns__ticker:hover, .svw-ns__ticker:focus { background: #1eb857; color: #fff; }

/* Mehrere Tickets (je Mannschaft eins) untereinander */
.svw-ns__list { display: flex; flex-direction: column; gap: 12px; }
/* Mannschaft in der Meta-Zeile, in Teamfarbe (--ns-accent je Ticket) */
.svw-ns__teamlabel {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ns-accent);
	white-space: nowrap;
}
a.svw-ns__teamlabel { text-decoration: none; transition: none; }
a.svw-ns__teamlabel:hover, a.svw-ns__teamlabel:focus { color: var(--ns-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Ticket: Abriss Datum | Paarung | Abriss Anstoß */
.svw-ns__card {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	background: #f4f3f0;
	color: var(--ns-ink);
}
.svw-ns__stub {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 24px clamp(18px, 2.5vw, 32px);
	line-height: 1;
	color: #fff;
}
.svw-ns__stub--date { background: var(--ns-accent); gap: 2px; }
.svw-ns__stub--time { background: var(--ns-ink); gap: 4px; }
/* Perforation zur weißen Mitte */
.svw-ns__stub::after {
	content: '';
	position: absolute;
	top: 3px;
	bottom: 3px;
	width: 14px;
	background: radial-gradient(circle, #f4f3f0 5px, transparent 5.5px) 0 50% / 14px 20px repeat-y;
	pointer-events: none;
}
.svw-ns__stub--date::after { right: -7px; }
.svw-ns__stub--time::after { left: -7px; }
.svw-ns__wd, .svw-ns__mon {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
	text-transform: uppercase;
	color: #fff;
}
.svw-ns__day {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: clamp(56px, 7vw, 88px);
	line-height: 1;
	color: #fff;
}
.svw-ns__label {
	font-family: 'Barlow', 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	color: #a3a7b0;
}
.svw-ns__time {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: clamp(36px, 4.5vw, 56px);
	line-height: 1;
	color: #fff;
}
.svw-ns__main {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 12px;
	padding: 16px clamp(20px, 2.5vw, 32px) 20px;
	min-width: 0;
}
.svw-ns__meta {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.svw-ns__comp {
	font-family: 'Barlow', 'Open Sans', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	color: #666;
}
.svw-ns__tag {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: 13px;
	line-height: 1;
	text-transform: uppercase;
	padding: 4px 8px;
	background: var(--ns-ink);
	color: #fff;
	white-space: nowrap;
}
.svw-ns__body {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	align-content: center;
	gap: 16px;
}
.svw-ns__team { display: flex; align-items: center; gap: 14px; min-width: 0; }
.svw-ns__team--home { justify-content: flex-end; text-align: right; }
.svw-ns__name {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1;
	text-transform: uppercase;
	color: var(--ns-ink);
	min-width: 0;
	overflow-wrap: anywhere;
}
.svw-ns__card--lang .svw-ns__name { font-size: clamp(20px, 2.1vw, 28px); }
/* Name mit Tabellenplatz darunter (nur Ligaspiele, Daten vom Fussball.de Sync) */
.svw-ns__wer { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
.svw-ns__team--home .svw-ns__wer { align-items: flex-end; }
.svw-ns__platz {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 1;
	text-transform: uppercase;
	color: #666;
	text-decoration: none;
	white-space: nowrap;
	transition: color .2s ease;
}
.svw-ns__platz strong { font-weight: 800; color: var(--ns-ink); transition: color .2s ease; }
a.svw-ns__platz:hover, a.svw-ns__platz:focus, a.svw-ns__platz:hover strong, a.svw-ns__platz:focus strong { color: var(--ns-accent); }
.svw-ns__vs {
	font-family: 'Barlow Condensed', 'Open Sans Condensed', sans-serif;
	font-weight: 800;
	font-style: italic;
	font-size: 22px;
	line-height: 1;
	color: var(--ns-accent);
}
.svw-ns .svw-sp__logo { flex: none; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.svw-ns .svw-sp__logo img { width: 100%; height: 100%; object-fit: contain; display: block; }
.svw-ns .svw-sp__logo--ini {
	border-radius: 50%;
	background: #e6e4de;
	font-family: 'Barlow', 'Open Sans', sans-serif;
	font-weight: 600;
	font-size: 20px;
	color: #666;
}
.svw-ns__empty { color: #777; margin: 0; }

@media only screen and (max-width: 959px) {
	.svw-ns__stub { padding: 18px 16px; }
	.svw-ns__main { padding: 18px 20px; gap: 12px; }
	.svw-ns__body { gap: 12px; }
	.svw-ns__team { gap: 10px; }
	.svw-ns .svw-sp__logo { width: 48px; height: 48px; }
	.svw-ns .svw-sp__logo--ini { font-size: 16px; }
}
@media only screen and (max-width: 599px) {
	/* Handy: Datum-Abriss links über beide Zeilen, Paarung untereinander, Anstoß als schwarze Leiste unten rechts */
	.svw-ns__card {
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-areas: "date main" "date time";
	}
	.svw-ns__stub--date { grid-area: date; padding: 16px 22px; }
	/* Anstoß ohne schwarze Leiste: schlicht unten rechts in schwarzer Schrift */
	.svw-ns__stub--time { grid-area: time; flex-direction: row; justify-content: flex-end; align-items: baseline; gap: 8px; padding: 0 16px 14px; background: #f4f3f0; color: var(--ns-ink); }
	.svw-ns__label { color: #666; }
	.svw-ns__time { color: var(--ns-ink); }
	.svw-ns__stub--time::after { display: none; }
	.svw-ns__stub--date::after { width: 10px; right: -5px; background-size: 10px 16px; background-image: radial-gradient(circle, #f4f3f0 3.5px, transparent 4px); }
	.svw-ns__day { font-size: 40px; }
	.svw-ns__wd, .svw-ns__mon { font-size: 14px; }
	.svw-ns__time { font-size: 26px; }
	.svw-ns__main { grid-area: main; padding: 14px 16px 4px; gap: 10px; }
	.svw-ns__meta { justify-content: flex-start; gap: 6px 8px; }
	.svw-ns__teamlabel { font-size: 14px; flex-basis: 100%; }
	.svw-ns__body { grid-template-columns: minmax(0, 1fr); gap: 6px; }
	.svw-ns__team--home { flex-direction: row-reverse; justify-content: flex-end; text-align: left; }
	.svw-ns__team { gap: 10px; }
	.svw-ns__name { font-size: 22px; }
	.svw-ns__card--lang .svw-ns__name { font-size: 20px; }
	.svw-ns__team--home .svw-ns__wer { align-items: flex-start; }
	.svw-ns__wer { gap: 4px; }
	.svw-ns__platz { font-size: 14px; }
	.svw-ns__vs { font-size: 16px; padding-left: 50px; }
	.svw-ns .svw-sp__logo { width: 40px; height: 40px; }
	.svw-ns .svw-sp__logo--ini { font-size: 14px; }
}