/* ============================================================
   PRZ Timeline — Historie-Seite
   Scroll-Effekt: jede Karte "klebt" (position: sticky) für eine
   Weile oben, bevor die nächste sie ablöst. Reines CSS, kein JS.
   Alle Karten teilen denselben sticky-top-Wert -> eine Karte
   schiebt sich exakt im selben Tempo weg, wie die nächste
   reinrutscht (kein Overlap, kein Versatz).

   WICHTIG (Integration): position:sticky bricht, sobald ein
   Vorfahre overflow-x:hidden hat (body / #wrapper im Live-Theme
   haben das!). Fix direkt darunter.
   ============================================================ */

/* ============================================================
   Integrations-Fix: position:sticky vs. overflow auf Vorfahren
   Live-Theme setzt overflow-x:hidden auf #wrapper und body (body
   mit !important). overflow-x:hidden erzwingt overflow-y:auto ->
   die Elemente werden zu Scroll-Containern -> sticky klebt nicht
   mehr am Viewport (Scroll-Effekt weg).
   overflow:clip klippt horizontalen Overflow genauso, erzeugt
   aber KEINEN Scroll-Container/Containing-Block -> Sticky läuft.
   Per :has() nur auf Seiten mit der Timeline -> kein globaler
   Eingriff. Ältere Browser ohne :has()/clip: Timeline scrollt
   normal (kein Schaden).
   ============================================================ */
body:has(.prz-timeline) {
	overflow-x: clip !important;
	overflow-y: visible !important;
}
#wrapper:has(.prz-timeline) {
	overflow-x: clip !important;
}

.prz-timeline {
	/* ---- Farben/Typo/Spacing kommen aus tokens.css ---- */

	/* ---- Komponenten-Geometrie (kein passender Token im System) ---- */
	--prz-timeline-line-col: 40px;   /* Breite der Spur-Spalte (Linie + Punkt) */
	--prz-timeline-col-gap: 40px;    /* Abstand zwischen Spur und Karte */
	/* Abstand von oben, wo die Karte "klebt" = HIER steuerst du, wo die Karte
	   stehen bleibt. Live-Header ist 100px fix -> 100 + 20px Luft. Bei einge-
	   loggten Usern schiebt die WP-Admin-Bar den Header runter -> deren Höhe
	   (Custom-Property von WP, sonst 0) draufrechnen, damit die Karte auch im
	   Backend-Preview nicht hinter dem Header verschwindet. */
	--prz-timeline-sticky-top: calc(120px + var(--wp-admin--admin-bar--height, 0px));
	--prz-timeline-wrap-h: 60vh;     /* Scroll-Distanz pro Item = wie lange eine Karte "steht" */
	--prz-timeline-card-h: 240px;    /* Kartenhöhe (Desktop) */
	--prz-timeline-media-w: 360px;   /* Bildspalten-Breite in der Karte (Desktop) — breiter fürs Querformat (Briefkopf o. ä.) */
	--prz-timeline-gap: var(--prz-space-l); /* Pause zwischen den Karten beim Scrollen */

	max-width: 900px;
	margin: 0 auto;
	padding: 0 var(--prz-space-xs);
	position: relative;
}

.prz-timeline__outro {
	height: 20vh;
}

/* Durchgehende Linie: exakt in der Mitte der Spur-Spalte.
   (padding der .prz-timeline mitrechnen — 'left' zählt bei absolut
   positionierten Elementen ab der Border-Kante, nicht der Content-Box) */
.prz-timeline::before {
	content: "";
	position: absolute;
	left: calc(var(--prz-space-xs) + var(--prz-timeline-line-col) / 2);
	/* Linie spannt von der Mitte des ersten bis zur Mitte des letzten Punkts.
	   Punkt-Mitte = Kartenmitte = card-h/2 ab Wrap-Oberkante (siehe Dot unten).
	   Erster Wrap beginnt am Container-Rand -> top = card-h/2.
	   Letzter Punkt sitzt card-h/2 unter der Wrap-Oberkante, der Wrap ist
	   wrap-h hoch -> Abstand zum Container-Ende = wrap-h - card-h/2.
	   Mobile-Reset unten (card-h dort auto). */
	top: calc(var(--prz-timeline-card-h) / 2);
	bottom: calc(var(--prz-timeline-wrap-h) - var(--prz-timeline-card-h) / 2);
	width: 3px;
	background: var(--prz-color-primary-500);
	transform: translateX(-50%);
}

