/*
 * KW Biohof – Listen-Widget. Kurze Stichpunkte (Symbol + Text + optionaler
 * Halbsatz) in drei Stilen aus EINEM Datensatz: Karten, Häkchen-Liste,
 * Feature-Raster. Komplett ohne JS – Hover und Scroll-Reveal sind reines CSS.
 * Alle Farben aus Tokens; lokale --biohof-listing-* mit Marken-Fallback, vom
 * Stil-Tab überschreibbar. Kein !important.
 *
 * Hover transformiert NIE das Item selbst (nur Kind-Elemente / Schatten) –
 * sonst kollidiert es mit der Reveal-Animation, die das Item-`transform` belegt.
 */

/* Spalten-Obergrenze als typisierte Ganzzahl mit Default 99 (= „unbegrenzt",
   die Mindestbreite regelt dann allein). „Automatisch" liefert bewusst keinen
   Integer und fällt darum sauber auf diesen Default zurück. */
@property --biohof-listing-cap {
	syntax: "<integer>";
	inherits: true;
	initial-value: 99;
}

.biohof-listing {
	--biohof-listing-min: 16rem;
	--biohof-listing-gap: var(--biohof-space-md);
	--biohof-listing-radius: var(--biohof-radius-lg);
	--biohof-listing-text-color: var(--biohof-color-text);
	--biohof-listing-accent-color: var(--biohof-color-primary);
	--biohof-listing-surface-color: var(--biohof-color-surface-soft);

	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-lg);
	color: var(--biohof-listing-text-color);
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
}

/* ── Raster (geteilt) – Spaltenzahl als Obergrenze, Mindestbreite je Stil ─────
   RAM-Pattern (Repeat-Auto-Minmax) mit Deckel: auto-fit nutzt nie mehr als
   --biohof-listing-cap Spalten und bricht bei zu wenig Platz selbständig um –
   nie über den Rand. Die gewählte Spaltenzahl ist also ein Maximum, kein Zwang. */
.biohof-listing__items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--biohof-listing-gap);
	grid-template-columns: repeat(
		auto-fit,
		minmax(
			max(
				var(--biohof-listing-min),
				calc((100% - (var(--biohof-listing-cap) - 1) * var(--biohof-listing-gap)) / var(--biohof-listing-cap))
			),
			1fr
		)
	);
}

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

.biohof-listing__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--biohof-listing-accent-color);
}

.biohof-listing__icon svg {
	display: block;
}

.biohof-listing__body {
	display: flex;
	flex-direction: column;
	gap: var(--biohof-space-2xs);
	min-inline-size: 0;
}

.biohof-listing__text {
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
	color: var(--biohof-listing-text-color);
	text-wrap: balance;
	/* Lange Komposita (z.B. „Lichtraumprofilschnitt") sauber brechen statt
	   abschneiden – Silbentrennung greift auf deutschsprachigen Seiten. */
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.biohof-listing__desc {
	margin: 0;
	font-size: var(--biohof-fs-400);
	line-height: var(--biohof-line-base);
	color: var(--biohof-color-text);
	text-wrap: pretty;
	overflow-wrap: break-word;
}

/* ══ Stil: Karten ════════════════════════════════════════════════════════════ */

.biohof-listing--cards .biohof-listing__item {
	position: relative;
	display: flex;
	gap: var(--biohof-space-sm);
	padding: var(--biohof-space-lg);
	padding-inline-start: calc(var(--biohof-space-lg) + 4px);
	background: var(--biohof-listing-surface-color);
	border: 1px solid var(--biohof-color-border);
	border-radius: var(--biohof-listing-radius);
	overflow: hidden;
	transition: box-shadow var(--biohof-duration) var(--biohof-ease),
		border-color var(--biohof-duration) var(--biohof-ease);
}

/* Akzent-Leiste links (liebevolles Detail – brightet beim Hover). */
.biohof-listing--cards .biohof-listing__item::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 4px;
	background: linear-gradient(
		to bottom,
		var(--biohof-listing-accent-color),
		color-mix(in srgb, var(--biohof-listing-accent-color) 45%, transparent)
	);
	transition: inline-size var(--biohof-duration) var(--biohof-ease);
}

.biohof-listing--cards .biohof-listing__icon {
	inline-size: 3rem;
	block-size: 3rem;
	border-radius: var(--biohof-radius-md);
	background: color-mix(in srgb, var(--biohof-listing-accent-color) 14%, transparent);
	transition: transform var(--biohof-duration) var(--biohof-ease),
		background-color var(--biohof-duration) var(--biohof-ease);
}

.biohof-listing--cards .biohof-listing__icon svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.biohof-listing--cards .biohof-listing__text {
	font-size: var(--biohof-fs-500);
}

