/* KW Biohof – Seitenkopf-Widget. */

/* ── Tokens (vom Stil-Tab überschreibbar) ─────────────────────────────────── */

.biohof-ph {
	--biohof-ph-height: 280px;
	--biohof-ph-min-height: 200px;
	--biohof-ph-image-pos: center center;

	/* Tönungsschleier über dem Bild – erdig, leicht warm.
	   oklch mischt perzeptuell linear → keine grauen Zwischenstufen wie bei srgb. */
	--biohof-ph-overlay-color: color-mix(in oklch, var(--biohof-color-text-strong) 78%, var(--biohof-color-primary));
	--biohof-ph-overlay-opacity: 0.45;

	/* Schriftfarben Default je nach Hintergrund (mit/ohne Bild). */
	--biohof-ph-title-color: var(--biohof-color-text-strong);
	--biohof-ph-subtitle-color: var(--biohof-color-text);
	--biohof-ph-breadcrumb-color: var(--biohof-color-text-muted);
	--biohof-ph-breadcrumb-link: var(--biohof-color-primary);
	/* Hover muss vom Link-Default abweichen – sonst kein Feedback. Ohne Bild:
	   dunkler als Default (primary-hover). Mit Bild: heller (siehe --has-image-Block). */
	--biohof-ph-breadcrumb-hover: var(--biohof-color-primary-hover);

	/* Akzent für Trennstrich + Hover-Unterstreichung der Brotkrumen-Links. */
	--biohof-ph-accent-color: var(--biohof-color-primary);

	/* Fluid via clamp + cqi (Container Inline-Size) – skaliert mit der tatsächlichen
	   Widget-Breite, nicht mit der Viewport-Breite. Damit reagiert die Schrift sofort
	   und stufenlos, wenn der Header schmaler/breiter wird (Sidebar-Spalte vs. Full-Width). */
	--biohof-ph-pad-inline: clamp(1rem, 4cqi, 2.5rem);
	--biohof-ph-pad-block: clamp(1.25rem, 5cqi, 2.5rem);
	--biohof-ph-gap: clamp(0.5rem, 0.4rem + 1.2cqi, 1.25rem);
	--biohof-ph-title-fs: clamp(1.5rem, 0.95rem + 4.5cqi, 3.25rem);
	--biohof-ph-subtitle-fs: clamp(0.95rem, 0.85rem + 0.8cqi, 1.2rem);
	--biohof-ph-crumb-fs: clamp(0.78rem, 0.72rem + 0.4cqi, 0.95rem);

	/* Container für alle fluid-cqi-Werte. Auf `.biohof-ph` (nicht auf __content),
	   damit Kinder von __content cqi sauber auflösen können – ein Element ist
	   nicht sein eigener Container. Elementor-Hüllen-Konflikt global via
	   elementor-defense (width:100%) neutralisiert. */
	container-type: inline-size;
	container-name: biohof-ph;
}

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.biohof-ph {
	position: relative;
	display: grid;
	min-height: var(--biohof-ph-min-height);
	overflow: clip;
	isolation: isolate;
	background: linear-gradient(
		135deg,
		var(--biohof-color-surface-soft) 0%,
		color-mix(in oklch, var(--biohof-color-surface) 70%, var(--biohof-color-primary) 30%) 100%
	);
}

/* Mit Bild: Höhe wird zur tatsächlichen Stage-Höhe (Bild deckt die Fläche). */
.biohof-ph--has-image {
	min-height: var(--biohof-ph-height);
}

/* ── Volle Fensterbreite (Breakout aus dem Inhaltscontainer) ──────────────── */

.biohof-ph--full {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

/* 100vw inkl. Scrollbar – horizontalen Überlauf abschneiden. */
body:has(.biohof-ph--full) {
	overflow-x: clip;
}

/* Sidebar-Korrektur: wenn die Hof-Nav als linke Sidebar aktiv ist, schmälern
   wir den Breakout um deren Breite und verschieben die Mitte entsprechend –
   sonst ragt der Kopf rechts unter die Scrollbar. */
@media (min-width: 60em) {
	body:has(.biohof-nav) .biohof-ph--full {
		width: calc(100vw - var(--biohof-nav-width));
		margin-inline: calc(50% - 50vw + var(--biohof-nav-width) / 2);
	}
}

/* ── Hintergrundbild + Tönungsschleier ────────────────────────────────────── */

.biohof-ph__media {
	position: absolute;
	inset: 0;
	z-index: -1;
}

/* Spezifität (0,2,0) gegen Elementors .elementor-widget img { height:auto }. */
.biohof-ph .biohof-ph__image {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	object-position: var(--biohof-ph-image-pos);
	display: block;
}

.biohof-ph__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		color-mix(in oklch, var(--biohof-ph-overlay-color) 50%, transparent) 0%,
		var(--biohof-ph-overlay-color) 100%
	);
	opacity: var(--biohof-ph-overlay-opacity);
	pointer-events: none;
}

