/**
 * HCL Spielplan – Frontend.
 *
 * Übernimmt die Designsprache von hc-leipzig.de: Vereinsblau #005baa,
 * Gelb #ffd200, versale Condensed-Headlines (TradeGothicLTCondensed),
 * Open Sans im Fließtext, kantige Ecken.
 *
 * Sämtliche Werte kommen aus CSS-Variablen, die das Plugin aus den
 * Designeinstellungen erzeugt (class-design.php). Hier stehen nur Fallbacks,
 * damit das Stylesheet auch ohne Inline-Variablen funktioniert.
 *
 * Alles unter .hclsp gescoped, damit nichts ins Theme ausblutet und Oxygen
 * nicht ungewollt hineingreift.
 *
 * @package HCL_Spielplan
 * @since   1.0.0
 * @version 1.6.4
 */

.hclsp {
	--hclsp-blue: #005baa;
	--hclsp-blue-dark: #003d80;
	--hclsp-yellow: #ffd200;
	--hclsp-heading: #00468c;
	--hclsp-ink: #404040;
	--hclsp-muted: #8a8a8a;
	--hclsp-line: #e0e0e0;
	--hclsp-surface: #ffffff;
	--hclsp-surface-alt: #f8f8f8;
	--hclsp-win: #1c7a4b;
	--hclsp-loss: #005baa;

	--hclsp-font-head: TradeGothicLTCondensed, "trade-gothic-next-compressed", "Open Sans", sans-serif;
	--hclsp-font-body: "Open Sans", sans-serif;
	--hclsp-head-case: uppercase;

	--hclsp-radius: 0px;
	--hclsp-card-border: 1px solid #e0e0e0;
	--hclsp-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);

	--hclsp-logo: 64px;
	--hclsp-logo-list: 38px;
	--hclsp-score: 44px;

	--hclsp-gap: 20px;

	box-sizing: border-box;
	font-family: var(--hclsp-font-body);
	color: var(--hclsp-ink);
	font-size: 16px;
	line-height: 1.6;
}

.hclsp *,
.hclsp *::before,
.hclsp *::after {
	box-sizing: inherit;
}

.hclsp p {
	margin: 0;
}

.hclsp a {
	color: var(--hclsp-blue);
}

/* ---------------------------------------------------------------
 * Bausteine
 * ------------------------------------------------------------ */

.hclsp-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--hclsp-logo);
	height: var(--hclsp-logo);
	flex: 0 0 auto;
}

.hclsp-logo__img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.hclsp-logo--placeholder {
	border-radius: 50%;
	background: var(--hclsp-surface-alt);
	border: 1px solid var(--hclsp-line);
}

.hclsp-logo__initials {
	font-family: var(--hclsp-font-head);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--hclsp-muted);
}

.hclsp-badge {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--hclsp-radius);
	background: var(--hclsp-blue);
	color: #fff;
	font-family: var(--hclsp-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.35;
	white-space: nowrap;
}

.hclsp-badge--alt {
	background: var(--hclsp-yellow);
	color: var(--hclsp-blue);
}

.hclsp-flag {
	display: inline-block;
	padding: 3px 9px;
	border-radius: var(--hclsp-radius);
	background: var(--hclsp-surface-alt);
	border: 1px solid var(--hclsp-line);
	font-size: 13px;
	line-height: 1.35;
	color: var(--hclsp-muted);
}

.hclsp-flag--soldout {
	background: var(--hclsp-yellow);
	border-color: var(--hclsp-yellow);
	color: var(--hclsp-blue);
	font-weight: 700;
}

.hclsp-flag--tv {
	border-color: var(--hclsp-blue);
	color: var(--hclsp-blue);
	font-weight: 600;
}

.hclsp-flag a {
	color: inherit;
	text-decoration: none;
}

.hclsp-empty {
	padding: 34px 16px;
	text-align: center;
	color: var(--hclsp-muted);
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------
 * Matchday-Karten
 * ------------------------------------------------------------ */

.hclsp-matchday__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--hclsp-gap);
	align-items: stretch;
}

.hclsp-matchday--last .hclsp-matchday__grid,
.hclsp-matchday--next .hclsp-matchday__grid {
	grid-template-columns: minmax(0, 1fr);
}

