/* =========================================================
   ZEITSTRAHL
   ========================================================= */

.timeline {
	position: relative;
	display: block;
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
	padding: 35px 0 55px;
	box-sizing: border-box;
	font-family: var(--fire-body);
}

/* Durchgehende vertikale Mittellinie */
.timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1px;
	background: linear-gradient(
		to bottom,
		transparent 0,
		var(--fire-border-strong) 35px,
		var(--fire-border-strong) calc(100% - 35px),
		transparent 100%
	);
	transform: translateX(-50%);
	z-index: 0;
}


/* =========================================================
   EINZELNER EINTRAG
   ========================================================= */

.timeline-entry,
.timeline-entry.left,
.timeline-entry.right {
	position: relative;
	left: auto;
	right: auto;
	float: none;
	clear: both;

	display: block;
	width: 100%;
	min-height: 165px;
	margin: 0;
	padding: 18px 0 42px;
	box-sizing: border-box;

	text-align: initial;
}


/* =========================================================
   ZEITSTEMPEL
   ========================================================= */

.date-label {
	position: absolute;
	top: 18px;
	left: 50%;
	right: auto;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 66px;
	height: 54px;
	min-height: 54px;
	margin: 0;
	padding: 7px;

	background: var(--fire-black-soft);
	border: 1px solid var(--fire-border);

	color: var(--fire-accent-light);
	font-family: var(--fire-body);
	font-size: 8px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
	white-space: pre-line;

	box-sizing: border-box;
	transform: translateX(-50%);
	z-index: 4;
}

/* Alte Pfeile und Rauten sicher entfernen */
.date-label::before,
.date-label::after {
	content: none;
	display: none;
}

/* Alte positionsabhängige Regeln überschreiben */
.timeline-entry.left .date-label,
.timeline-entry.right .date-label {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}


/* =========================================================
   VERBINDUNGSLINIEN
   ========================================================= */

/*
	Die Box endet beziehungsweise beginnt 70 px von der Mitte entfernt.
	Der Zeitstempel ist 66 px breit und reicht damit 33 px von der
	Mitte nach außen. Die Verbindungslinie überbrückt die übrigen 37 px.
*/

.timeline-entry::after {
	content: "";
	position: absolute;
	top: 45px;
	width: 37px;
	height: 1px;
	background: var(--fire-border-strong);
	z-index: 2;
}

/* Verbindung vom linken Inhalt zum Zeitstempel */
.timeline-entry.left::after {
	left: calc(50% - 70px);
	right: auto;
}

/* Verbindung vom Zeitstempel zum rechten Inhalt */
.timeline-entry.right::after {
	left: calc(50% + 33px);
	right: auto;
}


/* =========================================================
   INHALTSBOX
   ========================================================= */

.timeline-box {
	position: relative;
	display: block;

	width: calc(50% - 70px);
	max-width: none;
	min-height: 54px;

	margin-top: 0;
	padding: 18px 20px;

	background:
		linear-gradient(
			135deg,
			rgba(102, 143, 153, 0.06),
			transparent 55%
		),
		var(--fire-black-panel);

	border: 1px solid var(--fire-border);
	border-radius: 0;

	color: var(--fire-text-soft);
	font-family: var(--fire-body);
	font-size: 11px;
	font-weight: 400;
	line-height: 1.65;
	text-align: left;

	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.14),
		inset 0 1px 0 rgba(255, 255, 255, 0.015);

	box-sizing: border-box;
	z-index: 3;
}

/* Linke Inhaltsbox */
.timeline-entry.left .timeline-box {
	margin-left: 0;
	margin-right: auto;
}

/* Rechte Inhaltsbox */
.timeline-entry.right .timeline-box {
	margin-left: auto;
	margin-right: 0;
}


/* =========================================================
   AKZENTLINIE AN DER BOX
   ========================================================= */

.timeline-box::before {
	content: "";
	position: absolute;
	top: -1px;
	width: 36px;
	height: 1px;
	background: var(--fire-accent);
	opacity: 0.7;
}

/* Akzent jeweils zur Mitte ausrichten */
.timeline-entry.left .timeline-box::before {
	left: auto;
	right: -1px;
}

.timeline-entry.right .timeline-box::before {
	left: -1px;
	right: auto;
}


/* =========================================================
   TYPOGRAFIE INNERHALB DER BOX
   ========================================================= */

.timeline-box strong,
.timeline-box b {
	color: var(--fire-accent-light);
	font-weight: 700;
}

.timeline-box a {
	color: var(--fire-accent-light);
	text-decoration: none;
	border-bottom: 1px solid var(--fire-border-strong);
	transition:
		color 0.2s ease,
		border-color 0.2s ease;
}

.timeline-box a:hover {
	color: var(--fire-accent-bright);
	border-color: var(--fire-accent-bright);
}

.timeline-box > :first-child {
	margin-top: 0;
}

.timeline-box > :last-child {
	margin-bottom: 0;
}


/* =========================================================
   MOBILE ANSICHT
   ========================================================= */

@media (max-width: 700px) {

	.timeline {
		max-width: none;
		padding: 25px 0 40px;
	}

	/* Linie nach links versetzen */
	.timeline::before {
		left: 33px;
		transform: none;
	}

	.timeline-entry,
	.timeline-entry.left,
	.timeline-entry.right {
		width: 100%;
		min-height: 0;
		padding: 18px 0 35px 82px;
	}

	/* Zeitstempel auf der linken Linie */
	.date-label,
	.timeline-entry.left .date-label,
	.timeline-entry.right .date-label {
		top: 18px;
		left: 33px;
		right: auto;
		width: 66px;
		height: 54px;
		transform: translateX(-50%);
	}

	/* Verbindung zwischen Datum und Box */
	.timeline-entry::after,
	.timeline-entry.left::after,
	.timeline-entry.right::after {
		top: 45px;
		left: 66px;
		right: auto;
		width: 16px;
	}

	/* Alle Boxen rechts neben der Linie */
	.timeline-box,
	.timeline-entry.left .timeline-box,
	.timeline-entry.right .timeline-box {
		width: 100%;
		max-width: none;
		min-height: 54px;
		margin: 0;
	}

	/* Akzentlinie mobil immer links */
	.timeline-entry.left .timeline-box::before,
	.timeline-entry.right .timeline-box::before {
		left: -1px;
		right: auto;
	}
}