/*
 * Helios Parallax 2.6.1 - Grundlayout
 *
 * Wird über die Oxygen-Elemente als Abhängigkeit geladen und beim ersten Shortcode einer
 * Seite einmal inline ausgegeben. Bewegung setzt parallax.js per transform, Größen und
 * Überstand der Ebenen per Inline-Stil.
 *
 * Aufbau einer Szene:
 *   .hpx-scene > .hpx-stage > .hpx-kamera > Ebenen (.hpx-ebene, Partikel, beliebige Kinder)
 * Die Kamera-Hülle dreht und skaliert beim Kippen alle Ebenen gemeinsam.
 *
 * Zustände an .hpx-scene:
 *   --vertikal / --horizontal / --flug   Modus
 *   --angepinnt  Bühne klebt (horizontal, flug und eigene Modi mit angepinnt: true)
 *   --ruhig      keine Bewegung (Builder-SSR, "Bewegung reduzieren", schmaler als "ab")
 *   --vorschau   Oxygen-Builder: nicht angepinnt, Stand nach dem Vorschau-Regler
 *   --builder    per Shortcode im Builder gerendert
 *   --gestapelt  Builder-Ansicht mit Ebenen untereinander (builder="gestapelt")
 *   --sichtbar   Szene ist im Bild, bewegte Ebenen (.hpx-bewegt) werden als Grafikebene vorbereitet
 *   --schleife   Endlosschleife (ab 2.4): klebt nicht, Ebenen ziehen endlos seitwärts
 *
 * Selektoren mit zwei Klassen, damit sie gegen Oxygens Element-Klassen gewinnen.
 */

.hpx-scene {
	--hpx-hoehe: 100svh;
	--hpx-strecke: 200svh;
	--hpx-breite: 300vw;
	--hpx-oben: 0px;
	--hpx-fluchtpunkt: 50% 50%;
	position: relative;
	display: block;
	width: 100%;
	height: var(--hpx-hoehe);
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Oxygen 4.9: Shortcode Wrapper und Shortcode-Element sind Flex-Spalten mit align-items: flex-start
   und schrumpfen auf ihren Inhalt; die Ebenen sind absolut positioniert, die Szene wäre 0 px breit. */
.ct-nestable-shortcode:has(> .hpx-scene),
.ct-shortcode:has(> .hpx-scene) {
	align-self: stretch;
	width: 100%;
}

.hpx-scene > .hpx-stage {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	overflow: clip;
	isolation: isolate;
	box-sizing: border-box;
}

/* Angepinnte Modi: die Szene ist um die Strecke höher, die Bühne klebt oben.
   Die WordPress-Adminleiste (angemeldet) wird automatisch mit eingerechnet. */
.hpx-scene--horizontal,
.hpx-scene--flug,
.hpx-scene--angepinnt {
	height: calc(var(--hpx-hoehe) + var(--hpx-strecke));
}
.hpx-scene--horizontal > .hpx-stage,
.hpx-scene--flug > .hpx-stage,
.hpx-scene--angepinnt > .hpx-stage {
	position: sticky;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--hpx-oben));
	height: min(var(--hpx-hoehe), calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--hpx-oben)));
}

/* Ebenen: jedes Kind füllt die Bühne. Die Kamera-Hülle selbst ist ebenfalls bühnengroß. */
.hpx-scene > .hpx-stage > *,
.hpx-scene .hpx-kamera > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	box-sizing: border-box;
	transform-origin: var(--hpx-fluchtpunkt);
}
.hpx-scene > .hpx-stage > .hpx-kamera {
	transform-origin: 50% 50%;
}
/* Klicks gehen durch die Ebenen hindurch, nur ihr Inhalt fängt sie ab. Sonst läge die vorderste,
   bühnengroße Ebene über Text und Links der Ebenen dahinter (im Builder: Klick wählt sie statt des Textes). */
.hpx-scene .hpx-kamera > * {
	pointer-events: none;
}
.hpx-scene .hpx-kamera > * > *,
.hpx-scene .hpx-kamera > a,
.hpx-scene .hpx-kamera > button {
	pointer-events: auto;
}
.hpx-scene--horizontal .hpx-kamera > * {
	width: var(--hpx-breite);
	min-width: 100%;
}
/* Nur was sich bewegt, bekommt eine eigene Grafikebene; stehende Ebenen sparen Grafikspeicher. */
.hpx-scene--sichtbar .hpx-kamera > .hpx-bewegt,
.hpx-scene--sichtbar > .hpx-stage > .hpx-bewegt {
	will-change: transform;
}
/* Automatischer Ablauf zu Ende: Grafikebenen freigeben, damit vergrößerter Text wieder scharf gerendert wird */
.hpx-scene--sichtbar.hpx-scene--auto-fertig .hpx-kamera > .hpx-bewegt,
.hpx-scene--sichtbar.hpx-scene--auto-fertig > .hpx-stage > .hpx-bewegt {
	will-change: auto;
}
.hpx-scene .hpx-kamera > br,
.hpx-scene > .hpx-stage > br {
	display: none;
}