/* Mit Bild: helle Schriftfarben (Lesbarkeit auf dunklem Schleier).
   Misch-Farbraum oklch für sanftere Übergänge ohne grau-grauen Mittelpunkt.
   Hover wechselt zu reinweiß – sichtbarer Sprung von 90 % → 100 % Weiß.
   `white` statt on-primary: Text auf Foto+Schleier ist modus-stabil hell
   (Glass-Band-Muster) – on-primary dreht im Dunkelmodus auf dunkel (Knopf-Token)
   und machte den Titel dort unsichtbar. */
.biohof-ph--has-image {
	--biohof-ph-title-color: white;
	--biohof-ph-subtitle-color: color-mix(in oklch, white 92%, transparent);
	--biohof-ph-breadcrumb-color: color-mix(in oklch, white 80%, transparent);
	--biohof-ph-breadcrumb-link: color-mix(in oklch, white 90%, var(--biohof-color-primary));
	--biohof-ph-breadcrumb-hover: white;
}

/* Foto-Schleier bleibt auch im Dunkelmodus dunkel: text-strong dreht dort auf
   hell – heller Schleier + helle Schrift wäre unlesbar. black als modus-stabiler
   Anker (Glass-Band-Muster), gleiche Mischung wie der Light-Slate. */
@media (prefers-color-scheme: dark) {
	.biohof-ph--has-image {
		--biohof-ph-overlay-color: color-mix(in oklch, black 78%, var(--biohof-color-primary));
	}
}

/* ── Inhalts-Container (Container Query) ──────────────────────────────────── */

.biohof-ph__content {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--biohof-ph-gap);
	width: min(100%, var(--biohof-content-max));
	margin-inline: auto;
	padding: var(--biohof-ph-pad-block) var(--biohof-ph-pad-inline);
	text-align: center;
}

/* Mit Bild: Content soll vertikal mittig in der Stage stehen. */
.biohof-ph--has-image .biohof-ph__content {
	justify-content: center;
	flex: 1;
}

/* ── Brotkrumen ───────────────────────────────────────────────────────────── */

.biohof-ph__breadcrumb {
	max-width: 100%;
}

.biohof-ph__crumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	row-gap: 0.15em;
	font-size: var(--biohof-ph-crumb-fs);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-ph-breadcrumb-color);
}

.biohof-ph__crumb {
	display: inline-flex;
	align-items: center;
}

/* Pink-Defense + Aktiv-Optik: Spezifität (0,2,1) genügt gegen Elementor V4.
   Touch-Target 36px → über AA-Mindestmaß (24px) hinaus, gut bedienbar. */
.biohof-ph a.biohof-ph__crumb-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
	padding-inline: 0.35rem;
	color: var(--biohof-ph-breadcrumb-link);
	text-decoration: none;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	border-radius: var(--biohof-radius-sm);
	transition:
		color var(--biohof-duration) var(--biohof-ease),
		text-decoration-color var(--biohof-duration) var(--biohof-ease);
}

.biohof-ph .biohof-ph__crumb-link:focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 3px;
}

@media (hover: hover) {
	.biohof-ph a.biohof-ph__crumb-link:hover {
		color: var(--biohof-ph-breadcrumb-hover);
		text-decoration: underline;
		text-decoration-color: var(--biohof-ph-accent-color);
		text-decoration-thickness: 2px;
	}
}

.biohof-ph__crumb [aria-current="page"] {
	color: var(--biohof-ph-title-color);
	font-weight: var(--biohof-weight-semibold);
	padding-inline: 0.25rem;
}

