/*
 * 3WM Simple Popup
 * Farben per CSS-Variablen im Theme überschreibbar, z. B.:
 * :root { --dwm-popup-close-bg: #3d6765; --dwm-popup-close-color: #fff; }
 */
.dwm-popup[hidden] { display: none; }
.dwm-popup {
	position: fixed; inset: 0; z-index: 99999;
	display: flex; align-items: center; justify-content: center;
	padding: 16px;
	opacity: 0; transition: opacity .3s ease;
}
.dwm-popup.is-open { opacity: 1; }
.dwm-popup__backdrop {
	position: absolute; inset: 0;
	background: var(--dwm-popup-backdrop, rgba(0, 0, 0, .65));
	cursor: pointer;
}
.dwm-popup__inner {
	position: relative;
	max-width: min(90vw, 800px);
	transform: scale(.96); transition: transform .3s ease;
}
.dwm-popup.is-open .dwm-popup__inner { transform: none; }
.dwm-popup__img {
	display: block; width: auto; height: auto;
	max-width: 100%; max-height: 85vh; max-height: 85dvh;
}
.dwm-popup__link { display: block; }

/* Schließen-Button: X aus zwei Balken statt Schriftzeichen → exakt zentriert */
.dwm-popup__close {
	position: absolute; top: 0; right: 0; z-index: 2;
	width: var(--dwm-popup-close-size, 44px); height: var(--dwm-popup-close-size, 44px);
	padding: 0; margin: 0;
	border: 0; border-radius: 50%;
	background: var(--dwm-popup-close-bg, #fff);
	color: var(--dwm-popup-close-color, #111);
	font-size: 0; line-height: 0; /* × im Markup ausblenden */
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
	transform: translate(30%, -30%);
	transition: background-color .2s ease, color .2s ease;
}
.dwm-popup__close::before,
.dwm-popup__close::after {
	content: "";
	position: absolute; top: 50%; left: 50%;
	width: 40%; height: 2px;
	background: currentColor;
	border-radius: 1px;
}
.dwm-popup__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.dwm-popup__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.dwm-popup__close:hover,
.dwm-popup__close:focus-visible {
	background: var(--dwm-popup-close-bg-hover, #111);
	color: var(--dwm-popup-close-color-hover, #fff);
	outline: none;
}
.dwm-popup__close:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--dwm-popup-close-bg-hover, #111); }

html.dwm-popup-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
	.dwm-popup, .dwm-popup__inner, .dwm-popup__close { transition: none; }
}