/*
 * KW Biohof – Statement-Widget. Ein vollbreites Akzent-Band für Aufruf (CTA)
 * ODER Zitat/Leitsatz in drei Stilen aus einem Markup-Gerüst:
 *   • Vollton    – warme Marken-Fläche mit Schicht-Tiefe (Modus-Tokens wie der
 *                  Footer → Kontrast in Hell UND Dunkel garantiert).
 *   • Glas auf Bild – echtes Foto + gerichteter Schleier (Text-Seite dunkel,
 *                  Foto bleibt sichtbar). Text modus-unabhängig hell. Kein Blur,
 *                  kein dekoratives Panel (on-brand: „Echtheit vor Effekt").
 *   • Editorial  – ruhig auf der Seitenfläche, Haarlinie + großes Schmuck-Zitat
 *                  (KEIN Seitenstreifen-Rand).
 * Auf breiten Schirmen verteilt der Aufruf Botschaft + Knöpfe nebeneinander
 * (Container-Query). Komplett ohne JS. Farben aus Tokens (color-mix); white/black
 * nur für Glanz/Verdunklung. Kein !important.
 */

.biohof-band {
	--biohof-band-max: 60rem;
	--biohof-band-pad-block: clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);
	--biohof-band-pad-inline: clamp(1.5rem, 1rem + 2.4vw, 3.5rem);
	--biohof-band-radius: var(--biohof-radius-lg);
	--biohof-band-min-height: 0px;
	--biohof-band-gap: var(--biohof-space-lg);
	--biohof-band-scrim-strength: 70%;
	--biohof-band-scrim-tint: color-mix(in srgb, var(--biohof-color-accent) 22%, black);

	position: relative;
	isolation: isolate;
	overflow: clip;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-block-size: var(--biohof-band-min-height);
	border-radius: var(--biohof-band-radius);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

/* ── Inhaltsspalte (max-breit, zentriert) = Query-Container ─────────────────── */
.biohof-band__inner {
	position: relative;
	z-index: 1;
	container-type: inline-size;
	inline-size: 100%;
	max-inline-size: var(--biohof-band-max);
	margin-inline: auto;
	padding-block: var(--biohof-band-pad-block);
	padding-inline: var(--biohof-band-pad-inline);
	color: var(--biohof-band-fg);
}

/* Inhaltsfluss. Kinder bleiben volle Breite (text-align steuert die Ausrichtung,
   NICHT align-items – sonst kollabiert die Überschrift zur schmalen Spalte). */
.biohof-band__layout {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-band-gap);
}

.biohof-band--align-left .biohof-band__layout {
	text-align: start;
}
.biohof-band--align-center .biohof-band__layout {
	text-align: center;
}
.biohof-band--align-right .biohof-band__layout {
	text-align: end;
}

.biohof-band__message {
	min-inline-size: 0;
}

/* ══ Aufruf: clevere Verteilung auf breiten Bändern ══════════════════════════
   Botschaft links/rechts, Knöpfe daneben (vertikal zentriert). Container-Query
   am inneren Element (nicht am Root). NICHT für Glas – dort bleibt der Text auf
   der dunklen Foto-Seite. */
@container (min-width: 46rem) {
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-left .biohof-band__layout,
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-right .biohof-band__layout {
		flex-direction: row;
		align-items: center;
		gap: clamp(2rem, 1rem + 4vw, 4rem);
	}
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-right .biohof-band__layout {
		flex-direction: row-reverse;
	}
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-left .biohof-band__message,
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-right .biohof-band__message {
		flex: 1 1 auto;
	}
	/* Knöpfe als ruhiger Stapel neben der Botschaft (gibt dem Claim die Breite). */
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-left .biohof-band__actions,
	.biohof-band--cta:not(.biohof-band--glass).biohof-band--align-right .biohof-band__actions {
		flex: 0 0 auto;
		flex-direction: column;
		align-items: stretch;
	}
}

/* Aufruf-Claim: souveräner als die Standard-Überschrift (Band ist ein Blickfang). */
.biohof-band--cta .biohof.biohof-heading .biohof-heading__title {
	font-size: clamp(1.9rem, 1.4rem + 2.1vw, 2.85rem);
	line-height: var(--biohof-line-tight);
}

