@property --transition-delay {
	syntax: "<time>";
	inherits: false;
	initial-value: 0.5s;
}

@property --transition-delay-add {
	syntax: "<time>";
	inherits: false;
	initial-value: 0s;
}

@property --transition-delay-index {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

@property --transition-duration {
	syntax: "<time>";
	inherits: false;
	initial-value: 2s;
}

@property --transition-duration-short {
	syntax: "<time>";
	inherits: false;
	initial-value: 1.3s;
}

@property --transition-gradient-color {
	syntax: "<color>";
	inherits: false;
	initial-value: rgba(0, 0, 0, 1);
}


@property --transition-end-remove-transform {
	syntax: "<integer>";
	inherits: false;
	initial-value: -1;
}

:root
{
	--transition-fade: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
	--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
}

.transition-intro-fade
{
	opacity: 1;
	visibility: visible;
	transition: var(--transition-fade);
	--transition-end-remove-transform:1;

	@starting-style
	{
		opacity: 0;
		visibility: hidden;
	}
}

.transition-intro-fade-transform
{
	opacity: 1;
	visibility: visible;
	transform: scale3d(1,1,1) translate3d(0,0,0);
	transition: var(--transition-fade-tranform);
	--transition-end-remove-transform:1;
	
	@starting-style
	{
		opacity: 0;
		transform: translate3d(0, -100px, 0);
		visibility: hidden;
	}
}


/**
	HOME
 */
.page-template-page-home
{
	.fixed-nav
	{
		.menu-item
		{
			overflow: hidden;

			span
			{
				position: relative;
				display: block;

				--transition-delay-add:0.3s;
				--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
				--transition-end-remove-transform:1;
				transition: var(--transition-fade-tranform);

				opacity: 1;
				transform: scale3d(1,1,1) translate3d(0,0,0);
				visibility: visible;




				@starting-style
				{
					opacity: 0;
					transform: translate3d(0, -100px, 0);
					visibility: hidden;
				}
			}

			&:nth-child(2)
			{
				span
				{
					--transition-delay-add:0.45s;
					--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
					--transition-end-remove-transform:1;
					transition: var(--transition-fade-tranform);
				}
			}
		}
	}

	.menu
	{
		overflow: hidden;

		.header-burger-icon
		{
			--transition-delay-add:0.6s;
			--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
			--transition-end-remove-transform:1;
			transition: var(--transition-fade-tranform);
			opacity: 1;
			transform: scale3d(1,1,1) translate3d(0,0,0);
			visibility: visible;

			@starting-style
			{
				opacity: 0;
				transform: translate3d(0, -100px, 0);
				visibility: hidden;
			}
		}
	}

	[data-pattern="ho/header-startseite"]
	{
		.teaser-home-large-wrapper
		{
			position: relative;
			margin-top: calc(-1 * calc(1vh +  var(--header-height)));

			overflow: hidden;
		}

		.wp-block-ho-lane-item
		{
			overflow: hidden;
			position: relative;


			&:first-child
			{
				.teaser-home-large-contents
				{
					overflow: hidden;

					.height-container
					{
						--transition-delay-add:0s;
						--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
						--transition-end-remove-transform:1;
						transition: var(--transition-fade-tranform);
						transform: scale3d(1,1,1) translate3d(0,0,0);
						opacity: 1;
						visibility: visible;

						@starting-style
						{
							opacity: 0;
							transform: scale3d(1.2,1.2,1.2);
							visibility: hidden;
						}
					}
				}

				.teaser-home-large-exhibition-image-text-content-text
				{
					--gradient-opacity: 1;
					--transition-delay-add:0.2s;
					--transition-gradient-color: rgba(0, 0, 0, 0.61);
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, var(--transition-gradient-color) 100%);

					transition: --transition-gradient-color var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add));

					@starting-style
					{
						--transition-gradient-color: rgba(0, 0, 0, 0);
					}

					.colors-are-inverted
					{
						overflow: hidden;

						.ho-tag
						{
							--transition-delay-add:0.6s;
							--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
							--transition-end-remove-transform:1;
							transition: var(--transition-fade-tranform);
							opacity: 1;
							transform: scale3d(1,1,1) translate3d(0,0,0);
							visibility: visible;

							@starting-style
							{
								opacity: 0;
								transform: translate3d(0, 100px, 0);
								visibility: hidden;
							}
						}

						.ho-button
						{
							--transition-delay-add:0.9s;
							--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
							--transition-end-remove-transform:1;
							transition: var(--transition-fade-tranform);
							opacity: 1;
							transform: scale3d(1,1,1) translate3d(0,0,0);
							visibility: visible;

							@starting-style
							{
								opacity: 0;
								transform: translate3d(0, 100px, 0);
								visibility: hidden;
							}
						}
					}

					h2
					{
						--transition-delay-add:0.6s;
						transition: overflow var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;

						div
						{
							--transition-delay-add:calc(0.8s + calc(0.15s * var(--transition-delay-index)));
							--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
							--transition-end-remove-transform:1;
							transition: var(--transition-fade-tranform);
							opacity: 1;
							transform: scale3d(1,1,1) translate3d(0,0,0);
							visibility: visible;

							@starting-style
							{
								opacity: 0;
								transform: translate3d(0, 100px, 0);
								visibility: hidden;
							}
						}

						@starting-style
						{
							overflow: hidden;
						}
					}
				}
			}

			&:nth-child(2)
			{
				--transition-delay-add:0.2s;
				--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
				--transition-end-remove-transform:1;
				transition: var(--transition-fade-tranform);
				opacity: 1;
				transform: scale3d(1,1,1) translate3d(0,0,0);
				visibility: visible;

				@starting-style
				{
					opacity: 0;
					visibility: hidden;
				}
			}
		}
	}
}