@media (hover: hover) {
	.biohof-listing--cards .biohof-listing__item:hover {
		box-shadow: var(--biohof-shadow-md);
		border-color: color-mix(in srgb, var(--biohof-listing-accent-color) 40%, var(--biohof-color-border));
	}
	.biohof-listing--cards .biohof-listing__item:hover::before {
		inline-size: 7px;
	}
	.biohof-listing--cards .biohof-listing__item:hover .biohof-listing__icon {
		transform: scale(1.06) rotate(-3deg);
		background: color-mix(in srgb, var(--biohof-listing-accent-color) 22%, transparent);
	}
}

/* ══ Stil: Häkchen-Liste ═════════════════════════════════════════════════════ */

.biohof-listing--checklist {
	--biohof-listing-min: 20rem;
}

.biohof-listing--checklist .biohof-listing__item {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--biohof-space-sm);
	padding-block: var(--biohof-space-sm);
	padding-inline: var(--biohof-space-xs);
	border-block-end: 1px solid var(--biohof-color-border);
	/* Dezenter Schimmer-Sweep: Verlauf liegt rechts, wandert beim Hover durch. */
	background-image: linear-gradient(
		100deg,
		transparent 0%,
		color-mix(in srgb, var(--biohof-listing-accent-color) 9%, transparent) 50%,
		transparent 100%
	);
	background-size: 220% 100%;
	background-position: 160% 0;
	background-repeat: no-repeat;
	transition: background-position 0.6s var(--biohof-ease);
}

.biohof-listing--checklist .biohof-listing__item:last-child {
	border-block-end: 0;
}

.biohof-listing--checklist .biohof-listing__icon {
	inline-size: 1.85rem;
	block-size: 1.85rem;
	margin-block-start: 0.1em;
	border-radius: var(--biohof-radius-pill);
	background: color-mix(in srgb, var(--biohof-listing-accent-color) 16%, transparent);
	transition: transform var(--biohof-duration) var(--biohof-ease);
}

.biohof-listing--checklist .biohof-listing__icon svg {
	inline-size: 1rem;
	block-size: 1rem;
}

.biohof-listing--checklist .biohof-listing__text {
	font-family: var(--biohof-font-body);
	font-size: var(--biohof-fs-400);
	font-weight: var(--biohof-weight-semibold);
	line-height: var(--biohof-line-snug);
}

@media (hover: hover) {
	.biohof-listing--checklist .biohof-listing__item:hover {
		background-position: -40% 0;
	}
	.biohof-listing--checklist .biohof-listing__item:hover .biohof-listing__icon {
		transform: scale(1.12);
	}
}

/* ══ Stil: Feature-Raster ════════════════════════════════════════════════════ */

.biohof-listing--feature {
	--biohof-listing-min: 14rem;
}

.biohof-listing--feature .biohof-listing__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--biohof-space-sm);
	padding: var(--biohof-space-lg) var(--biohof-space-md);
}

.biohof-listing--feature .biohof-listing__icon {
	inline-size: 4rem;
	block-size: 4rem;
	border-radius: var(--biohof-radius-pill);
	background: color-mix(in srgb, var(--biohof-listing-accent-color) 12%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biohof-listing-accent-color) 24%, transparent);
	transition: transform var(--biohof-duration) var(--biohof-ease),
		box-shadow var(--biohof-duration) var(--biohof-ease);
}

.biohof-listing--feature .biohof-listing__icon svg {
	inline-size: 2rem;
	block-size: 2rem;
}

.biohof-listing--feature .biohof-listing__body {
	align-items: center;
}

.biohof-listing--feature .biohof-listing__text {
	font-size: var(--biohof-fs-500);
}

/* Feine Akzent-Unterstreichung unter dem Titel. */
.biohof-listing--feature .biohof-listing__text::after {
	content: "";
	display: block;
	inline-size: 2rem;
	block-size: 2px;
	margin: var(--biohof-space-2xs) auto 0;
	border-radius: var(--biohof-radius-pill);
	background: linear-gradient(
		to right,
		var(--biohof-listing-accent-color),
		color-mix(in srgb, var(--biohof-listing-accent-color) 30%, transparent)
	);
	transition: inline-size var(--biohof-duration) var(--biohof-ease);
}

@media (hover: hover) {
	.biohof-listing--feature .biohof-listing__item:hover .biohof-listing__icon {
		transform: translateY(-3px) scale(1.05);
		box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--biohof-listing-accent-color) 45%, transparent);
	}
	.biohof-listing--feature .biohof-listing__item:hover .biohof-listing__text::after {
		inline-size: 3.5rem;
	}
}

/* ══ Stil: Häkchenliste (schlicht – echte Haken, ohne Kachel/Chip) ═══════════ */

.biohof-listing--checks {
	--biohof-listing-min: 18rem;
}