/* ── Überschrift-Komponente an die Band-Farben koppeln ─────────────────────────
   Dunkle Bänder (Vollton/Glas): heller Titel/Eyebrow/Untertitel. Akzentwort bleibt
   in Titelfarbe – hellgrün auf Dunkelgrün wäre grenzwertig im Kontrast; die grüne
   2-Ton-Hervorhebung trägt der Editorial-Stil auf hellem Grund. Setzt die Heading-
   Tokens (0,2,0) → schlägt die heading.css-Defaults (0,1,0), ohne !important. */
.biohof-band--solid .biohof-heading,
.biohof-band--glass .biohof-heading {
	--biohof-heading-title-color: var(--biohof-band-title);
	--biohof-heading-eyebrow-color: var(--biohof-band-fg);
	--biohof-heading-subtitle-color: var(--biohof-band-fg);
	--biohof-heading-accent-color: var(--biohof-band-title);
	--biohof-heading-separator-color: var(--biohof-band-accent);
	/* Optionaler handgemalter Pinselstrich (Schalter „Akzent-Pinselstrich") – warm
	   und sichtbar auf dunklen Bändern. */
	--biohof-heading-brush-color: color-mix(in srgb, var(--biohof-band-accent) 60%, transparent);
}
.biohof-band--editorial .biohof-heading {
	--biohof-heading-brush-color: color-mix(in srgb, var(--biohof-color-accent) 45%, transparent);
}

/* ── Eyebrow im Band: warm statt Schrei-Caps (entschärft den AI-Trope).
   Höhere Spezifität (0,4,0) als die geteilte heading.css-Regel (0,3,0). ─────── */
.biohof-band .biohof.biohof-heading .biohof-heading__eyebrow {
	text-transform: none;
	letter-spacing: 0.01em;
	font-size: var(--biohof-fs-400);
	font-weight: var(--biohof-weight-semibold);
	display: inline-flex;
	align-items: center;
	gap: var(--biohof-space-xs);
}
.biohof-band .biohof.biohof-heading .biohof-heading__eyebrow::before {
	content: "";
	flex: none;
	inline-size: 1.75rem;
	block-size: 2px;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-band-accent);
}
.biohof-band--align-center .biohof.biohof-heading .biohof-heading__eyebrow {
	justify-content: center;
}
.biohof-band--align-center .biohof.biohof-heading .biohof-heading__eyebrow::before {
	display: none;
}

/* ══ Zitat (figure/blockquote/figcaption) ════════════════════════════════════ */
.biohof-band__quote {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-sm);
}

/* Großes Anführungszeichen als bewusstes, warmes Flourish in Fraunces – im Fluss
   (nie vom overflow:clip abgeschnitten), dicht über dem Zitat. text-align des
   Layouts richtet es passend aus. */
.biohof-band__mark {
	display: block;
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-bold);
	font-size: clamp(3.5rem, 2.6rem + 4.4vw, 6rem);
	line-height: 0.62;
	color: var(--biohof-band-accent);
	opacity: 0.9;
	margin-block-end: var(--biohof-space-xs);
	pointer-events: none;
}

.biohof-band__quote-text {
	position: relative;
	z-index: 1;
	margin: 0;
	max-inline-size: 34ch;
	font-family: var(--biohof-font-heading);
	font-size: var(--biohof-fs-700);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-band-title);
	text-wrap: balance;
	overflow-wrap: break-word;
}
.biohof-band--align-center .biohof-band__quote-text {
	margin-inline: auto;
}
.biohof-band--align-right .biohof-band__quote-text {
	margin-inline-start: auto;
}

.biohof-band__cite {
	position: relative;
	z-index: 1;
	margin-block-start: var(--biohof-space-md);
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	font-style: normal;
}
.biohof-band__cite::before {
	content: "";
	inline-size: 2rem;
	block-size: 2px;
	margin-block-end: var(--biohof-space-2xs);
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-band-accent);
}
.biohof-band--align-center .biohof-band__cite {
	align-items: center;
}
.biohof-band--align-right .biohof-band__cite {
	align-items: flex-end;
}
.biohof-band__cite-name {
	font-weight: var(--biohof-weight-semibold);
	color: var(--biohof-band-title);
}
.biohof-band__cite-role {
	font-size: var(--biohof-fs-300);
	color: var(--biohof-band-fg);
	opacity: 0.82;
}

