/* KW Biohof – „Streichel mich!"-Kuh. Eine Geometrie, vier Stile (Farben/Linien
   über --cow-*). Vorteile ohne Scripting sichtbar; mit Scripting erst verborgen und
   per Klick/Knopf aufgedeckt. Verbergung über @media (scripting: enabled) statt einer
   JS-Klasse – greift sofort beim ersten Paint, sodass die Vorteile beim Laden NICHT
   kurz aufblitzen. */

.biohof-cow {
	display: flex;
	flex-direction: column;
	align-items: center;
	max-inline-size: 48rem;
	margin-inline: auto;
}

/* ── Einladung ──────────────────────────────────────────────────────────────── */

.biohof-cow__invite {
	margin: 0 0 0.35rem;
	font-family: var(--biohof-font-heading);
	font-style: italic;
	font-weight: var(--biohof-weight-medium);
	font-size: var(--biohof-fs-600);
	color: var(--biohof-color-text-strong);
	text-align: center;
}

.biohof-cow__hint {
	display: none;
	margin-block-start: 0.15rem;
	font-family: var(--biohof-font-body);
	font-style: normal;
	font-size: var(--biohof-fs-300);
	letter-spacing: 0.04em;
	color: var(--biohof-color-text-muted);
}

@media (scripting: enabled) {
	.biohof-cow__hint {
		display: block;
	}
}

/* ── Bühne + anklickbare Kuh ──────────────────────────────────────────────────── */

/* Bühne als Raster: Blasen links | Kuh | Blasen rechts. Die Blasen liegen im
   normalen Fluss (feste row-gaps) – lange Texte schieben sich Platz frei,
   nichts überlappt, die Bühne wächst mit. */
.biohof-cow__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	grid-template-rows: repeat(3, auto);
	column-gap: 1.1rem;
	row-gap: 1rem;
	align-content: space-between;
	align-items: center;
	inline-size: 100%;
	min-block-size: 26rem;
}

.biohof-cow__trigger {
	grid-column: 2;
	grid-row: 1 / -1;
	appearance: none;
	margin: 0;
	padding: 0.5rem;
	background: none;
	border: 0;
	border-radius: var(--biohof-radius-lg);
	color: inherit;
	cursor: default;
}

@media (scripting: enabled) {
	.biohof-cow__trigger {
		cursor: pointer;
	}
}

.biohof-cow__svg {
	display: block;
	inline-size: var(--biohof-cow-size, clamp(190px, 40vw, 260px));
	block-size: auto;
	overflow: visible;
}

@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
	.biohof-cow__svg {
		transform-origin: 50% 90%;
		animation: biohof-cow-breathe 6s var(--biohof-ease) infinite;
	}

	.biohof-cow__trigger:hover .biohof-cow__svg {
		animation-duration: 2.6s;
	}
}

@keyframes biohof-cow-breathe {
	0%, 100% { transform: translateY(0) rotate(0); }
	50% { transform: translateY(-2px) rotate(-0.6deg); }
}

/* ── Kuh-Teile: lesen Tokens über --cow-* (eine Geometrie, vier Stile) ─────────── */

.biohof-cow .co-fill {
	fill: var(--cow-body, none);
	stroke: var(--cow-line);
	stroke-width: var(--cow-sw, 2.4);
	stroke-linejoin: round;
	stroke-linecap: round;
}

