/**
 * BIT7 Timeline – Aufbau und Standardoptik für Frontend und Visual Builder.
 *
 * Standardoptik (unten, „Standarddesign“) wie die frühere Supreme-Timeline auf
 * lag-amberg-sulzbach.de. Wie bei Divis eigenen Modulen steht sie hier im CSS und
 * zusätzlich in module-default-printed-style-attributes.json; Divi gibt diese Werte
 * nur aus, wenn am Element etwas geändert wurde. Designoptionen überschreiben sie,
 * denn :where() hält die Standardregeln bei Spezifität 0.
 *
 * CSS-Variablen, die Divi je Breakpoint am Modul setzt (Rückfallwerte unten):
 *   --bit7-tl-gap              Abstand zwischen Einträgen
 *   --bit7-tl-line-width       Breite von Linie und Verbindern
 *   --bit7-tl-marker-size      Durchmesser des Markers
 *   --bit7-tl-marker-offset    Abstand des Markers vom oberen Rand des Eintrags
 *   --bit7-tl-connector-length Länge der Verbinder
 *   --bit7-tl-columns, --bit7-tl-areas-*, --bit7-tl-align-*, --bit7-tl-side-justify-*,
 *   --bit7-tl-axis-x, --bit7-tl-axis-direction-*, --bit7-tl-connector-side, --bit7-tl-side-padding
 *                              Anordnung (siehe Timeline_Divi_Module::layout_variables())
 * Nur hier gesetzt:
 *   --bit7-tl-column-gap       Abstand zwischen Verbinder und Datum bzw. Karte
 *
 * Jeder Eintrag zeichnet sein Stück der Linie selbst, vom eigenen bis zum nächsten
 * Marker. So stimmt die Linie auch ohne JavaScript; die Fortschrittslinie füllt
 * die Stücke nacheinander (timeline.js).
 *
 * 980px und 767px sind Divis Standard-Breakpoints für Tablet und Telefon.
 */

:where(.bit7_timeline) {
	--bit7-tl-gap: 50px;
	--bit7-tl-line-width: 4px;
	--bit7-tl-marker-size: 18px;
	--bit7-tl-marker-offset: 8.5px;
	--bit7-tl-connector-length: 35px;
	--bit7-tl-column-gap: 8px;
	--bit7-tl-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	--bit7-tl-areas-odd: "side axis card";
	--bit7-tl-areas-even: "card axis side";
	--bit7-tl-align-odd: left;
	--bit7-tl-align-even: right;
	--bit7-tl-side-justify-odd: end;
	--bit7-tl-side-justify-even: start;
	--bit7-tl-axis-x: 50%;
	--bit7-tl-axis-direction-odd: row;
	--bit7-tl-axis-direction-even: row-reverse;
	--bit7-tl-connector-side: block;
	--bit7-tl-side-padding: 0;
}

/* Liste */

.bit7_timeline .bit7_timeline__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: inherit;
}

/* Eintrag: Raster aus Datum (side), Marker (axis) und Karte (card) */

.bit7_timeline .bit7_timeline_item {
	position: relative;
	display: grid;
	grid-template-columns: var(--bit7-tl-columns);
	grid-template-areas: var(--bit7-tl-areas-odd);
	column-gap: var(--bit7-tl-column-gap);
	align-items: start;
	/* Abstände nur über padding, damit die Linienstücke lückenlos aneinanderstoßen. */
	margin: 0;
	padding: 0 0 var(--bit7-tl-gap);
	list-style: none;
}

/*
 * Gerade Einträge. Die Varianten mit „of“ zählen nur Einträge, falls der Builder
 * weitere Elemente einfügt. Sie stehen in eigenen Regeln, weil ältere Browser
 * eine ganze Selektorliste verwerfen, wenn sie einen Teil nicht kennen.
 */
