/**
 * Kontrastsimulator - Frontend.
 *
 * Die beiden Farben kommen als benutzerdefinierte Eigenschaften herein und
 * werden vom Skript bei jeder Auswahl neu gesetzt.
 */

.p1x-kontrastsimulator {
	--p1x-kontrastsimulator-matte: #e9e9e9;
	--p1x-kontrastsimulator-aufdruck: #6f6f6f;

	margin: 0 0 1.5em;
}

.p1x-kontrastsimulator__matte {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 9em;
	padding: 1.5em;
	border-radius: 10px;
	background-color: var( --p1x-kontrastsimulator-matte );
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.08 );
	transition: background-color 0.2s ease;
}

.p1x-kontrastsimulator__text {
	color: var( --p1x-kontrastsimulator-aufdruck );
	font-size: 1.6em;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-wrap: balance;
	transition: color 0.2s ease;
}

/* Solange nicht beide Farben gewählt sind, bleibt die Fläche neutral. */
.p1x-kontrastsimulator:not( .is-ready ) .p1x-kontrastsimulator__matte {
	opacity: 0.45;
}

@media ( prefers-reduced-motion: reduce ) {

	.p1x-kontrastsimulator__matte,
	.p1x-kontrastsimulator__text {
		transition: none;
	}
}

/* --- Überlagerung eines Zielbereichs ---------------------------------- */

/*
 * Der Zielbereich wird zum Bezugsrahmen. Dadurch folgt die Vorschau seiner
 * Größe und Lage von selbst - auch beim Ändern der Fenstergröße.
 */
.p1x-kontrastsimulator-ziel {
	position: relative;
}

.p1x-kontrastsimulator.is-overlay {
	position: absolute;
	z-index: 5;
	inset: 0;
	margin: 0;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}

.p1x-kontrastsimulator.is-overlay.is-visible {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.p1x-kontrastsimulator.is-overlay .p1x-kontrastsimulator__matte {
	position: relative;
	height: 100%;
	min-height: 0;
	padding: 1.5em;
}

.p1x-kontrastsimulator.is-overlay .p1x-kontrastsimulator__text {
	font-size: clamp( 1.4em, 5vw, 3em );
}

/* --- Eingehaengte, dauerhafte Vorschau -------------------------------- */

/*
 * Der Shortcode nutzt den Zielbereich nur zum Platzieren: Die Vorschau steht
 * als gewoehnlicher Inhalt darin, statt ihn zu ueberlagern. Damit gelten
 * Breite, Innenabstand und Abstaende des Containers von selbst. Hat er eine
 * eigene Hoehe, waechst die Vorschau mit; sonst gibt der Inhalt sie vor.
 */
.p1x-kontrastsimulator--dauerhaft.is-eingehaengt {
	height: 100%;
	margin: 0;
}

.p1x-kontrastsimulator--dauerhaft.is-eingehaengt .p1x-kontrastsimulator__matte {
	height: 100%;
}

/* --- Schaltfläche zum Schließen --------------------------------------- */

/*
 * Kleiner Button in der Avada Primary Color mit weißer Schrift - dieselbe
 * Kombination wie bei den Avada-Buttons. Die Rückfallwerte entsprechen der
 * Palette des Shops, falls die Avada-Variablen einmal fehlen.
 */
/*
 * Zwei Faelle ohne Schaltflaeche zum Schliessen: die dauerhafte Vorschau des
 * Shortcodes, die nichts verdeckt und stehenbleiben soll, und eine Vorschau
 * ohne Zielbereich - dort haette der absolut gesetzte Button ausserdem keinen
 * Bezugsrahmen.
 */
.p1x-kontrastsimulator--dauerhaft .p1x-kontrastsimulator__schliessen,
.p1x-kontrastsimulator:not( .is-overlay ) .p1x-kontrastsimulator__schliessen {
	display: none;
}

.p1x-kontrastsimulator__schliessen {
	position: absolute;
	top: 0.8em;
	right: 0.8em;
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	padding: 0.6em 0.9em;
	border: 0;
	border-radius: var( --button-border-radius-top-left, 0 ) var( --button-border-radius-top-right, 0 ) var( --button-border-radius-bottom-right, 0 ) var( --button-border-radius-bottom-left, 0 );
	background-color: var( --awb-color4, #d51083 );
	color: var( --awb-color1, #ffffff );
	font-family: var( --button_typography-font-family, inherit );
	font-size: 12px;
	font-weight: var( --button_typography-font-weight, 700 );
	font-style: var( --button_typography-font-style, normal );
	line-height: 1;
	letter-spacing: var( --button_typography-letter-spacing, 0.08em );
	text-transform: var( --button_text_transform, uppercase );
	cursor: pointer;
	transition: filter 0.15s ease;
}

.p1x-kontrastsimulator__schliessen:hover,
.p1x-kontrastsimulator__schliessen:focus-visible {
	filter: brightness( 0.85 );
}

.p1x-kontrastsimulator__schliessen:focus-visible {
	outline: 2px solid var( --awb-color4, #d51083 );
	outline-offset: 2px;
}

.p1x-kontrastsimulator__schliessen svg {
	display: block;
	flex: none;
	width: 1em;
	height: 1em;
}

/*
 * Beim Öffnen der Vorschau poppt der Button mit 0,25 s Verzögerung auf, damit
 * er nicht gleichzeitig mit der Fläche erscheint. "backwards" hält ihn
 * während der Verzögerung unsichtbar. Läuft bei jedem Öffnen neu.
 */
@keyframes p1x-kontrastsimulator-pop {

	0% {
		opacity: 0;
		transform: scale( 0 );
	}

	70% {
		opacity: 1;
		transform: scale( 1.08 );
	}

	100% {
		opacity: 1;
		transform: scale( 1 );
	}
}

.p1x-kontrastsimulator.is-overlay.is-visible .p1x-kontrastsimulator__schliessen {
	animation: p1x-kontrastsimulator-pop 0.3s cubic-bezier( 0.34, 1.3, 0.64, 1 ) 0.25s backwards;
}

@media ( prefers-reduced-motion: reduce ) {

	.p1x-kontrastsimulator.is-overlay,
	.p1x-kontrastsimulator__schliessen {
		transition: none;
		animation: none;
	}
}