/* HSC Chronik – Zeitstrahl
 *
 * Farben und Schriften sind CSS-Variablen und lassen sich im Customizer
 * unter "Zusätzliches CSS" überschreiben, z. B.:
 *
 *   .hsc-chronik { --hsc-gold-kante: #e0b93c; }
 */

.hsc-chronik {
	/* Flächen und Schrift */
	--hsc-ground: #f2f2ee;
	--hsc-surface: #ffffff;
	--hsc-surface-2: #fafaf7;
	--hsc-ink: #15151a;
	--hsc-ink-weich: #5d5d67;
	--hsc-linie: #e2e1db;
	--hsc-schwarz: #15151a;

	/* Gold: -kante für Flächen und Linien, -text für Schrift auf Hell */
	--hsc-gold-kante: #c9971b;
	--hsc-gold-text: #a8790c;
	--hsc-gold-flaeche: #f6edd4;

	--hsc-schatten: 0 1px 2px rgba(20, 20, 30, .05);
	--hsc-schatten-hoch: 0 8px 26px rgba(20, 20, 30, .10);
	--hsc-radius: 10px;

	--hsc-schrift-display: "Oswald", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
	--hsc-schrift-text: "Source Serif 4", Georgia, "Times New Roman", serif;
	--hsc-schrift-util: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

	position: relative;
	margin: 0 auto;
	padding: 34px clamp(16px, 4vw, 40px) 48px;
	max-width: 1120px;
	border-radius: 14px;
	background: var(--hsc-ground);
	color: var(--hsc-ink);
	font-family: var(--hsc-schrift-text);
	font-size: 17px;
	line-height: 1.6;
}

.hsc-chronik--blank {
	padding-left: 0;
	padding-right: 0;
	background: none;
	border-radius: 0;
}

.hsc-chronik *,
.hsc-chronik *::before,
.hsc-chronik *::after {
	box-sizing: border-box;
}

/* ---------- Dunkelmodus ---------- */

.hsc-chronik--dunkel,
.hsc-chronik--auto {
	color-scheme: light;
}

.hsc-chronik--dunkel {
	--hsc-ground: #0f0f12;
	--hsc-surface: #191920;
	--hsc-surface-2: #15151b;
	--hsc-ink: #ececf0;
	--hsc-ink-weich: #9a9aa5;
	--hsc-linie: #2b2b34;
	--hsc-schwarz: #000000;
	--hsc-gold-kante: #e2b44c;
	--hsc-gold-text: #e2b44c;
	--hsc-gold-flaeche: #2c2413;
	--hsc-schatten: 0 1px 2px rgba(0, 0, 0, .4);
	--hsc-schatten-hoch: 0 8px 26px rgba(0, 0, 0, .5);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {

	.hsc-chronik--auto {
		--hsc-ground: #0f0f12;
		--hsc-surface: #191920;
		--hsc-surface-2: #15151b;
		--hsc-ink: #ececf0;
		--hsc-ink-weich: #9a9aa5;
		--hsc-linie: #2b2b34;
		--hsc-schwarz: #000000;
		--hsc-gold-kante: #e2b44c;
		--hsc-gold-text: #e2b44c;
		--hsc-gold-flaeche: #2c2413;
		--hsc-schatten: 0 1px 2px rgba(0, 0, 0, .4);
		--hsc-schatten-hoch: 0 8px 26px rgba(0, 0, 0, .5);
		color-scheme: dark;
	}
}

/* ---------- Kopfbereich ---------- */

.hsc-chronik__kopf {
	display: grid;
	gap: 12px;
	margin-bottom: 26px;
	padding-bottom: 24px;
	border-bottom: 2px solid var(--hsc-schwarz);
}

.hsc-chronik__eyebrow {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 10px;
	font-family: var(--hsc-schrift-util);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--hsc-ink-weich);
}

.hsc-chronik__eyebrow b {
	color: var(--hsc-gold-text);
}

.hsc-chronik__titel {
	margin: 0;
	font-family: var(--hsc-schrift-display);
	font-weight: 600;
	font-size: clamp(2.1rem, 5.5vw, 3.4rem);
	line-height: 1.04;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-wrap: balance;
	color: var(--hsc-ink);
}

.hsc-chronik__einleitung {
	max-width: 62ch;
	margin: 0;
	color: var(--hsc-ink-weich);
}

/* ---------- Jahrzehnte-Navigation ---------- */