/* Jede Zeile: eigenes 2-Spalten-Grid (Spur | Karte) ->
   Punkt und Karte sitzen strukturell in derselben Spalte wie die Linie. */
.prz-timeline__wrap {
	display: grid;
	grid-template-columns: var(--prz-timeline-line-col) 1fr;
	column-gap: var(--prz-timeline-col-gap);
	height: var(--prz-timeline-wrap-h);
	margin-bottom: var(--prz-timeline-gap);
}

.prz-timeline__wrap:last-child {
	margin-bottom: 0;
}

/* WP-Flow-Margin (:where(.is-layout-flow) > * { margin-block-start: 1rem })
   hängt an alle Group-Kinder außer dem ersten. In unseren Grid-/Flex-Zeilen
   verschiebt das Karte und Text -> scoped auf Null (Abstände regeln wir selbst).
   Nur block-start resetten, damit margin-bottom der Zeilen erhalten bleibt. */
.prz-timeline > *,
.prz-timeline__wrap > *,
.prz-timeline__card > * {
	margin-block-start: 0;
}

/* Punkt: sticky, horizontal in der Spur zentriert und vertikal auf Kartenmitte.
   margin-top schiebt die NATÜRLICHE Position auf die Kartenmitte (card-h/2 - 8),
   damit der Punkt auch bei noch-nicht-geklebten Karten mittig sitzt (nicht oben).
   sticky-top hält ihn beim Kleben ebenfalls auf Kartenmitte -> in jedem Zustand
   zentriert. (8px = halbe Punkthöhe.) */
.prz-timeline__dot {
	grid-column: 1;
	justify-self: center;
	align-self: start;
	/* !important: schlägt den Flow-Margin-Reset / WP-Layout-Margins auf dem
	   echten Markup, die den Margin sonst auf 0 drücken (Punkt säße oben). */
	margin-top: calc(var(--prz-timeline-card-h) / 2 - 8px) !important;
	position: sticky;
	top: calc(var(--prz-timeline-sticky-top) + var(--prz-timeline-card-h) / 2 - 8px);
	width: 16px;
	height: 16px;
	background: var(--prz-color-primary-500);
	border: 3px solid var(--prz-color-bg-alt); /* = Seitenhintergrund */
	border-radius: 50%;
	z-index: 100;
}

/* Letztes Item: Karte + Punkt NICHT kleben lassen.
   Die Linie endet (statisch) an der natürlichen Mitte des letzten Punkts.
   Würde die letzte Karte kleben (der echte Seiten-Footer gibt dafür genug
   Scroll-Raum), wandert ihr Punkt unter das Linien-Ende und hängt frei heraus.
   Statisch = Punkt bleibt exakt am Linien-Ende (scroll-invariant); die letzte
   Karte scrollt am Ende einfach normal durch, statt zu pinnen. */
.prz-timeline__wrap:last-child .prz-timeline__card,
.prz-timeline__wrap:last-child .prz-timeline__dot {
	position: relative;
	top: auto;
}

/* Die Karte: reines CSS sticky, ALLE mit identischem top-Wert. */
.prz-timeline__card {
	grid-column: 2;
	position: sticky;
	top: var(--prz-timeline-sticky-top);
	height: var(--prz-timeline-card-h); /* feste Höhe -> Bildgröße bleibt konstant (Text passt sicher rein) */
	width: 100%;      /* füllt die Karten-Spalte (1fr) -> Text nutzt die volle Restbreite nach dem Bild; passt sich dem Container an (kein Overflow) */
	min-width: 0;
	background: var(--prz-color-bg);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); /* kein Shadow-Token im System */
	display: grid;
	grid-template-columns: var(--prz-timeline-media-w) 1fr;
	column-gap: var(--prz-space-s); /* Abstand zwischen Bild und Text (Desktop). Auf Mobile gestapelt -> greift nicht. */
	overflow: hidden;
}

/* Bild füllt die Bildspalte bis an alle Kanten (bewusst kein border-radius).
   WICHTIG: Bild absolut positioniert. Sonst bringt ein <img> mit height:100%
   in der Grid-Zeile seine EIGENHÖHE ein (z. B. 360px breit -> ~277px hoch),
   die Zeile wächst über die Kartenhöhe, das Text-Element wird mitgezogen und
   justify-content:center zentriert dann in der falschen (zu hohen) Höhe ->
   Text sitzt zu tief. Absolut = Bild bringt keine Eigenhöhe ein, Zeile bleibt
   auf Kartenhöhe, Text zentriert korrekt. (Prozent-Höhe-Falle, siehe CLAUDE.md) */
