/* NPL-Barometer: Klimawert-Zeitreihe seit 2015 (Review-Fix: Datenprodukt-Seite ohne Chart).
   Reines CSS-Balkendiagramm mit Null-Linie; Balkenhöhen kommen als Inline-Styles
   aus dem Seiten-Markup (statische, belegte Werte aus den PDF-Ausgaben). */

.bks-rd .klima-chart {
	background: var(--surface, #f6f8f9);
	border: 1px solid var(--hairline, #e3e7ea);
	border-radius: var(--r-lg, 14px);
	padding: 28px 24px 18px;
}

.bks-rd .klima-chart__plot {
	position: relative;
	display: flex;
	gap: 6px;
	height: 190px;
}

/* Null-Linie: 46px über der Unterkante (Platz für negative Balken + Labels) */
.bks-rd .klima-chart__plot::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 64px;
	border-bottom: 1px solid var(--hairline-2, #d4dade);
}

.bks-rd .kb {
	position: relative;
	flex: 1;
	min-width: 0;
}

.bks-rd .kb i {
	position: absolute;
	left: 18%;
	right: 18%;
	border-radius: 3px 3px 0 0;
	background: var(--bks-blue, #006699);
}

.bks-rd .kb.is-pos i { bottom: 64px; }
.bks-rd .kb.is-neg i { top: calc(100% - 64px); border-radius: 0 0 3px 3px; }

/* Chart-Labels bewusst UNTER der Typo-Skala: 11 Labels nebeneinander, bei 12px
   ueberlappen sie. Eine gemeinsame Groesse fuer Wert und Jahr (vorher 11px/10px)
   nimmt dem Block eine Stufe. Mobil ueber --fs-chart heruntergesetzt. */
.bks-rd .klima-chart { --fs-chart: 11px; }
.bks-rd .kb__val {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	font-size: var(--fs-chart);
	font-weight: 600;
	color: var(--grey-700, #3b4650);
	white-space: nowrap;
}

.bks-rd .kb__lab {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	text-align: center;
	font-size: var(--fs-chart);
	letter-spacing: 0.02em;
	color: var(--grey-500, #6c7a85);
	white-space: nowrap;
}

.bks-rd .klima-chart__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-top: 14px;
	font-size: var(--fs-5);
	color: var(--grey-600, #51606b);
}

.bks-rd .klima-chart__legend i {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 2px;
	margin-right: 6px;
	vertical-align: -1px;
}

@media (max-width: 640px) {
	.bks-rd .klima-chart__plot { gap: 3px; }
	.bks-rd .klima-chart { --fs-chart: 9px; }
	/* Mobil jedes zweite Perioden-Label ausblenden, sonst kollidieren sie */
	.bks-rd .kb:nth-child(even) .kb__lab { visibility: hidden; }
}