/* KI-generiert Label – Frontend-Styles */

/*
 * Der Wrapper übernimmt die Rolle des Positionierungskontexts.
 * Er wird per JS um das <img> (bzw. <picture>) gelegt und erbt
 * dessen Display-Verhalten, damit das Layout unverändert bleibt.
 */
.kigl-wrap {
	position: relative;
	max-width: 100%;
}

/*
 * Das Label wird absolut zum SICHTBAREN Container positioniert –
 * nicht zum Bildinhalt. Dadurch sitzt es bei jedem Seitenverhältnis,
 * jedem Crop (object-fit: cover etc.) und jeder Viewport-Breite
 * immer an derselben Stelle im sichtbaren Ausschnitt.
 *
 * Größe & Abstände werden per Custom Properties vom JS gesetzt
 * (aus KIGL_CONFIG), hier stehen nur Fallbacks.
 */
.kigl-overlay {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	line-height: 0;
	width: clamp(
		var(--kigl-min-w, 64px),
		var(--kigl-w, 22%),
		var(--kigl-max-w, 160px)
	);
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
}

.kigl-overlay img,
.kigl-overlay svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Positionen – Abstand ebenfalls per Custom Property steuerbar */
.kigl-pos-bl { left:  max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); bottom: max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); }
.kigl-pos-br { right: max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); bottom: max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); }
.kigl-pos-tl { left:  max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); top:    max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); }
.kigl-pos-tr { right: max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); top:    max(var(--kigl-min-off, 6px), var(--kigl-off, 3%)); }