/* =============================================================================
   Block: Themen-Chips
   =============================================================================
   Eigene Klassen (tc__), damit die Weiterbildungen-Uebersicht dieses Stylesheet ohne den
   Block selbst einbinden kann (siehe includes/uebersicht.php, Vorbild: blocks/siegel).
   Masse 1:1 aus dem abgenommenen Design-Canvas (weiterbildungen-uebersicht/design/Main.dc.html).
   ========================================================================== */

.tc {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	max-width: 100%;
}

.tc__label {
	flex: 0 0 auto;
	font-family: var(--font4);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--typography-dark-grey);
	white-space: nowrap;
}

.tc__scroller {
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* alte Edge-Versionen */
}

.tc__scroller::-webkit-scrollbar {
	display: none; /* Chrome/Safari: horizontal scrollbar unsichtbar, Scroll bleibt bedienbar */
}

/* Abschluss hinter der letzten Pille. Denis, 20.08.2026: "bei der letzten Pille war das
   nicht zuende irgendwie" -- durchgewischt sass sie mobil exakt auf dem rechten Rand
   (gemessen: 0 px Abstand), was wie ein abgeschnittenes Element aussieht statt wie ein
   Ende. Ein Flex-Spacer statt padding-right, weil Chrome das Padding eines Scroll-
   Containers am Scroll-Ende nicht mitrechnet. */
.tc__scroller::after {
	content: '';
	flex: 0 0 1rem;
}

.tc__chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 36px;
	padding: 0 1rem;
	background: var(--background-white);
	border-radius: 100px;
	/* Denis, 21.08. an der Stage: "beliebte themen hat nen komischen schatten
	   mach da lieber auch so ne umrandung hin". Der Schatten liess die Chips auf
	   der hellen Flaeche schweben; die Filterpillen daneben tragen eine Kontur.
	   Jetzt dieselbe Kontur wie `.courses-filters__dropdown-btn`: eine
	   Formensprache fuer alle Pillen der Seite. */
	border: 1px solid var(--background-borders);
	font-family: var(--font4);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--typography-black);
	text-decoration: none;
	white-space: nowrap;
}

.tc__chip:focus-visible {
	outline: 2px solid var(--typography-black);
	outline-offset: 2px;
}

/* Ab Tablet: umbrechen statt wischen. Am Zeigergeraet wischt niemand eine Pillenzeile,
   eine angeschnittene letzte Pille liest sich dort als Fehler (Denis, 20.08.2026). Gemessen
   im Hero: 780 px Container, davon 102 px Label -- die sechs Chips brauchen 744 px und
   passen deshalb erst in der zweiten Zeile vollstaendig. Der Scroller bleibt als Bauteil,
   nur ohne Ueberlauf. */
@media (min-width: 768px) {
	.tc {
		align-items: flex-start;
	}
	.tc__scroller {
		flex-wrap: wrap;
		row-gap: 0.5rem;
		overflow-x: visible;
	}
	.tc__label {
		line-height: 36px; /* auf die Chip-Hoehe, damit das Label auf der ersten Zeile sitzt */
	}
}

/* Mobil: Label bekommt eine eigene Zeile, der Scroller darunter die volle Breite -- sonst
   teilen sich Label und Chips die schmale Zeile und der Scroller hat kaum noch Platz. Die
   Chips selbst wachsen auf 44px Mindesttasthoehe (README-Barrierefreiheitsregel). */
@media (max-width: 767px) {
	.tc {
		flex-wrap: wrap;
		gap: 0.5rem;
	}
	.tc__label {
		flex: 1 1 100%;
		font-size: 0.75rem;
	}
	.tc__scroller {
		flex: 1 1 100%;
	}
	.tc__chip {
		min-height: 44px;
	}
}