/* ══ Knöpfe ═══════════════════════════════════════════════════════════════════ */
.biohof-band__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--biohof-space-sm);
}
.biohof-band--align-center .biohof-band__actions {
	justify-content: center;
}
.biohof-band--align-right .biohof-band__actions {
	justify-content: flex-end;
}

.biohof-band__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--biohof-space-2xs);
	min-block-size: 48px;
	padding: 0.8rem 1.6rem;
	font-family: var(--biohof-font-body);
	font-weight: var(--biohof-weight-semibold);
	text-decoration: none;
	border: 1.5px solid transparent;
	border-radius: var(--biohof-radius-md);
	transition:
		background-color var(--biohof-duration) var(--biohof-ease),
		border-color var(--biohof-duration) var(--biohof-ease),
		box-shadow var(--biohof-duration) var(--biohof-ease),
		transform var(--biohof-duration) var(--biohof-ease);
}
.biohof-band__cta-ico,
.biohof-band__cta-ext {
	display: inline-flex;
	transition: transform var(--biohof-duration) var(--biohof-ease);
}
.biohof-band__cta-ico svg {
	inline-size: 1.15rem;
	block-size: 1.15rem;
}
.biohof-band__cta-ext svg {
	inline-size: 0.9rem;
	block-size: 0.9rem;
}

/* Primär (plastisch): zarter Glanz + Innen-Highlight + weicher, warm getönter
   Schlagschatten. Keine harte Hochglanz-Optik. */
.biohof-band__cta--primary {
	color: var(--biohof-band-btn-fg);
	background-color: var(--biohof-band-btn-bg);
	background-image: linear-gradient(
		to bottom,
		color-mix(in srgb, white 12%, transparent),
		transparent 60%
	);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, white 40%, transparent),
		inset 0 -1.5px 0 color-mix(in srgb, var(--biohof-band-btn-bg) 72%, black),
		0 1px 2px color-mix(in srgb, black 14%, transparent),
		0 10px 24px color-mix(in srgb, var(--biohof-band-btn-shadow) 38%, transparent);
}

/* Sekundär (Ghost): umrandet. Auf Glas eine dezente dunkle Hinterlegung, damit
   der helle Text auch über helleren Foto-Stellen sicher lesbar bleibt. */
.biohof-band__cta--ghost {
	color: var(--biohof-band-ghost-fg);
	background-color: transparent;
	border-color: var(--biohof-band-ghost-border);
}
.biohof-band--glass .biohof-band__cta--ghost {
	background-color: color-mix(in srgb, black 30%, transparent);
}

/* Elementor-V4-Reset: Knopf-Farbe in ALLEN Zuständen halten (Defense setzt
   `color: inherit`). a-Doppelung schlägt (0,2,1); :focus PFLICHT. Ghost-Regel
   steht NACH der Primär-Regel → gewinnt bei gleicher Spezifität für Ghost. */
.biohof-band a.biohof-band__cta,
.biohof-band a.biohof-band__cta:hover,
.biohof-band a.biohof-band__cta:focus,
.biohof-band a.biohof-band__cta:focus-visible,
.biohof-band a.biohof-band__cta:active {
	color: var(--biohof-band-btn-fg);
}
.biohof-band a.biohof-band__cta--ghost,
.biohof-band a.biohof-band__cta--ghost:hover,
.biohof-band a.biohof-band__cta--ghost:focus,
.biohof-band a.biohof-band__cta--ghost:focus-visible,
.biohof-band a.biohof-band__cta--ghost:active {
	color: var(--biohof-band-ghost-fg);
}

