/**
 * EVF Kader — Nachwuchs-Übersicht: Mannschaftsfoto, Titelband, Gamecenter.
 *
 * Alles ist auf .evf-kader bzw. .evf-gamecenter gescoped und übernimmt die
 * Design-Tokens aus evf-kader.css. Die hd-*-Overrides ganz unten stylen die
 * clientseitig gerenderten hockeydata-Widgets — nur innerhalb unseres Wrappers.
 */

/* =========================================================
   1 · Gamecenter-Tokens (Ergänzung zu TOKENS.css)
   ========================================================= */

.evf-kader {
	--gc-row-home: #fff9ec;
	--gc-row-self: #fff3d6;
	--gc-row-hover: #fafbfc;
	--gc-panel: #ffffff;
	--gc-head: #0b0b0c;
	--gc-rule: #e8ebf0;
	--gc-card-dark: #18191c;
	--result-win: #1e9e5a;
	--result-loss: #d23b36;
	--result-otl: #e8852a;
}

/* hidden-Attribut gewinnt immer — auch gegen display:grid/flex
 * (Tabs, Skeleton und Runden-Widgets arbeiten damit). */
.evf-kader [hidden] {
	display: none !important;
}

/* Schutz vor fremden Auszeichnungs-Tags in unserer Ausgabe: Wird der
 * Shortcode mit Code-Formatierung in den Editor eingefügt, wickelt der
 * Editor jeden Textinhalt in <code> — der Browser stellt das in einer
 * Schreibmaschinenschrift dar und zerlegt beim Parsen die Verschachtelung.
 * Optisch fangen wir das hier ab; sauber ist es trotzdem ohne. */
.evf-kader code,
.evf-kader kbd,
.evf-kader samp,
.evf-kader pre {
	/* Aus dem Layout nehmen: die Kinder rücken an die Stelle des Tags,
	 * damit Breiten- und Abstandsregeln nicht an einer Zwischenebene
	 * hängenbleiben. */
	display: contents;
	font: inherit;
	letter-spacing: inherit;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	color: inherit;
	white-space: inherit;
}

/* =========================================================
   2 · Team-Sektion (Foto → Titelband → Gamecenter)
   ========================================================= */

.evf-team {
	position: relative;
	background: var(--evf-black, #0b0b0c);
	--evf-pad-min: 36px;
	--evf-pad-x: var(--evf-pad-min, 40px);
	padding-inline: var(--evf-pad-x, 40px);
	padding-top: 0;
}

/* Exakt dieselbe Mechanik wie .evf-roster--fullbleed — dadurch laufen
 * Foto, Titelband und Gamecenter bündig mit der Kader-Sektion darunter. */
.evf-team--fullbleed {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	--evf-pad-x: max(var(--evf-pad-min, 40px), calc(50vw - var(--evf-container, 1320px) / 2));
}

.evf-team__inner {
	max-width: none;
}

/* Jeder Baustein trägt seine Breitenbegrenzung selbst — nicht über einen
 * Kind-Selektor. Divi verändert die Verschachtelung des Shortcode-Ausgabe-
 * Markups, dadurch würde „.evf-team__inner > *“ für einzelne Bausteine
 * ausfallen und sie liefen unterschiedlich breit. */
.evf-teamphoto,
.evf-teamband,
.evf-teamintro,
.evf-team .evf-gamecenter {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--evf-container, 1320px);
	margin-inline: auto;
}

/* Der Kader innerhalb von [evf_team]: Fläche und Innenabstand kommen von
 * der Team-Sektion, damit die Kanten exakt zusammenfallen. */
.evf-team .evf-roster {
	margin-inline: 0;
	max-width: none;
	padding-inline: 0;
	overflow: visible;
}

.evf-team .evf-roster > *,
.evf-team .evf-roster > code > *,
.evf-team .evf-roster > pre > * {
	max-width: var(--evf-container, 1320px);
	margin-inline: auto;
}

/* =========================================================
   3 · Mannschaftsfoto — drei Zuschnitte, Verlauf, Trikotband
   ========================================================= */

.evf-teamphoto {
	margin-block: 0;
}

