/* @group Offcanvas
------------------------------------------------------------- */
/* @group Variablen
------------------------------------------------------------- */
:root {
	/* Panel */
	--pinc-offcanvas-width: calc(var(--spacing-1) * 30);
	--pinc-offcanvas-width-sm: calc(var(--spacing-1) * 22);
	--pinc-offcanvas-width-lg: calc(var(--spacing-1) * 40);
	--pinc-offcanvas-height: 80dvh;
	--pinc-offcanvas-bg: #fff;
	--pinc-offcanvas-color: inherit;
	/* Backdrop */
	--pinc-offcanvas-backdrop: rgba(0, 0, 0, 0.5);
	/* Animation */
	--pinc-offcanvas-duration: 0.3s;
	--pinc-offcanvas-easing: cubic-bezier(0.22, 1, 0.36, 1);
	/* Stapelreihenfolge */
	--pinc-offcanvas-z-index: 9999;
}
/* @end */
/* @group Basis
-------------------------------------------------------------
   Das Panel wird im Beaver Builder als normale Row/Div angelegt
   und vom JS in ein <dialog> umgewandelt, das alle Klassen behält.
   Daher zielen die Regeln unten auf dialog.pinc-offcanvas. Vor der
   Umwandlung (und im BB-Editor) wird das Element ausgeblendet.
------------------------------------------------------------- */
dialog.pinc-offcanvas {
	position: fixed;
	margin: 0;
	max-width: none;
	max-height: none;
	border: 0;
	background: var(--pinc-offcanvas-bg);
	color: var(--pinc-offcanvas-color);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	z-index: var(--pinc-offcanvas-z-index);
}
/* Panel wird beim Öffnen programmatisch fokussiert – keinen Ring zeigen */
dialog.pinc-offcanvas:focus {
	outline: none;
}
/* Vor der Umwandlung ausblenden */
.pinc-offcanvas:not(dialog) {
	display: none;
}
/* Im BB-Editor inline und bearbeitbar zeigen */
.pinc-offcanvas-editing .pinc-offcanvas {
	display: block;
}
dialog.pinc-offcanvas::backdrop {
	background: var(--pinc-offcanvas-backdrop);
}
/* @end */
/* @group Position — Links (Standard)
------------------------------------------------------------- */
dialog.pinc-offcanvas,
dialog.pinc-offcanvas--left {
	inset-block: 0;
	inset-inline-start: 0;
	inset-inline-end: auto;
	width: var(--pinc-offcanvas-width);
	max-width: 100%;
	height: 100dvh;
}
/* @end */
/* @group Position — Rechts
------------------------------------------------------------- */
dialog.pinc-offcanvas--right {
	inset-block: 0;
	inset-inline-start: auto;
	inset-inline-end: 0;
	width: var(--pinc-offcanvas-width);
	max-width: 100%;
	height: 100dvh;
}
/* @end */
/* @group Position — Unten
------------------------------------------------------------- */
dialog.pinc-offcanvas--bottom {
	inset-inline: 0;
	inset-block-start: auto;
	inset-block-end: 0;
	width: 100%;
	height: var(--pinc-offcanvas-height);
	border-start-start-radius: var(--spacing-1);
	border-start-end-radius: var(--spacing-1);
}
/* @end */
/* @group Position — Oben
------------------------------------------------------------- */
dialog.pinc-offcanvas--top {
	inset-inline: 0;
	inset-block-start: 0;
	inset-block-end: auto;
	width: 100%;
	height: var(--pinc-offcanvas-height);
	border-end-start-radius: var(--spacing-1);
	border-end-end-radius: var(--spacing-1);
}
/* @end */
/* @group Grössen
------------------------------------------------------------- */
dialog.pinc-offcanvas--sm {
	--pinc-offcanvas-width: var(--pinc-offcanvas-width-sm);
}
dialog.pinc-offcanvas--lg {
	--pinc-offcanvas-width: var(--pinc-offcanvas-width-lg);
}
dialog.pinc-offcanvas--full {
	width: 100%;
	height: 100dvh;
	max-width: none;
}
/* @end */
/* @group Animation
-------------------------------------------------------------
   Panel startet ausserhalb des Viewports und fährt bei [open]
   ein. @starting-style steuert das Einfahren, allow-discrete auf
   display/overlay hält das Element fürs Ausfahren sichtbar.
   Ohne prefers-reduced-motion: keine Animation, nur Ein-/Ausblenden.
------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {

	dialog.pinc-offcanvas {
		transition:
			transform var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing),
			overlay var(--pinc-offcanvas-duration) allow-discrete,
			display var(--pinc-offcanvas-duration) allow-discrete;
	}
	dialog.pinc-offcanvas::backdrop {
		opacity: 0;
		transition:
			opacity var(--pinc-offcanvas-duration) var(--pinc-offcanvas-easing),
			overlay var(--pinc-offcanvas-duration) allow-discrete,
			display var(--pinc-offcanvas-duration) allow-discrete;
	}
	dialog.pinc-offcanvas[open]::backdrop {
		opacity: 1;
	}
	@starting-style {
		dialog.pinc-offcanvas[open]::backdrop {
			opacity: 0;
		}
	}

	/* Einfahrrichtung je Position */
	dialog.pinc-offcanvas,
	dialog.pinc-offcanvas--left {
		transform: translateX(-100%);
	}
	dialog.pinc-offcanvas--right {
		transform: translateX(100%);
	}
	dialog.pinc-offcanvas--bottom {
		transform: translateY(100%);
	}
	dialog.pinc-offcanvas--top {
		transform: translateY(-100%);
	}
	dialog.pinc-offcanvas[open] {
		transform: none;
	}
	@starting-style {
		dialog.pinc-offcanvas[open],
		dialog.pinc-offcanvas--left[open] {
			transform: translateX(-100%);
		}
		dialog.pinc-offcanvas--right[open] {
			transform: translateX(100%);
		}
		dialog.pinc-offcanvas--bottom[open] {
			transform: translateY(100%);
		}
		dialog.pinc-offcanvas--top[open] {
			transform: translateY(-100%);
		}
	}
}
/* @end */
/* @group Scroll-Sperre
-------------------------------------------------------------
   Vom JS gesetzt, solange ein Panel offen ist. position:fixed
   am body, weil iOS Safari overflow:hidden ignoriert; das JS
   hält die Scroll-Position über top.
------------------------------------------------------------- */
.pinc-offcanvas-lock body {
	position: fixed;
	inset-inline: 0;
	width: 100%;
	overflow: hidden;
}
/* @end */
/* @end Offcanvas */