/* ---- Webux Zeitstrahl (alternierend) --------------------------------------

   Gemeinsame Darstellung für webux/steps (Variante „Zeitstrahl, alternierend")
   und webux/highlights (Anordnung „Zeitstrahl, alternierend"). Beide Blöcke
   geben dafür dieselben zwei Klassen aus - `webux-timeline` am Container,
   `webux-timeline__item` an jedem Eintrag - und behalten sonst ihr eigenes
   Aussehen: die Schritte bleiben Text, die Highlights bleiben Farbkarten.

   Aufbau: eine Spur in der Mitte, die Einträge abwechselnd links und rechts
   davon, ein Punkt pro Eintrag auf der Spur. Beim Scrollen füllt sich die Spur
   von oben nach unten mit; scrollt man zurück, läuft die Füllung wieder
   zurück (assets/js/webux-timeline.js setzt dafür nur eine einzige Variable,
   `--webux-timeline-progress`).

   Verstecken tut diese Datei nichts von sich aus: die Regeln für den Reveal
   hängen an `is-armed`, und diese Klasse setzt allein das Skript. Ohne
   JavaScript stehen alle Einträge sichtbar, die Spur ist dann eine gewöhnliche
   Verbindungslinie. Zusätzlich hängt jede Bewegung in
   `prefers-reduced-motion: no-preference`. */

.webux-timeline {
	/* Vom Skript beschrieben; ohne Skript bleibt die Füllung bei 0 und die
	   Spur ist einfach eine Linie. */
	--webux-timeline-progress: 0%;
	/* Abstand zwischen Eintragsspalte und Spur (je Seite). */
	--webux-timeline-gutter: 44px;
	/* Höhe, auf der der Punkt eines Eintrags sitzt - dieselbe Achse, auf der
	   auch der erste Textzeile beginnt. */
	--webux-timeline-dot-top: 24px;
	--webux-timeline-dot: 14px;
	/* Breite des Rahmens, den der EINTRAG selbst trägt. Vorgabe 0 - wer eine
	   Karte MIT Rahmen zeichnet, setzt den Wert dort, wo er den Rahmen
	   deklariert (siehe inc/field-blocks/highlights/style.css). Warum das
	   überhaupt nötig ist, steht bei den Punkt-Regeln weiter unten. */
	--webux-timeline-item-border: 0px;

	position: relative;
	display: flex;
	flex-direction: column;
	/* Der vertikale Rhythmus kommt aus dem Aussenabstand der Einträge, nicht
	   aus einer Lücke: die Spur soll lückenlos durchlaufen. Doppelt notierte
	   Klasse (siehe unten) hebt ein `gap` aus der geteilten site.css auf. */
	gap: 0;
	/* Platz für den ersten und letzten Punkt, damit die Spur nicht exakt an
	   der Textkante beginnt. */
	padding-block: 8px;
}

/* Die geteilte site.css setzt `.lv-steps.webux-steps { gap: 24px }` (0,2,0) und
   lädt nach den Blockstilen. Mit der doppelt notierten Klasse (0,2,0 an einem
   Element, das beide trägt → gewinnt über die Reihenfolge innerhalb DIESER
   Datei nicht, wohl aber als spätere Datei) bleibt die Spur lückenlos. */
.webux-timeline.webux-timeline {
	gap: 0;
}

/* Spur (Grundlinie) */
.webux-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	border-radius: 1px;
	background: var(--wp--preset--color--border, #ece7de);
}

/* Spur (Füllung). Wächst mit dem Scrollstand und schrumpft wieder, wenn man
   zurückscrollt. Die kurze Transition glättet die Sprünge zwischen zwei
   Scroll-Ereignissen, ohne der Bewegung hinterherzuhinken. */
