/**
 * Popup Manager & Editor – Frontend-Styles.
 *
 * Alle Selektoren sind unter dem Namespace ".pm-popup" gekapselt, damit
 * keine Theme- oder Plugin-Styles überschrieben werden (Abschnitt 30).
 * Farben/Transparenzen laufen über CSS-Variablen mit sinnvollen Defaults.
 */

.pm-popup {
	--pm-popup-overlay-color: 0, 0, 0;
	--pm-popup-overlay-opacity: 0.6;
	--pm-popup-max-height: 90vh;
	--pm-popup-radius: 6px;
	--pm-popup-animation-duration: 200ms;
	/* Von den Design-Layouts genutzter Akzentton; über das eigene CSS-Feld
	   (Tab "Design" bzw. globale Einstellung) leicht überschreibbar, z. B.
	   #pm-popup-123 { --pm-popup-accent: #e63946; } */
	--pm-popup-accent: #2271b1;

	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
}

.pm-popup[hidden] {
	display: none;
}

.pm-popup__overlay {
	position: absolute;
	inset: 0;
	background-color: rgba( var( --pm-popup-overlay-color ), var( --pm-popup-overlay-opacity ) );
	opacity: 0;
}

.pm-popup.is-open .pm-popup__overlay {
	opacity: 1;
}

.pm-popup[class*="pm-popup--anim-"] .pm-popup__overlay {
	transition: opacity var( --pm-popup-animation-duration ) ease;
}

.pm-popup__dialog {
	position: relative;
	margin: auto;
	width: min( var( --pm-popup-width, 600px ), calc( 100% - 2rem ) );
	max-height: var( --pm-popup-max-height );
	overflow-y: auto;
	background: var( --pm-popup-bg, #fff );
	color: var( --pm-popup-fg, inherit );
	border-radius: var( --pm-popup-radius );
	border-width: var( --pm-popup-border-width, 0px );
	border-style: var( --pm-popup-border-style, solid );
	border-color: var( --pm-popup-border-color, transparent );
	box-shadow: var( --pm-popup-shadow, 0 10px 40px rgba( 0, 0, 0, 0.2 ) );
	padding: 2rem;
}

/* Animationsvarianten (Abschnitt 20). Ohne "pm-popup--anim-*"-Klasse (Animation
   "keine") erscheint der Dialog sofort, ohne Transition. */
.pm-popup[class*="pm-popup--anim-"] .pm-popup__dialog {
	transition: opacity var( --pm-popup-animation-duration ) ease, transform var( --pm-popup-animation-duration ) ease;
}

.pm-popup--anim-fade .pm-popup__dialog {
	opacity: 0;
	transform: translateY( 12px );
}

.pm-popup--anim-zoom .pm-popup__dialog {
	opacity: 0;
	transform: scale( 0.92 );
}

.pm-popup--anim-slide-up .pm-popup__dialog {
	opacity: 0;
	transform: translateY( 40px );
}

.pm-popup--anim-slide-down .pm-popup__dialog {
	opacity: 0;
	transform: translateY( -40px );
}

.pm-popup--anim-slide-left .pm-popup__dialog {
	opacity: 0;
	transform: translateX( 40px );
}

.pm-popup--anim-slide-right .pm-popup__dialog {
	opacity: 0;
	transform: translateX( -40px );
}

.pm-popup[class*="pm-popup--anim-"].is-open .pm-popup__dialog {
	opacity: 1;
	transform: translate( 0, 0 ) scale( 1 );
}

/* Positionierung (Abschnitt 16). */
.pm-popup--position-top .pm-popup__dialog {
	margin-top: 2rem;
	margin-bottom: auto;
}

.pm-popup--position-bottom .pm-popup__dialog {
	margin-top: auto;
	margin-bottom: 2rem;
}

.pm-popup--position-top-left .pm-popup__dialog {
	margin: 2rem auto auto 2rem;
}

.pm-popup--position-top-right .pm-popup__dialog {
	margin: 2rem 2rem auto auto;
}

.pm-popup--position-bottom-left .pm-popup__dialog {
	margin: auto auto 2rem 2rem;
}

.pm-popup--position-bottom-right .pm-popup__dialog {
	margin: auto 2rem 2rem auto;
}

/* Design-Layouts: 10 vorgefertigte optische Varianten der Popup-Box.
   "standard" braucht keine eigene Regel, das ist bereits die Basisoptik von
   .pm-popup__dialog oben. Jede Variante setzt nur die Design-Variablen
   (--pm-popup-bg/-fg/-radius/-border-*/-shadow), die .pm-popup__dialog oben
   tatsächlich ausliest – dadurch können die "Schnell-Overrides" im
   Design-Tab (einzelne Felder für Hintergrund, Rahmen, Ecken, Schatten)
   jede Variante gezielt überschreiben, ohne dass Layout-Regeln erneut
   gewinnen: dieselbe Variable, in der Inline-"style"-Deklaration des
   Containers gesetzt, hat unabhängig von der Selektor-Spezifität stets
   Vorrang vor einer Klassen-Regel hier. Rein strukturelle Eigenschaften
   (Innenabstand, Schriftart, zusätzliche Deko-Elemente) bleiben eigene,
   nicht überschreibbare Regeln, da dafür keine Schnellfelder existieren. */