@media (hover: hover) {
	.biohof-band__cta--primary:hover {
		transform: translateY(-2px);
		box-shadow:
			inset 0 1px 0 color-mix(in srgb, white 55%, transparent),
			inset 0 -1.5px 0 color-mix(in srgb, var(--biohof-band-btn-bg) 68%, black),
			0 2px 4px color-mix(in srgb, black 16%, transparent),
			0 16px 34px color-mix(in srgb, var(--biohof-band-btn-shadow) 46%, transparent);
	}
	.biohof-band__cta--ghost:hover {
		transform: translateY(-2px);
		border-color: var(--biohof-band-ghost-fg);
		background-color: color-mix(in srgb, var(--biohof-band-ghost-fg) 14%, transparent);
	}
	.biohof-band--glass .biohof-band__cta--ghost:hover {
		background-color: color-mix(in srgb, black 42%, transparent);
		border-color: var(--biohof-band-ghost-fg);
	}
	.biohof-band__cta:hover .biohof-band__cta-ext {
		transform: translate(1px, -1px);
	}
	.biohof-band__cta:hover .biohof-band__cta-ico {
		transform: translateX(-1px);
	}
}

.biohof-band__cta:focus-visible {
	outline: 3px solid var(--biohof-band-focus);
	outline-offset: 2px;
}

/* ══ Stil: Vollton (warme Marken-Fläche mit Tiefe) ═══════════════════════════
   Modus-abhängige lokale Tokens wie beim Footer → AA in Hell und Dunkel. */
.biohof-band--solid {
	--biohof-band-surface: var(--biohof-color-primary);
	--biohof-band-surface-deep: color-mix(in srgb, var(--biohof-color-primary) 78%, black);
	--biohof-band-surface-lift: color-mix(in srgb, var(--biohof-color-primary) 82%, white);
	--biohof-band-fg: var(--biohof-color-on-primary);
	--biohof-band-title: var(--biohof-color-on-primary);
	--biohof-band-accent: color-mix(in srgb, var(--biohof-color-accent) 72%, white);
	--biohof-band-btn-bg: var(--biohof-color-on-primary);
	--biohof-band-btn-fg: var(--biohof-color-primary);
	--biohof-band-btn-shadow: var(--biohof-color-primary);
	--biohof-band-ghost-fg: var(--biohof-color-on-primary);
	--biohof-band-ghost-border: color-mix(in srgb, var(--biohof-color-on-primary) 42%, transparent);
	--biohof-band-focus: var(--biohof-color-on-primary);

	background-color: var(--biohof-band-surface);
	/* Warmes Olivgrün-Licht oben links (Akzent über Waldgrün → Dimension &
	   Wärme), Tiefe unten rechts. */
	background-image:
		radial-gradient(130% 120% at 4% -14%, color-mix(in srgb, var(--biohof-color-accent) 58%, var(--biohof-band-surface)), transparent 52%),
		radial-gradient(120% 140% at 106% 120%, var(--biohof-band-surface-deep), transparent 55%);
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, white 24%, transparent),
		inset 0 -1px 0 color-mix(in srgb, black 16%, transparent),
		var(--biohof-shadow-lg);
}

@media (prefers-color-scheme: dark) {
	.biohof-band--solid {
		--biohof-band-surface: var(--biohof-color-surface);
		--biohof-band-surface-deep: color-mix(in srgb, var(--biohof-color-surface) 55%, black);
		--biohof-band-surface-lift: color-mix(in srgb, var(--biohof-color-surface) 82%, white);
		--biohof-band-fg: var(--biohof-color-text-strong);
		--biohof-band-title: var(--biohof-color-text-strong);
		--biohof-band-accent: var(--biohof-color-primary);
		--biohof-band-btn-bg: var(--biohof-color-primary);
		--biohof-band-btn-fg: var(--biohof-color-on-primary);
		--biohof-band-btn-shadow: black;
		--biohof-band-ghost-fg: var(--biohof-color-text-strong);
		--biohof-band-ghost-border: var(--biohof-color-border);
		--biohof-band-focus: var(--biohof-color-primary);
	}
}

