/* MAI Unified Popup-Wordpress – Frontend · MAI Dienstleistungs eG */

.mai-popup[hidden] { display: none !important; }

.mai-popup {
	--mp-z: 99990;
	--mp-w: 560px;
	--mp-mh: 90vh;
	--mp-pad: 32px;
	--mp-bg: #fff;
	--mp-fg: #1d2327;
	--mp-accent: #0b5cad;
	--mp-radius: 12px;
	--mp-bw: 0px;
	--mp-bc: #dcdcde;
	--mp-shadow: 0 20px 60px rgba(0, 0, 0, .28);
	--mp-ov: rgba(0, 0, 0, .6);
	--mp-blur: 0px;
	--mp-close: #1d2327;
	--mp-anim: 300ms;
	position: fixed;
	inset: 0;
	z-index: var(--mp-z);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	box-sizing: border-box;
	pointer-events: none;
}
.mai-popup *, .mai-popup *::before, .mai-popup *::after { box-sizing: border-box; }

/* Positionen */
.mai-popup--pos-top-center    { align-items: flex-start; justify-content: center; }
.mai-popup--pos-bottom-center { align-items: flex-end;   justify-content: center; }
.mai-popup--pos-top-left      { align-items: flex-start; justify-content: flex-start; }
.mai-popup--pos-top-right     { align-items: flex-start; justify-content: flex-end; }
.mai-popup--pos-bottom-left   { align-items: flex-end;   justify-content: flex-start; }
.mai-popup--pos-bottom-right  { align-items: flex-end;   justify-content: flex-end; }

/* Pop-up und Vollbild blockieren die Seite und liegen über Leisten/Slide-ins; Slide-in und Leiste blockieren nichts */
.mai-popup--modal, .mai-popup--fullscreen { pointer-events: auto; z-index: calc(var(--mp-z) + 1); }

.mai-popup__overlay {
	position: absolute;
	inset: 0;
	background: var(--mp-ov);
	-webkit-backdrop-filter: blur(var(--mp-blur));
	backdrop-filter: blur(var(--mp-blur));
	opacity: 0;
	transition: opacity var(--mp-anim) ease;
}
.mai-popup.is-open .mai-popup__overlay { opacity: 1; }

.mai-popup__dialog {
	position: relative;
	width: min(var(--mp-w), 100%);
	max-height: var(--mp-mh);
	overflow: auto;
	overscroll-behavior: contain;
	padding: var(--mp-pad);
	background-color: var(--mp-bg);
	background-image: var(--mp-bgimg, none);
	background-size: var(--mp-bgsize, cover);
	background-position: center;
	background-repeat: no-repeat;
	color: var(--mp-fg);
	border: var(--mp-bw) solid var(--mp-bc);
	border-radius: var(--mp-radius);
	box-shadow: var(--mp-shadow);
	pointer-events: auto;
	outline: none;
	opacity: 0;
	transition: opacity var(--mp-anim) ease, transform var(--mp-anim) cubic-bezier(.2, .8, .2, 1);
	-webkit-font-smoothing: antialiased;
}
.mai-popup.is-open .mai-popup__dialog { opacity: 1; transform: none; }

/* Animationen */
.mai-popup--anim-zoom .mai-popup__dialog        { transform: scale(.92); }
.mai-popup--anim-slide-up .mai-popup__dialog    { transform: translateY(48px); }
.mai-popup--anim-slide-down .mai-popup__dialog  { transform: translateY(-48px); }
.mai-popup--anim-slide-left .mai-popup__dialog  { transform: translateX(48px); }
.mai-popup--anim-slide-right .mai-popup__dialog { transform: translateX(-48px); }
.mai-popup--anim-none .mai-popup__dialog,
.mai-popup--anim-none .mai-popup__overlay { transition: none; }

@media (prefers-reduced-motion: reduce) {
	.mai-popup__dialog, .mai-popup__overlay { transition: none !important; transform: none !important; }
}

