/**
 * Kundenstimmen-Block: grauer Kasten und Bild oben buendig.
 *
 * Der Block ist die globale Beaver-Builder-Vorlage "Trust: Kundenstimmen" (Post 401)
 * und liegt auf Startseite, Ueber uns, Leistungen, Projekte sowie ueber das
 * Themer-Layout auf allen Projektseiten.
 *
 * Ausgangslage: das Hintergrundbild der rechten Spalte stand mit margin-top: -10%
 * ueber den grauen Kasten hinaus, unten fluchteten beide bereits. Zusaetzlich hing
 * der Text am unteren Rand, weil das Testimonial-Modul einen margin-top von 10%
 * mitbringt und keinen unteren Ausgleich hat.
 *
 * Korrektur: der Ueberstand wandert vom Bild auf den grauen Kasten. Das Bild bleibt
 * dadurch optisch an derselben Stelle, der graue Kasten waechst bis zu seiner
 * Oberkante hoch. Der Text wird im so entstandenen Feld vertikal zentriert.
 *
 * Der Ueberstand betrug 10% der Bildspaltenbreite. Die Bildspalte ist 40% breit,
 * also entspricht das 4% der Breite der Aussenspalte, an der der graue Kasten haengt.
 * Prozentwerte fuer margin-top beziehen sich auf die Breite des Elternelements,
 * deshalb rechnet der Wert ueber alle Viewports hinweg identisch mit.
 *
 * Unterhalb von 769px stapeln die Spalten, das Bild steht dann unter dem Text und
 * hat ohnehin keinen Ueberstand. Dort bleibt alles unveraendert.
 */

@media (min-width: 769px) {

	/* Das Bild steht nicht mehr selbst ueber. */
	.fl-builder-content .fl-node-60e2f5ea86edb.fl-col > .fl-col-content {
		margin-top: 0;
	}

	/* Stattdessen zieht der graue Kasten um denselben Betrag nach oben.
	   4% der Aussenspalte == 10% der Bildspalte. */
	.fl-builder-content .fl-node-60e2f5ea86ed8.fl-col > .fl-col-content {
		margin-top: -4%;
	}

	/* Der Text sitzt jetzt mittig statt am unteren Rand. Die Spalte ist bereits
	   ein Flex-Container in Spaltenrichtung, es fehlt nur die Ausrichtung.

	   Das Polster nach oben und unten greift nur dort, wo der Text laenger ist
	   als das Bild hoch: in mittleren Breiten um 1280px braucht das Zitat mehr
	   Zeilen als in die Bildhoehe passen, ohne Polster wuerde es dann oben und
	   unten am Rand des grauen Kastens kleben. Wo Platz bleibt, bestimmt weiter
	   die Zentrierung den Abstand.

	   Der Selektor nimmt die umgebende Spaltengruppe mit auf. Beaver Builder setzt
	   fuer Gruppen mit gleicher Spaltenhoehe selbst ein justify-content: flex-start,
	   und zwar mit demselben Gewicht, das ein Selektor aus Node-Klasse und
	   .fl-col-content erreicht. Ohne den zusaetzlichen Vorfahren entschiede allein
	   die Ladereihenfolge der Stylesheets, und die faellt je nach Seitentyp anders
	   aus: auf den Bestandsseiten laedt das Layout-CSS vor dem Theme, auf der
	   Premium-Projektseite mittendrin. */
	.fl-builder-content .fl-node-60e2f5ea86ed9 .fl-node-60e2f5ea86eda.fl-col > .fl-col-content {
		justify-content: center;
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	/* Der Modul-Abstand nach oben wuerde die Zentrierung wieder verschieben. */
	.fl-builder-content .fl-node-60e2f5ea86edc.fl-module > .fl-module-content {
		margin-top: 0;
	}
}