.webux-timeline::after {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	border-radius: 1px;
	height: var(--webux-timeline-progress, 0%);
	background: var(--wp--preset--color--primary, #8b8178);
	transition: height 120ms linear;
}

.webux-timeline__item {
	position: relative;
	width: calc(50% - var(--webux-timeline-gutter));
	margin-bottom: clamp(28px, 4vw, 56px);
}

.webux-timeline__item:last-child {
	margin-bottom: 0;
}

/* Abwechselnd links und rechts der Spur. */
.webux-timeline__item:nth-child(odd) {
	align-self: flex-start;
}

.webux-timeline__item:nth-child(even) {
	align-self: flex-end;
}

/* Punkt auf der Spur. Er sitzt am inneren Rand des Eintrags, also je nach
   Seite rechts oder links davon - genau auf der Achse der Spur:
   Rinne + halber Punktdurchmesser + Rahmen des Eintrags.

   Der Rahmen gehört zwingend in die Rechnung: der Punkt ist absolut
   positioniert, und ein absolut positioniertes Element misst seine Abstände
   vom POLSTERKASTEN des Bezugselements, nicht vom Rahmenkasten. Trägt der
   Eintrag also einen 1px-Rahmen, liegt seine Polsterkante 1px weiter innen -
   und der Punkt landet um genau diese 1px zu nah an der eigenen Karte. Auf der
   linken Seite sieht das aus wie „zu weit links", auf der rechten wie „zu weit
   rechts"; die Spur bleibt, wo sie ist. Gemessen auf /finanzierung: Spurmitte
   720, Punktmitte 719 bzw. 721. */
.webux-timeline__item::before {
	content: "";
	position: absolute;
	top: var(--webux-timeline-dot-top);
	width: var(--webux-timeline-dot);
	height: var(--webux-timeline-dot);
	border-radius: 50%;
	background: var(--wp--preset--color--base, #fff);
	border: 3px solid var(--wp--preset--color--primary, #8b8178);
	/* Über der Spur, damit die Füllung nicht durch den Punkt läuft. */
	z-index: 1;
	box-sizing: border-box;
}

.webux-timeline__item:nth-child(odd)::before {
	right: calc(-1 * (var(--webux-timeline-gutter) + var(--webux-timeline-dot) / 2 + var(--webux-timeline-item-border, 0px)));
}

.webux-timeline__item:nth-child(even)::before {
	left: calc(-1 * (var(--webux-timeline-gutter) + var(--webux-timeline-dot) / 2 + var(--webux-timeline-item-border, 0px)));
}

/* Erreichte Einträge markieren den Punkt gefüllt - dieselbe Rückmeldung, die
   die Füllung der Spur gibt, nur am einzelnen Eintrag. */
.webux-timeline__item.is-reached::before {
	background: var(--wp--preset--color--primary, #8b8178);
}

/* ---- Reveal ---------------------------------------------------------------
   `is-armed` setzt ausschliesslich assets/js/webux-timeline.js, und zwar erst,
   nachdem es geprüft hat, dass IntersectionObserver da ist und keine reduzierte
   Bewegung gewünscht ist. Ohne die Klasse greift keine der Regeln - der Inhalt
   ist dann normal sichtbar.

   Bewusst zweiseitig: Beim Zurückscrollen laufen Einträge wieder in ihren
   Ausgangszustand (so gewünscht: „Scroll-Animation auch rückwärts"). Die
   Einträge kommen dabei von ihrer eigenen Seite hereingefahren - das ist die
   Bewegung, die das Links-Rechts überhaupt erst erzählt. */
@media (prefers-reduced-motion: no-preference) {
	.webux-timeline.is-armed .webux-timeline__item {
		opacity: 0;
		transition: opacity 520ms ease, transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
		will-change: opacity, transform;
	}

	.webux-timeline.is-armed .webux-timeline__item:nth-child(odd) {
		transform: translateX(-28px);
	}

	.webux-timeline.is-armed .webux-timeline__item:nth-child(even) {
		transform: translateX(28px);
	}

	.webux-timeline.is-armed .webux-timeline__item.is-revealed {
		opacity: 1;
		transform: none;
	}
}

/* Reduzierte Bewegung: keine Füllung, die hinterherwandert - die Spur steht
   fertig da. Das Skript rührt in diesem Fall nichts an. */
@media (prefers-reduced-motion: reduce) {
	.webux-timeline::after {
		height: 100%;
		transition: none;
	}
}

/* ---- Schmale Viewports ----------------------------------------------------
   Zwei Spalten à knapp 40% tragen keinen Fliesstext mehr. Unterhalb von 782px
   klappt der Zeitstrahl deshalb auf eine Spur am linken Rand um: alle Einträge
   volle Breite, alle Punkte links. Die Bewegung kommt dann für alle aus
   derselben Richtung. */
@media (max-width: 782px) {
	.webux-timeline {
		--webux-timeline-gutter: 26px;
	}

	.webux-timeline::before,
	.webux-timeline::after {
		left: calc(var(--webux-timeline-dot) / 2);
	}

	/* Aussenabstand statt Innenpolster: ein Eintrag kann eine gefüllte Karte
	   sein (webux/highlights), und deren Fläche würde den Punkt sonst
	   überdecken. So beginnt die Karte rechts der Spur, der Punkt sitzt
	   daneben - genau wie auf dem Desktop, nur immer auf derselben Seite. */
	.webux-timeline__item,
	.webux-timeline__item:nth-child(odd),
	.webux-timeline__item:nth-child(even) {
		width: calc(100% - var(--webux-timeline-gutter) - var(--webux-timeline-dot));
		margin-left: calc(var(--webux-timeline-gutter) + var(--webux-timeline-dot));
		align-self: flex-start;
	}

	/* Der Punkt sitzt hier NICHT wie auf dem Desktop eine halbe Punktbreite
	   neben der Rinne: dort liegt die Spur auf 50 % und der Eintrag endet eine
	   Rinne davor, hier liegt die Spur auf `dot / 2` und der Eintrag beginnt
	   um `gutter + dot` eingerueckt. Gemessen vom Eintrag aus muss der Punkt
	   also um genau diesen Einzug zurueck, dann steht seine linke Kante auf 0
	   und seine Mitte auf `dot / 2` - der Achse der Spur.
	   Mit dem Desktop-Wert (`gutter + dot / 2`) stand er eine halbe Punktbreite
	   zu weit rechts und damit sichtbar neben der Linie. */
	.webux-timeline__item:nth-child(odd)::before,
	.webux-timeline__item:nth-child(even)::before {
		left: calc(-1 * (var(--webux-timeline-gutter) + var(--webux-timeline-dot) + var(--webux-timeline-item-border, 0px)));
		right: auto;
	}

	@media (prefers-reduced-motion: no-preference) {
		.webux-timeline.is-armed .webux-timeline__item:nth-child(odd),
		.webux-timeline.is-armed .webux-timeline__item:nth-child(even) {
			transform: translateY(20px);
		}

		.webux-timeline.is-armed .webux-timeline__item.is-revealed {
			transform: none;
		}
	}
}

/* Druck: Beim Drucken wird nicht gescrollt, das Skript feuert also nie. Ohne
   diese Regel käme ein armierter Zeitstrahl leer aufs Papier (gleiche
   Absicherung wie in assets/css/webux-reveal.css). */
@media print {
	.webux-timeline .webux-timeline__item,
	.webux-timeline.is-armed .webux-timeline__item {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.webux-timeline::after {
		height: 100%;
	}
}