/**
 * aesthetiflow — Fog Sphere
 *
 * Zwei Modi:
 *   - Standalone: normaler Block mit einstellbarer Höhe (--aef-fog-h).
 *   - Hintergrund (.aef-fog--bg): absolut über das Eltern-Element gespannt,
 *     z-index -1. Das JS setzt am Eltern-Element position: relative und
 *     isolation: isolate — Letzteres macht es zum Stacking-Context, damit
 *     das negative z-index ÜBER dem Eltern-Hintergrund bleibt, aber UNTER
 *     dessen Inhalt.
 */

.aef-fog {
	/* width: 100% explizit — siehe Memory fullbleed-maxcontent-null. */
	position: relative;
	display: block;
	width: 100%;
	min-height: var(--aef-fog-h, 500px);
	overflow: hidden;
}

.aef-fog--bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	min-height: 0;
}

.aef-fog__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}