/**
 * Bild-Platzhalter — dezent gestaltetes div mit Aspect-Ratio + Label
 *
 * Wird gerendert von funkelstern_image_placeholder($label, $aspect)
 * helper. Verwendet überall, wo später ein echtes Foto kommen wird.
 *
 * --placeholder-farbe optional als Tönung (für Gruppen-Cards mit Charakter-Farbe).
 */

.funkelstern-image-placeholder {
	width: 100%;
	background-color: color-mix(in oklab, var(--color-honey) 8%, var(--color-cream));
	border: 1px dashed var(--color-border-medium);
	border-radius: var(--radius-md);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
	background-image:
		repeating-linear-gradient(
			135deg,
			transparent 0,
			transparent 14px,
			color-mix(in oklab, var(--color-deep-brown) 3%, transparent) 14px,
			color-mix(in oklab, var(--color-deep-brown) 3%, transparent) 15px
		);
}

.funkelstern-image-placeholder__label {
	font-family: var(--font-sans);
	font-size: var(--font-size-caption);
	font-weight: var(--font-weight-medium);
	color: var(--color-text-tertiary);
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	background-color: var(--color-cream);
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border-subtle);
	white-space: nowrap;
	max-width: calc(100% - var(--space-6));
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Charakter-Farben-Variante für Gruppen-Cards */
.funkelstern-image-placeholder--farbe {
	background-color: color-mix(in oklab, var(--placeholder-farbe, var(--color-honey)) 18%, var(--color-cream));
	background-image:
		radial-gradient(circle at 30% 30%, color-mix(in oklab, var(--placeholder-farbe) 30%, transparent), transparent 60%),
		radial-gradient(circle at 70% 70%, color-mix(in oklab, var(--placeholder-farbe) 18%, transparent), transparent 70%);
	border: none;
}

.funkelstern-image-placeholder--farbe .funkelstern-image-placeholder__label {
	display: none;
}