/**
 * kader-3d.css – „Panini"-Sammelkarten fuer den Herren-Kader.
 * Wird NUR auf team-herren.html und team-herren-2.html geladen,
 * nach components.css/motion.css.
 *
 * Aufbau (von kader.js erzeugt, siehe dort):
 *   li.svk-kader-card.is-3d-ready          -> Perspektive + Container-Query
 *     button/div.svk-kader-card__tile      -> Tilt (rotateX/rotateY) + Lift
 *       span.svk-kader-card__flip          -> Flip um die Y-Achse (preserve-3d)
 *         span.svk-kader-card__face--front -> Original-Inhalt (Bild, Nr., Name)
 *         span.svk-kader-card__face--back  -> Steckbrief (aria-hidden)
 *
 * Regeln:
 *  - Ausschliesslich Tokens aus theme.css. Wo Alpha noetig ist, steht eine
 *    rgba()-Fallbackzeile mit exakt dem Token-Wert, direkt darueber die
 *    color-mix()-Variante fuer moderne Browser.
 *  - Animiert werden nur transform und opacity.
 *  - prefers-reduced-motion: reduce -> kein Flip, kein Tilt, kein Sweep,
 *    keine Rueckseite. Der Steckbrief bleibt ueber die Lightbox erreichbar.
 */

/* ==========================================================================
   1. Karten-Buehne: Perspektive, Seltenheits-Variablen, Container-Query
   ========================================================================== */

.svk-kader-card.is-3d-ready {
	display: block;
	height: 100%; /* gleich hohe Karten pro Reihe */
	perspective: 900px;
	/* Schriftgroessen der Rueckseite skalieren mit der Kartenbreite,
	 * nicht mit dem Viewport (2-Spalten-Mobil vs. 3-Spalten-Desktop). */
	container-type: inline-size;

	/* Seltenheit: normale Spieler = Blau */
	--svk-ring: var(--sv-blau-400);
	--svk-halo: rgba(38, 63, 143, 0.34); /* = --sv-blau-600 @ 34 % */
	--svk-halo: color-mix(in srgb, var(--sv-blau-600) 34%, transparent);

	/* Kreide-Anmutung der Rueckseite */
	--svk-kreide: rgba(255, 255, 255, 0.08); /* = --sv-weiss @ 8 % */
	--svk-kreide: color-mix(in srgb, var(--sv-weiss) 8%, transparent);
	--svk-kreide-fein: rgba(255, 255, 255, 0.05); /* = --sv-weiss @ 5 % */
	--svk-kreide-fein: color-mix(in srgb, var(--sv-weiss) 5%, transparent);
}

/* Seltenheit: Kapitaen, Trainer & Betreuer = Gold (dezent, kein Kitsch) */
.svk-kader-card.is-3d-ready.svk-kader-card--gold {
	--svk-ring: var(--sv-gelb-500);
	--svk-halo: rgba(207, 185, 35, 0.32); /* = --sv-gelb-500 @ 32 % */
	--svk-halo: color-mix(in srgb, var(--sv-gelb-500) 32%, transparent);
}

/* ==========================================================================
   2. Kachel = Tilt-Ebene (ersetzt overflow/hover aus components.css)
   ========================================================================== */

.svk-kader-card.is-3d-ready .svk-kader-card__tile {
	height: 100%;
	overflow: visible; /* sonst wuerde preserve-3d flachgelegt */
	background: transparent;
	box-shadow: none;
	transform-style: preserve-3d;
	transform: translateY(var(--svk-lift, 0px)) rotateX(var(--svk-rx, 0deg))
		rotateY(var(--svk-ry, 0deg));
	transition: transform calc(var(--dur) * 0.55) var(--ease);
}

/* Platzhalter-Kachel: Flex-Zentrierung wandert in die Vorderseite,
 * damit Foto- und Platzhalter-Karten identisch aufgebaut sind. */
.svk-kader-card.is-3d-ready .svk-kader-card__ph {
	display: block;
	aspect-ratio: auto;
	background: transparent;
}

