/* ==========================================================================
   Lersch Popups – Modal im Haus-Lersch-Design
   Nutzt die Theme-Variablen (--c-main, --c-beige, --c-dark …) mit Fallbacks.
   ========================================================================== */

.lp-modal {
	--lp-main: var(--c-main, #A21D22);
	--lp-dark: var(--c-dark, #2B201C);
	--lp-beige: var(--c-beige, #F4EDE4);
	--lp-heading: var(--c-heading, #000);
	--lp-text: var(--c-text, #424242);
	--lp-w: 640px;
	--lp-pad: 44px;
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	visibility: hidden;
	pointer-events: none;
}
.lp-modal.is-open { visibility: visible; pointer-events: auto; }

.lp-modal--sm { --lp-w: 460px; }
.lp-modal--md { --lp-w: 640px; }
.lp-modal--lg { --lp-w: 880px; }
.lp-modal--xl { --lp-w: 1100px; }
.lp-modal--pad-compact { --lp-pad: 26px; }
.lp-modal--pad-none { --lp-pad: 0px; }

/* Hintergrund */
.lp-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(43, 32, 28, .72);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .28s ease;
}
.lp-modal.is-open .lp-modal__overlay { opacity: 1; }
.lp-modal[data-lp-overlay="1"] .lp-modal__overlay { cursor: pointer; }

/* Fenster */
.lp-modal__dialog {
	position: relative;
	width: 100%;
	max-width: var(--lp-w);
	max-height: calc(100vh - 48px);
	max-height: calc(100dvh - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	border-radius: 16px;
	background: #fff;
	color: var(--lp-text);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
	opacity: 0;
	transform: translateY(16px) scale(.98);
	transition: opacity .28s ease, transform .32s cubic-bezier(.2, .8, .2, 1);
}
.lp-modal.is-open .lp-modal__dialog { opacity: 1; transform: none; }
.lp-modal__dialog:focus { outline: none; }

.lp-modal__body { padding: var(--lp-pad); }
.lp-modal--pad-none .lp-modal__dialog { overflow: hidden; }
.lp-modal--pad-none .lp-modal__content iframe,
.lp-modal--pad-none .lp-modal__content video { display: block; width: 100%; }

.lp-modal__title {
	margin: 0 48px .6em 0;
	font-size: clamp(1.45rem, 1.2rem + 1vw, 2rem);
	line-height: 1.15;
}
.lp-modal--pad-none .lp-modal__title { margin: 28px 64px 18px 28px; }

.lp-modal__content > *:first-child { margin-top: 0; }
.lp-modal__content > *:last-child { margin-bottom: 0; }
.lp-modal__content iframe { max-width: 100%; border: 0; }
/* Elementor-Container im Popup nicht auf Seitenbreite auslegen */
.lp-modal__content .e-con { --content-width: 100%; }
.lp-modal__content > .elementor > .e-con:first-child { --padding-top: 0px; }
.lp-modal__content > .elementor > .e-con:last-child { --padding-bottom: 0px; }

/* Schließen */
.lp-modal__close {
	position: sticky;
	top: 14px;
	float: right;
	z-index: 3;
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	margin: 14px 14px -54px 0;
	padding: 0;
	border: 0; border-radius: 50%;
	background: var(--lp-beige);
	color: var(--lp-heading);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.lp-modal__close svg { width: 18px; height: 18px; }
.lp-modal__close:hover { background: var(--lp-main); color: #fff; transform: rotate(90deg); }
.lp-modal__close:focus-visible { outline: 2px solid var(--lp-main); outline-offset: 2px; }
.lp-modal--pad-none .lp-modal__close { background: rgba(255, 255, 255, .92); box-shadow: 0 2px 10px rgba(0, 0, 0, .2); }

/* Hintergrund-Varianten */
.lp-modal--bg-beige .lp-modal__dialog { background: var(--lp-beige); }
.lp-modal--bg-beige .lp-modal__close { background: #fff; }
.lp-modal--bg-dark .lp-modal__dialog { background: var(--lp-dark); color: #E9E2DC; }
.lp-modal--bg-dark .lp-modal__title,
.lp-modal--bg-dark .lp-modal__content h1,
.lp-modal--bg-dark .lp-modal__content h2,
.lp-modal--bg-dark .lp-modal__content h3,
.lp-modal--bg-dark .lp-modal__content h4,
.lp-modal--bg-dark .lp-modal__content label { color: #fff; }
.lp-modal--bg-dark .lp-modal__close { background: rgba(255, 255, 255, .12); color: #fff; }

/* Scroll-Sperre der Seite */
html.lp-locked, html.lp-locked body { overflow: hidden; }
html.lp-locked body { padding-right: var(--lp-scrollbar, 0px); }

/* Smartphone: Bottom-Sheet */
@media (max-width: 599px) {
	.lp-modal { align-items: flex-end; padding: 0; }
	.lp-modal__dialog {
		max-width: 100%;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 20px 20px 0 0;
		transform: translateY(40px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}
	.lp-modal { --lp-pad: 26px 20px 28px; }
	.lp-modal--pad-compact { --lp-pad: 20px 16px 22px; }
	.lp-modal--pad-none { --lp-pad: 0px; }
	.lp-modal__dialog::before {
		content: ""; display: block;
		width: 40px; height: 4px; margin: 10px auto -4px;
		border-radius: 2px; background: rgba(0, 0, 0, .15);
	}
	.lp-modal--bg-dark .lp-modal__dialog::before { background: rgba(255, 255, 255, .25); }
	.lp-modal__close { width: 36px; height: 36px; margin: 8px 10px -44px 0; top: 8px; }
	.lp-modal__title { margin-right: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.lp-modal__overlay, .lp-modal__dialog, .lp-modal__close { transition: none; }
}

/* Vorschau (Elementor-Editor / Backend-Vorschau) */
.lp-preview-page { margin: 0; min-height: 100vh; background: #8a817c; }
.lp-modal--preview { position: relative; inset: auto; min-height: 100vh; padding: 48px 24px; visibility: visible; pointer-events: auto; align-items: flex-start; }
.lp-modal--preview .lp-modal__overlay { position: fixed; opacity: 1; cursor: default; }
.lp-modal--preview .lp-modal__dialog { max-height: none; overflow: visible; opacity: 1; transform: none; }
.lp-modal--preview .lp-modal__close { position: absolute; float: none; right: 0; top: 0; margin: 14px; }
@media (max-width: 599px) {
	.lp-modal--preview { padding: 24px 0 0; align-items: flex-end; }
}