.prz-timeline__media {
	position: relative;
	height: 100%;
	min-height: 0;
	margin: 0;
	overflow: hidden;
}

.prz-timeline__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.prz-timeline__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--prz-space-xs);
	min-width: 0;
}

/* Textzeilen: H3 (Jahr) + H4 (Titel) + zwei p (Standort fett, Beschreibung
   regular). Größen/Farben scoped, damit die Karte kompakt bleibt und nicht
   die vollen main-v2-Heading-Größen erbt. Abstände über margin-bottom je
   Element -> großer Abstand nach dem Jahr, danach eng gruppiert (wie Screenshot).
   margin-block-start bleibt via explizitem margin bei 0 (schlägt die
   WP-Flow-Margin :where(...) mit 0 Spezifität). */

/* H2 — Jahreszahl */
.prz-timeline__year {
	font-size: var(--prz-font-size-h2);
	font-weight: var(--prz-font-weight-bold);
	line-height: var(--prz-line-height-tight);
	color: var(--prz-color-primary-500);
	margin: 0 0 var(--prz-space-xs); /* größerer Abstand nach der Jahreszahl */
}

/* H4 — Titel (Firmen-/Ereignisname). Bewusst kein uppercase (z. B. "s.r.o."). */
.prz-timeline__title {
	font-size: var(--prz-font-size-h4);
	font-weight: var(--prz-font-weight-bold);
	line-height: var(--prz-line-height-tight);
	color: var(--prz-color-text);
	margin: 0 0 var(--prz-space-2xs);
}

/* p (fett) — z. B. Standort */
.prz-timeline__subtitle {
	font-size: var(--prz-font-size-body);
	font-weight: var(--prz-font-weight-bold);
	line-height: var(--prz-line-height-base);
	color: var(--prz-color-text);
	margin: 0 0 0.25rem; /* eng zur Beschreibung */
}

/* p (regular) — Beschreibung / Zusatzinfo */
.prz-timeline__desc {
	font-size: var(--prz-font-size-body);
	line-height: var(--prz-line-height-base);
	color: var(--prz-color-text-muted);
	margin: 0;
}

/* ===== MOBILE — Karte stapelt (Bild oben, Text unten) ===== */
@media (max-width: 600px) {
	.prz-timeline {
		--prz-timeline-line-col: 24px;
		--prz-timeline-col-gap: 12px;
		/* Header ist auch auf Mobile 100px -> gleicher Sticky-Stopp wie Desktop
		   (Basis-Wert erbt: 120px + Admin-Bar). Karte ist gestapelt/höher ->
		   mehr Wrap-Höhe für genug Sticky-Scroll-Distanz. */
		--prz-timeline-wrap-h: 60vh;
		--prz-timeline-card-h: auto;
	}

	/* card-h ist hier auto -> die card-h-basierten calc (Linie/Punkt) sind
	   ungültig, daher zurücksetzen: Linie über volle Höhe, Punkt an Kartenoberkante. */
	.prz-timeline::before {
		top: 0;
		bottom: 0;
	}

	.prz-timeline__dot {
		margin-top: 0 !important; /* Desktop-Margin (mit !important) hier zurücknehmen */
		top: var(--prz-timeline-sticky-top);
	}

	.prz-timeline__card {
		grid-template-columns: 1fr;   /* Bild oben, Text unten */
		width: 100%;                  /* füllt die Grid-Spalte statt 100vw-Rechnung -> kein Overflow im entry-content */
		min-width: 0;
		/* NICHT auf die volle Wrap-Höhe strecken: erhält den Sticky-Scroll-Raum
		   UND vermeidet den zentrierten Riesen-Abstand zwischen Bild und Text. */
		align-self: start;
	}

	.prz-timeline__media {
		height: 150px;
	}

	.prz-timeline__text {
		padding: var(--prz-space-xs);
	}

	/* Kompakter: kleinerer Abstand nach der Jahreszahl */
	.prz-timeline__year {
		margin-bottom: var(--prz-space-2xs);
	}
}

@media (max-width: 360px) {
	.prz-timeline {
		--prz-timeline-line-col: 18px;
		--prz-timeline-col-gap: 8px;
	}
}