/* ==========================================================================
   LIEPS COMPONENT – PARALLAX LAYOUT

   XS + SM:
   .mobile-image-above / .mobile-image-below direkt auf der Haupt-.row

   MD + LG:
   .image-above / .image-below auf der Spalte mit dem Parallax-Element

   XL + XXL:
   normale horizontale DOM-Reihenfolge
   ========================================================================== */


/* XS + SM – unter 768px */
@media (max-width: 767.98px) {
	.row.mobile-image-above:has(> [class*="col-"] .frame-type-parallax_gallery),
	.row.mobile-image-below:has(> [class*="col-"] .frame-type-parallax_gallery) {
		display: flex;
		flex-direction: column;
	}

	.row.mobile-image-above > [class*="col-"]:has(.frame-type-parallax_gallery) {
		order: 1;
	}

	.row.mobile-image-above > [class*="col-"]:not(:has(.frame-type-parallax_gallery)) {
		order: 2;
	}

	.row.mobile-image-below > [class*="col-"]:has(.frame-type-parallax_gallery) {
		order: 2;
	}

	.row.mobile-image-below > [class*="col-"]:not(:has(.frame-type-parallax_gallery)) {
		order: 1;
	}
}


/* MD + LG – 768px bis unter 1200px */
@media (min-width: 768px) and (max-width: 1199.98px) {
	.row:has(> .image-above .frame-type-parallax_gallery),
	.row:has(> .image-below .frame-type-parallax_gallery) {
		display: flex;
		flex-direction: column;
	}

	.row:has(> .image-above .frame-type-parallax_gallery) > .image-above {
		order: 1;
	}

	.row:has(> .image-above .frame-type-parallax_gallery) > [class*="col-"]:not(.image-above) {
		order: 2;
	}

	.row:has(> .image-below .frame-type-parallax_gallery) > .image-below {
		order: 2;
	}

	.row:has(> .image-below .frame-type-parallax_gallery) > [class*="col-"]:not(.image-below) {
		order: 1;
	}
}


/* XL + XXL – ab 1200px */
@media (min-width: 1200px) {
	.row.mobile-image-above:has(> [class*="col-"] .frame-type-parallax_gallery),
	.row.mobile-image-below:has(> [class*="col-"] .frame-type-parallax_gallery),
	.row:has(> .image-above .frame-type-parallax_gallery),
	.row:has(> .image-below .frame-type-parallax_gallery) {
		flex-direction: row;
	}

	.row.mobile-image-above > [class*="col-"],
	.row.mobile-image-below > [class*="col-"],
	.row:has(> .image-above .frame-type-parallax_gallery) > [class*="col-"],
	.row:has(> .image-below .frame-type-parallax_gallery) > [class*="col-"] {
		order: initial;
	}
}