/* ══ Stil: Glas auf Bild (Foto + gerichteter Schleier, kein Blur/Panel) ══════ */
.biohof-band--glass {
	--biohof-band-fg: white;
	--biohof-band-title: white;
	--biohof-band-accent: color-mix(in srgb, var(--biohof-color-accent) 66%, white);
	--biohof-band-btn-bg: white;
	/* Fester dunkler Grünton (modus-stabil, AA auf der weißen Knopffläche). */
	--biohof-band-btn-fg: color-mix(in srgb, var(--biohof-color-accent) 34%, black);
	--biohof-band-btn-shadow: black;
	--biohof-band-ghost-fg: white;
	--biohof-band-ghost-border: color-mix(in srgb, white 60%, transparent);
	--biohof-band-focus: white;
	--biohof-band-scrim-angle: 105deg;
	--biohof-band-min-height: clamp(18rem, 12rem + 16vw, 26rem);

	background-color: var(--biohof-color-primary);
	/* Mesh-Grund, sichtbar wenn kein Foto gewählt ist. */
	background-image:
		radial-gradient(90% 130% at 14% 10%, color-mix(in srgb, var(--biohof-color-accent) 62%, transparent), transparent 60%),
		radial-gradient(100% 130% at 100% 100%, color-mix(in srgb, var(--biohof-color-primary) 82%, black), transparent 56%);
}
.biohof-band--align-right.biohof-band--glass {
	--biohof-band-scrim-angle: 255deg;
}

/* Lesbarkeits-Boden für weißen Text auf BELIEBIGEM Foto: foto-unabhängiger
   Textschatten zusätzlich zum Schleier – garantiert Kontrast auch dort, wo der
   gerichtete Schleier ausläuft oder das Foto hell ist (text-shadow vererbt auf
   Eyebrow/Titel/Untertitel der geteilten Überschrift). Nur im Glas-Stil; Vollton/
   Editorial haben kontrollierte Token-Flächen und brauchen ihn nicht. */
.biohof-band--glass .biohof-heading,
.biohof-band--glass .biohof-band__message {
	text-shadow:
		0 1px 2px rgba(0, 0, 0, 0.6),
		0 2px 14px rgba(0, 0, 0, 0.4);
}

/* Text-Inhalt bleibt auf der dunklen Seite (cap), damit er nie ins helle Foto läuft. */
.biohof-band--glass .biohof-band__layout {
	max-inline-size: 42rem;
}
.biohof-band--glass.biohof-band--align-center .biohof-band__layout {
	max-inline-size: 48rem;
	margin-inline: auto;
}
.biohof-band--glass.biohof-band--align-right .biohof-band__layout {
	margin-inline-start: auto;
}

.biohof-band__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: clip;
}
/* (0,2,0): schlägt Elementors `.elementor img { height: auto }` – sonst folgt
   das Foto seinem eigenen Verhältnis statt die Band-Fläche zu füllen. */
.biohof-band .biohof-band__img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	/* Bildausschnitt: Default zentriert; der Editor-Regler schreibt object-position
	   per Inline-CSS (siehe Band::register_content_image). */
	object-position: center center;
}

/* Gerichteter Schleier: starke Verdunklung auf der Text-Seite, weicher Grund
   überall (Foto bleibt sichtbar), zusätzlich unten etwas dunkler. */
.biohof-band__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			var(--biohof-band-scrim-angle, 105deg),
			color-mix(in srgb, var(--biohof-band-scrim-tint) var(--biohof-band-scrim-strength), transparent),
			transparent 64%
		),
		linear-gradient(
			0deg,
			color-mix(in srgb, var(--biohof-band-scrim-tint) calc(var(--biohof-band-scrim-strength) * 0.7), transparent),
			transparent 55%
		),
		/* Garantierter, positionsunabhängiger Flach-Boden (gegen helle Fotos angehoben). */
		color-mix(in srgb, var(--biohof-band-scrim-tint) calc(var(--biohof-band-scrim-strength) * 0.62), transparent);
}
/* Center: gleichmäßig-strenger Grund (kein Richtungs-Bias unter zentriertem Text). */
.biohof-band--align-center .biohof-band__scrim {
	background:
		radial-gradient(
			120% 120% at 50% 52%,
			color-mix(in srgb, var(--biohof-band-scrim-tint) var(--biohof-band-scrim-strength), transparent),
			color-mix(in srgb, var(--biohof-band-scrim-tint) calc(var(--biohof-band-scrim-strength) * 0.62), transparent) 85%
		);
}

