/* KI-Bilder-Kennzeichnung – Frontend
   Groesse und Randabstand kommen als Custom Properties aus den Einstellungen. */

/* --- Wrapper um einzelne Bilder -----------------------------------------
   Der Wrapper muss sich im Layout so verhalten wie das Bild, das er ersetzt.
   width:fit-content zusammen mit max-width:100% loest den haeufigsten Fall:
   ein Bild mit width:100% wuerde in einem reinen shrink-to-fit-Wrapper auf
   seine Eigenbreite zusammenfallen. So bleibt es klein, wenn es klein ist,
   und deckelt sauber an der Containerbreite, wenn es groesser waere. */
.kib-wrap {
	/* position: relative;
	display: inline-block; */
	width: fit-content;
	max-width: 100%;
	line-height: 0;
	vertical-align: top;
}

/* --- Elemente mit gekennzeichnetem Hintergrundbild ----------------------
   position:relative wird nicht pauschal gesetzt, sondern nur dort, wo das
   Element bisher static war (siehe frontend.js). Sonst wuerde ein absolut
   positioniertes Bricks-Element aus seinem Anker gerissen. */
.kib-relative {
	position: relative;
}

/* --- Das Badge selbst --------------------------------------------------- */
.kib-badge {
	position: absolute;
	z-index: 10;
	display: block;
	height: var(--kib-size, 28px);
	width: auto;
	/* Auf kleinen Bildern darf das breite Symbol nicht ueber den Rand laufen.
	   Das SVG behaelt dank preserveAspectRatio sein Seitenverhaeltnis. */
	max-width: calc(100% - (var(--kib-offset, 12px) * 2));
	line-height: 0;
	margin: 0;
	padding: 0;
}

.kib-badge__icon {
	display: block;
	height: 100%;
	width: auto;
	max-width: 100%;
}

.kib-badge--top-left {
	top: var(--kib-offset, 12px);
	left: var(--kib-offset, 12px);
}

.kib-badge--top-right {
	top: var(--kib-offset, 12px);
	right: var(--kib-offset, 12px);
}

.kib-badge--bottom-left {
	bottom: var(--kib-offset, 12px);
	left: var(--kib-offset, 12px);
}

.kib-badge--bottom-right {
	bottom: var(--kib-offset, 12px);
	right: var(--kib-offset, 12px);
}

/* Im Druck muss die Kennzeichnung erhalten bleiben. */
@media print {
	.kib-badge {
		display: block !important;
	}
}