/* Ebene als Oxygen-Element oder aus [helios_ebene]: Inhalt standardmäßig mittig. */
.hpx-scene .hpx-kamera > .hpx-ebene {
	display: flex;
	flex-direction: column;
	align-items: var(--hpx-inhalt-x, center);
	justify-content: var(--hpx-inhalt-y, center);
}
.hpx-ebene > .hpx-inhalt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.hpx-scene .hpx-ebene > .hpx-inhalt {
	pointer-events: none;
}
.hpx-ebene > .hpx-inhalt > * {
	pointer-events: auto;
}

/* Bilder und Videos als Ebene oder in einer Ebene. */
.hpx-scene .hpx-kamera > img,
.hpx-scene .hpx-kamera > video,
.hpx-scene .hpx-kamera > picture > img,
.hpx-scene > .hpx-stage > img,
.hpx-scene .hpx-bild {
	display: block;
	max-width: none;
	object-fit: var(--hpx-einpassen, cover);
	object-position: var(--hpx-pos, 50% 50%);
}
/* data-position / data-einpassen ohne Script (Oxygen-Builder). Browser ohne attr()-Typen
   überspringen die Regel, dort setzt parallax.js die Werte. */
.hpx-scene .hpx-kamera > [data-position] {
	object-position: attr(data-position type(<length-percentage>+), var(--hpx-pos, 50% 50%));
}
.hpx-scene .hpx-kamera > [data-einpassen] {
	object-fit: attr(data-einpassen type(<custom-ident>), var(--hpx-einpassen, cover));
}
.hpx-scene .hpx-kamera > picture > img,
.hpx-ebene > .hpx-bild {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}
.hpx-ebene > .hpx-bild + * {
	position: relative;
}

