/* KW Biohof – geteilte Überschrift-Komponente.
 *
 * Eine Quelle für Eyebrow + Titel (mit Akzent-Wort), Trenner (6 Stile),
 * Untertitel, Seitenlinien, Pinselstrich und Scroll-Reveal. Wird von
 * SectionHeading, RichText und Galerie genutzt – kein Widget baut die
 * Überschrift mehr selbst. Komplett ohne JS, ohne externe Dateien (auch keine
 * Web-Fonts) – SVG-Ornamente kommen inline aus dem Partial. Tokens fallen auf
 * die Marken-Farben aus „Design & Farben" zurück, solange im Style-Tab nichts
 * gesetzt wird.
 */

/* ── Widget-Scope Tokens (mit Fallback auf Marken-Token) ───────────────── */

.biohof-heading {
	--biohof-heading-title-color: var(--biohof-color-text-strong);
	--biohof-heading-eyebrow-color: var(--biohof-color-primary);
	--biohof-heading-subtitle-color: var(--biohof-color-text-muted);
	--biohof-heading-accent-color: var(--biohof-color-primary);
	--biohof-heading-separator-color: var(--biohof-color-primary);
	--biohof-heading-brush-color: color-mix(in srgb, var(--biohof-color-primary) 32%, transparent);
	--biohof-heading-separator-height: 2px;
	/* Knapper Default – pro Widget über den Style-Tab justierbar. */
	--biohof-heading-gap: var(--biohof-space-xs);

	/* Letterpress-Highlight (reines Weiß) – nur im Light-Mode-Imprint genutzt. */
	--biohof-heading-imprint-highlight: #ffffff;

	/* Seitenlinien reagieren auf die Widget-Breite, nicht den Viewport. */
	container-type: inline-size;
	container-name: biohof-heading;
}

/* ── Basis-Layout + Ausrichtung ───────────────────────────────────────── */

.biohof-heading {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-heading-gap);
	max-width: 100%;
	/* Volle Breite des Eltern-Bereichs – KEIN `align-self: flex-start`: in einem
	   Flex-Spalten-Container (Galerie, Fließtext) würde das zusammen mit
	   `container-type: inline-size` die Box auf min-content schrumpfen und den
	   Titel wortweise umbrechen. Die Ausrichtung steuert `align-items` (s. u.),
	   die Seitenlinien brauchen die volle Breite ohnehin. */
}

.biohof-heading[data-biohof-heading-align="left"] {
	align-items: flex-start;
	text-align: left;
}

.biohof-heading[data-biohof-heading-align="center"] {
	align-items: center;
	text-align: center;
}

.biohof-heading[data-biohof-heading-align="right"] {
	align-items: flex-end;
	text-align: right;
}

/* ── Typografie der drei Textbausteine ─────────────────────────────────────
   Unter `.biohof.biohof-heading` gescoped (0,3,0), damit Theme-/Elementor-
   Selektoren auf `<h2>`/`<p>` per Klassen-Vorrang geschlagen werden – ohne
   !important. Bewährte KW-Lobby-Methode: normale Zeilenhöhen, kein
   text-box-trim (verschob die Ausrichtung mehr, als es half). */

.biohof.biohof-heading .biohof-heading__eyebrow,
.biohof.biohof-heading .biohof-heading__title,
.biohof.biohof-heading .biohof-heading__subtitle {
	margin: 0;
	padding: 0;
}

.biohof.biohof-heading .biohof-heading__eyebrow {
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-semibold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--biohof-heading-eyebrow-color);
	line-height: var(--biohof-line-snug);
}

.biohof.biohof-heading .biohof-heading__title {
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-700);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-tight);
	color: var(--biohof-heading-title-color);
	text-wrap: balance;
}

/* Bewusst ohne `.biohof.biohof-heading`-Prefix: muss niedrigere Spezifität als
   die `--lined`-Overrides behalten, sonst gewinnt `display: contents` auch dort
   und der Titel zerfällt im Flex-Layout in einzelne Items. */

.biohof-heading__title-text {
	display: contents;
}

.biohof-heading__accent {
	color: var(--biohof-heading-accent-color);
}

/* Pinselstrich unter dem Akzent-Wort: ein liebevolles, handgemaltes Detail.
   Positionierungs-Anker – die Farbe erbt vom Eltern-.biohof-heading__accent. */
.biohof-heading__accent--brushed {
	position: relative;
	display: inline-block;
}

.biohof-heading__accent-text {
	position: relative;
	z-index: 1;
}

.biohof-heading__brush {
	position: absolute;
	left: -0.1em;
	right: -0.1em;
	bottom: -0.18em;
	width: calc(100% + 0.2em);
	height: 0.42em;
	pointer-events: none;
	fill: var(--biohof-heading-brush-color);
	opacity: 0;
	transform: scaleX(0.4);
	transform-origin: left center;
}

