/* KW Biohof – Hofladen-Marktstand. Holzfarben leiten sich aus EINEM Token
   (--mk-wood) ab; Markenfarben bleiben Fallback. Das Live-Schild ist HTML
   (Text dynamisch via stand.js); ohne JS bleibt es ein neutrales Hofladen-Schild. */

.biohof-stand {
	/* Holz: ein Ton, alle Schattierungen abgeleitet (im Stil-Tab umstellbar) */
	--mk-wood: #caa06d;
	--mk-wood-mid: color-mix(in srgb, var(--mk-wood) 82%, #000);
	--mk-wood-deep: color-mix(in srgb, var(--mk-wood) 68%, #000);
	--mk-wood-edge: color-mix(in srgb, var(--mk-wood) 45%, #000);
	--mk-ink: color-mix(in srgb, var(--mk-wood) 26%, #000);
	--mk-sign: color-mix(in srgb, var(--mk-wood) 80%, #fff);
	--mk-rope: color-mix(in srgb, var(--mk-wood) 58%, #000);
	--mk-awning: var(--biohof-color-accent);

	/* Container bewusst auf der Wurzel: die @container-Query stylt das unmittelbare
	   Kind __layout selbst (Spalten-Grid) → der Container muss dessen Vorfahr sein.
	   Der Elementor-Hüllen-Konflikt ist global durch elementor-defense (width:100%)
	   neutralisiert. */
	container-type: inline-size;
	max-inline-size: 64rem;
	margin-inline: auto;
}

.biohof-stand__layout {
	display: grid;
	gap: clamp(1.25rem, 4vw, 2.75rem);
	align-items: center;
}

@container (min-width: 700px) {
	.biohof-stand__layout {
		grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
	}
}

/* ── Illustration + hängendes Schild ──────────────────────────────────────── */

.biohof-stand__scene {
	display: flex;
	justify-content: center;
}

.biohof-stand__stage {
	position: relative;
	inline-size: 100%;
	max-inline-size: var(--biohof-stand-art-size, 30rem);
}

.biohof-stand__art {
	display: block;
	inline-size: 100%;
	block-size: auto;
	overflow: visible;
}

/* Holz-Teile (Farben über --mk-*) */
.biohof-stand .mk-shadow { fill: color-mix(in srgb, var(--biohof-color-text-strong) 9%, transparent); }
.biohof-stand .mk-wood { fill: var(--mk-wood); }
.biohof-stand .mk-wood-mid { fill: var(--mk-wood-mid); }
.biohof-stand .mk-wood-deep { fill: var(--mk-wood-deep); }
.biohof-stand .mk-wood-line { fill: none; stroke: var(--mk-wood-edge); stroke-width: 1.6; stroke-linecap: round; opacity: 0.5; }
.biohof-stand .mk-outline { fill: none; stroke: var(--mk-wood-edge); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.biohof-stand .mk-valance { fill: var(--biohof-color-primary); }
.biohof-stand .mk-stripe-a { fill: var(--mk-awning); }
.biohof-stand .mk-stripe-b { fill: color-mix(in srgb, var(--biohof-color-surface-soft) 78%, #fff); }
.biohof-stand .mk-crate { fill: var(--mk-wood); stroke: var(--mk-wood-edge); stroke-width: 1.6; stroke-linejoin: round; }
.biohof-stand .mk-basket { fill: var(--mk-wood-mid); stroke: var(--mk-wood-edge); stroke-width: 1.6; stroke-linejoin: round; }
.biohof-stand .mk-apple { fill: color-mix(in srgb, var(--biohof-color-accent) 82%, #fff); stroke: var(--biohof-color-primary); stroke-width: 1.4; }
.biohof-stand .mk-leaf { fill: var(--biohof-color-accent); stroke: var(--biohof-color-primary); stroke-width: 1.4; stroke-linejoin: round; }
.biohof-stand .mk-leaf-d { fill: var(--biohof-color-primary); }
.biohof-stand .mk-stem { fill: none; stroke: var(--biohof-color-primary); stroke-width: 1.6; stroke-linecap: round; }
.biohof-stand .mk-egg { fill: color-mix(in srgb, var(--mk-wood) 30%, #fff); stroke: var(--mk-wood-edge); stroke-width: 1.1; }
.biohof-stand .mk-grass { fill: none; stroke: var(--biohof-color-accent); stroke-width: 2.2; stroke-linecap: round; }

/* Hängendes Holzschild (Live-Status) */
.biohof-stand__sign {
	position: absolute;
	inset-block-start: 28%;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: min(62%, 12rem);
	padding: 0.85rem 1rem 0.95rem;
	text-align: center;
	/* Kein background-image: Elementors Lazy-Load (Container ab dem 4.) blendet
	   Hintergrund-BILDER (auch Verläufe) verzögert ein → sichtbarer Farbwechsel.
	   Holz-Tiefe daher über inset-Schatten (Licht oben, Schatten unten) – die
	   stehen vom ersten Frame an. Die Maserung (::before) ist nicht betroffen. */
	background-color: var(--mk-wood);
	border: 2px solid var(--mk-wood-edge);
	border-radius: 14px;
	box-shadow:
		var(--biohof-shadow-lg),
		inset 0 2px 0 color-mix(in srgb, #fff 28%, transparent),
		inset 0 1.8rem 1.5rem -0.9rem color-mix(in srgb, #fff 14%, transparent),
		inset 0 -3rem 2rem -1rem color-mix(in srgb, #000 15%, transparent);
	transform-origin: 50% -2.2rem;
}

/* Maserung */
.biohof-stand__sign::before {
	content: "";
	position: absolute;
	inset: 6px 10px;
	border-radius: 8px;
	/* Dezent halten: zu kräftige Streifen machen die kleine Schrift unruhig. */
	background:
		repeating-linear-gradient(180deg, transparent 0 7px, color-mix(in srgb, var(--mk-wood-edge) 16%, transparent) 7px 8px);
	opacity: 0.35;
	pointer-events: none;
}

/* Schnüre zum Vordach */
.biohof-stand__rope {
	position: absolute;
	inset-block-end: calc(100% - 4px);
	inline-size: 2px;
	block-size: 2.4rem;
	background: var(--mk-rope);
}

.biohof-stand__rope--l { inset-inline-start: 18%; rotate: -15deg; }
.biohof-stand__rope--r { inset-inline-end: 18%; rotate: 15deg; }

.biohof-stand__rope::after {
	content: "";
	position: absolute;
	inset-block-end: -3px;
	inset-inline-start: -2px;
	inline-size: 6px;
	block-size: 6px;
	border-radius: 50%;
	background: var(--mk-wood-edge);
}

.biohof-stand__sign-title {
	margin: 0;
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-semibold);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-tight);
	color: var(--mk-ink);
}

/* Live-Status (geöffnet/geschlossen + Detail): ohne JS verborgen, dann bleibt das
   ruhige „Hofladen"-Schild stehen; mit JS (scripting:enabled) eingeblendet. So
   wechselt der „Hofladen"-Schriftzug nie – der Status erscheint nur darunter. */
.biohof-stand__live {
	display: none;
	margin-block-start: 0.3rem;
}

.biohof-stand__status {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	margin: 0;
	font-family: var(--biohof-font-body);
	font-weight: var(--biohof-weight-medium);
	font-size: var(--biohof-fs-300);
	line-height: var(--biohof-line-snug);
	color: var(--mk-ink);
}

/* Status-Lampe: neutral sichtbar, glimmt beim ersten Status farbig auf. */
.biohof-stand__dot {
	flex: 0 0 auto;
	inline-size: 0.7rem;
	block-size: 0.7rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--mk-ink) 45%, transparent);
	box-shadow: 0 0 0 3px transparent;
	transition: background-color 0.35s ease-out, box-shadow 0.35s ease-out;
}

.biohof-stand__sign--open .biohof-stand__dot {
	background: var(--biohof-color-success);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--biohof-color-success) 28%, transparent);
}

.biohof-stand__sign--closed .biohof-stand__dot {
	background: var(--biohof-color-danger);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--biohof-color-danger) 26%, transparent);
}

/* Status-Text + unsichtbare Breitenhalter (beide möglichen Texte) übereinander:
   die Zeile hat von Anfang an ihre Endbreite → die Lampe springt beim JS-Lauf
   nicht mehr von der Mitte an den Textanfang. */
.biohof-stand__status-box {
	display: inline-grid;
	justify-items: center;
}

.biohof-stand__status-box > * {
	grid-area: 1 / 1;
	text-wrap: balance;
}

.biohof-stand__status-ghost {
	visibility: hidden;
}

.biohof-stand__detail {
	position: relative;
	display: block;
	margin-block-start: 0.15rem;
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-300);
	color: color-mix(in srgb, var(--mk-ink) 82%, transparent);
}

.biohof-stand__detail:empty {
	display: none;
}

/* Mit JS kommt unter den Ruhe-Titel („Hofladen") der Live-Status (1 Zeile) +
   Detailzeile (1 Zeile; Texte bewusst kompakt, s. ShopTexts). Diesen Platz exakt
   reservieren, damit das Schild beim Laden nicht wächst (kein Springen).
   Nur bei aktivem Scripting – ohne JS bleibt das Schild kompakt (kein Wechsel). */
@media (scripting: enabled) {
	/* Live-Bereich mit JS einblenden, Platz vorab reserviert (kein Shift). Die
	   Status-Lampe steht von Anfang an neutral im Schild; sobald stand.js den
	   Status setzt, glimmt sie farbig auf und die Textzeilen faden kurz ein
	   (ease-out = sofort sichtbarer Start, kein Nachladen-Gefühl). */
	.biohof-stand__live {
		display: block;
	}

	.biohof-stand__status-text,
	.biohof-stand__detail {
		opacity: 0;
		transition: opacity 0.35s ease-out;
	}

	.biohof-stand__sign--open .biohof-stand__status-text,
	.biohof-stand__sign--closed .biohof-stand__status-text,
	.biohof-stand__sign--open .biohof-stand__detail,
	.biohof-stand__sign--closed .biohof-stand__detail {
		opacity: 1;
	}

	.biohof-stand__status {
		min-block-size: 1.4em; /* Fallback (1 Zeile) für Browser ohne lh-Einheit */
		min-block-size: 1lh;
	}

	.biohof-stand__detail,
	.biohof-stand__detail:empty {
		display: block;
		min-block-size: 1.6em; /* Fallback (1 Zeile) */
		min-block-size: 1lh;
		text-wrap: balance;
	}
}

/* Sanftes Schaukeln (nur wenn erwünscht) */
@media (prefers-reduced-motion: no-preference) {
	.biohof-stand__stage:not(.biohof-stand__stage--no-art) .biohof-stand__sign {
		animation: biohof-stand-sway 7s var(--biohof-ease) infinite;
	}
}

@keyframes biohof-stand-sway {
	0%, 100% { rotate: -1.1deg; }
	50% { rotate: 1.1deg; }
}

@media (prefers-reduced-motion: reduce) {
	.biohof-stand__status-text,
	.biohof-stand__detail,
	.biohof-stand__dot {
		transition: none;
	}
}

/* Ohne Illustration: Schild als ruhiges Inline-Schild */
.biohof-stand__stage--no-art {
	display: flex;
	justify-content: center;
}

.biohof-stand__stage--no-art .biohof-stand__sign {
	position: static;
	translate: none;
	inline-size: min(100%, 16rem);
	margin-inline: auto;
}

.biohof-stand__stage--no-art .biohof-stand__rope {
	display: none;
}

/* ── Inhalt: Überschrift, Angebote, Öffnungszeiten ────────────────────────── */

.biohof-stand__content .biohof-heading {
	margin-block-end: 1.25rem;
}

/* Markttafel: ein Panel, Angebote als Zeilen mit Preis rechts (Hoftafel-Muster)
   – kein Karten-Raster, kein Seitenstreifen. Block-Titel wie die Öffnungszeiten. */
.biohof-stand__board {
	margin-block-end: 1.75rem;
	padding: clamp(0.9rem, 0.8rem + 0.5vw, 1.4rem);
	background: var(--biohof-color-bg);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-radius-lg);
	box-shadow: var(--biohof-shadow-sm);
}

.biohof-stand__board-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.4rem;
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-semibold);
	font-size: var(--biohof-fs-500);
	color: var(--biohof-color-text-strong);
}

.biohof-stand__board-icon {
	display: inline-grid;
	place-items: center;
	color: var(--biohof-color-primary);
}

.biohof-stand__board-icon svg {
	inline-size: 1.2rem;
	block-size: 1.2rem;
}

.biohof-stand__offers {
	margin: 0;
	padding: 0;
	list-style: none;
}

.biohof-stand__offer {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 0.7rem 0.15rem;
}

.biohof-stand__offer + .biohof-stand__offer {
	border-block-start: 1px solid color-mix(in srgb, var(--biohof-color-border) 65%, transparent);
}

.biohof-stand__offer-icon {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	inline-size: 2.4rem;
	block-size: 2.4rem;
	border-radius: var(--biohof-radius-pill);
	background: var(--biohof-color-surface-soft);
	color: var(--biohof-color-primary);
	--biohof-icon-size: 1.25rem;
}

.biohof-stand__offer-body {
	flex: 1 1 auto;
	min-inline-size: 0;
}

.biohof-stand__offer-name {
	display: block;
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-semibold);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-color-text-strong);
}

.biohof-stand__offer-note {
	display: block;
	margin-block-start: 0.1rem;
	font-size: var(--biohof-fs-300);
	color: var(--biohof-color-text);
}

.biohof-stand__offer-price {
	flex: 0 0 auto;
	margin-inline-start: auto;
	padding-inline-start: 0.5rem;
	font-weight: var(--biohof-weight-semibold);
	color: var(--biohof-color-text-strong);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.biohof-stand__hours {
	padding: 1rem 1.1rem;
	background: var(--biohof-color-surface-soft);
	border-radius: var(--biohof-radius-md);
}

.biohof-stand__hours-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-semibold);
	font-size: var(--biohof-fs-500);
	color: var(--biohof-color-text-strong);
}

.biohof-stand__hours-icon {
	display: inline-grid;
	place-items: center;
	color: var(--biohof-color-primary);
}

.biohof-stand__hours-icon svg {
	inline-size: 1.2rem;
	block-size: 1.2rem;
}

.biohof-stand__hours-list {
	margin: 0;
	display: grid;
	gap: 0.3rem;
}

.biohof-stand__hours-row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.3rem 1rem;
}

.biohof-stand__hours-days {
	font-weight: var(--biohof-weight-semibold);
	color: var(--biohof-color-text-strong);
}

.biohof-stand__hours-time {
	margin: 0;
	text-align: end;
	color: var(--biohof-color-text);
	font-variant-numeric: tabular-nums;
}

.biohof-stand__hours-row.is-closed .biohof-stand__hours-time {
	/* nur kursiv abgesetzt; muted erfüllt auf dem Tint kein AA */
	font-style: italic;
	color: var(--biohof-color-text);
}

.biohof-stand__hours-note {
	/* Richtwert-Hinweis: dezent kursiv, aber volle Textfarbe (muted fiele auf
	   dem Tint durch AA). */
	margin: 0.7rem 0 0;
	font-size: 0.9em;
	font-style: italic;
	line-height: 1.45;
	color: var(--biohof-color-text);
}