/* =========================================================
   F1 Liga – Modern Dark
   Basis-Design (global genutzt)
   ========================================================= */

/* ---------- Variablen ---------- */
:root {
	--bg-card: #1e2228;
	--bg-card-soft: #242932;

	--text-main: #e5e7eb;
	--text-muted: #9ca3af;

	--accent: #7a2a33;
	--accent-soft: rgba(122, 42, 51, 0.35);

	--border-soft: rgba(255,255,255,0.07);
}

/* ---------- Card Basis ---------- */
.f1-card {
	background: linear-gradient(
		135deg,
		var(--bg-card) 0%,
		var(--bg-card-soft) 100%
	);
	border-radius: 18px;
	border: 1px solid var(--border-soft);
	color: var(--text-main);
	box-shadow: 0 8px 22px rgba(0,0,0,0.45);
	transition:
		transform .28s cubic-bezier(.2,.8,.2,1),
		box-shadow .28s ease;
	overflow: hidden;
}

.f1-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 42px rgba(0,0,0,0.75);
}

/* =========================================================
   TRL – Weltmeister Übersicht
   Scoped: nur diese Seite
   ========================================================= */

.trl-meister {
	margin-top: 0.5rem;
}

/* ---------- Weltmeister Card ---------- */
.trl-meister details.meister-row {
	background: linear-gradient(
		135deg,
		var(--bg-card) 0%,
		var(--bg-card-soft) 100%
	);
	border: 1px solid var(--border-soft);
	border-radius: 18px;
	padding: 14px 18px;
	margin-bottom: 16px;
	box-shadow: 0 8px 22px rgba(0,0,0,0.45);
	transition: transform .25s ease, box-shadow .25s ease;
}

.trl-meister details.meister-row:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 36px rgba(0,0,0,0.65);
}

/* ---------- Hero-Card (aktuelle Saison) ---------- */
.trl-meister details.meister-row.meister-aktuell {
	position: relative;
	border-left: 6px solid var(--accent);
	background: linear-gradient(
		135deg,
		var(--bg-card-soft) 0%,
		#2b303a 100%
	);
	box-shadow: 0 18px 44px rgba(0,0,0,0.75);
}

.trl-meister details.meister-row.meister-aktuell:hover {
	transform: none;
}

/* Subtiler Glow */
.trl-meister details.meister-row.meister-aktuell::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 18px;
	pointer-events: none;
	box-shadow:
		0 0 0 1px rgba(255,255,255,0.06),
		0 0 24px rgba(122,42,51,0.35);
}

/* ---------- Header / Summary ---------- */
.trl-meister summary.meister-summary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	list-style: none;
	padding: 6px 8px;
}

.trl-meister summary::-webkit-details-marker {
	display: none;
}

/* Saison */
.trl-meister .meister-saison {
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* Saison als Titelband in Hero */
.trl-meister details.meister-row.meister-aktuell .meister-saison {
	background: rgba(255,255,255,0.04);
	padding: 4px 10px;
	border-radius: 999px;
	color: var(--text-main);
	letter-spacing: 0.18em;
}

/* Meistername */
.trl-meister .meister-name {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--text-main);
	white-space: nowrap;
}

/* Meistername – Hero */
.trl-meister details.meister-row.meister-aktuell .meister-name {
	font-size: 1.85rem;
	font-weight: 800;
	letter-spacing: 0.02em;
}

/* Badge */
.trl-meister .badge.bg-secondary {
	background-color: var(--accent-soft) !important;
	color: var(--text-main);
	font-weight: 600;
}

/* ---------- Stats ---------- */
.trl-meister details.meister-row .row.mt-2 {
	margin-top: 0.6rem;
}

.trl-meister details.meister-row .row.mt-2 > div {
	font-size: 0.9rem;
}

/* Normale Stat-Farbe (wichtig wegen Podest!) */
.trl-meister details.meister-row .row.mt-2 > div:not(.podium-1):not(.podium-2):not(.podium-3) {
	color: var(--text-muted);
}

.trl-meister details.meister-row strong {
	font-weight: 700;
	color: inherit;
}

/* ---------- Podestfarben ---------- */
.trl-meister details.meister-row .podium-1 {
	color: #d4af37; /* Gold */
}

.trl-meister details.meister-row .podium-2 {
	color: #c0c0c0; /* Silber */
}

.trl-meister details.meister-row .podium-3 {
	color: #cd7f32; /* Bronze */
}

/* ---------- Divider ---------- */
.trl-meister hr {
	border-top: 1px solid rgba(255,255,255,0.08);
	margin: 10px 0 4px;
}

/* ---------- Hinweis ---------- */
.trl-meister .meister-hint {
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-bottom: 12px;
}

/* ---------- Mobile Feinschliff ---------- */
@media (max-width: 768px) {

	.trl-meister summary.meister-summary {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.trl-meister .meister-name {
		font-size: 1.25rem;
	}

	.trl-meister details.meister-row.meister-aktuell .meister-name {
		font-size: 1.35rem;
	}

	.trl-meister details.meister-row {
		padding: 12px 14px;
	}

	.trl-meister details.meister-row .row.mt-2 > div {
		font-size: 0.85rem;
		margin-bottom: 4px;
	}
}
/* ============================= */
/* Smooth Content Reveal         */
/* ============================= */

.trl-meister details.meister-row .meister-content {
	opacity: 0;
	transform: translateY(-6px);
	transition:
		opacity 220ms ease,
		transform 220ms ease;
}

/* Wenn details offen ist → Inhalt sichtbar */
.trl-meister details.meister-row[open] .meister-content {
	opacity: 1;
	transform: translateY(0);
}