.hsc-chronik__dekaden {
	position: sticky;
	top: 0;
	z-index: 5;
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	overflow-x: auto;
	padding: 12px 2px;
	margin-bottom: 10px;
	background: var(--hsc-ground);
	scrollbar-width: thin;
}

.hsc-chronik__dekade-btn,
.hsc-chronik__filter-btn {
	flex: 0 0 auto;
	padding: 6px 13px;
	border: 1px solid var(--hsc-linie);
	border-radius: 999px;
	background: var(--hsc-surface);
	color: var(--hsc-ink-weich);
	font-family: var(--hsc-schrift-util);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .04em;
	line-height: 1.3;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.hsc-chronik__dekade-btn:hover,
.hsc-chronik__dekade-btn:focus-visible,
.hsc-chronik__filter-btn:hover,
.hsc-chronik__filter-btn:focus-visible {
	border-color: var(--hsc-gold-kante);
	color: var(--hsc-ink);
}

.hsc-chronik__dekade-btn.is-aktiv {
	background: var(--hsc-schwarz);
	border-color: var(--hsc-schwarz);
	color: var(--hsc-gold-kante);
}

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

.hsc-chronik__filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 34px;
}

.hsc-chronik__filter-btn.is-aktiv {
	background: var(--hsc-gold-kante);
	border-color: var(--hsc-gold-kante);
	color: #15151a;
}

/* ---------- Liste und Linie ---------- */

.hsc-chronik__liste {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0 0 0 42px;
}

.hsc-chronik__liste::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 0;
	left: 13px;
	width: 2px;
	background: linear-gradient(to bottom, var(--hsc-gold-kante), var(--hsc-linie));
}

.hsc-chronik__dekaden-marke {
	position: relative;
	margin: 36px 0 18px -42px;
	padding: 0;
}

.hsc-chronik__dekaden-marke::before {
	content: none;
}

.hsc-chronik__dekaden-marke span {
	display: inline-block;
	padding: 5px 15px;
	border-radius: 999px;
	background: var(--hsc-schwarz);
	color: var(--hsc-gold-kante);
	font-family: var(--hsc-schrift-display);
	font-size: .82rem;
	font-weight: 600;
	letter-spacing: .12em;
}

.hsc-eintrag {
	position: relative;
	margin: 0 0 22px;
	padding: 0;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .45s ease, transform .45s ease;
}

.hsc-eintrag.is-sichtbar {
	opacity: 1;
	transform: none;
}

.hsc-eintrag[hidden] {
	display: none;
}

.hsc-eintrag__marker {
	position: absolute;
	top: 24px;
	left: -35px;
	width: 14px;
	height: 14px;
	border: 3px solid var(--hsc-gold-kante);
	border-radius: 50%;
	background: var(--hsc-surface);
}

/*
 * Stichweg vom Punkt zur Karte. Er zeigt, welcher Punkt zu welchem
 * Eintrag gehört – nötig, sobald die Karten nicht mehr auf gleicher
 * Höhe stehen oder zwei Punkte übereinander liegen.
 */
.hsc-eintrag__marker::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	width: 20px;
	height: 2px;
	margin-top: -1px;
	margin-left: 2px;
	background: var(--hsc-gold-kante);
	opacity: .5;
}

.hsc-eintrag.is-highlight .hsc-eintrag__marker {
	background: var(--hsc-gold-kante);
	box-shadow: 0 0 0 5px rgba(201, 151, 27, .22);
}

.hsc-eintrag.is-highlight .hsc-eintrag__marker::before {
	height: 3px;
	margin-top: -1.5px;
	opacity: .85;
}

/* ---------- Karte ---------- */

.hsc-eintrag__karte {
	position: relative;
	padding: 18px 22px 20px;
	border: 1px solid var(--hsc-linie);
	border-radius: var(--hsc-radius);
	background: var(--hsc-surface);
	box-shadow: var(--hsc-schatten);
	transition: box-shadow .2s ease, border-color .2s ease;
}

.hsc-eintrag__karte:hover {
	box-shadow: var(--hsc-schatten-hoch);
}

.hsc-eintrag.is-highlight .hsc-eintrag__karte {
	border-color: var(--hsc-gold-kante);
	border-left: 4px solid var(--hsc-gold-kante);
	background: linear-gradient(180deg, var(--hsc-surface-2) 0%, var(--hsc-surface) 60%);
}

.hsc-eintrag__kopf {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 9px;
	margin-bottom: 5px;
}

.hsc-eintrag__jahr {
	font-family: var(--hsc-schrift-display);
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
	color: var(--hsc-ink);
}