.pm-popup--layout-minimal {
	--pm-popup-radius: 2px;
	--pm-popup-shadow: none;
	--pm-popup-border-width: 1px;
	--pm-popup-border-color: #e0e0e0;
}

.pm-popup--layout-minimal .pm-popup__dialog {
	padding: 2.5rem;
}

.pm-popup--layout-karte {
	--pm-popup-radius: 14px;
	--pm-popup-shadow: 0 20px 60px rgba( 0, 0, 0, 0.16 );
}

.pm-popup--layout-modern-rund {
	--pm-popup-radius: 28px;
	--pm-popup-shadow: 0 16px 40px rgba( 0, 0, 0, 0.15 );
}

.pm-popup--layout-modern-rund .pm-popup__dialog {
	border-top: 6px solid var( --pm-popup-accent );
}

.pm-popup--layout-dunkel {
	--pm-popup-bg: #1e1e1e;
	--pm-popup-fg: #f2f2f2;
	--pm-popup-radius: 10px;
	--pm-popup-border-width: 1px;
	--pm-popup-border-color: rgba( 255, 255, 255, 0.08 );
	--pm-popup-shadow: 0 20px 50px rgba( 0, 0, 0, 0.45 );
}

.pm-popup--layout-farbenfroh {
	--pm-popup-bg: linear-gradient( 135deg, var( --pm-popup-accent ), #8b5cf6 );
	--pm-popup-fg: #fff;
	--pm-popup-radius: 18px;
	--pm-popup-shadow: 0 20px 50px rgba( 0, 0, 0, 0.25 );
}

.pm-popup--layout-elegant {
	--pm-popup-bg: #faf7f0;
	--pm-popup-fg: #2e2a22;
	--pm-popup-radius: 4px;
	--pm-popup-border-width: 1px;
	--pm-popup-border-color: #c9a96e;
	--pm-popup-shadow: 0 10px 30px rgba( 0, 0, 0, 0.12 );
}

.pm-popup--layout-elegant .pm-popup__dialog {
	font-family: Georgia, "Times New Roman", serif;
}

.pm-popup--layout-doppelrahmen {
	--pm-popup-radius: 0;
	--pm-popup-shadow: none;
	--pm-popup-border-width: 3px;
	--pm-popup-border-style: double;
	--pm-popup-border-color: var( --pm-popup-accent );
}

.pm-popup--layout-doppelrahmen .pm-popup__dialog {
	outline: 1px solid var( --pm-popup-border-color, var( --pm-popup-accent ) );
	outline-offset: 6px;
}

.pm-popup--layout-grosser-schatten {
	--pm-popup-radius: 20px;
	--pm-popup-shadow: 0 40px 80px rgba( 0, 0, 0, 0.28 );
}

.pm-popup--layout-banner {
	--pm-popup-radius: 8px;
	--pm-popup-shadow: 0 16px 40px rgba( 0, 0, 0, 0.18 );
}

.pm-popup--layout-banner .pm-popup__dialog {
	padding-top: 2.75rem;
	position: relative;
}

.pm-popup--layout-banner .pm-popup__dialog::before {
	/* Eigener border-radius an den oberen Ecken statt overflow:hidden auf dem
	   Dialog, damit die vertikale Scrollbarkeit bei langem Inhalt erhalten
	   bleibt (Abschnitt 59). */
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 8px;
	background: var( --pm-popup-accent );
	border-radius: 8px 8px 0 0;
}

.pm-popup__close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 50%;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.pm-popup__close:hover,
.pm-popup__close:focus-visible {
	/* currentColor-basiert statt fest Schwarz, damit der Hover-Zustand auch
	   auf dunklen/farbigen Design-Layouts sichtbar bleibt. */
	background: color-mix( in srgb, currentColor 12%, transparent );
}

.pm-popup__title.screen-reader-text {
	border: 0;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.pm-popup__content {
	overflow-wrap: break-word;
}

.pm-popup__test-badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	background: #d63638;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	z-index: 1;
}

body.pm-scroll-locked {
	overflow: hidden;
}

/* Die Breite selbst wird ausschließlich über min( var(--pm-popup-width), calc(100% - 2rem) )
   oben gesteuert, damit ein per Popup konfigurierter Tablet-/Mobile-Override (siehe
   templates/popup.php) nicht von einer fest kodierten Breite hier überschrieben wird –
   min() garantiert dabei bereits auf jeder Bildschirmgröße, dass der Dialog nie über den
   Viewport hinausragt (Abschnitt 58/59). Hier nur noch enger werdendes Padding. */
@media ( max-width: 600px ) {
	.pm-popup__dialog {
		padding: 1.5rem;
		margin: auto;
	}
}

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