/* Partikel: eine Leinwand in Bühnengröße, zeichnet parallax.js. */
.hpx-scene .hpx-kamera > .hpx-partikel-ebene {
	pointer-events: none;
}
.hpx-partikel-ebene > .hpx-partikel-canvas {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

/* Schwebeobjekt: frei in einer Ebene platziert, schwebt per CSS-Animation. */
.hpx-objekt {
	position: absolute;
	left: var(--hpx-x, 50%);
	top: var(--hpx-y, 50%);
	width: var(--hpx-objekt-breite, 160px);
	transform: translate(-50%, -50%);
	z-index: 1;
}
.hpx-objekt > .hpx-objekt__innen {
	position: relative;
	display: block;
	width: 100%;
}
.hpx-objekt__bild {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	pointer-events: none;
}

/* Oxygen-Builder: Der Platzhalter eines leeren Containers (200px hoch, mit "+") liegt beim
   Schwebeobjekt mit Bild über dem Bild, statt es zu verlängern, und zeigt sich beim Überfahren. */
.hpx-objekt > .hpx-objekt__innen > .hpx-objekt__bild ~ .breakdance-empty-container {
	position: absolute;
	inset: 0;
	min-height: 0;
	opacity: 0;
	transition: opacity 0.15s;
}
.hpx-objekt:hover > .hpx-objekt__innen > .hpx-objekt__bild ~ .breakdance-empty-container {
	opacity: 1;
}
/* Bild-Ebene ohne Inhalt: kein "+" mitten auf der Bühne (es läge über den Ebenen dahinter).
   Inhalt kommt über den Strukturbaum hinein. */
.hpx-scene .hpx-ebene > .hpx-bild ~ .breakdance-empty-container {
	display: none;
}

/* Schweben: Weg und Wiegen über eigene Eigenschaften (translate, rotate), damit es sich
   mit dem transform der Parallaxe verträgt. */
@keyframes hpx-schweben {
	0% { translate: 0 0; }
	25% { translate: var(--hpx-seite, 0px) calc(var(--hpx-hub, 12px) * -1); }
	50% { translate: 0 calc(var(--hpx-hub, 12px) * -0.25); }
	75% { translate: calc(var(--hpx-seite, 0px) * -1) calc(var(--hpx-hub, 12px) * -0.8); }
	100% { translate: 0 0; }
}
@keyframes hpx-wiegen {
	from { rotate: calc(var(--hpx-dreh, 0deg) * -1); }
	to { rotate: var(--hpx-dreh, 0deg); }
}
.hpx-schwebt:not(.hpx-objekt),
.hpx-objekt.hpx-schwebt > .hpx-objekt__innen {
	animation:
		hpx-schweben var(--hpx-dauer, 6s) ease-in-out infinite,
		hpx-wiegen calc(var(--hpx-dauer, 6s) * 0.7) ease-in-out infinite alternate;
	animation-delay:
		calc(var(--hpx-dauer, 6s) * var(--hpx-versatz, 0) * -1),
		calc(var(--hpx-dauer, 6s) * var(--hpx-versatz, 0) * -0.7);
}
.hpx-scene--ruhig .hpx-schwebt:not(.hpx-objekt),
.hpx-scene--ruhig .hpx-objekt.hpx-schwebt > .hpx-objekt__innen {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.hpx-schwebt:not(.hpx-objekt),
	.hpx-objekt.hpx-schwebt > .hpx-objekt__innen {
		animation: none;
	}
}

/* Ruhig: nichts angepinnt, alles in Ausgangslage. Seitwärts-Spur per Scrollleiste. */
.hpx-scene--ruhig,
.hpx-scene--vorschau,
.hpx-scene--auto,
.hpx-scene--schleife {
	height: var(--hpx-hoehe);
}
.hpx-scene--ruhig > .hpx-stage,
.hpx-scene--vorschau > .hpx-stage,
.hpx-scene--auto > .hpx-stage,
.hpx-scene--schleife > .hpx-stage {
	position: relative;
	top: auto;
	height: 100%;
}
.hpx-scene--horizontal.hpx-scene--ruhig > .hpx-stage {
	overflow-x: auto;
	overflow-y: hidden;
}

/* Endlosschleife: Kopien neben den ziehenden Ebenen und der Nachtschleier sind reine Dekoration.
   Die Kopie bekommt ihre Lage vom Script, der Schleier die Farbe; beide fangen keine Klicks. */
.hpx-scene .hpx-kamera > .hpx-klon,
.hpx-scene .hpx-kamera > .hpx-klon *,
.hpx-scene .hpx-kamera > .hpx-nachtschleier {
	pointer-events: none;
}
.hpx-scene .hpx-kamera > .hpx-nachtschleier {
	opacity: 0;
}

/* Oxygen-Builder */
.hpx-scene--builder > .hpx-stage::after,
.hpx-scene--vorschau > .hpx-stage::after {
	content: "Parallax · Vorschau";
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 60;
	padding: 3px 8px;
	border-radius: 3px;
	background: rgba(20, 30, 40, 0.72);
	color: #fff;
	font: 500 11px/1.4 system-ui, sans-serif;
	pointer-events: none;
}
.hpx-scene--builder > .hpx-stage::after {
	content: "Parallax · Bewegung nur im Frontend";
}
.hpx-scene--gestapelt {
	height: auto;
}
.hpx-scene--gestapelt > .hpx-stage {
	height: auto;
	overflow: visible;
}
.hpx-scene--gestapelt .hpx-kamera {
	position: relative;
	height: auto;
}
.hpx-scene--gestapelt .hpx-kamera > * {
	position: relative;
	height: var(--hpx-hoehe);
	outline: 1px dashed rgba(20, 30, 40, 0.4);
	outline-offset: -1px;
}

/* Bedienelemente des Scripts (Debug-Anzeige, Neigungs-Knopf) sind keine Ebenen. */
.hpx-scene > .hpx-stage > .hpx-ui {
	position: absolute;
	top: auto;
	left: auto;
	width: auto;
	height: auto;
	z-index: 70;
	will-change: auto;
	transform: none;
}
.hpx-scene > .hpx-stage > .hpx-debug {
	left: 8px;
	bottom: 8px;
	max-width: calc(100% - 16px);
	padding: 6px 9px;
	border-radius: 4px;
	background: rgba(15, 22, 30, 0.8);
	color: #e8f0f4;
	font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
	white-space: pre-wrap;
	pointer-events: none;
}
/* Pause-Knopf der Endlosschleife (ab 2.6), unten links; hält auch CSS-Animationen in der Szene an */
.hpx-scene > .hpx-stage > .hpx-pause {
	left: 12px;
	bottom: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.88);
	color: #1c2a33;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease;
}
.hpx-scene > .hpx-stage > .hpx-pause:hover,
.hpx-scene > .hpx-stage > .hpx-pause:focus-visible {
	opacity: 1;
}
.hpx-scene > .hpx-stage > .hpx-pause:focus-visible {
	outline: 2px solid #1c2a33;
	outline-offset: 2px;
}
/* Fingerziel mindestens 44 px auf Touch-Geräten und schmalen Bildschirmen (ab 2.6.1) */
@media (pointer: coarse), (max-width: 767px) {
	.hpx-scene > .hpx-stage > .hpx-pause {
		left: 10px;
		bottom: 10px;
		width: 44px;
		height: 44px;
	}
	.hpx-scene > .hpx-stage > .hpx-pause svg {
		width: 16px;
		height: 16px;
	}
}
.hpx-scene--pausiert .hpx-kamera,
.hpx-scene--pausiert .hpx-kamera * {
	animation-play-state: paused !important;
}
.hpx-scene > .hpx-stage > .hpx-neigung {
	right: 12px;
	bottom: 12px;
	padding: 8px 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.9);
	color: #1c2a33;
	font: 600 13px/1.2 system-ui, sans-serif;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
	cursor: pointer;
}