.evf-teamphoto__frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1280 / 430;
	background: var(--evf-black, #0b0b0c);
}

.evf-teamphoto__img,
.evf-teamphoto__frame picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.evf-teamphoto__img {
	object-fit: cover;
	object-position: center 35%; /* Köpfe nicht anschneiden */
	display: block;
}

.evf-teamphoto__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 90px;
	background: linear-gradient(to bottom, rgba(11, 11, 12, 0), var(--evf-black, #0b0b0c));
	pointer-events: none;
}

.evf-teamphoto__stripes {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	height: 8px;
	width: 220px;
	pointer-events: none;
}

.evf-teamphoto__stripes i {
	flex: 1;
	background: transparent;
}

.evf-teamphoto__stripes i:nth-child(odd) {
	background: var(--evf-yellow, #ffb400);
}

.evf-teamphoto__caption {
	font: 400 11.5px/1.5 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-on-dark-meta, rgba(255, 255, 255, 0.45));
	text-align: right;
	padding: 8px 0 0;
	margin: 0;
}

/* Feste Zuschnitte für [evf_team_foto ratio="…"] */
.evf-teamphoto--16x9 .evf-teamphoto__frame {
	aspect-ratio: 16 / 9;
}

.evf-teamphoto--4x3 .evf-teamphoto__frame {
	aspect-ratio: 4 / 3;
}

/* =========================================================
   4 · Titelband
   ========================================================= */

.evf-teamband {
	display: flex;
	align-items: flex-end;
	gap: 24px;
	padding: 28px 0 26px;
	background: transparent;
}

.evf-teamband__eyebrow {
	font: 700 11px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--evf-yellow, #ffb400);
	margin: 0 0 12px;
}

.evf-teamband__title {
	margin: 0;
	font: 400 68px/0.86 "EVF Anton", "Anton", "Arial Narrow", sans-serif;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	color: var(--evf-white, #fff);
}

.evf-teamband__accent {
	color: var(--evf-yellow, #ffb400);
}

.evf-teamband__aside {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}

.evf-teamband__counts {
	font: 700 10px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--evf-on-dark-meta, rgba(255, 255, 255, 0.45));
}

.evf-teamband__meta {
	font: 400 13px/1.4 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-on-dark-mute, rgba(255, 255, 255, 0.55));
}

/* Intro-Text zwischen Titelband und Gamecenter.
 *
 * Er nutzt die volle Breite der Sektion, läuft dort aber zweispaltig: Über
 * die ganze Breite wären die Zeilen mit ~170 Zeichen unlesbar, bei einer
 * schmalen Spalte bliebe rechts eine tote Fläche. Zwei Spalten füllen die
 * Fläche und halten die Zeilenlänge im lesbaren Bereich. */
.evf-teamintro {
	padding-bottom: 26px;
	column-gap: 48px;
}

.evf-teamintro p {
	margin: 0 0 12px;
	font: 400 13.5px/1.7 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-on-dark-mute, rgba(255, 255, 255, 0.55));
	/* Absätze nicht über die Spaltengrenze zerreißen. */
	break-inside: avoid;
}

.evf-teamintro p:last-child {
	margin-bottom: 0;
}

@media (min-width: 900px) {
	.evf-teamintro {
		column-count: 2;
	}
}

/* =========================================================
   9 · Breakpoints Foto + Titelband
   ========================================================= */