.hsc-eintrag.is-highlight .hsc-eintrag__jahr {
	color: var(--hsc-gold-text);
}

.hsc-eintrag__datum {
	font-family: var(--hsc-schrift-util);
	font-size: .78rem;
	color: var(--hsc-ink-weich);
}

.hsc-eintrag__badge {
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(21, 21, 26, .07);
	color: var(--hsc-ink-weich);
	font-family: var(--hsc-schrift-util);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
}

.hsc-chronik--dunkel .hsc-eintrag__badge {
	background: rgba(236, 236, 240, .1);
}

@media (prefers-color-scheme: dark) {

	.hsc-chronik--auto .hsc-eintrag__badge {
		background: rgba(236, 236, 240, .1);
	}
}

.hsc-eintrag__titel {
	margin: 0 0 9px;
	font-family: var(--hsc-schrift-display);
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1.25;
	letter-spacing: .005em;
	text-wrap: balance;
	color: var(--hsc-ink);
}

.hsc-eintrag.is-highlight .hsc-eintrag__titel {
	font-size: 1.5rem;
	font-weight: 600;
}

.hsc-eintrag__bild {
	margin: 0 0 13px;
}

.hsc-eintrag__bild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 7px;
	cursor: zoom-in;
}

.hsc-eintrag__bild figcaption {
	margin-top: 6px;
	font-family: var(--hsc-schrift-util);
	font-size: .74rem;
	color: var(--hsc-ink-weich);
}

.hsc-eintrag__text {
	font-size: .97rem;
	line-height: 1.65;
}

.hsc-eintrag__text > *:first-child {
	margin-top: 0;
}

.hsc-eintrag__text > *:last-child {
	margin-bottom: 0;
}

.hsc-eintrag__galerie {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.hsc-eintrag__galerie img {
	width: 86px;
	height: 64px;
	object-fit: cover;
	border-radius: 5px;
	border: 1px solid var(--hsc-linie);
	cursor: zoom-in;
	transition: transform .15s ease, border-color .15s ease;
}

.hsc-eintrag__galerie img:hover {
	transform: scale(1.04);
	border-color: var(--hsc-gold-kante);
}

.hsc-eintrag__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--hsc-linie);
	font-family: var(--hsc-schrift-util);
}

.hsc-eintrag__link {
	font-size: .84rem;
	font-weight: 600;
	color: var(--hsc-gold-text);
	text-decoration: none;
	border-bottom: 1px solid var(--hsc-gold-kante);
}

.hsc-eintrag__link:hover {
	color: var(--hsc-ink);
}

.hsc-eintrag__quelle {
	font-size: .74rem;
	color: var(--hsc-ink-weich);
}

.hsc-chronik__leer {
	padding: 26px;
	text-align: center;
	font-family: var(--hsc-schrift-util);
	color: var(--hsc-ink-weich);
}

/* ---------- Desktop: alternierende Anordnung ---------- */