.biohof-cow .co-line {
	fill: none;
	stroke: var(--cow-line);
	stroke-width: var(--cow-sw, 2.4);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.biohof-cow .co-mouth {
	stroke-width: 1.8;
}

.biohof-cow .co-ink {
	fill: var(--cow-ink);
	stroke: none;
}

.biohof-cow .co-muzzle {
	fill: var(--cow-muzzle, none);
	stroke: var(--cow-line);
	stroke-width: var(--cow-sw, 2.4);
	stroke-linejoin: round;
}

.biohof-cow .co-ear {
	fill: var(--cow-ear, none);
	stroke: var(--cow-line);
	stroke-width: var(--cow-sw, 2.4);
	stroke-linejoin: round;
}

.biohof-cow .co-horn {
	fill: var(--cow-horn, none);
	stroke: var(--cow-line);
	stroke-width: var(--cow-sw, 2.4);
	stroke-linejoin: round;
}

.biohof-cow .co-spot {
	fill: var(--cow-spot, none);
	stroke: none;
}

.biohof-cow .co-tuft {
	fill: var(--cow-tuft);
	stroke: none;
}

.biohof-cow .co-hoof {
	fill: var(--cow-hoof, none);
	stroke: none;
}

.biohof-cow .co-grass {
	fill: none;
	stroke: var(--cow-grass);
	stroke-width: 2.4;
	stroke-linecap: round;
}

.biohof-cow .co-shadow {
	fill: color-mix(in srgb, var(--biohof-color-text-strong) 9%, transparent);
	stroke: none;
}

.biohof-cow .co-eye {
	fill: var(--biohof-color-bg);
	stroke: none;
}

.biohof-cow .co-straw {
	display: var(--cow-straw, none);
}

/* ── Stil A – Reine Linie ───────────────────────────────────────────────────── */
.biohof-cow--line {
	--cow-line: var(--biohof-color-primary);
	--cow-sw: 2.4;
	--cow-ink: var(--biohof-color-text-strong);
	--cow-tuft: var(--biohof-color-primary);
	--cow-grass: var(--biohof-color-accent);
}

/* ── Stil B – Flächen & Flecken ─────────────────────────────────────────────── */
.biohof-cow--tint {
	--cow-line: var(--biohof-color-primary-hover);
	--cow-sw: 3;
	--cow-body: var(--biohof-color-surface-soft);
	--cow-spot: color-mix(in srgb, var(--biohof-color-primary) 72%, var(--biohof-color-text-strong));
	--cow-muzzle: color-mix(in srgb, var(--biohof-color-surface) 70%, var(--biohof-color-accent) 30%);
	--cow-ear: color-mix(in srgb, var(--biohof-color-accent) 38%, var(--biohof-color-bg));
	--cow-horn: color-mix(in srgb, var(--biohof-color-surface) 80%, var(--biohof-color-text-strong));
	--cow-ink: var(--biohof-color-text-strong);
	--cow-tuft: var(--biohof-color-primary-hover);
	--cow-hoof: color-mix(in srgb, var(--biohof-color-primary-hover) 55%, var(--biohof-color-text-strong));
	--cow-grass: var(--biohof-color-accent);
}

/* ── Stil C – Skizze (handgezeichnet; Wackel-Filter kommt aus dem SVG) ───────── */
.biohof-cow--sketch {
	--cow-line: color-mix(in srgb, var(--biohof-color-text-strong) 60%, var(--biohof-color-primary));
	--cow-sw: 2.8;
	--cow-body: color-mix(in srgb, var(--biohof-color-surface-soft) 62%, transparent);
	--cow-ink: var(--biohof-color-text-strong);
	--cow-tuft: color-mix(in srgb, var(--biohof-color-text-strong) 60%, var(--biohof-color-primary));
	--cow-hoof: color-mix(in srgb, var(--biohof-color-text-strong) 70%, var(--biohof-color-primary));
	--cow-grass: var(--biohof-color-accent);
	--cow-straw: block;
}

/* ── Stil D – Flächen + Handstrich (B-Flächen + sanfter Wackel-Strich) ────────── */
.biohof-cow--warmsketch {
	--cow-line: var(--biohof-color-primary-hover);
	--cow-sw: 2.9;
	--cow-body: var(--biohof-color-surface-soft);
	--cow-spot: color-mix(in srgb, var(--biohof-color-primary) 72%, var(--biohof-color-text-strong));
	--cow-muzzle: color-mix(in srgb, var(--biohof-color-surface) 70%, var(--biohof-color-accent) 30%);
	--cow-ear: color-mix(in srgb, var(--biohof-color-accent) 38%, var(--biohof-color-bg));
	--cow-horn: color-mix(in srgb, var(--biohof-color-surface) 80%, var(--biohof-color-text-strong));
	--cow-ink: var(--biohof-color-text-strong);
	--cow-tuft: var(--biohof-color-primary-hover);
	--cow-hoof: color-mix(in srgb, var(--biohof-color-primary-hover) 55%, var(--biohof-color-text-strong));
	--cow-grass: var(--biohof-color-accent);
	--cow-straw: block;
}

/* ── Sprechblasen ─────────────────────────────────────────────────────────────── */

/* Auf dem Desktop transparent – die Blasen sind direkte Raster-Kinder der Bühne.
   role="list" im Markup erhält die Listen-Semantik trotz display: contents. */
.biohof-cow__bubbles {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.biohof-cow__bubble {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.55rem;
	max-inline-size: 12.5rem;
	padding: 0.6rem 0.85rem;
	background: var(--biohof-cow-bubble-surface, var(--biohof-color-bg));
	border: 1.5px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-lg);
	box-shadow: var(--biohof-shadow-lg);
	color: var(--biohof-cow-bubble-text, var(--biohof-color-text-strong));
	font-size: var(--biohof-fs-300);
	font-weight: var(--biohof-weight-medium);
	line-height: var(--biohof-line-snug);
}

/* Clip- und Karten-Wrapper: auf dem Desktop transparent (Symbol + Text wirken als
   direkte Flex-Kinder der Blase); mobil bilden sie den Höhen-Kollaps (Clip) und
   tragen die Karten-Optik (Card). */
.biohof-cow__bubble-clip,
.biohof-cow__bubble-card {
	display: contents;
}

.biohof-cow__icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 1.75rem;
	block-size: 1.75rem;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-color-surface-soft);
	color: var(--biohof-cow-bubble-accent, var(--biohof-color-primary));
	--biohof-icon-size: 1rem;
}