/* ══ Stil: Editorial (ruhig, redaktionell – KEIN Seitenstreifen) ═════════════ */
.biohof-band--editorial {
	--biohof-band-fg: var(--biohof-color-text);
	--biohof-band-title: var(--biohof-color-text-strong);
	--biohof-band-accent: var(--biohof-color-primary);
	--biohof-band-btn-bg: var(--biohof-color-primary);
	--biohof-band-btn-fg: var(--biohof-color-on-primary);
	--biohof-band-btn-shadow: var(--biohof-color-primary);
	--biohof-band-ghost-fg: var(--biohof-color-primary);
	--biohof-band-ghost-border: color-mix(in srgb, var(--biohof-color-primary) 40%, transparent);
	--biohof-band-focus: var(--biohof-color-focus);

	/* Warme, weiche Grünfläche statt nacktem Weiß (Token kippt im Dark Mode
	   automatisch auf warmes Dunkelgrün) + zarter Akzent-Schimmer + sanfter Lift
	   → wirkt wie eine liebevoll gesetzte Karte, nicht wie blanker Text. */
	background-color: var(--biohof-color-surface-soft);
	background-image: radial-gradient(
		130% 150% at 100% 0%,
		color-mix(in srgb, var(--biohof-color-accent) 18%, transparent),
		transparent 62%
	);
	box-shadow: var(--biohof-shadow-sm);
}

/* ══ Feld-Linien-Motiv (optional, Vollton/Editorial) ═════════════════════════
   Abstrakte, handgezeichnete Höhenlinien (Felder/Hügel) als leiser Flourish am
   unteren Rand. Maskiertes Inline-SVG (lokal) → Farbe folgt dem Band-Akzent,
   passt sich Hell/Dunkel an. Kein Bio-Klischee, keine Stock-Grafik. */
.biohof-band--motif::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 62%;
	z-index: 0;
	pointer-events: none;
	opacity: 0.16;
	background: var(--biohof-band-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='M0 118 C 120 90 220 100 320 122 C 420 144 520 132 600 112'/%3E%3Cpath d='M0 158 C 140 128 250 142 360 162 C 460 180 540 166 600 150'/%3E%3Cpath d='M0 198 C 130 168 240 182 350 200 C 460 218 540 204 600 190'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 220' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23fff' stroke-width='2.4'%3E%3Cpath d='M0 118 C 120 90 220 100 320 122 C 420 144 520 132 600 112'/%3E%3Cpath d='M0 158 C 140 128 250 142 360 162 C 460 180 540 166 600 150'/%3E%3Cpath d='M0 198 C 130 168 240 182 350 200 C 460 218 540 204 600 190'/%3E%3C/g%3E%3C/svg%3E") no-repeat center bottom / 100% 100%;
}

/* ══ Feine Korn-Textur (nur Vollton, abschaltbar) ════════════════════════════
   Statische, kachelnde Inline-SVG-Körnung (lokal, kein Request). Über der
   Fläche, unter dem Inhalt. */
.biohof-band--grain::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	opacity: 0.09;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px 160px;
}

/* ── Editor-Hinweis (leer) ─────────────────────────────────────────────────── */
.biohof-band--empty {
	display: block;
	color: var(--biohof-color-text);
	padding: var(--biohof-space-md);
	border: 1px dashed var(--biohof-color-border);
	border-radius: var(--biohof-radius-md);
	background: var(--biohof-color-surface-soft);
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS). Reveal fährt das Layout als
   Ganzes; Default ist sichtbar (opt-in). ──────────────────────────────────── */
@supports (animation-timeline: view()) {
	.biohof-band--reveal .biohof-band__layout {
		animation: biohof-band-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 42%;
	}
}

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

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-band--reveal .biohof-band__layout {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.biohof-band__cta,
	.biohof-band__cta-ico,
	.biohof-band__cta-ext {
		transition: none;
	}
	.biohof-band__cta--primary:hover,
	.biohof-band__cta--ghost:hover {
		transform: none;
	}
}