/* ---------- Wrapper & Bild ---------- */
.iuno-im {
	--iuno-im-accent: #e2001a;
	position: relative;
	display: inline-block;
	max-width: 100%;
	margin: 0;
}
.iuno-im__image,
.iuno-im__image img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Style-Variante „Aussteller" ---------- */
/* 1:1-Format, Bild vollständig sichtbar (contain, kein Beschnitt),
   abgerundete Ecken, immer weißer Hintergrund. */
.iuno-im.is-style-aussteller {
	display: block;
}
.iuno-im.is-style-aussteller .iuno-im__image {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 1rem;
	background: #fff;
	border-radius: 1rem;
}

/* ---------- Style-Varianten „Partner" (zwei Höhen) ---------- */
/* Logo-Optik wie im Partner-Bereich: feste Höhe, Breite proportional (auto),
   kein Beschnitt, keine Rundung/kein Hintergrund. Höhe je Variante über
   --iuno-im-partner-height; zusätzlich pro Block überschreibbar. */
.iuno-im.is-style-partner,
.iuno-im.is-style-partner-klein {
	display: inline-block;
}
.iuno-im.is-style-partner .iuno-im__image,
.iuno-im.is-style-partner-klein .iuno-im__image {
	width: auto;
	height: var(--iuno-im-partner-height);
	max-width: 100%;
	object-fit: contain;
	padding: 0;
	background: none;
	border-radius: 0;
}
.iuno-im.is-style-partner {
	--iuno-im-partner-height: 80px;
}
.iuno-im.is-style-partner-klein {
	--iuno-im-partner-height: 60px;
}

/* ---------- Pulsierender (+)-Marker ---------- */
.iuno-im--interactive {
	cursor: pointer;
}

.iuno-im__marker {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	border-radius: 50%;
	background: var(--iuno-im-accent);
	color: #fff;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
	z-index: 2;
}
.iuno-im__marker-plus {
	font-size: 1rem;
	line-height: 1;
	font-weight: 700;
}
/* Pulsierender Ring */
.iuno-im__marker::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: inherit;
	z-index: -1;
	animation: iuno-im-pulse 2s ease-out infinite;
}
@keyframes iuno-im-pulse {
	0%   { transform: scale(1);   opacity: 0.7; }
	100% { transform: scale(2.2); opacity: 0;   }
}
.iuno-im__marker:hover,
.iuno-im__marker:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	.iuno-im__marker::before {
		animation: none;
	}
}

/* ---------- Modal ---------- */
.iuno-im__modal[hidden] {
	display: none;
}
.iuno-im__modal {
	/* Vollflächiger Overlay-Container. Höhe = sichtbarer Viewport (dvh, korrekt
	   trotz mobiler Browserleisten). Der Innenabstand sorgt für 1rem Luft unter
	   dem fixierten Header (Theme-Variable --headerHeight, Fallback 0) sowie
	   1rem zum unteren/seitlichen sichtbaren Rand. Per --iuno-im-header-offset
	   überschreibbar. */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 100vh;
	height: 100dvh;
	z-index: 9999;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: calc( var(--iuno-im-header-offset, var(--headerHeight, 0px)) + 1rem ) 1rem 1rem;
}
.iuno-im__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
}
.iuno-im__dialog {
	position: relative;
	background: #fff;
	color: #111;
	max-width: 640px;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	border-radius: 8px;
	padding: 2rem;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}
.iuno-im__close {
	position: absolute;
	top: 0.5rem;
	right: 0.75rem;
	background: none;
	border: none;
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
	color: #111;
}
.iuno-im__modal-image img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 1rem;
}
.iuno-im__title {
	margin: 0 0 0.75rem;
}
.iuno-im__text {
	margin-bottom: 1.25rem;
}
.iuno-im__link {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	background: var(--iuno-im-accent);
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
}
.iuno-im__link:hover,
.iuno-im__link:focus-visible {
	filter: brightness(1.1);
}

/* Body-Scroll-Lock, wenn ein Modal offen ist */
body.iuno-im-modal-open {
	overflow: hidden;
}