/* Trenner in der Brotkrumen-Schriftfarbe (Markengrün war auf dem Schleier
   kaum sichtbar – Auftraggeber-Feedback 2026-06-07), keine Extra-Dämpfung. */
.biohof-ph__sep {
	display: inline-block;
	margin-inline: 0.4em;
	color: var(--biohof-ph-breadcrumb-color);
	font-weight: var(--biohof-weight-semibold);
	font-feature-settings: "tnum";
}

/* ── Titel ────────────────────────────────────────────────────────────────── */

.biohof-ph__title {
	margin: 0;
	color: var(--biohof-ph-title-color);
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-ph-title-fs);
	font-weight: var(--biohof-weight-bold);
	line-height: var(--biohof-line-tight);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

/* Titel auf Bild: dezenter Schatten für Lesbarkeit (nicht so wuchtig wie im Hero). */
.biohof-ph--has-image .biohof-ph__title {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.55),
		0 2px 12px rgba(0, 0, 0, 0.35);
}

/* View Transitions: Titel morpht zwischen Seiten weich.
   Nur wenn der Nutzer keine reduzierten Bewegungen wünscht. Der Name muss pro
   Dokument eindeutig sein – auf Seiten mit mehr als einem PageHeader würden
   sonst Konflikte entstehen (in der Praxis: ein PageHeader pro Seite). */
@media (prefers-reduced-motion: no-preference) {
	@supports (view-transition-name: none) {
		.biohof-ph__title {
			view-transition-name: biohof-ph-title;
		}
	}
}

/* ── Trennstrich (liebevoller Akzent) ─────────────────────────────────────── */

.biohof-ph__rule {
	display: block;
	inline-size: clamp(2.5rem, 18cqi, 5rem);
	block-size: 2px;
	background: linear-gradient(
		to right,
		transparent 0%,
		var(--biohof-ph-accent-color) 50%,
		transparent 100%
	);
	border-radius: 999px;
	opacity: 0.85;
}

/* ── Untertitel ───────────────────────────────────────────────────────────── */

.biohof-ph__subtitle {
	margin: 0;
	max-inline-size: 48ch;
	color: var(--biohof-ph-subtitle-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-ph-subtitle-fs);
	line-height: var(--biohof-line-base);
	text-wrap: pretty;
	white-space: pre-line; /* Manuelle Zeilenumbrüche aus dem Editor erhalten. */
}

.biohof-ph--has-image .biohof-ph__subtitle {
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* ── Container-Query: nur Layout-Wechsel, KEINE Größen-Stufen ─────────────────
   Schrift und Innenabstand skalieren bereits fluid über clamp() + cqi
   (Token-Block ganz oben). Hier nur der echte Layout-Bruch bei schmalen
   Containern: links-bündige Krumen wirken in einer Sidebar-Spalte natürlicher
   als zentrierte. */
@container biohof-ph (max-width: 28rem) {
	.biohof-ph__content {
		text-align: start;
		align-items: flex-start;
	}

	.biohof-ph__crumbs {
		justify-content: flex-start;
	}

	.biohof-ph__rule {
		margin-inline-start: 0;
	}
}

/* ── Dark Mode ────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
	.biohof-ph {
		--biohof-ph-overlay-opacity: 0.6;
	}

	.biohof-ph:not(.biohof-ph--has-image) {
		background: linear-gradient(
			135deg,
			var(--biohof-color-surface) 0%,
			color-mix(in oklch, var(--biohof-color-bg) 60%, var(--biohof-color-primary) 40%) 100%
		);
	}
}

/* ── Reduced Motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.biohof-ph a.biohof-ph__crumb-link {
		transition: none;
	}
}

/* ── Forced Colors (Windows-Kontrastmodus) ────────────────────────────────── */

@media (forced-colors: active) {
	.biohof-ph {
		background: Canvas;
	}

	.biohof-ph__title,
	.biohof-ph__subtitle,
	.biohof-ph__crumbs,
	.biohof-ph__sep {
		color: CanvasText;
		text-shadow: none;
	}

	.biohof-ph a.biohof-ph__crumb-link {
		color: LinkText;
	}

	.biohof-ph .biohof-ph__crumb-link:focus-visible {
		outline: 3px solid Highlight;
	}

	.biohof-ph__overlay {
		display: none;
	}

	.biohof-ph__rule {
		background: CanvasText;
	}
}