/* zeitlinie.css – Saison-Rückblick (Zeitleiste „Spiele, Events & Momente").
     Stil nach docs/style-tokens.md: weiß/clean, Fragment Mono für Daten,
     Gold (--akzent-gold) nur als Akzent für besondere Momente.
     Das „3D" entsteht rein über CSS-Perspective + Vanilla-JS-Tilt
     (keine 3D-Engine – siehe Projekt-Briefing §5.2). */

.zeitlinie-abschnitt { padding: 10px 0 80px; }

/* ---------- Die Zeitleiste (Filmstreifen-Achse in der Mitte) ---------- */
.zeitliste {
	list-style: none; margin: 0; padding: 0;
	position: relative;
}
/* Grundachse – liegt bewusst wenige Pixel HINTER den Karten (preserve-3d),
   damit einfahrende Karten vor dem Filmstreifen vorbeiziehen */
.zeitliste::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
	width: 2px; transform: translateX(-50%) translateZ(-6px);
	background: var(--linie);
}
/* Goldener Fortschritt (füllt sich beim Scrollen, gesetzt von zeitlinie.js) */
.zeitliste::after {
	content: ""; position: absolute; top: 0; left: 50%;
	width: 2px; height: var(--fortschritt, 0%);
	transform: translateX(-50%) translateZ(-6px);
	background: var(--akzent-gold);
	pointer-events: none;
}

/* Räumliche Bühne für die Kamerafahrt:
   perspective erzeugt die Tiefe, preserve-3d sorgt dafür, dass die
   Einträge nach ihrer echten Z-Position gestapelt werden (und nicht
   in DOM-Reihenfolge) – sonst überdecken ferne Karten nahe. */
.perspektive {
	perspective: 1400px;
	transform-style: preserve-3d;
}

/* ---------- Jahreseinteilung ---------- */
.zeit-jahr {
	position: relative; z-index: 1;
	text-align: center;
	padding: 34px 0 30px;
}
.zeit-jahr span {
	display: inline-block; background: var(--bg);
	font-family: "Fragment Mono", monospace;
	font-size: clamp(40px, 8vw, 88px);
	line-height: 1; letter-spacing: 0.12em;
	color: transparent;
	-webkit-text-stroke: 1px var(--linie);
	padding: 0 32px;
}

/* ---------- Eintrag ---------- */
.zeit-punkt {
	position: relative;
	width: 50%;
	padding: 38px 52px 62px 0;
	opacity: 0; transform: rotateX(12deg) translateY(46px) scale(0.97);
	transform-origin: 50% 100%;
	transition: opacity 0.7s ease-out,
		transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.zeit-punkt.ist-rechts { margin-left: 50%; padding: 38px 0 62px 52px; }
.zeit-punkt.sichtbar { opacity: 1; transform: none; }

/* Datums-Chip sitzt auf der Achse */
.zeit-chip {
	position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
	z-index: 2;
	background: var(--bg); border: 1px solid var(--linie);
	border-radius: var(--radius-pill);
	font-family: "Fragment Mono", monospace;
	font-size: 11px; letter-spacing: 0.06em; white-space: nowrap;
	color: var(--text-leise);
	padding: 7px 16px;
	transition: color 0.2s ease-out, border-color 0.2s ease-out;
}

/* ---------- Karte ---------- */
.zeit-karte {
	display: block;
	background: var(--flaeche-hell);
	border: 1px solid var(--linie);
	border-radius: var(--radius-karte);
	overflow: hidden;
	transform-style: preserve-3d;
	transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}
.zeit-karte:hover { box-shadow: 0 16px 38px rgba(0, 0, 0, 0.10); }
.zeit-karte img {
	width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block;
	transform: scale(1.001);
	transition: transform 0.4s ease-out;
}
.zeit-karte:hover img { transform: scale(1.04); }
.zeit-inhalt { padding: 18px 22px 22px; }
.zeit-kategorie {
	display: block;
	font-family: "Fragment Mono", monospace;
	font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
	color: var(--text-leise);
	margin-bottom: 8px;
}
.zeit-titel { font-size: 22px; letter-spacing: -0.03em; line-height: 1.25; }
.zeit-text { font-size: 14px; color: var(--text-gedaempft); margin-top: 6px; }

/* ---------- Besondere Momente (Gold-Akzent) ---------- */
.highlight .zeit-chip {
	border-color: var(--akzent-gold);
	color: var(--akzent-gold);
}
.highlight .zeit-kategorie { color: var(--akzent-gold); }
.highlight .zeit-kategorie::before { content: "★ "; }
.highlight .zeit-karte { border-color: rgba(201, 162, 39, 0.45); }

/* ---------- Abschluss ---------- */
.zeit-ende { text-align: center; padding: 10px 0 20px; }
.zeit-ende p { color: var(--text-leise); font-size: 15px; max-width: 520px; margin: 0 auto 26px; }

/* ---------- Mobil: eine Spalte, Achse links ---------- */
@media (max-width: 859.98px) {
	.zeitliste::before { left: 18px; }
	.zeitliste::after { left: 18px; }
	.zeit-jahr { text-align: left; padding: 26px 0 22px; }
	.zeit-jahr span { font-size: 34px; padding: 0 14px 0 44px; letter-spacing: 0.2em; }
	.zeit-punkt,
	.zeit-punkt.ist-rechts {
		width: 100%; margin-left: 0;
		padding: 0 0 44px 44px;
	}
	.zeit-chip {
		position: static; display: inline-block; transform: none;
		margin: 0 0 10px;
	}
}

/* ---------- Reduzierte Bewegung: alles sofort sichtbar, ohne 3D ---------- */
@media (prefers-reduced-motion: reduce) {
	.perspektive { perspective: none; }
	.zeit-punkt { opacity: 1; transform: none; transition: none; }
	.zeit-karte { transition: none; }
	.zeit-karte img { transition: none; }
	.zeitliste::after { display: none; }
}