/*
 * Schicht 50: Utilities. Kleine, klar benannte Helfer.
 * Bewusst knapp gehalten, damit kein zweites Designsystem entsteht.
 */

.lg-stack > * + * { margin-top: var(--lg-space-4); }
.lg-stack-lg > * + * { margin-top: var(--lg-space-6); }

.lg-mt-4 { margin-top: var(--lg-space-4); }
.lg-mt-5 { margin-top: var(--lg-space-5); }
.lg-mt-6 { margin-top: var(--lg-space-6); }
.lg-mt-7 { margin-top: var(--lg-space-7); }

.lg-muted { color: var(--lg-ctx-ink-muted); }
.lg-accent { color: var(--lg-ctx-accent); }
.lg-nums { font-variant-numeric: tabular-nums; }
.lg-display { font-family: var(--lg-font-display); }
.lg-upper { text-transform: uppercase; letter-spacing: 0.02em; }

.lg-measure { max-width: 58ch; }
.lg-measure-tight { max-width: 44ch; }

.lg-hidden { display: none !important; }

/* Nur für Screenreader, ohne den Core Namen zu überschreiben. */
.lg-sr-only {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/*
 * Sanftes Einblenden beim Scrollen.
 * Ohne JavaScript und bei reduzierter Bewegung bleibt der Inhalt sichtbar,
 * damit nie Inhalt hinter einer Animation verschwindet.
 */
.js-lg-reveal[data-reveal="pending"] {
	opacity: 0;
	transform: translateY(14px);
}

.js-lg-reveal[data-reveal="visible"] {
	opacity: 1;
	transform: none;
	transition: opacity 500ms var(--lg-ease), transform 500ms var(--lg-ease);
}

@media (prefers-reduced-motion: reduce) {
	.js-lg-reveal[data-reveal="pending"] {
		opacity: 1;
		transform: none;
	}
}