/* Pinselstrich an die View Timeline gekoppelt – „malt sich" erst, wenn das
   Akzent-Wort tatsächlich ins Sichtfeld kommt. `@supports`-Guard, weil
   ältere Browser kein `animation-timeline: view()` kennen. */
@supports (animation-timeline: view()) {
	.biohof-heading--brushed .biohof-heading__brush {
		animation: biohof-heading-paint linear both;
		animation-timeline: view();
		animation-range: entry 25% entry 65%;
	}
}

/* Fallback ohne View Timeline: einfacher Fade-In beim Page-Load (besser
   als „nie sichtbar" bei alten Browsern). */
@supports not (animation-timeline: view()) {
	.biohof-heading--brushed .biohof-heading__brush {
		animation: biohof-heading-paint calc(var(--biohof-duration) * 2.5) var(--biohof-ease) 220ms both;
	}
}

@keyframes biohof-heading-paint {
	from {
		opacity: 0;
		transform: scaleX(0.4);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

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

.biohof.biohof-heading .biohof-heading__subtitle {
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-400);
	font-style: italic;
	font-weight: var(--biohof-weight-regular);
	color: var(--biohof-heading-subtitle-color);
	line-height: var(--biohof-line-base);
	max-width: 60ch;
	text-wrap: pretty;
}

/* ── Editor-Hinweis (nur im Elementor-Editor gerendert) ───────────────── */

.biohof.biohof-heading .biohof-heading__editor-note {
	margin: 0;
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	font-style: italic;
	color: var(--biohof-color-text-muted);
	max-width: 60ch;
}

/* ── Trenner: Basis (für „classic") ───────────────────────────────────── */

.biohof-heading__separator {
	width: 100%;
	max-width: 160px;
	height: var(--biohof-heading-separator-height);
	border-radius: 999px;
	color: var(--biohof-heading-separator-color);
	background: linear-gradient(
		to right,
		currentColor,
		color-mix(in srgb, currentColor 50%, transparent),
		transparent
	);
}

.biohof-heading[data-biohof-heading-align="center"] .biohof-heading__separator {
	max-width: 200px;
	background: linear-gradient(
		to right,
		transparent,
		currentColor 25%,
		currentColor 75%,
		transparent
	);
}

.biohof-heading[data-biohof-heading-align="right"] .biohof-heading__separator {
	background: linear-gradient(
		to left,
		currentColor,
		color-mix(in srgb, currentColor 50%, transparent),
		transparent
	);
}

/* ── Stil: Blatt (leaf) ───────────────────────────────────────────────── */

.biohof-heading[data-biohof-heading-style="leaf"] .biohof-heading__separator {
	max-width: 280px;
	height: auto;
	min-height: 24px;
	background: none;
	display: flex;
	align-items: center;
	gap: var(--biohof-space-xs);
}

.biohof-heading[data-biohof-heading-style="leaf"] .biohof-heading__separator::before,
.biohof-heading[data-biohof-heading-style="leaf"] .biohof-heading__separator::after {
	content: "";
	flex: 1;
	height: var(--biohof-heading-separator-height);
	border-radius: 999px;
	background: linear-gradient(to right, transparent, currentColor);
}

.biohof-heading[data-biohof-heading-style="leaf"] .biohof-heading__separator::after {
	background: linear-gradient(to left, transparent, currentColor);
}

.biohof-heading__ornament {
	flex-shrink: 0;
	display: block;
	width: 22px;
	height: 22px;
	color: var(--biohof-heading-separator-color);
	transform: rotate(-14deg);
}

/* ── Stil: Saatkörner (seeds) ─────────────────────────────────────────── */

.biohof-heading[data-biohof-heading-style="seeds"] .biohof-heading__separator {
	max-width: 260px;
	height: auto;
	min-height: 16px;
	background: none;
	display: flex;
	align-items: center;
	gap: var(--biohof-space-sm);
}

.biohof-heading[data-biohof-heading-style="seeds"] .biohof-heading__separator::before,
.biohof-heading[data-biohof-heading-style="seeds"] .biohof-heading__separator::after {
	content: "";
	flex: 1;
	height: 1px;
	background: linear-gradient(to right, transparent, currentColor);
}

.biohof-heading[data-biohof-heading-style="seeds"] .biohof-heading__separator::after {
	background: linear-gradient(to left, transparent, currentColor);
}

.biohof-heading__seeds {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.biohof-heading__seed {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--biohof-heading-separator-color);
}

.biohof-heading__seed:nth-child(2) {
	width: 10px;
	height: 10px;
}

/* ── Stil: Welle (sprig) ──────────────────────────────────────────────── */

.biohof-heading[data-biohof-heading-style="sprig"] .biohof-heading__separator {
	max-width: 200px;
	height: auto;
	min-height: 22px;
	background: none;
	display: flex;
	align-items: center;
	justify-content: center;
}

.biohof-heading__wave {
	display: block;
	width: 100%;
	max-width: 200px;
	height: 18px;
	color: var(--biohof-heading-separator-color);
}

/* ── Stil: Minimal ─────────────────────────────────────────────────────── */

/* Bewusst keine Stilregeln – der Trenner wird per Partial-Logik ohnehin
   nicht ausgegeben. */

/* ── Stil: Prägung (imprint) – warmer Letterpress-Effekt ──────────────── */

.biohof-heading[data-biohof-heading-style="imprint"] .biohof-heading__title {
	text-shadow:
		0 -1px 0 color-mix(in srgb, var(--biohof-heading-imprint-highlight) 55%, transparent),
		0 1px 1px color-mix(in srgb, var(--biohof-color-text-strong) 22%, transparent),
		0 3px 5px color-mix(in srgb, var(--biohof-color-text-strong) 18%, transparent),
		0 8px 14px color-mix(in srgb, var(--biohof-color-primary) 10%, transparent);
}

/* ── Feature: Seitenlinien (--lined) ──────────────────────────────────── */

/* Container-Query statt Viewport: greift erst, wenn der Widget-Slot selbst
   breit genug ist. In einer schmalen Sidebar bleibt die Überschrift normal,
   auch wenn der Viewport breit ist. */

@container biohof-heading (min-width: 32rem) {
	/* Linien zentrieren sich über align-items: center auf der natürlichen
	   Zeilenbox des Titels (line-height 1.15) – wie in KW Lobby. KEIN
	   line-height-Override: das zwang die Box auf die em-Größe und schob die
	   Linien über die optische Buchstabenmitte. */
	.biohof-heading--lined .biohof-heading__title {
		align-self: stretch;
		display: flex;
		align-items: center;
		gap: var(--biohof-space-md);
	}

	.biohof-heading--lined .biohof-heading__title-text {
		display: inline;
		flex-shrink: 0;
	}

	.biohof-heading--lined .biohof-heading__title::before,
	.biohof-heading--lined .biohof-heading__title::after {
		content: "";
		flex: 1;
		height: 1px;
		min-width: 24px;
		background: linear-gradient(
			to right,
			transparent,
			var(--biohof-heading-lines-color, var(--biohof-heading-separator-color))
		);
	}

	.biohof-heading--lined .biohof-heading__title::after {
		background: linear-gradient(
			to left,
			transparent,
			var(--biohof-heading-lines-color, var(--biohof-heading-separator-color))
		);
	}

	/* Linksbündig: nur rechte Linie. Rechtsbündig: nur linke. */
	.biohof-heading[data-biohof-heading-align="left"].biohof-heading--lined .biohof-heading__title::before {
		display: none;
	}

	.biohof-heading[data-biohof-heading-align="right"].biohof-heading--lined .biohof-heading__title::after {
		display: none;
	}

	/* Center-Align mit Seitenlinien: Title in der Mitte halten, auch wenn der
	   Linien-Längen-Slider die Pseudo-Elements per max-width begrenzt. Ohne
	   justify-content: center würde justify-content: flex-start den Restplatz
	   nach rechts schieben und der Title rutscht nach links. */
	.biohof-heading[data-biohof-heading-align="center"].biohof-heading--lined .biohof-heading__title {
		justify-content: center;
	}
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS) ──────────────────────── */

@supports (animation-timeline: view()) {
	.biohof-heading--reveal {
		animation: biohof-heading-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	.biohof-heading--reveal .biohof-heading__separator {
		animation: biohof-heading-grow linear both;
		animation-timeline: view();
		animation-range: entry 10% entry 55%;
		transform-origin: center;
	}
}

@keyframes biohof-heading-rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes biohof-heading-grow {
	from {
		opacity: 0;
		transform: scaleX(0.2);
	}
	to {
		opacity: 1;
		transform: scaleX(1);
	}
}

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

@media (prefers-color-scheme: dark) {
	.biohof-heading {
		--biohof-heading-brush-color: color-mix(in srgb, var(--biohof-color-primary) 42%, transparent);
	}

	/* Imprint-Effekt wechselt im Dark Mode vom Letterpress zum weichen Glow.
	   Highlight oben entfällt – das Token bleibt unverändert, wird aber nicht
	   verwendet. Glow nutzt Markenfarbe (Grün), damit der Effekt warm bleibt. */
	.biohof-heading[data-biohof-heading-style="imprint"] .biohof-heading__title {
		text-shadow:
			0 0 10px color-mix(in srgb, var(--biohof-color-primary) 35%, transparent),
			0 0 28px color-mix(in srgb, var(--biohof-color-primary) 18%, transparent),
			0 0 54px color-mix(in srgb, var(--biohof-color-primary) 8%, transparent);
	}
}

/* ── Bewegung reduzieren (BFSG) ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.biohof-heading--brushed .biohof-heading__brush {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.biohof-heading--reveal,
	.biohof-heading--reveal .biohof-heading__separator {
		animation: none;
		opacity: 1;
		transform: none;
	}
}