/**
	AUSSTELLUNG
 */

.single-exhibition
{
	.ho-sd-h1
	{
		--transition-delay-add:0s;
		transition: overflow var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;

		div
		{
			--transition-delay-add:calc(0s + calc(0.15s * var(--transition-delay-index)));
			--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
			--transition-end-remove-transform:1;
			transition: var(--transition-fade-tranform);
			opacity: 1;
			transform: scale3d(1,1,1) translate3d(0,0,0);
			visibility: visible;

			@starting-style
			{
				opacity: 0;
				transform: translate3d(0, 100px, 0);
				visibility: hidden;
			}
		}

		@starting-style
		{
			overflow: hidden;
		}
	}

	.ho-tag-group
	{
		overflow: hidden;

		.ho-tag
		{
			--transition-delay-add:0.3s;
			--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
			--transition-end-remove-transform:1;
			transition: var(--transition-fade-tranform);
			opacity: 1;
			transform: scale3d(1,1,1) translate3d(0,0,0);
			visibility: visible;

			@starting-style
			{
				opacity: 0;
				transform: translate3d(0, 100px, 0);
				visibility: hidden;
			}
		}
	}


	.header-exhibition-copy-wrapper
	{
		--transition-delay-add:0.8s;
		--transition-fade: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
		transition: var(--transition-fade);
		opacity: 1;
		visibility: visible;

		@starting-style
		{
			opacity: 0;
			visibility: hidden;
		}
	}
}




/**
	PROGRAMM-SEITE
 */
.page-template-page-program
{
	.menu
	{
		overflow: hidden;

		.header-burger-icon
		{
			--transition-delay-add:0.6s;
			--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
			--transition-end-remove-transform:1;
			transition: var(--transition-fade-tranform);
			opacity: 1;
			transform: scale3d(1,1,1) translate3d(0,0,0);
			visibility: visible;

			@starting-style
			{
				opacity: 0;
				transform: translate3d(0, -100px, 0);
				visibility: hidden;
			}
		}
	}

	.col:has(h1)
	{
		overflow: hidden;
	}

	h1
	{
		--transition-delay-add:0s;
		--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
		--transition-end-remove-transform:1;
		transition: var(--transition-fade-tranform);
		opacity: 1;
		transform: scale3d(1,1,1) translate3d(0,0,0);
		visibility: visible;

		@starting-style
		{
			opacity: 0;
			transform: translate3d(0, 100px, 0);
			visibility: hidden;
		}
	}
}