@media (min-width: 880px) {

	.hsc-chronik--wechselnd .hsc-chronik__liste,
	.hsc-chronik--kompakt .hsc-chronik__liste,
	.hsc-chronik--versetzt .hsc-chronik__liste {
		padding-left: 0;
	}

	.hsc-chronik--wechselnd .hsc-chronik__liste::before,
	.hsc-chronik--kompakt .hsc-chronik__liste::before,
	.hsc-chronik--versetzt .hsc-chronik__liste::before {
		left: 50%;
		transform: translateX(-50%);
	}

	.hsc-chronik--wechselnd .hsc-chronik__dekaden-marke,
	.hsc-chronik--kompakt .hsc-chronik__dekaden-marke,
	.hsc-chronik--versetzt .hsc-chronik__dekaden-marke {
		margin: 44px 0 26px;
		text-align: center;
	}

	.hsc-chronik--wechselnd .hsc-eintrag,
	.hsc-chronik--kompakt .hsc-eintrag,
	.hsc-chronik--versetzt .hsc-eintrag {
		width: 50%;
		padding-right: 42px;
		margin-bottom: 26px;
	}

	.hsc-chronik--wechselnd .hsc-eintrag.is-rechts,
	.hsc-chronik--kompakt .hsc-eintrag.is-rechts,
	.hsc-chronik--versetzt .hsc-eintrag.is-rechts {
		padding-right: 0;
		padding-left: 42px;
	}

	/*
	 * Der Punkt sitzt nicht mittig auf der Achse, sondern schmiegt sich
	 * von seiner Seite an sie an. Sonst fallen zwei Punkte übereinander,
	 * sobald links und rechts eine Karte auf gleicher Höhe beginnt –
	 * aus zwei Jahren würde ein Punkt.
	 */
	.hsc-chronik--wechselnd .hsc-eintrag__marker,
	.hsc-chronik--kompakt .hsc-eintrag__marker,
	.hsc-chronik--versetzt .hsc-eintrag__marker {
		left: auto;
		right: 1px;
	}

	.hsc-chronik--wechselnd .hsc-eintrag.is-rechts .hsc-eintrag__marker,
	.hsc-chronik--kompakt .hsc-eintrag.is-rechts .hsc-eintrag__marker,
	.hsc-chronik--versetzt .hsc-eintrag.is-rechts .hsc-eintrag__marker {
		right: auto;
		left: 1px;
	}

	/* Linke Karten liegen links vom Punkt – der Stichweg zeigt dorthin. */
	.hsc-chronik--wechselnd .hsc-eintrag.is-links .hsc-eintrag__marker::before,
	.hsc-chronik--kompakt .hsc-eintrag.is-links .hsc-eintrag__marker::before,
	.hsc-chronik--versetzt .hsc-eintrag.is-links .hsc-eintrag__marker::before {
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-right: 2px;
		width: 26px;
	}

	.hsc-chronik--wechselnd .hsc-eintrag.is-rechts .hsc-eintrag__marker::before,
	.hsc-chronik--kompakt .hsc-eintrag.is-rechts .hsc-eintrag__marker::before,
	.hsc-chronik--versetzt .hsc-eintrag.is-rechts .hsc-eintrag__marker::before {
		width: 26px;
	}

	/*
	 * versetzt: gepackt wie "kompakt", aber jeder Eintrag steht garantiert
	 * tiefer als der vorherige – auf einem Zeitstrahl darf kein späteres
	 * Jahr auf gleicher Höhe stehen wie ein früheres. Die Positionen
	 * rechnet chronik.js aus, weil CSS beides zusammen nicht kann.
	 * Ohne JavaScript greifen die Float-Regeln unten als Rückfallebene.
	 */
	.hsc-chronik--versetzt .hsc-eintrag.is-links,
	.hsc-chronik--kompakt .hsc-eintrag.is-links {
		float: left;
		clear: left;
	}

	.hsc-chronik--versetzt .hsc-eintrag.is-rechts,
	.hsc-chronik--kompakt .hsc-eintrag.is-rechts {
		float: right;
		clear: right;
		margin-left: 0;
	}

	.hsc-chronik--versetzt .hsc-chronik__dekaden-marke {
		clear: both;
		float: none;
	}

	.hsc-chronik--versetzt .hsc-chronik__liste::after {
		content: "";
		display: block;
		clear: both;
	}

	/* Sobald die Berechnung greift, wird absolut positioniert. */
	.hsc-chronik--versetzt.is-gepackt .hsc-chronik__liste {
		position: relative;
	}

	.hsc-chronik--versetzt.is-gepackt .hsc-eintrag {
		position: absolute;
		float: none;
		clear: none;
		margin: 0;
	}

	.hsc-chronik--versetzt.is-gepackt .hsc-eintrag.is-links {
		left: 0;
	}

	.hsc-chronik--versetzt.is-gepackt .hsc-eintrag.is-rechts {
		left: 50%;
	}

	.hsc-chronik--versetzt.is-gepackt .hsc-chronik__dekaden-marke {
		position: absolute;
		left: 0;
		width: 100%;
		margin: 0;
	}

	.hsc-chronik--versetzt.is-gepackt .hsc-chronik__liste::after {
		content: none;
	}

	.hsc-chronik--wechselnd .hsc-eintrag.is-links,
	.hsc-chronik--kompakt .hsc-eintrag.is-links {
		transform: translateY(14px) translateX(-10px);
	}

	.hsc-chronik--wechselnd .hsc-eintrag.is-rechts,
	.hsc-chronik--kompakt .hsc-eintrag.is-rechts {
		transform: translateY(14px) translateX(10px);
	}

	.hsc-chronik--wechselnd .hsc-eintrag.is-sichtbar,
	.hsc-chronik--kompakt .hsc-eintrag.is-sichtbar {
		transform: none;
	}

	/* wechselnd: jeder Eintrag bekommt eine eigene Zeile,
	   gegenüber bleibt Fläche frei. */
	.hsc-chronik--wechselnd .hsc-eintrag.is-rechts {
		margin-left: 50%;
	}

	/*
	 * kompakt: beide Seiten sind eigene Spalten, die unabhängig
	 * voneinander nach oben rutschen. "clear" wirkt nur auf die
	 * jeweils eigene Seite, dadurch schließen sich die Lücken.
	 */
	.hsc-chronik--kompakt .hsc-eintrag.is-links {
		float: left;
		clear: left;
	}

	.hsc-chronik--kompakt .hsc-eintrag.is-rechts {
		float: right;
		clear: right;
		margin-left: 0;
	}

	.hsc-chronik--kompakt .hsc-chronik__dekaden-marke {
		clear: both;
		float: none;
	}

	/* Floats einschließen, sonst fällt die Liste in sich zusammen
	   und die Zeitachse hat keine Höhe mehr. */
	.hsc-chronik--kompakt .hsc-chronik__liste::after {
		content: "";
		display: block;
		clear: both;
	}

	/* einspaltig: Linie links, alle Karten rechts daneben. */
	.hsc-chronik--einspaltig .hsc-eintrag {
		width: 100%;
		max-width: 780px;
		margin-bottom: 20px;
		padding: 0;
	}

	.hsc-chronik--einspaltig .hsc-eintrag.is-sichtbar {
		transform: none;
	}
}

