/*
 * KI-Kennzeichnung — Hinweis am Bild.
 *
 * Grundsatz: so wenig Layout wie möglich anfassen. Der Wrapper ist
 * inline-block mit line-height 0, damit er sich im Fluss wie das Bild selbst
 * verhält und in Divi-, Bricks- und Elementor-Containern keine zusätzliche
 * Zeilenhöhe erzeugt.
 */

.kikz-wrap {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.kikz-wrap > img {
	max-width: 100%;
	height: auto;
}

.kikz-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	padding: 0.3em 0.6em;
	border-radius: 0.25em;
	white-space: nowrap;
	text-decoration: none;
	font-family: inherit;
}

.kikz-badge__icon,
.kikz-badge__icon svg {
	width: 1.05em;
	height: 1.05em;
	flex: 0 0 auto;
	display: block;
}

.kikz-badge__text {
	display: inline-block;
}

/* Auf dem Bild */
.kikz-wrap--overlay .kikz-badge {
	position: absolute;
	z-index: 2;
	margin: 0.5em;
	backdrop-filter: blur(2px);
}

.kikz-wrap--overlay.kikz-wrap--br .kikz-badge { right: 0; bottom: 0; }
.kikz-wrap--overlay.kikz-wrap--bl .kikz-badge { left: 0; bottom: 0; }
.kikz-wrap--overlay.kikz-wrap--tr .kikz-badge { right: 0; top: 0; }
.kikz-wrap--overlay.kikz-wrap--tl .kikz-badge { left: 0; top: 0; }

/* Als Zeile unter dem Bild */
.kikz-wrap--caption {
	display: inline-block;
}

.kikz-wrap--caption .kikz-badge {
	margin-top: 0.4em;
	padding-left: 0;
	padding-right: 0;
	background: none;
	font-weight: 500;
}

/* Farbgebung */
.kikz-wrap--dark .kikz-badge,
.kikz-standalone.kikz-wrap--dark .kikz-badge {
	background: rgba(17, 17, 17, 0.78);
	color: #fff;
}

.kikz-wrap--light .kikz-badge,
.kikz-standalone.kikz-wrap--light .kikz-badge {
	background: rgba(255, 255, 255, 0.88);
	color: #111;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.kikz-wrap--caption.kikz-wrap--dark .kikz-badge { color: #444; background: none; }
.kikz-wrap--caption.kikz-wrap--light .kikz-badge { color: #666; background: none; box-shadow: none; }

/* Kurzcode, ohne Bild */
.kikz-standalone {
	display: inline-block;
	line-height: 0;
}

/* Sehr schmale Ansichten: Hinweis darf das Bild nicht überdecken */
@media (max-width: 480px) {
	.kikz-wrap--overlay .kikz-badge {
		margin: 0.3em;
		padding: 0.25em 0.45em;
	}
}

@media print {
	.kikz-wrap--overlay .kikz-badge {
		position: static;
		display: block;
		margin: 0.3em 0 0;
		background: none;
		color: #000;
		box-shadow: none;
	}
}

/*
 * Builder-Verträglichkeit.
 *
 * Der Wrapper ist inline-block und schrumpft damit auf die Eigenbreite des
 * Bildes. In Containern, die Bilder bewusst auf volle Breite ziehen, wäre das
 * eine sichtbare Verkleinerung. Geprüft an Divi 5.1: die einzige Regel mit
 * Kind-Kombinator ist .et_grid_module>.et_pb_post .et_pb_image_container img
 * mit min-width:100% — genau der Blog-Grid-Fall. Dort muss der Wrapper
 * mitziehen statt zu schrumpfen.
 *
 * Alle übrigen Divi-Bildregeln arbeiten mit Nachfahren-Selektoren und
 * überstehen die zusätzliche Ebene unverändert.
 */
.et_pb_image_container .kikz-wrap,
.et_pb_blog_grid .kikz-wrap,
.et_pb_slide_image .kikz-wrap,
.et_pb_sticky_module .et_pb_main_blurb_image .kikz-wrap,
.bricks-layout-inner .kikz-wrap,
.elementor-widget-image .kikz-wrap,
.wp-block-post-featured-image .kikz-wrap {
	display: block;
	width: 100%;
}

.et_pb_image_container .kikz-wrap > img,
.et_pb_blog_grid .kikz-wrap > img {
	min-width: 100%;
}

/* Figure/Bildunterschrift des Blocks: Wrapper darf die Breite nicht kappen. */
figure.wp-block-image .kikz-wrap {
	display: inline-block;
	max-width: 100%;
}