/* KW Biohof – geteilte Knopf-Stile (Sprössling / Handstrich / Aus der Erde).
   Liegt als Aufsatz auf der eigenen CTA jedes Widgets; ändert nur die Deko,
   nicht die Grundform. Deko erbt die (geschützte) Knopf-Textfarbe via
   currentColor. JS-frei; Bewegung respektiert prefers-reduced-motion. */

.biohof :where(.biohof-cta__sprout, .biohof-cta__brush, .biohof-cta__seed,
	.biohof-cta__horse, .biohof-cta__flower, .biohof-cta__bee, .biohof-cta__digger) {
	pointer-events: none;
}

/* Gemeinsame Deko-Hülle der SVG-Stile. */
.biohof :is(.biohof-cta__sprout, .biohof-cta__horse, .biohof-cta__flower,
	.biohof-cta__bee, .biohof-cta__digger) {
	display: inline-flex;
	flex: none;
	align-self: center;
	overflow: visible;
}

.biohof :is(.biohof-cta__sprout, .biohof-cta__horse, .biohof-cta__flower,
	.biohof-cta__bee, .biohof-cta__digger) svg {
	inline-size: 100%;
	block-size: 100%;
	overflow: visible;
}

/* ── Sprössling ─────────────────────────────────────────────────────────────
   Ruhe = Saat in der Erde (Erdlinie + Korn + kleiner Keim, lesbar ohne Hover),
   beim Hover/Fokus wächst der Stiel und die Blätter klappen auf. */
.biohof .biohof-cta__sprout {
	inline-size: 1.3em;
	block-size: 1.15em;
}

.biohof .biohof-cta__soil {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	opacity: 0.55;
}

.biohof .biohof-cta__seed-dot {
	fill: currentColor;
}

.biohof .biohof-cta__stem {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-dasharray: 16;
	stroke-dashoffset: 13.5; /* kleiner Keim bleibt in Ruhe sichtbar */
	transition: stroke-dashoffset 420ms var(--biohof-ease);
}

.biohof .biohof-cta__leaf {
	fill: currentColor;
	transform: scale(0);
	transform-box: fill-box;
	transition: transform 360ms var(--biohof-ease) 140ms;
}

.biohof .biohof-cta__leaf--l {
	transform-origin: bottom right;
}

.biohof .biohof-cta__leaf--r {
	transform-origin: bottom left;
}

.biohof .biohof-cta--sprout:is(:hover, :focus-visible) .biohof-cta__stem {
	stroke-dashoffset: 0;
}

.biohof .biohof-cta--sprout:is(:hover, :focus-visible) .biohof-cta__leaf {
	transform: scale(1);
}

/* ── Handstrich ─────────────────────────────────────────────────────────────
   Handgezogener Unterstrich unter dem Label, der beim Hover/Fokus von links
   nach rechts „aufgemalt" wird. Über dem Knopf zentriert positioniert. */
.biohof .biohof-cta--brush {
	position: relative;
}

.biohof .biohof-cta__brush {
	position: absolute;
	bottom: 0.5em;
	left: 50%;
	translate: -50% 0;
	inline-size: clamp(3rem, 60%, 9rem);
	block-size: 0.42em;
	color: currentColor;
	opacity: 0.8;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 460ms var(--biohof-ease);
}

.biohof .biohof-cta__brush svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.biohof .biohof-cta--brush:is(:hover, :focus-visible) .biohof-cta__brush {
	clip-path: inset(0 0 0 0);
}

/* ── Aus der Erde ───────────────────────────────────────────────────────────
   Saatkorn als ruhige Marke vor dem Label, weiches Oberlicht + geerdeter
   Schatten, satt eindrückend beim Klick. Die a-Doppelung sichert die Tiefe
   gegen die eigenen Schatten-Regeln der Widgets (höhere Spezifität). */
.biohof .biohof-cta__seed {
	flex: none;
	align-self: center;
	inline-size: 0.5em;
	block-size: 0.5em;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.85;
	box-shadow: inset 0 0 0 0.12em color-mix(in srgb, black 14%, transparent);
}