.svk-kader-card.is-3d-ready .svk-kader-card__btn:hover {
	transform: translateY(var(--svk-lift, 0px)) rotateX(var(--svk-rx, 0deg))
		rotateY(var(--svk-ry, 0deg));
	box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
	.svk-kader-card.is-3d-ready .svk-kader-card__btn:hover,
	.svk-kader-card.is-3d-ready .svk-kader-card__btn:focus-visible {
		--svk-lift: -6px;
	}
}

/* Fokus-Ring liegt auf der Kachel und bleibt jederzeit sichtbar. */
.svk-kader-card.is-3d-ready .svk-kader-card__btn:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 4px;
	border-radius: var(--radius-lg);
}

/* ==========================================================================
   3. Flip-Ebene + Kartenseiten
   ========================================================================== */

.svk-kader-card__flip {
	position: relative;
	display: block;
	height: 100%;
	transform-style: preserve-3d;
	transform: rotateY(var(--svk-flip, 0deg));
	transition: transform calc(var(--dur) * 2.4) var(--ease);
}

.svk-kader-card__face {
	display: block;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	isolation: isolate; /* Blend-Modes bleiben in der Karte */
	background-color: var(--sv-nachtblau);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	box-shadow:
		inset 0 0 0 1px var(--svk-ring),
		0 6px 18px -8px var(--svk-halo);
	transition: box-shadow var(--dur) var(--ease);
}

.svk-kader-card.is-3d-ready .svk-kader-card__btn:hover .svk-kader-card__face,
.svk-kader-card.is-3d-ready
	.svk-kader-card__btn:focus-visible
	.svk-kader-card__face {
	box-shadow:
		inset 0 0 0 1px var(--svk-ring),
		0 10px 30px -8px var(--svk-halo);
}

/* --- Vorderseite: bestehender Karteninhalt ------------------------------ */

.svk-kader-card__face--front {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

/* Bild fuellt die quadratische Flaeche, Text sitzt darunter. */
.svk-kader-card.is-3d-ready .svk-kader-card__img {
	flex: 0 0 auto;
	background-color: var(--sv-nachtblau);
}

/* Kontrast auf der dunklen Kachel: Name/Alter/Rolle immer hell.
 * (components.css setzt hier var(--text) – auf Nachtblau zu dunkel.) */
.svk-kader-card.is-3d-ready .svk-kader-card__name {
	color: var(--sv-weiss);
}

.svk-kader-card.is-3d-ready .svk-kader-card__age {
	color: var(--sv-blau-100);
}

.svk-kader-card.is-3d-ready .svk-kader-card__role {
	color: var(--sv-gelb-300);
}

/* „Foto folgt": components.css setzt Weiss @ 45 % = 4,48:1 – knapp unter
 * AA. Auf Nachtblau abgemischtes Blau-100 bringt 6,05:1 bei gleicher
 * zurueckhaltender Wirkung. */
.svk-kader-card.is-3d-ready .svk-kader-ph__label {
	color: #8e95a4; /* = --sv-blau-100 62 % auf --sv-nachtblau */
	color: color-mix(in srgb, var(--sv-blau-100) 62%, var(--sv-nachtblau));
}

/* Platzhalter („Foto folgt") bekommt eine quadratische Bildflaeche,
 * damit er exakt so hoch ist wie eine Fotokarte. */
.svk-kader-ph__box {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	aspect-ratio: 1 / 1;
	width: 100%;
}

/* --- Rueckseite: Steckbrief -------------------------------------------- */

.svk-kader-card__face--back {
	position: absolute;
	inset: 0;
	transform: rotateY(180deg);
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0.85em 0.9em 0.8em;
	text-align: left;
	line-height: 1.25;
	background-image: linear-gradient(
		158deg,
		var(--sv-blau-900) 0%,
		var(--sv-nachtblau) 54%,
		var(--sv-blau-700) 100%
	);
	font-family: var(--wp--preset--font-family--body);
	/* Fallback fuer Browser ohne Container-Queries */
	font-size: 0.74rem;
	font-size: clamp(0.66rem, 6.2cqi, 0.86rem);
}

/* Kreidelinien-Anmutung (Spielfeld-Schraffur, sehr zurueckhaltend) */
.svk-kader-card__face--back::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: repeating-linear-gradient(
		118deg,
		transparent 0 26px,
		var(--svk-kreide-fein) 26px 27px
	);
}