.bit7_timeline .bit7_timeline_item:nth-child(even) {
	grid-template-areas: var(--bit7-tl-areas-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(even of .bit7_timeline_item) {
	grid-template-areas: var(--bit7-tl-areas-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(odd of .bit7_timeline_item) {
	grid-template-areas: var(--bit7-tl-areas-odd);
}

.bit7_timeline .bit7_timeline_item:last-child {
	padding-bottom: 0;
}

.bit7_timeline .bit7_timeline_item:nth-last-child(1 of .bit7_timeline_item) {
	padding-bottom: 0;
}

/* Datum bzw. Gegentext, auf Höhe des Markers zentriert */

.bit7_timeline .bit7_timeline_item__side {
	grid-area: side;
	justify-self: var(--bit7-tl-side-justify-odd);
	display: flex;
	align-items: center;
	min-width: 0;
	/* content-box: der Abstand zum Titel (padding unten) kommt zur Höhe der Markerzeile hinzu. */
	box-sizing: content-box;
	min-height: calc(2 * var(--bit7-tl-marker-offset) + var(--bit7-tl-marker-size));
	padding: var(--bit7-tl-side-padding);
}

.bit7_timeline .bit7_timeline_item:nth-child(even) .bit7_timeline_item__side {
	justify-self: var(--bit7-tl-side-justify-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(even of .bit7_timeline_item) .bit7_timeline_item__side {
	justify-self: var(--bit7-tl-side-justify-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(odd of .bit7_timeline_item) .bit7_timeline_item__side {
	justify-self: var(--bit7-tl-side-justify-odd);
}

.bit7_timeline .bit7_timeline_item__date {
	display: inline-block;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Marker und Verbinder */

.bit7_timeline .bit7_timeline_item__axis {
	grid-area: axis;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: var(--bit7-tl-axis-direction-odd);
	align-items: flex-start;
	column-gap: 2px;
	padding-top: var(--bit7-tl-marker-offset);
}

.bit7_timeline .bit7_timeline_item__marker {
	flex: none;
	box-sizing: border-box;
	width: var(--bit7-tl-marker-size);
	height: var(--bit7-tl-marker-size);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bit7_timeline .bit7_timeline_item__connector {
	flex: none;
	width: var(--bit7-tl-connector-length);
	height: var(--bit7-tl-line-width);
	margin-top: calc((var(--bit7-tl-marker-size) - var(--bit7-tl-line-width)) / 2);
}

.bit7_timeline .bit7_timeline_item__connector--side {
	display: var(--bit7-tl-connector-side);
	/* Wie bei Supreme: sichtbar ist nur der Verbinder zur Karte. Der zur Gegenseite hält
	   beim Abwechseln nur den Platz, damit die Linie mittig bleibt. */
	visibility: hidden;
}

.bit7_timeline .bit7_timeline_item:nth-child(even) .bit7_timeline_item__axis {
	flex-direction: var(--bit7-tl-axis-direction-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(even of .bit7_timeline_item) .bit7_timeline_item__axis {
	flex-direction: var(--bit7-tl-axis-direction-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(odd of .bit7_timeline_item) .bit7_timeline_item__axis {
	flex-direction: var(--bit7-tl-axis-direction-odd);
}

/* Linie: ein Stück je Eintrag, vom Marker bis zum nächsten */

.bit7_timeline .bit7_timeline_item__line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--bit7-tl-axis-x);
	width: var(--bit7-tl-line-width);
	overflow: hidden;
	transform: translateX(-50%);
	pointer-events: none;
}

.bit7_timeline .bit7_timeline_item:first-child > .bit7_timeline_item__line {
	top: calc(var(--bit7-tl-marker-offset) + var(--bit7-tl-marker-size) / 2);
}

.bit7_timeline .bit7_timeline_item:nth-child(1 of .bit7_timeline_item) > .bit7_timeline_item__line {
	top: calc(var(--bit7-tl-marker-offset) + var(--bit7-tl-marker-size) / 2);
}

.bit7_timeline .bit7_timeline_item:last-child > .bit7_timeline_item__line {
	bottom: auto;
	height: calc(var(--bit7-tl-marker-offset) + var(--bit7-tl-marker-size) / 2);
}

.bit7_timeline .bit7_timeline_item:nth-last-child(1 of .bit7_timeline_item) > .bit7_timeline_item__line {
	bottom: auto;
	height: calc(var(--bit7-tl-marker-offset) + var(--bit7-tl-marker-size) / 2);
}

.bit7_timeline .bit7_timeline_item:only-child > .bit7_timeline_item__line {
	display: none;
}

.bit7_timeline .bit7_timeline_item:nth-child(1 of .bit7_timeline_item):nth-last-child(1 of .bit7_timeline_item) > .bit7_timeline_item__line {
	display: none;
}

.bit7_timeline .bit7_timeline_item__progress {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	transform: scaleY(0);
	transform-origin: 50% 0;
}

.bit7_timeline:not(.bit7_timeline--progress) .bit7_timeline_item__progress {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.bit7_timeline--progress .bit7_timeline_item__progress {
		transform: none !important;
	}

	.bit7_timeline .bit7_timeline_item__marker {
		transition: none;
	}
}

/*
 * Divi-Animationen (z. B. „Flip“) am Modul oder an Einträgen: Divi setzt .et_animated
 * auf opacity 0 und blendet erst per JavaScript ein. Ohne JavaScript (Divi setzt
 * html.js per Inline-Skript) und bei „Bewegung reduzieren“ bleibt die Timeline sichtbar.
 */

html:not(.js) .bit7_timeline.et_animated,
html:not(.js) .bit7_timeline .et_animated {
	opacity: 1 !important;
	animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.bit7_timeline.et_animated,
	.bit7_timeline .et_animated {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
}

/* Karte mit Titel und Text */

.bit7_timeline .bit7_timeline_item__card {
	grid-area: card;
	min-width: 0;
	text-align: var(--bit7-tl-align-odd);
}

.bit7_timeline .bit7_timeline_item:nth-child(even) .bit7_timeline_item__card {
	text-align: var(--bit7-tl-align-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(even of .bit7_timeline_item) .bit7_timeline_item__card {
	text-align: var(--bit7-tl-align-even);
}

.bit7_timeline .bit7_timeline_item:nth-child(odd of .bit7_timeline_item) .bit7_timeline_item__card {
	text-align: var(--bit7-tl-align-odd);
}

:where(.bit7_timeline) .bit7_timeline_item__title {
	margin: 0;
	padding: 0 0 10px;
	font-family: inherit;
	overflow-wrap: break-word;
	hyphens: manual;
}

:where(.bit7_timeline) .bit7_timeline_item__content {
	overflow-wrap: break-word;
}

.bit7_timeline .bit7_timeline_item__content a:focus-visible {
	/* Divi entfernt den Fokusrahmen global (:focus { outline: 0 }). */
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

:where(.bit7_timeline) .bit7_timeline_item__content > :last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/*
 * Standarddesign. Muss zu module-default-printed-style-attributes.json passen.
 * 767px ist Divis Standard-Breakpoint für Telefone.
 */

:where(.bit7_timeline) .bit7_timeline_item__line,
:where(.bit7_timeline) .bit7_timeline_item__connector {
	background-color: #efefef;
}

:where(.bit7_timeline) .bit7_timeline_item__progress {
	background-color: #5196b4;
}

:where(.bit7_timeline) .bit7_timeline_item__marker {
	border: 4px solid #5196b4;
	border-radius: 50%;
	background-color: #fff;
}

:where(.bit7_timeline) .bit7_timeline_item__card {
	padding: 0 10px;
}

:where(.bit7_timeline) .bit7_timeline_item__date {
	padding: 3px 8px;
	border-radius: 4px;
	background-color: #e0e0e0;
	color: #000;
	font-size: 14px;
	line-height: 1.25em;
}

:where(.bit7_timeline) .bit7_timeline_item__title {
	color: #444;
	font-size: 28px;
	font-weight: 500;
	line-height: 35px;
}

:where(.bit7_timeline) .bit7_timeline_item__content {
	font-size: 15px;
	line-height: 1.6em;
}

@media (max-width: 767px) {
	:where(.bit7_timeline) .bit7_timeline_item__date {
		padding: 0;
		background-color: transparent;
		font-size: 15px;
	}

	:where(.bit7_timeline) .bit7_timeline_item__title {
		font-size: 20px;
		line-height: 1.4em;
	}
}