.page-template-page-program
{
	[data-pattern='ho/teaser-ausstellung-grid-2er']
	{
		.wp-block-ho-lane-item
		{
			overflow: hidden;

			& > div
			{
				--transition-delay-add:0.15s;
				--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
				--transition-end-remove-transform:1;
				transition: var(--transition-fade-tranform);
				opacity: 1;
				transform: scale3d(1,1,1) translate3d(0,0,0);
				visibility: visible;

				@starting-style
				{
					opacity: 0;
					transform: translate3d(0, 15vh, 0);
					visibility: hidden;
				}
			}

			.wp-block-ho-slot
			{
				--transition-delay-add:0.3s;
				--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
				--transition-end-remove-transform:1;
				transition: var(--transition-fade-tranform);
				opacity: 1;
				transform: scale3d(1,1,1) translate3d(0,0,0);
				visibility: visible;

				@starting-style
				{
					opacity: 0;
					transform: translate3d(0, 15vh, 0);
					visibility: hidden;
				}
			}

			&:last-of-type
			{
				& > div
				{
					--transition-delay-add:0.3s;
					--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
					--transition-end-remove-transform:1;
					transition: var(--transition-fade-tranform);
					opacity: 1;
					transform: scale3d(1,1,1) translate3d(0,0,0);
					visibility: visible;

					@starting-style
					{
						opacity: 0;
						transform: translate3d(0, 10vh, 0);
						visibility: hidden;
					}
				}

				.wp-block-ho-slot
				{
					--transition-delay-add:0.45s;
					--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
					--transition-end-remove-transform:1;
					transition: var(--transition-fade-tranform);
					opacity: 1;
					transform: scale3d(1,1,1) translate3d(0,0,0);
					visibility: visible;

					@starting-style
					{
						opacity: 0;
						transform: translate3d(0, 10vh, 0);
						visibility: hidden;
					}
				}
			}
		}
	}

	.page-program-datepicker
	{
		--transition-delay-add:1s;
		--transition-fade-tranform: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), transform var(--transition-duration-short) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
		--transition-end-remove-transform:1;
		transition: var(--transition-fade-tranform);
		opacity: 1;
		visibility: visible;

		@starting-style
		{
			opacity: 0;
			visibility: hidden;
		}
	}
}

.transition-end-remove-transform
{
	transform: initial !important;
	opacity: initial !important;
}

.site-global-frame
{
	background: var(--color-mag-01);
	opacity: 1;
	visibility: visible;
	--transition-delay-add:0s;
	--transition-duration:0.8s;
	--transition-fade: opacity var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-sine) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;

	transition: var(--transition-fade);
	--transition-end-remove-transform:1;

	@starting-style
	{
		opacity: 0;
		visibility: hidden;
	}
}

.datepicker-backdrop {
	opacity: 0;
	visibility: hidden;
	--transition-delay:0s;
	--transition-delay-add:0s;
	--transition-duration:1s;
	--transition-fade: opacity var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
	transition: var(--transition-fade);

	&.open
	{
		opacity: 1;
		visibility: visible;
	}

	@starting-style
	{
		&.open {
			opacity: 0;
			visibility: hidden;
		}
	}
}

.page-program-datepicker-contents
{
	opacity: 0;
	visibility: hidden;
	--transition-delay:0s;
	--transition-delay-add:0s;
	--transition-duration:1s;
	--transition-fade: opacity var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)), visibility var(--transition-duration) var(--ease-out-expo) calc(var(--transition-delay) + var(--transition-delay-add)) allow-discrete;
	transition: var(--transition-fade);

	&.show
	{
		opacity: 1;
		visibility: visible;
	}

	@starting-style
	{
		&.show {
			opacity: 0;
			visibility: hidden;
		}
	}
}