/* KW Biohof – Frontend-Basis für .biohof-Komponenten (kein globaler Reset). */

/* Seitengrund folgt dem Farbschema – sonst helle Schrift auf weißem Body im Dark Mode. */
body.biohof {
	background-color: var(--biohof-color-bg);
}

.biohof {
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
	color: var(--biohof-color-text);
}

.biohof :where(h1, h2, h3, h4) {
	font-family: var(--biohof-font-heading);
	line-height: var(--biohof-line-tight);
	color: var(--biohof-color-text-strong);
	text-wrap: balance;
}

.biohof :where(p, li) {
	text-wrap: pretty;
}

.biohof :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 2px;
	border-radius: var(--biohof-radius-sm);
}

.biohof .biohof-icon-button {
	min-inline-size: 44px;
	min-block-size: 44px;
}

.biohof .biohof-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (hover: hover) {
	.biohof a:hover {
		color: var(--biohof-color-primary-hover);
	}
}

/* ── View Transitions (MPA) ──────────────────────────────────────────────────
   Sanfter Cross-Fade zwischen Seiten innerhalb der Website. Nur bei
   no-preference – Nutzer mit prefers-reduced-motion bekommen weiterhin den
   harten Seitenwechsel. Browser ohne Support ignorieren die @-Regel. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}