.svk-kader-card__face--back > *:not(.svk-kader-back__wm) {
	position: relative;
	z-index: 2;
}

/* Grosse Rueckennummer als Wasserzeichen */
.svk-kader-back__wm {
	position: absolute;
	right: -0.04em;
	bottom: -0.14em;
	z-index: 1;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 8.5em;
	line-height: 0.78;
	letter-spacing: -0.04em;
	color: var(--sv-gelb-500);
	opacity: 0.16;
	pointer-events: none;
}

.svk-kader-back__pos {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sv-gelb-300);
}

.svk-kader-back__name {
	display: block;
	margin-top: -0.15em;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.3em;
	font-weight: 800;
	line-height: 1.05;
	color: var(--sv-weiss);
	text-wrap: balance;
}

/* Kreidelinie unter dem Namen (Torlinien-Zitat) */
.svk-kader-back__rule {
	display: block;
	height: 2px;
	margin: 0.15em 0 0.1em;
	background-image: linear-gradient(
		90deg,
		var(--sv-gelb-500) 0%,
		var(--sv-gelb-500) 34%,
		var(--svk-kreide) 34%,
		var(--svk-kreide) 100%
	);
}

.svk-kader-back__rows {
	display: flex;
	flex-direction: column;
	gap: 0.12em;
	min-height: 0;
	overflow: hidden;
}

.svk-kader-back__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	padding-bottom: 0.12em;
	border-bottom: 1px solid var(--svk-kreide);
}

.svk-kader-back__label {
	flex: 0 0 auto;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sv-gelb-300);
}

.svk-kader-back__val {
	flex: 1 1 auto;
	min-width: 0;
	text-align: right;
	font-weight: 600;
	color: var(--sv-weiss);
	overflow-wrap: anywhere;
}

/* Zeile ohne erkennbares Label (Rohwert aus data-info) */
.svk-kader-back__row--single .svk-kader-back__val {
	text-align: left;
}

.svk-kader-back__hint {
	display: block;
	margin-top: auto;
	padding-top: 0.4em;
	font-size: 0.76em;
	letter-spacing: 0.03em;
	color: var(--sv-blau-100);
}

/* ==========================================================================
   4. Holo-Schimmer (folgt der Maus) – nur auf Zeigergeraeten
   ========================================================================== */

.svk-kader-card__face--front::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	opacity: 0;
	background-image: radial-gradient(
		42% 34% at var(--svk-mx, 50%) var(--svk-my, 50%),
		var(--sv-gelb-300) 0%,
		var(--sv-blau-400) 44%,
		transparent 72%
	);
	mix-blend-mode: color-dodge;
	transition: opacity calc(var(--dur) * 1.2) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
	.svk-kader-card.is-3d-ready
		.svk-kader-card__btn:hover
		.svk-kader-card__face--front::before,
	.svk-kader-card.is-3d-ready
		.svk-kader-card__btn:focus-visible
		.svk-kader-card__face--front::before {
		opacity: 0.24;
	}
}

/* ==========================================================================
   5. Glanz-Sweep beim Erscheinen (einmalig, gestaffelt)
   ========================================================================== */

.svk-kader-card__face--front::after {
	content: "";
	position: absolute;
	top: -30%;
	bottom: -30%;
	left: -55%;
	width: 40%;
	z-index: 4;
	pointer-events: none;
	opacity: 0;
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		var(--sv-weiss) 50%,
		transparent 100%
	);
	transform: translateX(0) rotate(16deg);
	mix-blend-mode: screen;
}

