/* ============================================================
   KI Image Badge – Frontend Styles  v1.2.0
   ============================================================ */

/* Wrapper: position-context für das Overlay.
   display:block + width:100% damit Slideshow-/Hero-Bilder
   weiterhin die volle Breite ihres Containers füllen.
   font-size:0 / line-height:0 verhindert den Ghost-Whitespace unter <img>. */
.ki-badge-wrap {
	position: relative;
	display: block;
	width: 100%;
	font-size: 0;
	line-height: 0;
}

/* Enthaltenes Bild ebenfalls auf volle Breite zwingen */
.ki-badge-wrap > img {
	display: block;
	width: 100%;
	height: auto;
}

/* Badge: sitzt in der rechten unteren Ecke */
.ki-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	flex-direction: row-reverse; /* Icon rechts, Label wächst nach links */
	overflow: hidden;
	border-radius: 6px;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	padding: 6px 8px 6px 0;  /* kein linkes Padding – SVG beginnt direkt am Rand */
	gap: 7px;
	box-sizing: border-box;
	max-width: 41px;       /* Geschlossen: nur Icon */
	transition: max-width 0.38s cubic-bezier(.4,0,.2,1),
	            padding    0.38s cubic-bezier(.4,0,.2,1);
	white-space: nowrap;
	cursor: default;
	z-index: 100;
}

/* Hover / Fokus / Klick: klappt nach links auf */
.ki-badge:hover,
.ki-badge:focus-within,
.ki-badge--open {
	max-width: 220px;
	padding: 6px 12px;
}

/* Cursor als Fragezeichen nur über dem Badge selbst */
.ki-badge,
.ki-badge * {
	cursor: help;
}

/* Badge innerhalb der Magnific-Popup-Lightbox */
.mfp-figure .ki-badge {
	position: absolute;
	bottom: 46px; /* über der Bildunterschrift / Bottom-Bar */
	right: 10px;
	z-index: 9999;
}

/* SVG-Icon: feste Größe, zentriert */
.ki-badge__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 22px;
	height: 22px;
}

.ki-badge__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Text-Label */
.ki-badge__label {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 0.03em;
	opacity: 0;
	transform: translateX(8px);
	transition: opacity  0.25s ease 0.08s,
	            transform 0.25s ease 0.08s;
	pointer-events: none;
	flex-shrink: 0;
}

/* Label einblenden wenn Badge offen */
.ki-badge:hover .ki-badge__label,
.ki-badge:focus-within .ki-badge__label,
.ki-badge--open .ki-badge__label {
	opacity: 1;
	transform: translateX(0);
}