/**
 * SL Kunststempler — Ebene B.
 *
 * Nur Gestaltung. Position und Sichtbarkeit setzt der Positionierer inline,
 * damit sie auch dann greifen, wenn ein Optimizer dieses Stylesheet verzögert.
 */

.slkst-label {
	box-sizing: border-box;
	display: inline-block;
	max-width: 100%;
	padding: 0.34em 0.72em;
	border-radius: 999px;
	background: var( --slkst-label-bg, rgba( 17, 17, 17, 0.62 ) );
	color: var( --slkst-label-fg, #ffffff );
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.01em;
	text-align: left;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-shadow: none;
	-webkit-font-smoothing: antialiased;

	/*
	 * Mischt das Label mit dem, was darunter liegt — Flaeche und Schrift
	 * gemeinsam, wie ein Ebenenmodus in einer Bildbearbeitung. Voreingestellt
	 * normal, also gar nicht.
	 */
	mix-blend-mode: var( --slkst-label-blend, normal );
}

@supports ( backdrop-filter: blur( 2px ) ) {
	.slkst-label {
		backdrop-filter: var( --slkst-label-blur, blur( 2px ) );
	}
}

.slkst-label--compact {
	padding: 0.28em 0.5em;
	font-size: 11px;
	letter-spacing: 0.03em;
}

/* Im Kontrastmodus zählt Lesbarkeit mehr als Gestaltung. */
@media ( forced-colors: active ) {
	.slkst-label {
		background: Canvas;
		color: CanvasText;
		border: 1px solid CanvasText;
		backdrop-filter: none;

		/* Ein Mischmodus waere hier genau das Gegenteil dessen, wofuer der
		   Kontrastmodus eingeschaltet wurde. */
		mix-blend-mode: normal;
	}
}

/*
 * Der Satz für Screenreader. Sitzt im Markup direkt hinter dem Bild, damit er
 * dort vorgelesen wird, wo er hingehört — und nicht am Seitenende, wohin das
 * sichtbare Label aus Positionsgründen gehängt wird.
 */
.slkst-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}