/* ============================================================
   INSIGHTS-FILTER — Kategorie-Chips ueber dem News-Grid
   Beschluss Feedback-Call 2026-08-21: „News & Pressemitteilungen" bleibt als
   ein Einstieg bestehen (Daniela: „ich will im Zweifelsfall auch nur schnell die
   Pressemitteilung anschauen"), dafuer laesst sich die Liste auf /news/ nach
   Kategorie filtern. Serverseitig ueber ?kat=<slug> — filtert das ganze Archiv,
   nicht nur die geladenen Karten.
   Markup: bks_insights_grid() in functions.php, Attribut filter="1".
   Schriftgroessen nur ueber die Typo-Skala (--fs-*).
   ============================================================ */

.bks-rd .insights-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
}

.bks-rd .insights-filter__chip {
	display: inline-flex;
	align-items: baseline;
	gap: 7px;
	padding: 7px 14px;
	border: 1px solid var(--hairline-2, #d4dade);
	border-radius: 999px;
	background: var(--white, #fff);
	font-size: var(--fs-5);
	font-weight: 600;
	color: var(--grey-700, #3b4650);
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.bks-rd .insights-filter__chip:hover,
.bks-rd .insights-filter__chip:focus-visible {
	border-color: var(--bks-blue, #006699);
	color: var(--bks-blue, #006699);
}

.bks-rd .insights-filter__chip.is-active {
	background: var(--bks-blue, #006699);
	border-color: var(--bks-blue, #006699);
	color: #fff;
	cursor: default;
}

/* Anzahl je Kategorie — bewusst mitgefuehrt, damit sichtbar ist, wie viel hinter
   einem Chip steckt (und ein leerer Chip gar nicht erst entsteht). */
.bks-rd .insights-filter__n {
	font-size: var(--fs-6);
	font-weight: 600;
	color: var(--grey-500, #6c7a85);
}

.bks-rd .insights-filter__chip.is-active .insights-filter__n { color: rgba(255, 255, 255, 0.75); }

/* Auf getoenten Sektionen (.section--stage) sitzt der inaktive Chip auf Weiss —
   das ist gewollt, sonst verschwimmt er mit dem Hintergrund. */
@media (max-width: 600px) {
	.bks-rd .insights-filter { gap: 6px; margin-bottom: 22px; }
	.bks-rd .insights-filter__chip { padding: 6px 11px; }
}