@media (prefers-reduced-motion: no-preference) {
	.svk-kader-card.is-swept .svk-kader-card__face--front::after {
		animation: svk-kader-sweep calc(var(--dur) * 3.8) var(--ease)
			var(--svk-sweep-delay, 0ms) 1 both;
	}
}

@keyframes svk-kader-sweep {
	0% {
		opacity: 0;
		transform: translateX(0) rotate(16deg);
	}
	16% {
		opacity: 0.28;
	}
	100% {
		opacity: 0;
		transform: translateX(330%) rotate(16deg);
	}
}

/* ==========================================================================
   6. Flip-Ausloeser
   ========================================================================== */

/* Tastatur: Fokus zeigt die Rueckseite (Enter/Space oeffnet weiterhin
 * die Lightbox – das bleibt der barrierefreie Weg zum Steckbrief). */
@media (prefers-reduced-motion: no-preference) {
	.svk-kader-card.is-flippable
		.svk-kader-card__btn:focus-visible
		.svk-kader-card__flip {
		--svk-flip: 180deg;
	}

	/* Touch: Klasse kommt per Tap aus kader.js */
	.svk-kader-card.is-flippable.is-flipped .svk-kader-card__flip {
		--svk-flip: 180deg;
	}
}

/* Maus: Hover dreht die Karte */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
	.svk-kader-card.is-flippable .svk-kader-card__btn:hover .svk-kader-card__flip {
		--svk-flip: 180deg;
	}
}

/* ==========================================================================
   7. Kleine Viewports
   ========================================================================== */

@media (max-width: 419px) {
	.svk-kader-card.is-3d-ready {
		perspective: 700px;
	}

	.svk-kader-card__face--back {
		padding: 0.7em 0.7em 0.65em;
		gap: 0.25em;
	}

	.svk-kader-back__wm {
		font-size: 6.4em;
	}
}

/* ==========================================================================
   8. prefers-reduced-motion: statische Karten, Steckbrief via Lightbox
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.svk-kader-card.is-3d-ready .svk-kader-card__tile,
	.svk-kader-card.is-3d-ready .svk-kader-card__btn:hover,
	.svk-kader-card.is-3d-ready .svk-kader-card__flip {
		transform: none !important;
		transition: none !important;
	}

	.svk-kader-card.is-3d-ready .svk-kader-card__face--back {
		display: none !important;
	}

	.svk-kader-card.is-3d-ready .svk-kader-card__face--front::before,
	.svk-kader-card.is-3d-ready .svk-kader-card__face--front::after {
		display: none !important;
	}
}

/* Nutzer ohne JavaScript sehen die unveraenderte Kachel aus components.css –
 * es greift hier nichts, solange .is-3d-ready fehlt. */

/* ==========================================================================
   9. Ergaenzungen fuer den vollstaendigen FuPa-Kader (1. + 2. Mannschaft)
   ========================================================================== */

/* Ohne JavaScript bleibt die Kachel dunkel (#05060a aus components.css) –
 * Name und Alter muessen dann trotzdem lesbar sein. Mit JS gewinnen die
 * spezifischeren .is-3d-ready-Regeln aus Abschnitt 2. */
.svk-kader-card__name {
	color: var(--sv-weiss);
}

.svk-kader-card__age {
	color: var(--sv-blau-100);
}

/* Rueckennummer auf den FuPa-Sammelkarten der Ersten: Diese Motive tragen
 * das Vereinswappen oben rechts. Damit das Badge nicht darauf liegt, sitzt
 * es dort oben links auf der freien Flaeche. */
.svk-kader-card__no--links {
	right: auto;
	left: 8px;
}

/* Info-Karten ueber dem Kader (Liga, Kapitaen, Saisonziel). */
.svk-kader-meta {
	margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Quellenhinweis unter dem Kader – bewusst leise, aber AA-konform. */
.svk-kader-quelle {
	margin: 1.75rem 0 0;
	font-size: 0.875rem;
	color: var(--text-muted);
}

.svk-kader-quelle a {
	color: var(--link);
}