/**
 * Fokus – sichtbar für Tastatur (WCAG 2.4.7 / 2.4.11), unsichtbar für Maus.
 */
:focus {
	outline: none;
}

:focus-visible {
	border-radius: var(--radius-sm);
	outline: var(--theme-focus-width) solid var(--theme-focus-ring);
	outline-offset: var(--theme-focus-offset);
}

/* Skip-Link: erster fokussierbarer Punkt jeder Seite */
.skip-link {
	background: var(--color-ink-900);
	border-radius: var(--radius-md);
	color: var(--color-paper);
	font-weight: var(--font-weight-medium);
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	padding: var(--space-3) var(--space-5);
	position: fixed;
	text-decoration: none;
	transform: translateY(-200%);
	transition: transform var(--duration-fast) var(--ease-out);
	z-index: var(--z-skip);
}

.skip-link:focus-visible {
	outline-color: var(--theme-focus-ring-inverse);
	outline-offset: calc(-1 * var(--theme-focus-width) - 0.125rem);
	transform: translateY(0);
}

/* Nur für Screenreader sichtbar */
.screen-reader-text,
.sr-only {
	block-size: 0.0625rem;
	clip-path: inset(50%);
	inline-size: 0.0625rem;
	overflow: hidden;
	position: absolute !important; /* darf durch Komponenten nicht aufgehoben werden */
	white-space: nowrap;
}

.screen-reader-text:focus-visible {
	background: var(--theme-bg);
	block-size: auto;
	clip-path: none;
	inline-size: auto;
	padding: var(--space-3);
	z-index: var(--z-skip);
}