/* Schwänzchen Richtung Kuh */
.biohof-cow__bubble::after {
	content: "";
	position: absolute;
	inline-size: 0.875rem;
	block-size: 0.875rem;
	background: var(--biohof-cow-bubble-surface, var(--biohof-color-bg));
	border: 1.5px solid var(--biohof-color-border);
	transform: rotate(45deg);
}

.biohof-cow__bubble.side-l::after {
	inset-inline-end: -0.5rem;
	inset-block-start: 50%;
	margin-block-start: -0.5rem;
	border-inline-start: 0;
	border-block-start: 0;
}

.biohof-cow__bubble.side-r::after {
	inset-inline-start: -0.5rem;
	inset-block-start: 50%;
	margin-block-start: -0.5rem;
	border-inline-end: 0;
	border-block-end: 0;
}

/* Desktop-Plätze rund um die Kuh: Spalte aus der Seite, Reihe aus dem Platz. */
.biohof-cow__bubble.side-l { grid-column: 1; justify-self: start; }
.biohof-cow__bubble.side-r { grid-column: 3; justify-self: end; }
.biohof-cow__bubble.pos-1, .biohof-cow__bubble.pos-2 { grid-row: 1; }
.biohof-cow__bubble.pos-3, .biohof-cow__bubble.pos-4 { grid-row: 2; }
.biohof-cow__bubble.pos-5, .biohof-cow__bubble.pos-6 { grid-row: 3; }

/* Mit Scripting: erst verborgen, per Klick/Knopf aufdecken (ohne Scripting sichtbar).
   @media statt JS-Klasse → greift sofort beim Paint, kein Aufblitzen beim Laden. */
