/*
 * izi-vita – Zeitstrahl
 *
 * Aufbau: Die Linie liegt als EIN durchlaufendes Element hinter der Liste,
 * nicht je Eintrag. Nur so bleibt sie über Einträge unterschiedlicher Höhe
 * hinweg geschlossen – ein je Eintrag neu angesetztes Kachelbild würde an
 * jeder Eintragsgrenze seitlich springen.
 *
 * Die Grafiken werden als CSS-Maske über eine Hintergrundfarbe gelegt. Dadurch
 * steckt die Strichfarbe in --izi-vita-linie und nicht in den SVG-Dateien; die
 * Akzentfarbe der Marke lässt sich später setzen, ohne die Grafiken anzufassen.
 * Ohne Maskenunterstützung greift der Hintergrundbild-Fallback darüber –
 * dann zeichnet die Datei in ihrer eigenen Farbe (#111111).
 *
 * Alle Grafiken sind 80 px breit und teilen sich dieselbe Mittelachse, siehe
 * assets/img/README.md.
 */

.izi-vita {
	--izi-vita-achse: 80px;         /* Breite der Linienspalte = Breite der SVGs */
	--izi-vita-achse-x: calc(var(--izi-vita-achse) / 2);
	--izi-vita-linie: currentColor; /* Strichfarbe, überschreibbar */
	--izi-vita-grund: #ffffff;      /* Seitenhintergrund – verdeckt die Linie hinter der Schleife */
	--izi-vita-text: #111111;
	--izi-vita-leise: #767676;
	--izi-vita-hoehe-start: 4px;    /* Höhen der Sonderteile, aus den SVG-Dateien */
	--izi-vita-hoehe-schleife: 90px;
	--izi-vita-hoehe-ende: 93px;
	--izi-vita-abstand: 48px;       /* Abstand zwischen zwei Stationen */

	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--izi-vita-abstand);
	color: var(--izi-vita-text);
}

/*
 * Reset gegen Theme-Listenstile.
 *
 * Enfold formatiert Listen und Absätze über Selektoren mit #top davor
 * (#top .av_textblock_section ol { margin-left: 25px }). Eine ID schlägt jede
 * Klasse – ohne !important würde der Zeitstrahl eingerückt und die Achse säße
 * nicht mehr mittig. Deshalb hier, und nur für diese drei Eigenschaften.
 */
.izi-vita,
.izi-vita .izi-vita__item,
.izi-vita .izi-vita__station {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Platz für die gepunktete Auslaufkurve unter der letzten Station. */
.izi-vita {
	padding-bottom: var(--izi-vita-hoehe-ende) !important;
}

/* Die durchlaufende Linie. Endet oberhalb der gepunkteten Auslaufkurve. */
.izi-vita::before,
.izi-vita::after {
	content: "";
	position: absolute;
	left: var(--izi-vita-achse-x);
	width: var(--izi-vita-achse);
	transform: translateX(-50%);
	pointer-events: none;
}

.izi-vita::before {
	top: 0;
	bottom: var(--izi-vita-hoehe-ende);
	background: url(img/vita-linie.svg) center top repeat-y;
}

/* Die gepunktete Auslaufkurve: „geht weiter" ohne Jahreszahl. */
.izi-vita::after {
	bottom: 0;
	height: var(--izi-vita-hoehe-ende);
	background: url(img/vita-ende.svg) center top no-repeat;
}


/* -------------------------------------------------------------------------
   Station
   ---------------------------------------------------------------------- */

.izi-vita__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--izi-vita-achse) minmax(0, 1fr);
	column-gap: 16px;
	align-items: start;
}

/* Der Querstrich am Anfang sitzt auf dem oberen Ende der Linie. */
.izi-vita__item:first-child::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--izi-vita-achse-x);
	width: var(--izi-vita-achse);
	height: var(--izi-vita-hoehe-start);
	transform: translateX(-50%);
	background: url(img/vita-start.svg) center top no-repeat;
}