@media (max-width: 1023px) {
	.evf-teamphoto:not(.evf-teamphoto--fixed) .evf-teamphoto__frame {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 767px) {
	.evf-teamphoto:not(.evf-teamphoto--fixed) .evf-teamphoto__frame {
		aspect-ratio: 4 / 3;
	}

	.evf-team {
		--evf-pad-min: 18px;
	}

	.evf-teamband {
		padding: 20px 0 16px;
		flex-wrap: wrap;
	}

	.evf-teamband__eyebrow {
		font-size: 9.5px;
		margin-bottom: 8px;
	}

	.evf-teamband__title {
		font-size: 40px;
	}

	.evf-teamband__aside {
		align-items: flex-start;
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evf-kader *,
	.evf-kader *::before,
	.evf-kader *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* =========================================================
   5 · Gamecenter — Kopfzeile
   ========================================================= */

.evf-gamecenter {
	max-width: var(--evf-container, 1320px);
	margin-inline: auto;
	padding: 0 0 40px;
}

/* Das Gamecenter schließt die Team-Sektion nicht mehr ab, wenn der Kader
 * darunter im selben Wrapper folgt. */
.evf-team .evf-gamecenter {
	padding-bottom: 28px;
}

/* Steht das Gamecenter allein (Shortcode ohne [evf_team]), trägt es
 * selbst die schwarze Fläche. */
.evf-gamecenter:not(.evf-team .evf-gamecenter) {
	background: var(--evf-black, #0b0b0c);
	padding: 30px 36px 40px;
}

.evf-gc-head {
	display: flex;
	align-items: flex-end;
	gap: 16px;
	padding-bottom: 16px;
}

.evf-gc-head__title {
	margin: 0;
	font: 400 40px/0.9 "EVF Anton", "Anton", "Arial Narrow", sans-serif;
	text-transform: uppercase;
	color: var(--evf-white, #fff);
}

.evf-gc-head__live {
	font: 500 10px/1 ui-monospace, Menlo, Consolas, monospace;
	letter-spacing: 0.04em;
	/* Mock: .4 — für 4.5:1 Kontrast auf Schwarz angehoben. */
	color: rgba(255, 255, 255, 0.65);
	padding-bottom: 6px;
}

.evf-gc-head__division {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 9px 13px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid var(--evf-on-dark-rule, rgba(255, 255, 255, 0.16));
	font: 700 11px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
	cursor: pointer;
	min-height: 44px;
}

.evf-gc-head__division svg {
	width: 13px;
	height: 13px;
	color: var(--evf-yellow, #ffb400);
}

.evf-gc-head__division:hover {
	color: var(--evf-white, #fff);
	border-color: rgba(255, 255, 255, 0.3);
}

.evf-gc-head__division:focus-visible {
	outline: 3px solid var(--evf-yellow, #ffb400);
	outline-offset: 2px;
}

/* =========================================================
   6 · Band „Nächstes Spiel“
   ========================================================= */

.evf-gc-next {
	display: flex;
	align-items: center;
	gap: 28px;
	background: var(--gc-card-dark);
	border: 1px solid var(--evf-on-dark-border, rgba(255, 255, 255, 0.14));
	border-left: 4px solid var(--evf-yellow, #ffb400);
	padding: 18px 24px;
	margin-bottom: 22px;
}

.evf-gc-next__eyebrow {
	flex: none;
	font: 700 9.5px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--evf-yellow, #ffb400);
}

.evf-gc-next__widget {
	flex: 1;
	min-width: 0;
	color: var(--evf-white, #fff);
	font-family: "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
}

/* =========================================================
   7 · Tabs + Panels
   ========================================================= */

.evf-gc-tabbar {
	display: flex;
	align-items: center;
	gap: 4px;
	border-bottom: 1px solid var(--evf-on-dark-rule, rgba(255, 255, 255, 0.16));
}

.evf-gc-tablist {
	display: flex;
	gap: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

.evf-gc-tablist::-webkit-scrollbar {
	display: none;
}

.evf-gc-tab {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 13px 20px;
	cursor: pointer;
	font: 800 12px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--evf-on-dark-meta, rgba(255, 255, 255, 0.45));
	white-space: nowrap;
	min-height: 44px;
}

.evf-gc-tab:hover {
	color: var(--evf-white, #fff);
}

.evf-gc-tab.is-active {
	color: var(--evf-white, #fff);
	box-shadow: inset 0 -3px 0 var(--evf-yellow, #ffb400);
}

.evf-gc-tab:focus-visible {
	outline: 3px solid var(--evf-yellow, #ffb400);
	outline-offset: -3px;
}

.evf-gc-tabbar__code {
	margin-left: auto;
	align-self: center;
	font: 500 10px/1 ui-monospace, Menlo, Consolas, monospace;
	color: rgba(255, 255, 255, 0.32);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40%;
}

.evf-gc-panel {
	background: var(--gc-panel);
	min-height: 240px; /* kein Springen beim Nachladen der Widgets */
}

/* Ohne JS: Panels untereinander, jede mit schwarzem Titelstreifen. */
.evf-gc-panel + .evf-gc-panel {
	margin-top: 22px;
}

.evf-gamecenter--js .evf-gc-panel + .evf-gc-panel {
	margin-top: 0;
}

.evf-gc-panel__title {
	margin: 0;
	padding: 11px 20px;
	background: var(--gc-head);
	font: 800 10px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--evf-yellow, #ffb400);
}

/* Mit Tabs übernimmt die Tab-Leiste die Beschriftung. */
.evf-gamecenter--js .evf-gc-panel__title {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.evf-gc-panel:focus-visible {
	outline: 3px solid var(--evf-yellow, #ffb400);
	outline-offset: -3px;
}

.evf-gc-panel__body {
	position: relative;
	overflow-x: auto;
}

.evf-gc-status {
	margin: 0;
	padding: 24px 20px;
	font: 400 13px/1.5 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-ink-500, #5a5d65);
}

.evf-gc-noscript {
	display: none;
}

.evf-gc-status--reason {
	padding-top: 0;
	color: var(--evf-ink-400, #84878f);
	font-size: 12px;
}

.evf-gc-legend {
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 12px 20px;
	font: 400 11px/1.4 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-ink-500, #5a5d65);
	border-top: 1px solid var(--gc-rule);
}

/* Skeleton, bis das Widget Inhalt liefert. */
.evf-gc-skeleton {
	display: grid;
	gap: 14px;
	padding: 20px;
}

.evf-gc-skeleton i {
	display: block;
	height: 18px;
	background: var(--evf-ink-50, #f3f5f8);
	animation: evf-gc-pulse 1.2s ease-in-out infinite alternate;
}

.evf-gc-skeleton i:nth-child(2) {
	animation-delay: 0.15s;
}

.evf-gc-skeleton i:nth-child(3) {
	animation-delay: 0.3s;
}

@keyframes evf-gc-pulse {
	from {
		opacity: 1;
	}

	to {
		opacity: 0.35;
	}
}

@media (prefers-reduced-motion: reduce) {
	.evf-gc-skeleton i {
		animation: none;
	}
}

/* Consent-Schranke (vorbereitet, standardmäßig aus). */
.evf-gc-consent {
	background: var(--gc-card-dark);
	border: 1px solid var(--evf-on-dark-border, rgba(255, 255, 255, 0.14));
	border-left: 4px solid var(--evf-yellow, #ffb400);
	padding: 22px 24px;
}

.evf-gc-consent__text {
	margin: 0 0 14px;
	font: 400 13px/1.6 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-on-dark-mute, rgba(255, 255, 255, 0.55));
	max-width: 640px;
}

.evf-gc-consent__button {
	appearance: none;
	border: 0;
	cursor: pointer;
	background: var(--evf-yellow, #ffb400);
	color: var(--evf-black, #0b0b0c);
	font: 800 12px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 14px 22px;
	min-height: 44px;
	box-shadow: 4px 4px 0 #000;
}

.evf-gc-consent__button:hover {
	background: var(--evf-yellow-hover, #e6a200);
}

.evf-gc-consent__button:active {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px 0 #000;
}

.evf-gc-consent__button:focus-visible {
	outline: 3px solid var(--evf-yellow, #ffb400);
	outline-offset: 2px;
}

/* =========================================================
   8 · Layout „Nebeneinander“ (Screen 2b)
   ========================================================= */

.evf-gc-columns {
	display: grid;
	grid-template-columns: 1fr 1fr 1.15fr;
	gap: 20px;
	align-items: start;
}

.evf-gc-column {
	background: var(--gc-panel);
	min-height: 240px;
}

.evf-gc-column__title {
	margin: 0;
	padding: 11px 16px;
	background: var(--gc-head);
	font: 800 10px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--evf-yellow, #ffb400);
}

.evf-gc-column__body {
	position: relative;
	overflow-x: auto;
}

/* =========================================================
   9 · hd-Overrides — Styling der hockeydata-Widgets
   =========================================================
   Das Markup kommt clientseitig von LOS und trägt eigene Klassen mit
   hd-Präfix; die genauen Namen stehen nicht in der Doku und müssen am
   Live-Widget abgelesen werden. Bis dahin stylen wir die generische
   Tabellenstruktur — ausschließlich innerhalb unseres Wrappers. Die
   hockeydata-Templates (los_template_dark …) werden bewusst NICHT geladen.
   ========================================================= */

.evf-gamecenter .evf-gc-widget {
	font-family: "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	color: var(--evf-black, #0b0b0c);
}

.evf-gamecenter .evf-gc-widget table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12.5px;
}

.evf-gamecenter .evf-gc-widget thead th,
.evf-gamecenter .evf-gc-widget thead td {
	padding: 12px 20px;
	background: var(--gc-head);
	font: 800 9.5px/1 "EVF Archivo", "Archivo", system-ui, -apple-system, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.7);
	text-align: left;
}

.evf-gamecenter .evf-gc-widget tbody td {
	padding: 14px 20px;
	border-bottom: 1px solid var(--gc-rule);
	font-feature-settings: "tnum" 1, "lnum" 1;
	color: var(--evf-ink-600, #3c3e44);
}

.evf-gamecenter .evf-gc-widget tbody tr:hover {
	background: var(--gc-row-hover);
	transition: background-color 0.12s ease-out;
}

/* Eigene Zeile — markiert über die Team-ID, siehe gamecenter.js. */
.evf-gamecenter .evf-gc-widget tr.evf-gc-row--self,
.evf-gamecenter .evf-gc-widget tr.evf-gc-row--self:hover {
	background: var(--gc-row-self);
	box-shadow: inset 4px 0 0 var(--evf-yellow, #ffb400);
}

.evf-gamecenter .evf-gc-widget tr.evf-gc-row--self td {
	font-weight: 800;
	color: var(--evf-black, #0b0b0c);
}

.evf-gamecenter .evf-gc-widget tr.evf-gc-row--self:hover {
	background: #fff6e3;
}

.evf-gamecenter .evf-gc-widget a {
	color: var(--evf-yellow-ink, #8a5e00);
	text-decoration: none;
	font-weight: 700;
}

.evf-gamecenter .evf-gc-widget a:hover {
	color: var(--evf-black, #0b0b0c);
}

.evf-gamecenter .evf-gc-widget a:focus-visible {
	outline: 3px solid var(--evf-yellow, #ffb400);
	outline-offset: 1px;
}

/* Leere Spalten (Ligen ohne OTS/OTN/Form): ausblenden statt Nullen zeigen
 * übernimmt das Widget; falls es leere Zellen liefert, bleiben sie ruhig. */
.evf-gamecenter .evf-gc-widget td:empty::before {
	content: "";
}

/* =========================================================
   10 · Breakpoints Gamecenter
   ========================================================= */

@media (max-width: 1023px) {
	.evf-gc-columns {
		grid-template-columns: 1fr 1fr;
	}

	.evf-gc-columns .evf-gc-column[data-gc-column="table"] {
		grid-column: 1 / -1;
	}
}

@media (max-width: 767px) {
	.evf-gamecenter {
		padding: 0 0 28px;
	}

	.evf-gamecenter:not(.evf-team .evf-gamecenter) {
		padding: 24px 18px 28px;
	}

	.evf-gc-head__title {
		font-size: 30px;
	}

	.evf-gc-next {
		gap: 16px;
		padding: 13px 15px;
		flex-wrap: wrap;
	}

	.evf-gc-tab {
		padding: 11px 12px;
		font-size: 11px;
		letter-spacing: 0.08em;
	}

	.evf-gc-tabbar__code {
		display: none;
	}

	.evf-gc-columns {
		grid-template-columns: 1fr;
	}

	.evf-gamecenter .evf-gc-widget thead th,
	.evf-gamecenter .evf-gc-widget thead td,
	.evf-gamecenter .evf-gc-widget tbody td {
		padding-inline: 12px;
	}
}