/* GZMEDIA SlideIn — Basis-Struktur.
   Instanzspezifische Farben, Größen und Positionen werden pro SlideIn inline
   eingefügt; diese Datei enthält nur gemeinsame Struktur, Einblend-Animationen
   und den Schließen-Button. */

.gzsi {
	line-height: 1.4;
	font-family: inherit;
}

.gzsi * {
	box-sizing: border-box;
}

.gzsi__anim {
	position: relative;
}

.gzsi__text {
	display: block;
}

.gzsi__close {
	position: absolute;
	top: 4px;
	right: 6px;
	z-index: 3;
	width: 22px;
	height: 22px;
	padding: 0;
	margin: 0;
	line-height: 20px;
	font-size: 18px;
	text-align: center;
	color: inherit;
	background: rgba(255, 255, 255, 0.7);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: 0.7;
}

.gzsi__close:hover,
.gzsi__close:focus {
	opacity: 1;
}

/* Nach dem Schließen ausgeblendet. */
.gzsi.is-dismissed {
	display: none !important;
}

/* ------------------------------------------------------------------ */
/* Einblend-Animationen (Divi-Stil)                                    */
/* ------------------------------------------------------------------ */

.gzsi-anim {
	animation-name: gzsiIn;
	animation-duration: var(--gzsi-dur, 600ms);
	animation-delay: var(--gzsi-delay, 0ms);
	animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
	animation-fill-mode: both;
}

@keyframes gzsiIn {
	from {
		opacity: var(--gzsi-from-op, 0);
		transform: var(--gzsi-from-transform, none);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.gzsi-anim--bounce {
	animation-name: gzsiBounce;
	animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
}

@keyframes gzsiBounce {
	0% {
		opacity: 0;
		transform: translate(var(--gzsi-bx, 0), var(--gzsi-by, 0));
	}
	60% {
		opacity: 1;
		transform: translate(calc(var(--gzsi-bx, 0) * -0.12), calc(var(--gzsi-by, 0) * -0.12));
	}
	80% {
		transform: translate(calc(var(--gzsi-bx, 0) * 0.05), calc(var(--gzsi-by, 0) * 0.05));
	}
	100% {
		opacity: 1;
		transform: none;
	}
}

/* Bewegungsreduzierung respektieren. */
@media (prefers-reduced-motion: reduce) {
	.gzsi__secondary {
		transition: none !important;
	}

	.gzsi-anim {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}
}