.izi-vita__jahr {
	grid-column: 2;
	grid-row: 1;
	color: var(--izi-vita-leise);
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.izi-vita__station {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.izi-vita__zusatz {
	display: block;
	color: var(--izi-vita-leise);
	font-size: 15px;
	line-height: 1.45;
}


/* -------------------------------------------------------------------------
   Marker

   Die Größe trägt die Gewichtung der Station – so hat es die Vorgängerseite
   über die Icon-Größen 25/50/75 px gemacht. Der kleinste Marker ist bewusst
   größer als der Ausschlag der Linie (8 px), damit er auf jeder Höhe auf ihr
   sitzt und nicht daneben.
   ---------------------------------------------------------------------- */

.izi-vita__marker {
	--m: 30px;
	grid-column: 1;
	grid-row: 1;
	justify-self: center;
	z-index: 2;
	width: var(--m);
	height: var(--m);
	margin-top: calc((1.5em - var(--m)) / 2);
	border-radius: 50%;
	background: var(--izi-vita-linie);
}

.izi-vita__item--klein .izi-vita__marker { --m: 20px; }
.izi-vita__item--gross .izi-vita__marker { --m: 44px; }
.izi-vita__item--stern .izi-vita__marker { --m: 34px; }
.izi-vita__item--herz  .izi-vita__marker { --m: 30px; }


/* -------------------------------------------------------------------------
   Schleife

   Sie ersetzt ein Stück der durchlaufenden Linie. Da die Linie ein einziges
   Element ist, wird das Stück verdeckt statt ausgespart: Die Schleifenfläche
   liegt darüber und trägt die Seitenhintergrundfarbe. Steht der Zeitstrahl
   einmal auf einer farbigen Fläche, muss --izi-vita-grund mitgesetzt werden.
   ---------------------------------------------------------------------- */

.izi-vita__item--schleife {
	min-height: var(--izi-vita-hoehe-schleife);
}

.izi-vita__schleife {
	position: absolute;
	top: 0;
	left: var(--izi-vita-achse-x);
	width: var(--izi-vita-achse);
	height: var(--izi-vita-hoehe-schleife);
	transform: translateX(-50%);
	z-index: 1;
	background: var(--izi-vita-grund) url(img/vita-schleife.svg) center top no-repeat;
}

/* Der Marker rückt in die Mitte der Schleife statt auf die erste Textzeile. */
.izi-vita__item--schleife .izi-vita__marker {
	margin-top: calc((var(--izi-vita-hoehe-schleife) - var(--m)) / 2);
}


/* -------------------------------------------------------------------------
   Farbsteuerung per Maske

   Ab hier zeichnen die SVG-Dateien nicht mehr selbst, sondern schneiden eine
   Fläche in --izi-vita-linie aus. Alles in einem @supports-Block, damit ohne
   Maskenunterstützung der Bild-Fallback oben stehen bleibt.
   ---------------------------------------------------------------------- */

@supports (mask-image: url("")) or (-webkit-mask-image: url("")) {

	.izi-vita::before {
		background: var(--izi-vita-linie);
		-webkit-mask: url(img/vita-linie.svg) center top repeat-y;
		mask: url(img/vita-linie.svg) center top repeat-y;
	}

	.izi-vita::after {
		background: var(--izi-vita-linie);
		-webkit-mask: url(img/vita-ende.svg) center top no-repeat;
		mask: url(img/vita-ende.svg) center top no-repeat;
	}

	.izi-vita__item:first-child::before {
		background: var(--izi-vita-linie);
		-webkit-mask: url(img/vita-start.svg) center top no-repeat;
		mask: url(img/vita-start.svg) center top no-repeat;
	}

	/* Die Fläche bleibt deckend, die Schleife zeichnet das Kind darüber. */
	.izi-vita__schleife {
		background: var(--izi-vita-grund);
	}

	.izi-vita__schleife::after {
		content: "";
		position: absolute;
		inset: 0;
		background: var(--izi-vita-linie);
		-webkit-mask: url(img/vita-schleife.svg) center top no-repeat;
		mask: url(img/vita-schleife.svg) center top no-repeat;
	}

	.izi-vita__item--stern .izi-vita__marker,
	.izi-vita__item--herz .izi-vita__marker {
		border-radius: 0;
		-webkit-mask-position: center;
		-webkit-mask-repeat: no-repeat;
		-webkit-mask-size: contain;
		mask-position: center;
		mask-repeat: no-repeat;
		mask-size: contain;
	}

	.izi-vita__item--stern .izi-vita__marker {
		-webkit-mask-image: url(img/marker-stern.svg);
		mask-image: url(img/marker-stern.svg);
	}

	.izi-vita__item--herz .izi-vita__marker {
		-webkit-mask-image: url(img/marker-herz.svg);
		mask-image: url(img/marker-herz.svg);
	}
}


/* -------------------------------------------------------------------------
   Einblenden beim Scrollen

   Die Klasse wird vom Skript gesetzt, nicht vom Markup: Ohne JavaScript ist
   alles von Anfang an sichtbar. Werte nach docs/03 – 180 ms, 12 px, einmalig.
   ---------------------------------------------------------------------- */

.izi-vita--animiert .izi-vita__jahr,
.izi-vita--animiert .izi-vita__station,
.izi-vita--animiert .izi-vita__marker {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.18s ease-out, transform 0.18s ease-out;
}

.izi-vita--animiert .izi-vita__marker {
	transform: translateY(12px);
}

.izi-vita--animiert .is-sichtbar .izi-vita__jahr,
.izi-vita--animiert .is-sichtbar .izi-vita__station,
.izi-vita--animiert .is-sichtbar .izi-vita__marker {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	.izi-vita--animiert .izi-vita__jahr,
	.izi-vita--animiert .izi-vita__station,
	.izi-vita--animiert .izi-vita__marker {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Gedruckt wird nicht gescrollt: Ohne diese Regel bliebe alles unterhalb des
   ersten Bildschirms auf dem Papier leer. Eine Vita ist genau die Seite, die
   jemand ausdruckt oder als PDF sichert. */
@media print {

	.izi-vita--animiert .izi-vita__jahr,
	.izi-vita--animiert .izi-vita__station,
	.izi-vita--animiert .izi-vita__marker {
		opacity: 1;
		transform: none;
		transition: none;
	}
}


/* -------------------------------------------------------------------------
   Ab Tablet: Jahr und Station beidseitig der Linie, im Wechsel

   Bis dahin bleibt es einspaltig mit der Linie am linken Rand. Das ist der
   Punkt, an dem die Vorgängerseite mobil auseinanderfiel: Dort standen Jahr
   und Station in getrennten Zellen und wanderten beim Umbruch auseinander.
   ---------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

	.izi-vita {
		--izi-vita-achse-x: 50%;
		--izi-vita-abstand: 56px;
	}

	.izi-vita__item {
		grid-template-columns: minmax(0, 1fr) var(--izi-vita-achse) minmax(0, 1fr);
		column-gap: 32px;
	}

	.izi-vita__marker {
		grid-column: 2;
	}

	.izi-vita__jahr,
	.izi-vita__station {
		grid-row: 1;
	}

	.izi-vita__jahr {
		grid-column: 1;
		text-align: right;
	}

	.izi-vita__station {
		grid-column: 3;
	}

	/* Jede zweite Station spiegelt sich – daraus entsteht der Wechsel. */
	.izi-vita__item:nth-child(even) .izi-vita__jahr {
		grid-column: 3;
		text-align: left;
	}

	.izi-vita__item:nth-child(even) .izi-vita__station {
		grid-column: 1;
		text-align: right;
	}
}