/*2-Spalten tauschen in mobiler Ansicht*/

/* Mobile Regeln */
@media (max-width: 768px) {

	/* Stelle sicher, dass jede .flexcolumn seine Spalten untereinander anzeigt */
	.flexcolumn {
		display: flex !important;
		flex-direction: column !important;
	}

	/* Standard: in jedem Block zuerst das erste .cc-m-hgrid-column, dann die .last */
	.SPE_odd .cc-m-hgrid-column:first-of-type {
		order: 1;
	}

	.SPE_odd .cc-m-hgrid-column.last {
		order: 2;
	}

	/* Invertiert für gerade Blocks: damit das rechte (last) Element zuerst angezeigt wird */
	.SPE_even .cc-m-hgrid-column:first-of-type {
		order: 2;
	}

	.SPE_even .cc-m-hgrid-column.last {
		order: 1;
	}

	/* Breite auf 100% */
	.flexcolumn .cc-m-hgrid-column {
		width: 100% !important;
	}

	/* Separator optional ausblenden / Abstand anpassen */
	.flexcolumn .cc-m-hgrid-separator {
		display: none !important;
	}

	/* Optional schöner Abstand zwischen Blöcken */
	.flexcolumn + .flexcolumn {
		margin-top: 20px;
	}
}



/* Desktop & Tablet */
@media (min-width: 769px) {

	/* jede HGrid-Zeile zu einem Flexcontainer machen */
	.flexcolumn {
		display: flex;
		align-items: center;
		/* <-- vertikal zentrieren */
	}

	/* Spalten nebeneinander */
	.flexcolumn .cc-m-hgrid-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* <-- Inhalt vertikal zentrieren */
	}


	.flexcolumn .j-text {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: 100%;
	}
}