/* re4 KI-Kennzeichnung – Frontend
   Anpassbar per CSS-Variablen, z. B. im Breakdance Custom CSS:
   :root { --re4-ki-size: 34px; --re4-ki-offset: 8px; --re4-ki-bg: rgba(26,26,26,.8); }
*/

:root {
	--re4-ki-size: 20px;
	--re4-ki-offset: 10px;
	--re4-ki-fg: rgba(255,255,255,0.8);
	--re4-ki-bg: rgba(17, 17, 17, 0.78);
	--re4-ki-z: 20;
}

/* Wrapper, den PHP/JS setzt */
.re4-ki-media {
	position: relative;
	display: inline-block;
	max-width: 100%;
	line-height: 0;
}

.re4-ki-media > img,
.re4-ki-media > video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Bestehendes Elternelement als Bezugsrahmen */
.re4-ki-host {
	position: relative;
}

.re4-ki-badge {
	position: absolute;
	z-index: var(--re4-ki-z);
	display: block;
	width: auto;
	height: var(--re4-ki-size);
	margin: 0;
	padding: 0;
	line-height: 0;
	pointer-events: none;
}

.re4-ki-badge svg {
	display: block;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.re4-ki-pos-tl { top: var(--re4-ki-offset); left: var(--re4-ki-offset); }
.re4-ki-pos-tr { top: var(--re4-ki-offset); right: var(--re4-ki-offset); }
.re4-ki-pos-bl { bottom: var(--re4-ki-offset); left: var(--re4-ki-offset); }
.re4-ki-pos-br { bottom: var(--re4-ki-offset); right: var(--re4-ki-offset); }

/* Text nur für Screenreader */
.re4-ki-badge__text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Variante mit sichtbarem Text (Filter re4_ki_show_label) */
.re4-ki-badge--label {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	width: auto;
	height: auto;
	padding: 0.3em 0.8em 0.3em 0.35em;
	border-radius: 100px;
	background: var(--re4-ki-bg);
	color: var(--re4-ki-fg);
	font: 600 12px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.re4-ki-badge--label svg {
	height: 100%;
	width: auto;
	filter: none;
}

.re4-ki-badge--label .re4-ki-badge__text {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
}

@media (max-width: 782px) {
	:root {
		--re4-ki-size: 18px;
		--re4-ki-offset: 5px;
	}
}

@media print {
	.re4-ki-badge { position: absolute; }
}