.hclsp-card {
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
	box-shadow: var(--hclsp-card-shadow);
	border-radius: var(--hclsp-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.hclsp-card__head {
	margin: 0;
	padding: 12px 16px;
	text-align: center;
	font-family: var(--hclsp-font-head);
	font-size: 24px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-transform: var(--hclsp-head-case);
}

.hclsp-card--last .hclsp-card__head {
	background: var(--hclsp-blue);
	color: #fff;
}

.hclsp-card--next .hclsp-card__head {
	background: var(--hclsp-yellow);
	color: var(--hclsp-blue);
}

.hclsp-card__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hclsp-match {
	padding: 18px 16px 20px;
	display: grid;
	gap: 10px;
	border-top: 1px solid var(--hclsp-line);
}

.hclsp-match:first-child {
	border-top: 0;
}

.hclsp-match__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.hclsp-match__round {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--hclsp-muted);
}

.hclsp-match__when {
	text-align: center;
	font-size: 14px;
	color: var(--hclsp-muted);
}

.hclsp-match__weekday {
	font-weight: 700;
	color: var(--hclsp-ink);
}

.hclsp-match__time::before {
	content: "·";
	margin: 0 0.4em;
}

.hclsp-match__open {
	font-style: italic;
}

.hclsp-match__teams {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	margin: 4px 0;
}

.hclsp-team {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	min-width: 0;
}

.hclsp-team__name {
	font-family: var(--hclsp-font-head);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: 0.01em;
	text-transform: var(--hclsp-head-case);
	color: var(--hclsp-heading);
	/* break-word statt anywhere: trennt nur, wenn ein Wort allein zu breit ist,
	   und zerreißt nicht „Buxtehuder“ mitten im Wort. */
	overflow-wrap: break-word;
	hyphens: auto;
}

/**
 * Die eigene Mannschaft bekommt einen gelben Unterstrich statt eines zweiten
 * Blautons – zwei ähnliche Blaus wären nicht unterscheidbar gewesen.
 */
.hclsp-team--hcl .hclsp-team__name {
	color: var(--hclsp-blue);
	box-shadow: inset 0 -0.22em 0 var(--hclsp-yellow);
}

.hclsp-match__center {
	text-align: center;
	min-width: 92px;
	padding: 0 4px;
}

.hclsp-score {
	font-family: var(--hclsp-font-head);
	font-size: var(--hclsp-score);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: var(--hclsp-heading);
}

.hclsp-score__sep {
	margin: 0 0.06em;
	color: var(--hclsp-muted);
}

.hclsp-match--win .hclsp-score {
	color: var(--hclsp-win);
}

.hclsp-match--loss .hclsp-score {
	color: var(--hclsp-loss);
}

.hclsp-score--pending {
	font-size: 15px;
	font-weight: 600;
	color: var(--hclsp-muted);
	font-family: var(--hclsp-font-body);
	text-transform: none;
}

.hclsp-halftime {
	margin-top: 4px;
	font-size: 13px;
	color: var(--hclsp-muted);
}

.hclsp-vs {
	font-family: var(--hclsp-font-head);
	font-size: 22px;
	font-weight: 700;
	text-transform: var(--hclsp-head-case);
	color: var(--hclsp-muted);
	line-height: 1;
}

.hclsp-kickoff {
	margin-top: 6px;
	font-size: 15px;
	font-weight: 700;
	color: var(--hclsp-heading);
	white-space: nowrap;
}

.hclsp-match__venue {
	font-size: 13px;
	color: var(--hclsp-muted);
	text-align: center;
}

.hclsp-match__venue a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hclsp-match__venue a:hover {
	color: var(--hclsp-blue);
}

.hclsp-match__flags {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}

/* ---------------------------------------------------------------
 * Buttons – Vorbild ist .yellow-button der Website
 * ------------------------------------------------------------ */

.hclsp-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: var(--hclsp-gap);
}

.hclsp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border: 1px solid var(--hclsp-yellow);
	border-radius: var(--hclsp-radius);
	background: var(--hclsp-yellow);
	color: var(--hclsp-blue);
	font-family: var(--hclsp-font-body);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.hclsp-btn:hover,
.hclsp-btn:focus-visible {
	filter: brightness(0.94);
	color: var(--hclsp-blue);
}

.hclsp-btn--blue {
	background: var(--hclsp-blue);
	border-color: var(--hclsp-blue);
	color: #fff;
}