.biohof a.biohof-cta--earth {
	box-shadow:
		inset 0 1px 0 color-mix(in srgb, white 26%, transparent),
		var(--biohof-shadow-md);
	transition:
		box-shadow var(--biohof-duration) var(--biohof-ease),
		transform 140ms var(--biohof-ease),
		background-color var(--biohof-duration) var(--biohof-ease);
}

.biohof a.biohof-cta--earth:active {
	transform: translateY(1px);
	box-shadow: inset 0 2px 5px color-mix(in srgb, black 28%, transparent);
}

/* Ghost-Knopf (Band, ohne Füllung): kein Relief – nur Saatkorn + Eindrücken. */
.biohof a.biohof-band__cta--ghost.biohof-cta--earth {
	box-shadow: none;
}

.biohof a.biohof-band__cta--ghost.biohof-cta--earth:active {
	box-shadow: inset 0 2px 5px color-mix(in srgb, black 18%, transparent);
}

/* ── Pferd ──────────────────────────────────────────────────────────────────
   Steht in Ruhe, galoppiert beim Hover/Fokus: Beine scheren, Körper wippt,
   Schweif weht, Tempo-Striche ziehen vorbei. */
.biohof .biohof-cta__horse {
	inline-size: 1.75em;
	block-size: 1.2em;
}

.biohof .biohof-cta__horse-body {
	fill: currentColor;
}

.biohof .biohof-cta__horse-leg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: top center;
}

.biohof .biohof-cta__horse-tail {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	transform-box: fill-box;
	transform-origin: top right;
}

.biohof .biohof-cta__horse-mane {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.1;
	stroke-linecap: round;
	opacity: 0.7;
}

.biohof .biohof-cta__horse-speed {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.4;
	stroke-linecap: round;
	opacity: 0;
}

