/* EM Popup Studio – Frontend
   EIGENMANN MEDIA GMBH
   -------------------------------------------------- */

.emps-popup {
	position: fixed;
	inset: 0;
	z-index: var(--emps-z, 999999);
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
	box-sizing: border-box;
	font-family: var(--emps-font, inherit);
	-webkit-font-smoothing: antialiased;
}

.emps-popup.emps-is-open {
	display: flex;
}

.emps-pos-top { align-items: flex-start; }
.emps-pos-bottom { align-items: flex-end; }

.emps-overlay {
	position: absolute;
	inset: 0;
	background: var(--emps-overlay, rgba(0, 0, 0, .6));
	backdrop-filter: blur(var(--emps-blur, 0));
	-webkit-backdrop-filter: blur(var(--emps-blur, 0));
	cursor: pointer;
}

.emps-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--emps-width, 560px);
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--emps-bg, #fff);
	border-radius: var(--emps-radius, 12px);
	box-shadow: var(--emps-shadow, 0 24px 60px rgba(0, 0, 0, .28));
	box-sizing: border-box;
}

.emps-body {
	padding: var(--emps-padding, 40px);
	text-align: var(--emps-align, center);
}

/* Typografie ---------------------------------------- */

.emps-popup .emps-heading {
	margin: 0 0 12px;
	padding: 0;
	color: var(--emps-heading, #111);
	font-family: inherit;
	font-size: var(--emps-heading-size, 28px);
	line-height: 1.25;
	font-weight: 700;
}

.emps-popup .emps-text {
	color: var(--emps-text, #444);
	font-size: var(--emps-text-size, 16px);
	line-height: 1.6;
}

.emps-popup .emps-text p:last-child { margin-bottom: 0; }
.emps-popup .emps-text a { color: inherit; }

.emps-image {
	margin: 0 0 20px;
}

.emps-image img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: calc(var(--emps-radius, 12px) / 2);
}

/* Call to Action ------------------------------------ */

.emps-actions {
	margin-top: 24px;
}

.emps-popup .emps-cta {
	display: inline-block;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	font-family: inherit;
	font-weight: 600;
	line-height: 1.2;
	background: var(--emps-btn-bg, #1a73e8);
	color: var(--emps-btn-color, #fff);
	border-radius: var(--emps-btn-radius, 6px);
	font-size: var(--emps-btn-size, 16px);
	padding: var(--emps-btn-pad-v, 14px) var(--emps-btn-pad-h, 28px);
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.emps-popup .emps-cta:hover,
.emps-popup .emps-cta:focus {
	background: var(--emps-btn-bg-h, #1557b0);
	color: var(--emps-btn-color-h, #fff);
	text-decoration: none;
}

.emps-btn-block .emps-cta {
	display: block;
	width: 100%;
	text-align: center;
}

/* Schliessen ---------------------------------------- */

.emps-popup .emps-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--emps-close-size, 34px);
	height: var(--emps-close-size, 34px);
	padding: 0;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--emps-close-bg, transparent);
	color: var(--emps-close-color, #888);
	transition: opacity .2s ease, transform .2s ease;
	opacity: .85;
}

.emps-popup .emps-close:hover,
.emps-popup .emps-close:focus {
	opacity: 1;
	transform: rotate(90deg);
}

.emps-popup .emps-close svg {
	width: 60%;
	height: 60%;
	fill: none;
}

.emps-close-outside .emps-close {
	top: -46px;
	right: 0;
}

.emps-close-outside .emps-dialog {
	margin-top: 46px;
	overflow: visible;
}

.emps-close-outside .emps-body {
	overflow-y: auto;
	max-height: calc(100vh - 140px);
}

/* Fokus --------------------------------------------- */

.emps-popup :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Animationen --------------------------------------- */

.emps-is-open .emps-overlay {
	animation: emps-fade .25s ease both;
}

.emps-anim-fade.emps-is-open .emps-dialog { animation: emps-fade .3s ease both; }
.emps-anim-fade-up.emps-is-open .emps-dialog { animation: emps-fade-up .35s cubic-bezier(.2, .7, .3, 1) both; }
.emps-anim-zoom.emps-is-open .emps-dialog { animation: emps-zoom .3s cubic-bezier(.2, .7, .3, 1) both; }

@keyframes emps-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes emps-fade-up {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes emps-zoom {
	from { opacity: 0; transform: scale(.92); }
	to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.emps-popup *,
	.emps-popup .emps-dialog,
	.emps-popup .emps-overlay {
		animation: none !important;
		transition: none !important;
	}
}

/* Scroll-Sperre ------------------------------------- */

html.emps-locked,
body.emps-locked {
	overflow: hidden !important;
}

/* Trigger-Elemente (Shortcode) ---------------------- */

.emps-trigger--button {
	display: inline-block;
	cursor: pointer;
	font: inherit;
	padding: 12px 24px;
	border: 0;
	border-radius: 4px;
	background: #1a73e8;
	color: #fff;
}

.emps-trigger--link {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* Responsive ---------------------------------------- */

@media (max-width: 600px) {
	.emps-popup {
		padding: 16px;
	}

	.emps-body {
		padding: clamp(20px, 6vw, var(--emps-padding, 40px));
	}

	.emps-popup .emps-heading {
		font-size: calc(var(--emps-heading-size, 28px) * .82);
	}

	.emps-close-outside .emps-close {
		top: 8px;
		right: 8px;
	}

	.emps-close-outside .emps-dialog {
		margin-top: 0;
	}
}