.hclsp-btn--blue:hover,
.hclsp-btn--blue:focus-visible {
	background: var(--hclsp-blue-dark);
	border-color: var(--hclsp-blue-dark);
	color: #fff;
	filter: none;
}

.hclsp-btn--ghost {
	background: transparent;
	border-color: var(--hclsp-line);
	color: var(--hclsp-heading);
	font-size: 15px;
	padding: 9px 16px;
	box-shadow: none;
}

.hclsp-btn--ghost:hover,
.hclsp-btn--ghost:focus-visible {
	background: var(--hclsp-surface-alt);
	border-color: var(--hclsp-blue);
	color: var(--hclsp-blue);
	filter: none;
}

.hclsp-btn:focus-visible {
	outline: 2px solid var(--hclsp-blue);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------
 * Spielplan-Liste
 * ------------------------------------------------------------ */

.hclsp-schedule__toggle-wrap {
	margin-bottom: var(--hclsp-gap);
}

.hclsp-group + .hclsp-group {
	margin-top: 34px;
}

.hclsp-group__head {
	margin: 0 0 14px;
	padding-left: 10px;
	border-left: 4px solid var(--hclsp-yellow);
	font-family: var(--hclsp-font-head);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.3;
	text-transform: var(--hclsp-head-case);
	color: var(--hclsp-heading);
}

.hclsp-list {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
	box-shadow: var(--hclsp-card-shadow);
	border-radius: var(--hclsp-radius);
	overflow: hidden;
}

/**
 * Zeilenaufbau: Kopfzeile mit Datum links und Wettbewerb rechts, darunter die
 * Begegnung, darunter die Halle mittig, zuletzt die Links.
 */
.hclsp-row {
	display: grid;
	grid-template-areas:
		"top"
		"teams"
		"venue"
		"links";
	gap: 14px;
	padding: 22px 24px;
	border-top: 1px solid var(--hclsp-line);
	transition: background-color 0.15s ease;
}

.hclsp-row:first-child {
	border-top: 0;
}

.hclsp-row__top {
	grid-area: top;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}

.hclsp-row:nth-child(even) {
	background: var(--hclsp-surface-alt);
}

.hclsp-row:hover {
	background: color-mix(in srgb, var(--hclsp-yellow) 12%, transparent);
}

.hclsp-row--past {
	color: var(--hclsp-muted);
}

.hclsp-row__date {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	align-items: baseline;
	font-size: 14px;
	color: var(--hclsp-muted);
}

.hclsp-row__date time {
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
	align-items: baseline;
}

.hclsp-row__weekday {
	font-family: var(--hclsp-font-head);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	color: var(--hclsp-heading);
}

.hclsp-row__day {
	font-weight: 700;
	color: var(--hclsp-ink);
}

.hclsp-row__competition {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: flex-end;
	flex: 0 0 auto;
}

.hclsp-row__round {
	font-size: 13px;
	color: var(--hclsp-muted);
}

.hclsp-row__teams {
	grid-area: teams;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	margin-bottom: 24px;
}

.hclsp-row__team {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.hclsp-row__team--away {
	flex-direction: row-reverse;
	text-align: right;
}

.hclsp-row__team .hclsp-logo {
	width: var(--hclsp-logo-list);
	height: var(--hclsp-logo-list);
}

.hclsp-row__team .hclsp-logo__initials {
	font-size: 0.72rem;
}

.hclsp-row__team .hclsp-team__name {
	font-size: 17px;
}

.hclsp-row__team--hcl .hclsp-team__name {
	color: var(--hclsp-blue);
	box-shadow: inset 0 -0.2em 0 var(--hclsp-yellow);
}

.hclsp-row__result {
	text-align: center;
	min-width: 78px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.hclsp-row__score {
	font-family: var(--hclsp-font-head);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.05;
	white-space: nowrap;
	color: var(--hclsp-heading);
}

.hclsp-row--win .hclsp-row__score {
	color: var(--hclsp-win);
}

.hclsp-row--loss .hclsp-row__score {
	color: var(--hclsp-loss);
}

.hclsp-row__halftime,
.hclsp-row__pending {
	font-size: 12px;
	color: var(--hclsp-muted);
}

.hclsp-row__vs {
	font-family: var(--hclsp-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--hclsp-muted);
}

.hclsp-row__venue {
	grid-area: venue;
	text-align: center;
	font-size: 13px;
	color: var(--hclsp-muted);
}

/* Leere Hallenangabe soll keine Lücke reißen. */
.hclsp-row__venue:empty {
	display: none;
}

.hclsp-row__venue a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hclsp-row__venue a:hover {
	color: var(--hclsp-blue);
}

.hclsp-row__city::before {
	content: "·";
	margin: 0 0.4em;
}

.hclsp-row__links {
	grid-area: links;
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}

.hclsp-row__links:empty {
	display: none;
}

.hclsp-link--detail {
	border-bottom-color: var(--hclsp-blue);
}

.hclsp-link {
	font-size: 13px;
	font-weight: 700;
	color: var(--hclsp-blue);
	text-decoration: none;
	border-bottom: 2px solid var(--hclsp-yellow);
	padding-bottom: 1px;
}

.hclsp-link:hover {
	border-bottom-color: var(--hclsp-blue);
}

/* Einklappen vergangener Spiele */
.hclsp-schedule[data-hclsp-past-hidden="1"] .hclsp-row--past,
.hclsp-schedule[data-hclsp-past-hidden="1"] .hclsp-group--past {
	display: none;
}

/* ---------------------------------------------------------------
 * Detailseite
 * ------------------------------------------------------------ */

.hclsp-detail {
	max-width: 980px;
	margin: 0 auto;
	padding: 0 16px 48px;
}

.hclsp-detail__back {
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 700;
}

.hclsp-detail__back a {
	text-decoration: none;
}

.hclsp-detail__head {
	padding: 26px 24px 24px;
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
	box-shadow: var(--hclsp-card-shadow);
	border-radius: var(--hclsp-radius);
	border-top: 5px solid var(--hclsp-yellow);
}

.hclsp-detail__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.hclsp-detail__round,
.hclsp-detail__when {
	font-size: 14px;
	color: var(--hclsp-muted);
}

.hclsp-detail__scoreboard {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
}

.hclsp-detail__center {
	text-align: center;
	min-width: 120px;
}

.hclsp-detail__score {
	font-size: calc(var(--hclsp-score) * 1.3);
}

.hclsp-detail__facts {
	display: flex;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 18px;
	font-size: 14px;
	color: var(--hclsp-muted);
}

.hclsp-detail__facts a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hclsp-detail__buttons {
	justify-content: center;
}

.hclsp-detail__section {
	margin-top: 38px;
}

.hclsp-detail__head2 {
	margin: 0 0 16px;
	padding-left: 10px;
	border-left: 4px solid var(--hclsp-yellow);
	font-family: var(--hclsp-font-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: var(--hclsp-head-case);
	color: var(--hclsp-heading);
}

.hclsp-detail__subhead {
	margin: 0 0 10px;
	font-family: var(--hclsp-font-head);
	font-size: 18px;
	font-weight: 700;
	text-transform: var(--hclsp-head-case);
	color: var(--hclsp-heading);
}

.hclsp-detail__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.hclsp-detail__pos {
	display: block;
	font-size: 12px;
	color: var(--hclsp-muted);
}

.hclsp-detail__officials {
	margin-top: 10px;
	font-size: 13px;
	color: var(--hclsp-muted);
}

/* Tabellen */

.hclsp-table-wrap {
	overflow-x: auto;
}

.hclsp-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
	font-size: 14px;
}

.hclsp-table th,
.hclsp-table td {
	padding: 9px 12px;
	text-align: left;
	border-top: 1px solid var(--hclsp-line);
}

.hclsp-table thead th {
	border-top: 0;
	background: var(--hclsp-blue);
	color: #fff;
	font-family: var(--hclsp-font-head);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hclsp-table__num {
	text-align: right;
	white-space: nowrap;
}

.hclsp-table__strong {
	font-weight: 700;
	color: var(--hclsp-heading);
}

.hclsp-table tbody tr:nth-child(even) {
	background: var(--hclsp-surface-alt);
}

/* Aufstellung */

.hclsp-lineup {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
}

.hclsp-lineup li {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 12px;
	border-top: 1px solid var(--hclsp-line);
	font-size: 14px;
}

.hclsp-lineup li:first-child {
	border-top: 0;
}

.hclsp-lineup__num {
	flex: 0 0 30px;
	font-family: var(--hclsp-font-head);
	font-weight: 700;
	color: var(--hclsp-blue);
	text-align: right;
}

.hclsp-lineup__name {
	flex: 1 1 auto;
}

.hclsp-lineup__pos {
	font-size: 12px;
	color: var(--hclsp-muted);
	white-space: nowrap;
}

/* Spielverlauf */

.hclsp-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
	box-shadow: var(--hclsp-card-shadow);
}

.hclsp-timeline__item {
	display: grid;
	grid-template-columns: 58px minmax(0, 1fr) 76px;
	align-items: baseline;
	gap: 12px;
	padding: 9px 14px;
	border-top: 1px solid var(--hclsp-line);
	font-size: 14px;
}

.hclsp-timeline__item:first-child {
	border-top: 0;
}

/* Heim links, Gast rechts eingerückt – so ist auf einen Blick erkennbar,
   welche Mannschaft gerade getroffen hat. */
.hclsp-timeline__item--away .hclsp-timeline__body {
	padding-left: 26px;
	border-left: 3px solid var(--hclsp-line);
}

.hclsp-timeline__item--home .hclsp-timeline__body {
	border-left: 3px solid var(--hclsp-yellow);
	padding-left: 10px;
}

.hclsp-timeline__time {
	font-family: var(--hclsp-font-head);
	font-weight: 700;
	color: var(--hclsp-muted);
	white-space: nowrap;
}

.hclsp-timeline__type {
	font-weight: 700;
	color: var(--hclsp-heading);
}

.hclsp-timeline__player {
	color: var(--hclsp-ink);
}

.hclsp-timeline__num {
	display: inline-block;
	min-width: 22px;
	margin-right: 2px;
	color: var(--hclsp-muted);
	font-size: 12px;
}

.hclsp-timeline__score {
	font-family: var(--hclsp-font-head);
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
	color: var(--hclsp-heading);
}

/* Schiedsgericht */

.hclsp-officials {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px 20px;
}

.hclsp-officials li {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	background: var(--hclsp-surface);
	border: var(--hclsp-card-border);
	font-size: 14px;
}

.hclsp-officials__role {
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--hclsp-muted);
}

.hclsp-officials__name {
	font-weight: 700;
	color: var(--hclsp-heading);
}

.hclsp-match__detail-link {
	text-align: center;
}

/* ---------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */

@media (max-width: 900px) {
	.hclsp {
		--hclsp-score: 36px;
		--hclsp-logo: 54px;
	}

	.hclsp-matchday__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 640px) {
	.hclsp {
		--hclsp-logo-list: 30px;
	}

	.hclsp-row {
		padding: 18px 14px;
		gap: 12px;
	}

	/**
	 * Drei Spalten sind auf dem Telefon zu eng – die Vereinsnamen würden
	 * mitten im Wort umbrechen. Deshalb hier gestapelt und zentriert,
	 * analog zu den Matchday-Karten.
	 */
	.hclsp-row__teams {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: 8px;
		text-align: center;
	}

	.hclsp-row__team {
		justify-content: center;
	}

	.hclsp-row__team--away {
		flex-direction: row;
		text-align: center;
	}

	.hclsp-row__result {
		min-width: 0;
	}

	.hclsp-row__team .hclsp-team__name {
		font-size: 16px;
	}

	.hclsp-card__head {
		font-size: 21px;
	}

	.hclsp-btn {
		flex: 1 1 100%;
	}

	.hclsp-detail {
		padding: 0 0 36px;
	}

	.hclsp-detail__head {
		padding: 20px 14px;
	}

	.hclsp-detail__cols {
		grid-template-columns: minmax(0, 1fr);
	}

	.hclsp-detail__head2 {
		font-size: 20px;
	}

	.hclsp-timeline__item {
		grid-template-columns: 46px minmax(0, 1fr) 62px;
		gap: 8px;
		padding: 8px 10px;
	}

	.hclsp-timeline__item--away .hclsp-timeline__body {
		padding-left: 12px;
	}
}

@media (max-width: 420px) {
	.hclsp {
		--hclsp-score: 30px;
		--hclsp-logo: 46px;
	}

	.hclsp-team__name {
		font-size: 16px;
	}

	.hclsp-row__teams {
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hclsp-btn,
	.hclsp-row {
		transition: none;
	}
}