.biohof .biohof-cta__horse-all {
	transform-box: fill-box;
	transform-origin: center;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-all {
	animation: biohof-horse-bounce 380ms ease-in-out infinite alternate;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-leg--f1 {
	animation: biohof-horse-kick-f 380ms ease-in-out infinite alternate;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-leg--f2 {
	animation: biohof-horse-kick-f 380ms ease-in-out infinite alternate-reverse;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-leg--b1 {
	animation: biohof-horse-kick-b 380ms ease-in-out infinite alternate-reverse;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-leg--b2 {
	animation: biohof-horse-kick-b 380ms ease-in-out infinite alternate;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-tail {
	animation: biohof-horse-tail 380ms ease-in-out infinite alternate;
}

.biohof .biohof-cta--horse:is(:hover, :focus-visible) .biohof-cta__horse-speed {
	animation: biohof-horse-speed 600ms linear infinite;
}

@keyframes biohof-horse-bounce {
	from { transform: translateY(0) rotate(0deg); }
	to { transform: translateY(-1.1px) rotate(-4deg); }
}

@keyframes biohof-horse-kick-f {
	from { transform: rotate(-26deg); }
	to { transform: rotate(18deg); }
}

@keyframes biohof-horse-kick-b {
	from { transform: rotate(-20deg); }
	to { transform: rotate(24deg); }
}

@keyframes biohof-horse-tail {
	from { transform: rotate(6deg); }
	to { transform: rotate(-14deg); }
}

@keyframes biohof-horse-speed {
	0% { opacity: 0; transform: translateX(2px); }
	40% { opacity: 0.65; }
	100% { opacity: 0; transform: translateX(-3.5px); }
}

/* ── Blume ──────────────────────────────────────────────────────────────────
   Knospe in Ruhe, erblüht beim Hover/Fokus (Blätter fächern auf, Mitte
   erscheint) und wiegt sich danach sanft. */
.biohof .biohof-cta__flower {
	inline-size: 1.1em;
	block-size: 1.25em;
}

.biohof .biohof-cta__flower-stem {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.biohof .biohof-cta__flower-leaf {
	fill: currentColor;
	opacity: 0.9;
}

.biohof .biohof-cta__flower-petals {
	transform-box: fill-box;
	transform-origin: center;
	transform: scale(0.42);
	transition: transform 420ms var(--biohof-ease);
}

.biohof .biohof-cta__flower-petal {
	fill: currentColor;
	opacity: 0.92;
}

.biohof .biohof-cta__flower-core {
	fill: currentColor;
	opacity: 0;
	transform: scale(0);
	transform-box: fill-box;
	transform-origin: center;
	transition:
		transform 300ms var(--biohof-ease) 240ms,
		opacity 300ms var(--biohof-ease) 240ms;
}

.biohof .biohof-cta__flower-sway {
	transform-box: fill-box;
	transform-origin: bottom center;
}

.biohof .biohof-cta--flower:is(:hover, :focus-visible) .biohof-cta__flower-petals {
	transform: scale(1);
}

.biohof .biohof-cta--flower:is(:hover, :focus-visible) .biohof-cta__flower-core {
	transform: scale(1);
	opacity: 0.55;
}

.biohof .biohof-cta--flower:is(:hover, :focus-visible) .biohof-cta__flower-sway {
	animation: biohof-flower-sway 1.6s ease-in-out 400ms infinite alternate;
}

@keyframes biohof-flower-sway {
	from { transform: rotate(-3deg); }
	to { transform: rotate(3.5deg); }
}

/* ── Hummel ─────────────────────────────────────────────────────────────────
   Sitzt auf einer Blüte, hebt beim Hover/Fokus flatternd ab; eine gepunktete
   Flugspur erscheint. */
.biohof .biohof-cta__bee {
	inline-size: 1.55em;
	block-size: 1.25em;
}

.biohof .biohof-cta__bee-trail {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
	stroke-dasharray: 1.6 3;
	opacity: 0;
	transition: opacity 300ms var(--biohof-ease) 150ms;
}

.biohof .biohof-cta__bee-bloom {
	fill: currentColor;
	opacity: 0.8;
}

.biohof .biohof-cta__bee-body {
	transform-box: fill-box;
	transform-origin: center;
}

.biohof .biohof-cta__bee-shell {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
}

.biohof .biohof-cta__bee-stripe {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.3;
	stroke-linecap: round;
}

.biohof .biohof-cta__bee-head {
	fill: currentColor;
}

.biohof .biohof-cta__bee-wing {
	fill: currentColor;
	opacity: 0.55;
	transform-box: fill-box;
	transform-origin: bottom center;
}

.biohof .biohof-cta--bee:is(:hover, :focus-visible) .biohof-cta__bee-body {
	animation: biohof-bee-fly 900ms ease-in-out infinite alternate;
}

.biohof .biohof-cta--bee:is(:hover, :focus-visible) .biohof-cta__bee-wing--1 {
	animation: biohof-bee-flap 90ms linear infinite alternate;
}

.biohof .biohof-cta--bee:is(:hover, :focus-visible) .biohof-cta__bee-wing--2 {
	animation: biohof-bee-flap 90ms linear 45ms infinite alternate;
}

.biohof .biohof-cta--bee:is(:hover, :focus-visible) .biohof-cta__bee-trail {
	opacity: 0.7;
}

@keyframes biohof-bee-fly {
	from { transform: translate(0, 0) rotate(0deg); }
	to { transform: translate(1.5px, -4.5px) rotate(-8deg); }
}

@keyframes biohof-bee-flap {
	from { transform: scaleY(0.45) rotate(-6deg); }
	to { transform: scaleY(1.1) rotate(10deg); }
}

/* ── Bagger ─────────────────────────────────────────────────────────────────
   Ruht in Ruhe, schaufelt beim Hover/Fokus: Arm senkt und hebt sich,
   Erdkrümel fallen aus der Schaufel. */
.biohof .biohof-cta__digger {
	inline-size: 1.75em;
	block-size: 1.2em;
}

.biohof .biohof-cta__digger-track {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
}

.biohof .biohof-cta__digger-wheel {
	fill: currentColor;
}

.biohof .biohof-cta__digger-cab {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linejoin: round;
}

.biohof .biohof-cta__digger-boom,
.biohof .biohof-cta__digger-stick {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
}

.biohof .biohof-cta__digger-boom {
	stroke-width: 1.8;
}

.biohof .biohof-cta__digger-stick {
	stroke-width: 1.7;
}

.biohof .biohof-cta__digger-bucket {
	fill: currentColor;
}

.biohof .biohof-cta__digger-arm {
	transform-box: fill-box;
	transform-origin: bottom left;
}

.biohof .biohof-cta__digger-fore {
	transform-box: fill-box;
	transform-origin: top left;
}

.biohof .biohof-cta__digger-crumb {
	fill: currentColor;
	opacity: 0;
}

.biohof .biohof-cta--digger:is(:hover, :focus-visible) .biohof-cta__digger-arm {
	animation: biohof-digger-dig 1.1s ease-in-out infinite;
}

.biohof .biohof-cta--digger:is(:hover, :focus-visible) .biohof-cta__digger-fore {
	animation: biohof-digger-fore 1.1s ease-in-out infinite;
}

.biohof .biohof-cta--digger:is(:hover, :focus-visible) .biohof-cta__digger-crumb--1 {
	animation: biohof-digger-crumb 1.1s ease-out 550ms infinite;
}

.biohof .biohof-cta--digger:is(:hover, :focus-visible) .biohof-cta__digger-crumb--2 {
	animation: biohof-digger-crumb 1.1s ease-out 680ms infinite;
}

@keyframes biohof-digger-dig {
	0%, 100% { transform: rotate(0deg); }
	45%, 60% { transform: rotate(-16deg); }
}

@keyframes biohof-digger-fore {
	0%, 100% { transform: rotate(0deg); }
	45%, 60% { transform: rotate(22deg); }
}

@keyframes biohof-digger-crumb {
	0% { opacity: 0; transform: translate(0, 0); }
	15% { opacity: 0.8; }
	60% { opacity: 0; transform: translate(2.5px, 4px); }
	100% { opacity: 0; }
}

/* ── Bewegungsarm: Endzustand zeigen, keine Bewegung ─────────────────────────
   Zeichen-Übergänge (Sprössling, Handstrich, Blume) zeigen den Endzustand;
   Dauerläufer (Pferd, Hummel, Bagger) bleiben in ihrer – jetzt lesbaren –
   Ruhepose. */
@media (prefers-reduced-motion: reduce) {
	.biohof .biohof-cta__stem {
		stroke-dashoffset: 0;
		transition: none;
	}

	.biohof .biohof-cta__leaf {
		transform: scale(1);
		transition: none;
	}

	.biohof .biohof-cta__brush {
		clip-path: inset(0 0 0 0);
		transition: none;
	}

	.biohof .biohof-cta__flower-petals {
		transform: scale(1);
		transition: none;
	}

	.biohof .biohof-cta__flower-core {
		transform: scale(1);
		opacity: 0.55;
		transition: none;
	}

	.biohof .biohof-cta__bee-trail {
		transition: none;
	}

	/* Muss die Hover-Regeln (0,4,0) schlagen – daher selbst über den
	   Hover-Pfad formuliert (gleiche Spezifität, spätere Quelle gewinnt). */
	.biohof .biohof-cta:is(:hover, :focus-visible) :is(
		.biohof-cta__horse-all, .biohof-cta__horse-leg, .biohof-cta__horse-tail,
		.biohof-cta__horse-speed, .biohof-cta__flower-sway, .biohof-cta__bee-body,
		.biohof-cta__bee-wing, .biohof-cta__digger-arm, .biohof-cta__digger-fore,
		.biohof-cta__digger-crumb
	) {
		animation: none;
	}

	.biohof a.biohof-cta--earth:active {
		transform: none;
	}
}