/* ---------- Lightbox ---------- */

.hsc-chronik-lightbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	background: rgba(10, 10, 14, .93);
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.hsc-chronik-lightbox[hidden] {
	display: none;
}

/* Bedienleiste */

.hsc-chronik-lightbox__leiste {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 16px;
}

.hsc-chronik-lightbox__knopf {
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 999px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-family: inherit;
	font-size: .84rem;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.hsc-chronik-lightbox__knopf:hover {
	background: #c9971b;
	border-color: #c9971b;
	color: #15151a;
}

.hsc-chronik-lightbox__schliessen {
	margin-left: 6px;
	font-size: 24px;
	padding: 0;
	width: 40px;
}

.hsc-chronik-lightbox__stufe {
	min-width: 62px;
	color: #d8d8de;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* Bühne mit dem Bild */

.hsc-chronik-lightbox__inhalt {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	margin: 0;
	padding: 0 16px;
}

.hsc-chronik-lightbox__buehne {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 1;
	min-height: 0;
	overflow: hidden;
	touch-action: none;
}

.hsc-chronik-lightbox__buehne img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	border-radius: 4px;
	transform-origin: center center;
	cursor: zoom-in;
	user-select: none;
	-webkit-user-drag: none;
	will-change: transform;
	transition: transform .12s ease-out;
}

.hsc-chronik-lightbox__buehne img.is-gezoomt {
	cursor: grab;
	border-radius: 0;
}

.hsc-chronik-lightbox__buehne img.is-zieht {
	cursor: grabbing;
	transition: none;
}

.hsc-chronik-lightbox__inhalt figcaption {
	flex: 0 0 auto;
	padding: 12px 0 4px;
	color: #f2f2f5;
	font-size: .85rem;
	text-align: center;
}

.hsc-chronik-lightbox__tipp {
	margin: 0;
	padding: 0 16px 14px;
	color: rgba(242, 242, 245, .55);
	font-size: .74rem;
	text-align: center;
}

.hsc-chronik-lightbox.is-laedt .hsc-chronik-lightbox__stufe::after {
	content: " …";
}

@media (max-width: 640px) {

	.hsc-chronik-lightbox__knopf[data-hsc-zoom="reset"] {
		display: none;
	}

	.hsc-chronik-lightbox__tipp {
		display: none;
	}
}

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

	.hsc-chronik-lightbox__buehne img {
		transition: none;
	}
}

/* ---------- Barrierefreiheit / Druck ---------- */

.hsc-chronik button:focus-visible,
.hsc-chronik a:focus-visible {
	outline: 2px solid var(--hsc-gold-kante);
	outline-offset: 2px;
}

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

	.hsc-eintrag {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

@media print {

	.hsc-chronik {
		padding: 0;
		background: none;
	}

	.hsc-chronik__dekaden,
	.hsc-chronik__filter {
		display: none;
	}

	.hsc-eintrag {
		width: 100%;
		margin-left: 0;
		padding: 0;
		opacity: 1;
		transform: none;
		break-inside: avoid;
	}

	.hsc-eintrag__karte {
		box-shadow: none;
	}
}