/* KI-Kennzeichnung nach EU AI Act Art. 50.
   Styles für das EU-AI-Label, das ki-badge.js auf KI-generierte Bilder setzt.
   Gehört zusammen mit assets/ki-badge.js – Einbau siehe assets/ki-badge-snippet.html. */

.ki-badge {
	position: absolute;
	right: 10px;
	bottom: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 28px;
	width: auto;
	max-width: 28px;
	border-radius: 999px;
	background: #000 url(https://www.mietwagen-radar.de/wp-content/uploads/2026/08/eu-ai-label-badge.png) right center / 28px 28px no-repeat;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
	overflow: hidden;
	cursor: help;
	transition: max-width .2s ease;
}

/* Inline-Bilder: Das Badge hängt an der Bildunterschrift und wird über deren
   Oberkante geschoben, damit es in der Bildecke sitzt und nicht unter der Caption. */
.ki-badge--caption {
	bottom: calc(100% + 10px);
}

.ki-badge-text {
	display: block;
	padding: 0 36px 0 12px;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 28px;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .2s ease;
}

/* Hover/Fokus nur auf dem Icon selbst, nicht auf dem ganzen Bild. */
.ki-badge:hover,
.ki-badge:focus-visible {
	max-width: 220px;
}

.ki-badge:hover .ki-badge-text,
.ki-badge:focus-visible .ki-badge-text {
	opacity: 1;
}

.ki-badge:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Container, in denen das Badge sitzt, brauchen einen Positionierungskontext.
   ki-badge.js setzt die Klasse nur, wenn der Container statisch positioniert ist. */
.ki-badge-host {
	position: relative;
}

@media (prefers-reduced-motion: reduce) {
	.ki-badge,
	.ki-badge-text {
		transition: none;
	}
}