/* Blog-Zeitstrahl 2 */
.bzs {
	--bzs-c: #1a1a1a;
	--bzs-top: 60px;
	--bzs-bottom: 24px;
	--bzs-line: 16px;          /* Abstand der Linie zum Rand */

	position: fixed;
	top: var(--bzs-top);
	bottom: var(--bzs-bottom);
	right: 0;
	z-index: 9990;
	width: 92px;
	pointer-events: none;
	font: 12px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.admin-bar .bzs { top: calc(var(--bzs-top) + 32px); }
.bzs--left { right: auto; left: 0; }
.bzs * { box-sizing: border-box; }

.bzs-fab { display: none; }

/* Leiste */
.bzs-rail {
	pointer-events: auto;
	position: relative;
	height: 100%;
	padding: 10px 0;
	background: rgba(255, 255, 255, .55);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-radius: 14px 0 0 14px;
	opacity: .75;
	transition: opacity .2s, background .2s;
}
.bzs--left .bzs-rail { border-radius: 0 14px 14px 0; }
.bzs-rail:hover,
.bzs.is-active .bzs-rail { opacity: 1; background: rgba(255, 255, 255, .9); }

.bzs-track {
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
}
/* die durchgehende Linie */
.bzs-track::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: var(--bzs-line);
	width: 2px;
	margin-right: -1px;
	background: var(--bzs-c);
	opacity: .3;
	border-radius: 2px;
}
.bzs--left .bzs-track::before { right: auto; left: var(--bzs-line); margin: 0 0 0 -1px; }

/* Jahr = gleich großer Abschnitt */
.bzs-yr {
	position: relative;
	flex: 1 1 0;
	min-height: 0;
}
.bzs-yr::before {           /* Jahresmarke auf der Linie */
	content: "";
	position: absolute;
	top: 0;
	right: calc(var(--bzs-line) - 6px);
	width: 12px;
	height: 2px;
	background: var(--bzs-c);
	opacity: .55;
}
.bzs--left .bzs-yr::before { right: auto; left: calc(var(--bzs-line) - 6px); }

.bzs-yl {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 4px;
	transform: translateY(-50%);
	padding: 1px 4px;
	border-radius: 6px;
	color: var(--bzs-c);
	background: rgba(255, 255, 255, .85);
	font-weight: 600;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	white-space: nowrap;
}
.bzs--left .bzs-yl { left: auto; right: 4px; }
.bzs-yl.is-hidden { display: none; }
.bzs-yr.is-current .bzs-yl { background: var(--bzs-c); color: #fff; }
.bzs-yl:focus-visible { outline: 2px solid var(--bzs-c); outline-offset: 1px; }

/* Monate */
.bzs-ms {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
}
.bzs-mo {
	position: relative;
	display: block;
	flex: 1 1 0;
	min-height: 0;
}
/* Balken: Länge = Beitragszahl */
.bzs-mo:not(.is-empty)::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--bzs-line);
	height: 60%;
	min-height: 1px;
	max-height: 6px;
	width: calc(var(--w, .2) * 34px);
	transform: translateY(-50%);
	background: var(--bzs-c);
	opacity: .45;
	border-radius: 3px 0 0 3px;
	transition: opacity .1s;
}
.bzs--left .bzs-mo:not(.is-empty)::after { right: auto; left: var(--bzs-line); border-radius: 0 3px 3px 0; }
.bzs-mo.is-hover { background: rgba(0, 0, 0, .1); }
.bzs-mo.is-hover::after { opacity: 1; max-height: 8px; min-height: 3px; }

/* Positionsmarke: folgt dem Scrollen, unabhängig von der Monatsgröße */
.bzs-marker {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	right: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
	transition: transform .14s linear, opacity .2s;
	will-change: transform;
}
.bzs-marker.is-on { opacity: 1; }
.bzs-marker::before {         /* feine Querlinie über die ganze Leiste */
	content: "";
	position: absolute;
	left: 6px;
	right: 6px;
	top: -1px;
	height: 2px;
	background: var(--bzs-c);
	opacity: .35;
	border-radius: 2px;
}
.bzs-marker::after {          /* Punkt auf der Linie */
	content: "";
	position: absolute;
	top: -8px;
	right: calc(var(--bzs-line) - 8px);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--bzs-c);
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--bzs-c), 0 2px 6px rgba(0, 0, 0, .35);
}
.bzs--left .bzs-marker::after { right: auto; left: calc(var(--bzs-line) - 8px); }

.bzs-marker-label {
	position: absolute;
	top: 0;
	right: calc(100% + 8px);
	transform: translateY(-50%);
	padding: 3px 9px;
	border-radius: 999px;
	background: #fff;
	color: var(--bzs-c);
	border: 1px solid var(--bzs-c);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
	transition: opacity .1s;
}
.bzs--left .bzs-marker-label { right: auto; left: calc(100% + 8px); }
.bzs-marker-label:empty,
.bzs.is-tip .bzs-marker-label { opacity: 0; }

.bzs--nolabel .bzs-marker-label,
.bzs--nomarker .bzs-marker { display: none; }

/* ohne Positionsmarke: alter Punkt auf dem aktuellen Monat */
.bzs--nomarker .bzs-mo.is-current::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: 50%;
	right: calc(var(--bzs-line) - 6px);
	width: 12px;
	height: 12px;
	margin-top: -6px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--bzs-c);
}
.bzs--left.bzs--nomarker .bzs-mo.is-current::before { right: auto; left: calc(var(--bzs-line) - 6px); }

/* Tooltip */
.bzs-tip {
	position: absolute;
	z-index: 5;
	right: calc(100% + 8px);
	top: 0;
	transform: translateY(-50%);
	padding: 6px 10px;
	border-radius: 8px;
	background: var(--bzs-c);
	color: #fff;
	font-size: 13px;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .1s;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.bzs--left .bzs-tip { right: auto; left: calc(100% + 8px); }
.bzs-tip b { font-weight: 600; }
.bzs-tip span { opacity: .75; }
.bzs.is-tip .bzs-tip { opacity: 1; }

/* Handy */
@media (max-width: 781px) {
	.bzs {
		top: 72px;
		bottom: 88px;
		right: 8px;
		width: 96px;
	}
	.admin-bar .bzs { top: 118px; }
	.bzs--left { left: 8px; right: auto; }
	.bzs--nomobile { display: none; }

	.bzs-fab {
		pointer-events: auto;
		position: fixed;
		right: 16px;
		bottom: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 52px;
		height: 52px;
		border: 0;
		border-radius: 50%;
		background: var(--bzs-c);
		color: #fff;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
		cursor: pointer;
	}
	.bzs--left .bzs-fab { right: auto; left: 16px; }

	.bzs-rail {
		display: none;
		border-radius: 14px;
		background: rgba(255, 255, 255, .96);
		box-shadow: 0 8px 28px rgba(0, 0, 0, .25);
		opacity: 1;
	}
	.bzs.is-open .bzs-rail { display: block; }
	.bzs--left .bzs-rail { border-radius: 14px; }
}

@media print { .bzs { display: none; } }