/*
 * Anvil Chronik -- die Zeitleiste.
 *
 * AUSSCHLIESSLICH ueber die CSS-Variablen des Themes. Eine eigene Farbe hier
 * waere eine, die beim naechsten Schemawechsel stehen bleibt -- und dann
 * genau an der einen Stelle falsch aussieht, an der niemand nachsieht.
 */

.acr-chronik {
	margin: 1.5rem 0;
}

/* --- Filter ---------------------------------------------------------- */

.acr-filter {
	border-bottom: 1px solid var(--border);
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
}

.acr-filter-reihe {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	margin-bottom: 0.4rem;
}

.acr-filter-titel {
	color: var(--text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.04em;
	min-width: 5rem;
	text-transform: uppercase;
}

.acr-filter-link {
	border: 1px solid var(--border);
	border-radius: 2px;
	color: var(--text-body);
	font-size: 0.9rem;
	padding: 0.15rem 0.5rem;
	text-decoration: none;
}

.acr-filter-link:hover,
.acr-filter-link:focus {
	border-color: var(--accent);
}

.acr-filter-link.is-aktiv {
	border-color: var(--gold);
	color: var(--gold);
}

.acr-zahl {
	color: var(--text-muted);
	font-size: 0.8em;
}

/* --- Spuren ---------------------------------------------------------- */

.acr-spuren {
	display: grid;
	gap: 1.5rem;
	/*
	 * Eine Spalte je Epoche, solange Platz ist -- darunter untereinander.
	 * Kein festes Vierspaltenraster: Die Achse waechst, wenn jemand eine
	 * Epoche ergaenzt, und ein Raster mit fester Zahl waere dann falsch.
	 */
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.acr-spur-titel {
	border-bottom: 2px solid var(--gold);
	font-size: 1rem;
	margin: 0 0 0.6rem;
	padding-bottom: 0.3rem;
}

/*
 * Die Spalte ohne Zeitangabe ist gedaempft, aber NICHT versteckt. Sie ist
 * Bestand ohne Ort auf der Achse -- und ihre Laenge ist der Befund.
 */
.acr-spur-ohne .acr-spur-titel {
	border-bottom-color: var(--border);
	color: var(--text-muted);
}

/* --- Eintraege ------------------------------------------------------- */

.acr-liste {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acr-eintrag {
	border-left: 2px solid var(--border);
	margin-bottom: 0.6rem;
	padding-left: 0.6rem;
}

.acr-titel {
	font-weight: 600;
}

a.acr-titel {
	color: var(--text-body);
}

a.acr-titel:hover,
a.acr-titel:focus {
	color: var(--gold);
}

.acr-quelle,
.acr-zeit {
	color: var(--text-muted);
	font-size: 0.85rem;
}

.acr-zeit::before {
	content: "· ";
}

.acr-zeitgleich {
	color: var(--text-muted);
	display: block;
	font-size: 0.8rem;
	font-style: italic;
	margin-top: 0.15rem;
}

/* --- Meldungen ------------------------------------------------------- */

.acr-leer,
.acr-leer-gesamt {
	color: var(--text-muted);
	font-size: 0.9rem;
}

.acr-ausfall {
	border-left: 3px solid var(--accent);
	margin-bottom: 1rem;
	padding-left: 0.6rem;
}

/*
 * data-lang: Das Theme blendet die nicht gewaehlte Sprache aus. Die Regel
 * gehoert NICHT hierher -- sie steht seit Theme 3.14.0 zentral, samt der
 * Lehre, dass `display: revert` noetig ist, weil ein data-lang-Element sonst
 * inline wird und jede Breitenangabe wirkungslos bleibt.
 */