/* REK Ablauf – Zeitleiste
   ---------------------------------------------------------------
   Alle Werte hängen an CSS-Variablen. Gesetzt werden sie im Block
   über die Seitenleiste; die Vorgaben hier greifen, solange dort
   nichts eingetragen ist. Schriftart, Farbe und Gewicht stehen
   standardmäßig auf "inherit", die Zeitleiste übernimmt also die
   Typografie des Themes.
   --------------------------------------------------------------- */

.rek-ab {
	/* Geometrie */
	--rek-ab-akzent: #DD4B32;
	--rek-ab-punkt-fuellung: #FAF6EF;
	--rek-ab-punkt-groesse: 1rem;
	--rek-ab-punkt-rand: 2px;
	--rek-ab-punkt-links: 0px;

	/* Zeilenhöhen. Werden für die senkrechte Ausrichtung gebraucht:
	   Der Punkt sitzt auf der Mittellinie der ersten Titelzeile, die
	   Uhrzeit sitzt auf der Mitte des Punktes. */
	--rek-ab-zeit-lineheight: 1.3;
	--rek-ab-offen-lineheight: 1.3;
	--rek-ab-titel-lineheight: 1.3;
	--rek-ab-text-lineheight: 1.55;

	/* Leer lassen heißt: automatisch auf Titelhöhe. Ein eigener Wert
	   in der Seitenleiste überschreibt die Rechnung. */
	--rek-ab-punkt-top: calc(
		var(--rek-ab-titel-size) * var(--rek-ab-titel-lineheight) / 2 - var(--rek-ab-punkt-groesse) / 2
	);
	--rek-ab-linie-breite: 2px;
	--rek-ab-linie-deckkraft: 0.3;
	--rek-ab-abstand: 2.25rem;
	--rek-ab-zeit-spalte: 5rem;
	--rek-ab-zeit-luecke: 1.5rem;
	--rek-ab-zeit-ausrichtung: right;
	--rek-ab-text-einzug: 1rem;

	/* Uhrzeit */
	--rek-ab-zeit-font: inherit;
	--rek-ab-zeit-size: 1rem;
	--rek-ab-zeit-weight: 700;
	--rek-ab-zeit-spacing: 0.02em;
	--rek-ab-zeit-transform: none;
	--rek-ab-zeit-farbe: inherit;

	/* Uhrzeit, solange sie offen ist */
	--rek-ab-offen-font: var(--rek-ab-zeit-font);
	--rek-ab-offen-size: 0.8rem;
	--rek-ab-offen-weight: 600;
	--rek-ab-offen-spacing: 0.1em;
	--rek-ab-offen-transform: uppercase;
	--rek-ab-offen-farbe: rgba(0, 0, 0, 0.55);

	/* Titel */
	--rek-ab-titel-font: inherit;
	--rek-ab-titel-size: 1.15rem;
	--rek-ab-titel-weight: 600;
	--rek-ab-titel-spacing: normal;
	--rek-ab-titel-transform: none;
	--rek-ab-titel-farbe: inherit;

	/* Beschreibung */
	--rek-ab-text-font: inherit;
	--rek-ab-text-size: 0.95rem;
	--rek-ab-text-weight: 400;
	--rek-ab-text-spacing: normal;
	--rek-ab-text-farbe: rgba(0, 0, 0, 0.62);
	--rek-ab-text-maxbreite: none;

	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.rek-ab__item {
	position: relative;
	margin: 0;
	padding: 0 0 var(--rek-ab-abstand)
		calc(var(--rek-ab-punkt-links) + var(--rek-ab-punkt-groesse) + var(--rek-ab-text-einzug));
	list-style: none;
}

.rek-ab__item:last-of-type {
	padding-bottom: 0;
}

/* Punkt. Gefüllt = steht fest, hohl = noch in Abstimmung. */
.rek-ab__item::before {
	content: "";
	position: absolute;
	left: var(--rek-ab-punkt-links);
	top: var(--rek-ab-punkt-top);
	width: var(--rek-ab-punkt-groesse);
	height: var(--rek-ab-punkt-groesse);
	border-radius: 50%;
	border: var(--rek-ab-punkt-rand) solid var(--rek-ab-akzent);
	background: var(--rek-ab-punkt-fuellung);
	box-sizing: border-box;
}

.rek-ab__item--fix::before {
	background: var(--rek-ab-akzent);
}

/* Linie. Wird pro Eintrag als Segment zwischen zwei Punkten gezeichnet,
   nicht als eine durchgehende Linie hinter der ganzen Liste. Dadurch
   ragt sie weder über den ersten noch unter den letzten Punkt hinaus.
   Der letzte Eintrag bekommt kein Segment. */
.rek-ab__item:not(:last-of-type)::after {
	content: "";
	position: absolute;
	left: calc(
		var(--rek-ab-punkt-links) + var(--rek-ab-punkt-groesse) / 2 - var(--rek-ab-linie-breite) / 2
	);
	top: calc(var(--rek-ab-punkt-top) + var(--rek-ab-punkt-groesse));
	bottom: calc(var(--rek-ab-punkt-top) * -1);
	width: var(--rek-ab-linie-breite);
	background: var(--rek-ab-akzent);
	opacity: var(--rek-ab-linie-deckkraft);
}

.rek-ab__time {
	display: block;
	margin-bottom: 0.3rem;
	font-family: var(--rek-ab-zeit-font);
	font-size: var(--rek-ab-zeit-size);
	font-weight: var(--rek-ab-zeit-weight);
	letter-spacing: var(--rek-ab-zeit-spacing);
	text-transform: var(--rek-ab-zeit-transform);
	color: var(--rek-ab-zeit-farbe);
	line-height: var(--rek-ab-zeit-lineheight);
}

.rek-ab__time--open {
	font-family: var(--rek-ab-offen-font);
	font-size: var(--rek-ab-offen-size);
	font-weight: var(--rek-ab-offen-weight);
	letter-spacing: var(--rek-ab-offen-spacing);
	text-transform: var(--rek-ab-offen-transform);
	color: var(--rek-ab-offen-farbe);
	line-height: var(--rek-ab-offen-lineheight);
}

.rek-ab__what {
	display: block;
	margin-bottom: 0.35rem;
	font-family: var(--rek-ab-titel-font);
	font-size: var(--rek-ab-titel-size);
	font-weight: var(--rek-ab-titel-weight);
	letter-spacing: var(--rek-ab-titel-spacing);
	text-transform: var(--rek-ab-titel-transform);
	color: var(--rek-ab-titel-farbe);
	line-height: var(--rek-ab-titel-lineheight);
}

.rek-ab__what:last-child {
	margin-bottom: 0;
}

.rek-ab__desc {
	display: block;
	font-family: var(--rek-ab-text-font);
	font-size: var(--rek-ab-text-size);
	font-weight: var(--rek-ab-text-weight);
	letter-spacing: var(--rek-ab-text-spacing);
	color: var(--rek-ab-text-farbe);
	line-height: var(--rek-ab-text-lineheight);
	max-width: var(--rek-ab-text-maxbreite);
}

.rek-ab__desc a {
	color: inherit;
	text-decoration: underline;
}

/* Ab 640 Pixel steht die Uhrzeit links neben der Linie. */
@media (min-width: 40rem) {
	.rek-ab {
		--rek-ab-punkt-links: calc(var(--rek-ab-zeit-spalte) + var(--rek-ab-zeit-luecke));
	}

	.rek-ab__time {
		position: absolute;
		left: 0;
		width: var(--rek-ab-zeit-spalte);
		margin: 0;
		text-align: var(--rek-ab-zeit-ausrichtung);

		/* Mitte der Zeitzeile auf die Mitte des Punktes legen. */
		top: calc(
			var(--rek-ab-punkt-top) + var(--rek-ab-punkt-groesse) / 2 -
				var(--rek-ab-zeit-size) * var(--rek-ab-zeit-lineheight) / 2
		);
	}

	.rek-ab__time--open {
		top: calc(
			var(--rek-ab-punkt-top) + var(--rek-ab-punkt-groesse) / 2 -
				var(--rek-ab-offen-size) * var(--rek-ab-offen-lineheight) / 2
		);
	}
}

/* ---------------------------------------------------------------
   Reset gegen Theme-Vorgaben.

   Viele Themes geben Listen im Inhaltsbereich einen Einzug, etwa
   ".entry-content ol { padding-left: 2.5rem }". Solche Regeln sind
   spezifischer als eine einzelne Klasse und würden die Zeitleiste
   nach rechts schieben. Die doppelte Klasse hebt die Spezifität
   an, ohne !important zu benutzen. Padding und Margin, die über
   die Seitenleiste gesetzt werden, landen als Inline-Stil am
   Element und gewinnen weiterhin.
   --------------------------------------------------------------- */

ol.rek-ab.rek-ab {
	margin-block: 0;
	padding-block: 0;
	padding-inline: 0;
	list-style: none;
}

ol.rek-ab.rek-ab > .rek-ab__item {
	margin: 0;
	list-style: none;
	padding-block: 0 var(--rek-ab-abstand);
	padding-inline: calc(
			var(--rek-ab-punkt-links) + var(--rek-ab-punkt-groesse) + var(--rek-ab-text-einzug)
		)
		0;
}

ol.rek-ab.rek-ab > .rek-ab__item:last-of-type {
	padding-bottom: 0;
}

ol.rek-ab.rek-ab > .rek-ab__item::marker {
	content: "";
}