/* Styles für timeline.php (funktioniert auch ohne style.css) */

body.timeline-page {
	--timeline-bg: #FFFFFF;
	--timeline-fg: #FF0000;

	margin: 0;
	background-color: var(--timeline-bg);
	color: var(--timeline-fg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}

.timeline-logos {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: center;
	margin: 0 0 12px 0;
	flex-wrap: wrap;
}

.timeline-logos img {
	display: block;
	max-width: 100%;
	height: 250px;
	width: auto;
	object-fit: contain;
}

body.timeline-page a:link,
body.timeline-page a:visited {
	color: var(--timeline-fg);
	text-decoration: none;
}

body.timeline-page a:hover,
body.timeline-page a:active {
	color: #FF0000;
	text-decoration: none;
}

.timeline-container {
	max-width: 1100px;
	margin: 20px auto;
	padding: 0 12px;
}

.timeline-title {
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: bold;
}

.timeline-hint {
	margin: 0;
	line-height: 1.4;
}

table.timeline {
	width: 100%;
	border-collapse: collapse;
}

table.timeline th {
	padding: 10px 12px;
	vertical-align: bottom;
	text-align: left;
	font-size: 14px;
	font-weight: bold;
}

.timeline-year-head {
	width: 120px;
	white-space: nowrap;
	padding-right: 26px;
	border-right: 2px solid currentColor;
}

table.timeline th.timeline-media-head {
	text-align: left !important;
}

table.timeline td {
	padding: 14px 12px;
	vertical-align: top;
}

/* Linke Spalte: Jahreszahl + Zeitstrahl */
.timeline-year {
	width: 120px;
	white-space: nowrap;
	position: relative;
	padding-right: 26px;
	border-right: 2px solid currentColor;
}

.timeline-year::after {
	content: "";
	position: absolute;
	right: -7px;
	top: 20px;
	width: 12px;
	height: 12px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: var(--timeline-bg);
	box-sizing: border-box;
}

.timeline-year-text {
	display: inline-block;
	font-size: 14px;
	font-weight: bold;
}

.timeline-media img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid currentColor;
}

@media (max-width: 640px) {
	.timeline-year {
		width: 90px;
	}

	table.timeline td {
		padding: 12px 8px;
	}
}