.biohof-listing--checks .biohof-listing__item {
	display: flex;
	align-items: flex-start;
	gap: var(--biohof-space-sm);
	padding-block: var(--biohof-space-2xs);
}

/* Schlichter Akzent-Haken ohne Fläche – das macht die echte Häkchenliste aus. */
.biohof-listing--checks .biohof-listing__icon {
	inline-size: 1.4rem;
	block-size: 1.4rem;
	margin-block-start: 0.12em;
}

.biohof-listing--checks .biohof-listing__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.biohof-listing--checks .biohof-listing__text {
	font-family: var(--biohof-font-body);
	font-weight: var(--biohof-weight-medium);
	line-height: var(--biohof-line-snug);
}

/* ══ Stil: Schritte (Stepper – Zahl/Buchstabe/Pfeil + Verbindungslinie) ══════ */

.biohof-listing--steps {
	--biohof-listing-marker-size: 2.5rem;
}

/* Schritte sind eine Abfolge → immer einspaltig (überschreibt die Spaltenwahl). */
.biohof-listing--steps .biohof-listing__items {
	grid-template-columns: 1fr;
	gap: 0;
}

.biohof-listing--steps .biohof-listing__item {
	position: relative;
	display: grid;
	grid-template-columns: var(--biohof-listing-marker-size) 1fr;
	column-gap: var(--biohof-space-md);
	align-items: start;
	padding-block-end: var(--biohof-space-lg);
}

.biohof-listing--steps .biohof-listing__item:last-child {
	padding-block-end: 0;
}

/* Durchgehende Verbindungslinie von Marker zu Marker. */
.biohof-listing--steps .biohof-listing__item:not(:last-child)::before {
	content: "";
	position: absolute;
	inset-inline-start: calc(var(--biohof-listing-marker-size) / 2 - 1px);
	inset-block-start: var(--biohof-listing-marker-size);
	inset-block-end: 0;
	inline-size: 2px;
	background: color-mix(in srgb, var(--biohof-listing-accent-color) 30%, transparent);
}

.biohof-listing--steps .biohof-listing__marker {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--biohof-listing-marker-size);
	block-size: var(--biohof-listing-marker-size);
	border-radius: var(--biohof-radius-pill);
	background: color-mix(in srgb, var(--biohof-listing-accent-color) 14%, transparent);
	box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--biohof-listing-accent-color) 42%, transparent);
	color: var(--biohof-color-text-strong);
	font-family: var(--biohof-font-heading);
	font-weight: var(--biohof-weight-bold);
	font-size: var(--biohof-fs-500);
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

/* Pfeil-Marker als SVG: per viewBox exakt zentriert (Flex zentriert die Box). */
.biohof-listing--steps .biohof-listing__arrow {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	display: block;
}

/* Titel optisch zur Marker-Mitte rücken. */
.biohof-listing--steps .biohof-listing__body {
	padding-block-start: calc((var(--biohof-listing-marker-size) - 1.5em) / 2);
}

.biohof-listing--steps .biohof-listing__text {
	font-size: var(--biohof-fs-500);
}

/* ── Editor-Hinweis (leer) ─────────────────────────────────────────────────── */
.biohof-listing--empty {
	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);
}

/* ── Fokus sichtbar (Safety, falls künftig Links/Buttons dazukommen) ────────── */
.biohof-listing.biohof-listing :where(a, button):focus-visible {
	outline: 3px solid var(--biohof-color-focus);
	outline-offset: 2px;
}

/* ── Scroll-Reveal: View Timeline (CSS, kein JS). Jeder Eintrag eigene Timeline
   → natürlicher Stagger ohne nth-child-Verzögerungen. ──────────────────────── */
@supports (animation-timeline: view()) {
	.biohof-listing--reveal .biohof-listing__item {
		animation: biohof-listing-rise linear both;
		animation-timeline: view();
		animation-range: entry 5% entry 40%;
	}
}

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

/* ── Dark Mode: Symbol-Tönung leicht anheben (Sichtbarkeit auf dunkler Fläche) ─ */
@media (prefers-color-scheme: dark) {
	.biohof-listing--cards .biohof-listing__icon,
	.biohof-listing--feature .biohof-listing__icon {
		background: color-mix(in srgb, var(--biohof-listing-accent-color) 22%, transparent);
	}
	.biohof-listing--steps .biohof-listing__marker {
		background: color-mix(in srgb, var(--biohof-listing-accent-color) 24%, transparent);
	}
}

/* ── Bewegung reduzieren (BFSG) ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.biohof-listing--reveal .biohof-listing__item {
		animation: none;
		opacity: 1;
		transform: none;
	}
	.biohof-listing__item,
	.biohof-listing__item::before,
	.biohof-listing__icon,
	.biohof-listing__text::after {
		transition: none;
	}
}