/* Vollbild */
.mai-popup--fullscreen { padding: 0; }
.mai-popup--fullscreen .mai-popup__dialog {
	width: 100%;
	height: 100%;
	max-height: none;
	border-radius: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.mai-popup--fullscreen .mai-popup__body { width: 100%; max-width: 920px; }

/* Slide-in */
.mai-popup--slidein { padding: 20px; }
.mai-popup--slidein .mai-popup__dialog { width: min(var(--mp-w), 100%); }

/* Hinweisleiste */
.mai-popup--bar { padding: 0; }
.mai-popup--bar.mai-popup--pos-top    { align-items: flex-start; }
.mai-popup--bar.mai-popup--pos-bottom { align-items: flex-end; }
.mai-popup--bar .mai-popup__dialog {
	width: 100%;
	max-height: none;
	border-radius: 0;
	border-width: 0;
	border-bottom: var(--mp-bw) solid var(--mp-bc);
	padding: calc(var(--mp-pad) * .5) calc(var(--mp-pad) + 36px) calc(var(--mp-pad) * .5) var(--mp-pad);
}
.mai-popup--bar.mai-popup--pos-bottom .mai-popup__dialog { border-bottom: 0; border-top: var(--mp-bw) solid var(--mp-bc); }
.mai-popup--bar .mai-popup__content { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 20px; }
.mai-popup--bar .mai-popup__content > * { margin: 0 !important; }
.mai-popup--bar .mai-popup__close { top: 50%; transform: translateY(-50%); }

/* Schließen-Button */
.mai-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--mp-close);
	cursor: pointer;
	line-height: 1;
	box-shadow: none;
	transition: background-color .15s ease, opacity .2s ease;
}
.mai-popup__close:hover, .mai-popup__close:focus-visible { background: rgba(127, 127, 127, .18); }
.mai-popup__close:focus-visible { outline: 2px solid var(--mp-accent); outline-offset: 2px; }
.mai-popup__close.is-delayed { opacity: 0; visibility: hidden; }
.mai-popup--close-outside.mai-popup--modal .mai-popup__dialog,
.mai-popup--close-outside.mai-popup--slidein .mai-popup__dialog { overflow: visible; }
.mai-popup--close-outside.mai-popup--modal .mai-popup__body,
.mai-popup--close-outside.mai-popup--slidein .mai-popup__body { max-height: calc(var(--mp-mh) - var(--mp-pad) * 2); overflow: auto; }
.mai-popup--close-outside.mai-popup--modal .mai-popup__close,
.mai-popup--close-outside.mai-popup--slidein .mai-popup__close {
	top: -14px;
	right: -14px;
	background: var(--mp-bg);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

/* Inhalt */
.mai-popup__content > :first-child, .mai-popup__body > :first-child { margin-top: 0; }
.mai-popup__content > :last-child { margin-bottom: 0; }
.mai-popup__title { margin: 0 0 .6em; padding-right: 32px; color: inherit; font-size: 1.5em; line-height: 1.25; }
.mai-popup__content { color: inherit; }
.mai-popup__content a:not(.wp-block-button__link):not(.wp-element-button) { color: var(--mp-accent); }
.mai-popup__content img { max-width: 100%; height: auto; }
.mai-popup__image { margin: calc(var(--mp-pad) * -1) calc(var(--mp-pad) * -1) var(--mp-pad); }
.mai-popup__image img { display: block; width: 100%; height: auto; border-radius: var(--mp-radius) var(--mp-radius) 0 0; }
.mai-popup__sr {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

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

@media (max-width: 600px) {
	.mai-popup--modal { padding: 12px; }
	.mai-popup--modal .mai-popup__dialog { max-height: 92vh; padding: min(var(--mp-pad), 22px); }
	.mai-popup--slidein { padding: 10px; align-items: flex-end; justify-content: center; }
	.mai-popup--close-outside .mai-popup__close { top: 8px !important; right: 8px !important; }
	.mai-popup--bar .mai-popup__content { justify-content: flex-start; }
}

/* Öffnen-Links */
.mai-popup-open { cursor: pointer; }

/* Anmeldeformular */
.mai-popup-form { display: grid; gap: 10px; margin: 1em 0 0; position: relative; }
.mai-popup-form label.mai-popup-form__label { display: block; font-size: .9em; font-weight: 600; margin: 0 0 4px; }
.mai-popup-form input[type="text"],
.mai-popup-form input[type="email"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	font: inherit;
	color: #1d2327;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .28);
	border-radius: 6px;
	box-shadow: none;
}
.mai-popup-form input:focus-visible { outline: 2px solid var(--mp-accent, #0b5cad); outline-offset: 1px; border-color: var(--mp-accent, #0b5cad); }
.mai-popup-form__consent { display: flex; gap: 8px; align-items: flex-start; font-size: .85em; line-height: 1.45; }
.mai-popup-form__consent input { margin-top: .2em; flex: 0 0 auto; width: 18px; height: 18px; }
.mai-popup-form__consent a { color: inherit; text-decoration: underline; }
.mai-popup-form button[type="submit"] {
	display: block;
	width: 100%;
	padding: 13px 18px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var(--mp-accent, #0b5cad);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: filter .15s ease;
}
.mai-popup-form button[type="submit"]:hover { filter: brightness(1.08); }
.mai-popup-form button[type="submit"]:disabled { opacity: .7; cursor: wait; }
.mai-popup-form__hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.mai-popup-form__msg { font-size: .9em; }
.mai-popup-form__msg.is-error { color: #b32d2e; }
.mai-popup-form__done { padding: 14px 16px; margin-top: 1em; border-radius: 6px; background: rgba(11, 122, 59, .1); border-left: 4px solid #0b7a3b; }
.mai-popup-form--inline { grid-template-columns: 1fr auto; align-items: end; }
.mai-popup-form--inline .mai-popup-form__consent, .mai-popup-form--inline .mai-popup-form__msg { grid-column: 1 / -1; }

/* Überschrift am Anfang nicht unter den Schließen-Button laufen lassen */
.mai-popup--close-inside:not(.mai-popup--bar) .mai-popup__body > .mai-popup__title,
.mai-popup--close-inside:not(.mai-popup--bar) .mai-popup__content > :first-child:is(h1, h2, h3, h4, h5, h6, p) { padding-left: 30px; padding-right: 30px; }
.mai-popup--close-inside:not(.mai-popup--bar) .mai-popup__content > :first-child:is(h1, h2, h3, h4, h5, h6, p):not(.has-text-align-center) { padding-left: 0; }

/* Login-Formular */
.mai-popup-login__pass { position: relative; }
.mai-popup-login__pass input[type="password"],
.mai-popup-login__pass input[type="text"] { padding-right: 48px !important; }
.mai-popup-form input[type="password"] {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 14px;
	font: inherit;
	color: #1d2327;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .28);
	border-radius: 6px;
	box-shadow: none;
}
.mai-popup-login__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #50575e;
	cursor: pointer;
}
.mai-popup-login__toggle:hover, .mai-popup-login__toggle:focus-visible { color: #1d2327; background: rgba(0, 0, 0, .06); }
.mai-popup-login__toggle[aria-pressed="true"] { color: var(--mp-accent, #0b5cad); }
.mai-popup-login__links { margin: 4px 0 0; font-size: .9em; text-align: center; }
.mai-popup-login__links a { color: inherit; text-decoration: underline; }
.mai-popup-login--in { text-align: center; }
.mai-popup-login--in p { margin: 0 0 .6em; }
.mai-popup-form__msg:not(.is-error) { color: #0b7a3b; }