@media (scripting: enabled) {
	.biohof-cow__bubble {
		opacity: 0;
		transform: translateY(12px) scale(0.7);
		pointer-events: none;
		transition: opacity 0.42s var(--biohof-ease), transform 0.52s var(--biohof-ease);
	}

	.biohof-cow__bubble.is-open {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
}

/* Staffelung nur bei „Alles aufdecken" */
.biohof-cow__bubbles.reveal-all .biohof-cow__bubble:nth-child(1) { transition-delay: 0ms; }
.biohof-cow__bubbles.reveal-all .biohof-cow__bubble:nth-child(2) { transition-delay: 60ms; }
.biohof-cow__bubbles.reveal-all .biohof-cow__bubble:nth-child(3) { transition-delay: 120ms; }
.biohof-cow__bubbles.reveal-all .biohof-cow__bubble:nth-child(4) { transition-delay: 180ms; }
.biohof-cow__bubbles.reveal-all .biohof-cow__bubble:nth-child(5) { transition-delay: 240ms; }
.biohof-cow__bubbles.reveal-all .biohof-cow__bubble:nth-child(6) { transition-delay: 300ms; }

/* ── Aktion: „Alles aufdecken" (nur mit JS sichtbar) ─────────────────────────── */

.biohof-cow__actions {
	display: none;
	margin-block-start: 1.4rem;
}

@media (scripting: enabled) {
	.biohof-cow__actions {
		display: block;
	}
}

.biohof-cow__toggle {
	appearance: none;
	min-block-size: 44px;
	padding: 0.7rem 1.4rem;
	font-family: var(--biohof-font-body);
	font-weight: var(--biohof-weight-semibold);
	font-size: var(--biohof-fs-400);
	/* UA-Default nowrap auf <button> aufheben: langer/übersetzter Text bricht um. */
	white-space: normal;
	overflow-wrap: break-word;
	border: 0;
	border-radius: var(--biohof-radius-pill);
	box-shadow: var(--biohof-shadow-md);
	cursor: pointer;
	transition: background var(--biohof-duration) var(--biohof-ease);
}

/* Elementor-V4-Defense: Flächen- UND Textfarbe explizit, sonst überschreibt der
   Theme-/Elementor-Knopf den Hintergrund → weiß auf weiß. Doppelklasse (0,3,0)
   schlägt das ohne !important – Basis und interaktive Zustände. */
.biohof.biohof-cow .biohof-cow__toggle,
.biohof.biohof-cow .biohof-cow__toggle:is(:hover, :focus, :focus-visible, :active) {
	color: var(--biohof-color-on-primary);
	background: var(--biohof-color-primary);
}

@media (hover: hover) {
	.biohof.biohof-cow .biohof-cow__toggle:hover {
		background: var(--biohof-color-primary-hover);
	}
}

/* ── Mobil: Blasen als gestapelte Liste ───────────────────────────────────────── */

@media (max-width: 40rem) {
	.biohof-cow__stage {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-block-size: auto;
	}

	.biohof-cow__bubbles {
		display: flex;
		flex-direction: column;
		inline-size: 100%;
		margin-block-start: 1.4rem;
	}

	/* Die Blase ist mobil nur noch Collapse-Container; die Karten-Optik wandert in
	   den inneren Wrapper, damit sie sauber auf 0 Höhe kollabieren kann. */
	.biohof-cow__bubble {
		position: static;
		inset: auto;
		max-inline-size: none;
		inline-size: 100%;
		display: block;
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	/* Clip: nacktes Element (ohne padding/border), das den Höhen-Kollaps trägt –
	   sonst blieben padding/border als Reste stehen und es klafft wieder Leerraum. */
	.biohof-cow__bubble-clip {
		display: block;
		min-block-size: 0;
		overflow: hidden;
	}

	/* Card: die sichtbare Blase mit ihrer Optik. */
	.biohof-cow__bubble-card {
		display: flex;
		align-items: center;
		gap: 0.55rem;
		padding: 0.6rem 0.85rem;
		background: var(--biohof-cow-bubble-surface, var(--biohof-color-bg));
		border: 1.5px solid var(--biohof-color-border);
		border-radius: var(--biohof-radius-lg);
		box-shadow: var(--biohof-shadow-lg);
		box-sizing: border-box;
	}

	/* Verborgen: 0 Reihen-Höhe → kein Leerraum unter der Kuh. Beim Aufdecken wächst
	   die Reihe sanft von 0fr auf 1fr und schiebt den Knopf nach unten – kein Sprung.
	   grid-template-rows ist robust (auch iOS Safari), anders als block-size: auto. */
	@media (scripting: enabled) {
		.biohof-cow__bubble {
			display: grid;
			grid-template-rows: 0fr;
			margin-block-start: 0;
			opacity: 0;
			transition:
				grid-template-rows 0.42s var(--biohof-ease),
				margin-block-start 0.42s var(--biohof-ease),
				opacity 0.3s var(--biohof-ease);
		}

		.biohof-cow__bubble.is-open {
			grid-template-rows: 1fr;
			margin-block-start: 0.6rem;
			opacity: 1;
		}
	}

	.biohof-cow__bubble::after {
		display: none;
	}
}

/* ── Bewegungs-Vorlieben ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) and (scripting: enabled) {
	.biohof-cow__bubble {
		transition: opacity 1ms;
		transform: none;
	}
}