/* ==========================================================================
   PW Soft Nav – Vollbild-Overlays mit Soft-Flow-Animation
   ========================================================================== */

.pw-overlay {
	position: fixed;
	inset: 0;
	z-index: 2000; /* bewusst über euren StickElements-Buttons (ZI 1000) */
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
        padding-left: 1rem;
        padding-bottom: 3rem;
	background: var(--wp--preset--color--foreground, #fff);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}

.pw-overlay.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.pw-overlay__close {
	position: absolute;
        z-index: 2000; /* bewusst über euren StickElements-Buttons (ZI 1000) */
	bottom: 1rem;
	right: 2rem;
	width: 3rem;
	height: 3rem;
	border: 0px solid var(--wp--preset--color--background, #111);
	border-radius: 0%;
	background: transparent;
	color: var(--wp--preset--color--background, #111);
	font-size: 1.75rem;
        font-weight: 200;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.pw-overlay__close:hover,
.pw-overlay__close:focus-visible {
	background-color: var(--wp--preset--color--background, #111);
	color: var(--wp--preset--color--foreground, #fff);
	transform: rotate(90deg);
}

.pw-overlay__nav {
	width: 100%;
	max-width: 60rem;
	padding: 0 2rem;
}

.pw-overlay__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25em;
}

/* gestaffelte Reveal-Animation: --pw-delay wird per JS pro Item gesetzt */
.pw-overlay__list > li,
.pw-overlay__content > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.5s ease, transform 0.5s ease;
	transition-delay: var(--pw-delay, 0ms);
}

.pw-overlay.is-active .pw-overlay__list > li,
.pw-overlay.is-active .pw-overlay__content > * {
	opacity: 1;
	transform: translateY(0);
}

.pw-overlay__list a {
	display: inline-block;
	font-size: clamp(2rem, 6vw, 4.5rem);
	line-height: 1.15;
	font-weight: 300;
	color: var(--wp--preset--color--background, #111);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.pw-overlay__list a:hover,
.pw-overlay__list a:focus {
	opacity: 0.5;
}

.pw-overlay__content {
	width: 100%;
	padding: 0 2rem;
}

.pw-overlay__hint {
	font-size: 1rem;
	opacity: 0.6;
}

body.pw-overlay-open {
	overflow: hidden;
}


}