/*
 * Über uns — Aussage
 * ==================
 *
 * Zweiter Bildschirm von „Über uns", nachgebaut nach `#Static1` auf
 * belgradearbor.rs/en/about-the-investor. Am 14.10.2026 dort gemessen und aus
 * dem Code gelesen; am Schreibtisch alles in Arbors Grundmaß `--ld-pille-e`
 * (bei 1512 12,55 px, bei 2056 16 px), auf dem Telefon in rem.
 *
 * | | 1512 / 2056 (Grundmaße) | 375 |
 * |---|---|---|
 * | Abschnitt | mindestens ein Bildschirm, Polster 5 oben und unten — **bei uns senkrecht mittig** | Polster 2,5 rem oben (**bei uns 7,5**), 5 rem unten |
 * | Knopf (nur bei uns) | „Kontakt aufnehmen", wie im Auftakt, 5 unter dem Absatz | volle Breite |
 * | Inhaltsbreite | 109,5, mittig — dieselbe wie im Auftakt | 1,5 rem Rand |
 * | Aufteilung | zwei Spalten, 6,25 Abstand | untereinander |
 * | linke Spalte | 5/12 der Breite | volle Breite |
 * | Aussage | 3,5, Light, Zeilenhöhe 1,1, Laufweite 0,02 em | 2,5 rem |
 * | Abstand zum Absatz | 5 | 2,5 rem |
 * | Absatz | 1, drei Fünftel der Spalte | 1 rem, volle Breite |
 * | rechte Spalte | 1/2 der Breite, oben bündig | 7,5 rem unter dem Absatz |
 * | Bildkachel bei Arbor | zwei Formen, 35 × 46,25 und 26 × 35, überlappend | untereinander |
 * | **Bildkachel bei uns** | **eine**, volle Spaltenbreite, 1,6 : 1, 5 tiefer | volle Breite, 7,5 rem unter dem Absatz |
 * | Bild in der Kachel | 112 % hoch, wandert | steht still |
 *
 * **Eine Kachel statt zwei, vom Kunden so entschieden** (14.10.2026). Das
 * Teambild ist quer (1,5 : 1), und die vier Personen reichen fast bis an die
 * Ränder; in Arbors hochkanten Formen fielen Köpfe heraus, auch in sechs
 * Anordnungen mit beiden Bildern. Die Kachel ist der Keil aus „Architektur"
 * (`formen/ueber-team.svg`): schräg nur oben links, wo im Bild Fassade steht.
 *
 * **Bewegung aus ihrem Code:**
 *
 * | | |
 * |---|---|
 * | Wörter, Aussage und Absatz in **einer** Folge | aus 1 Grundmaß tiefer, Deckung 0 → 0,5 s, 0,05 s Versatz, `power1.out` |
 * | die Bildkachel | aus `scale 1.1`, Deckung 0 → 1,2 s, `power1.out` (bei ihnen zwei, 0,7 s versetzt) |
 * | Auslöser für beides | Oberkante des Abschnitts bei 80 % der Fensterhöhe |
 * | Bild in der Kachel | wandert um seinen Überstand nach unten (bei ihnen −20 → 0 %), über die ganze Durchfahrt, `power1.out` |
 * | auf dem Telefon | das Wandern entfällt (bei ihnen unter 601) |
 *
 * **Ein „blur: 10px" steht in ihrem Code, wirkt aber nicht** — es ist keine
 * CSS-Eigenschaft, und gemessen steht `filter` die ganze Zeit auf `none`.
 * Deshalb hier kein Weichzeichner.
 *
 * **Farben übersetzt** wie in „Zwei Charaktere": Arbors Golden auf Sand
 * steht bei 3,12 zu 1; die Aussage steht hier in Card Room Green tief auf
 * Kalkgrau (4,39, große Schrift), der Absatz in Hofgrün tief (9,71). Der
 * Absatz läuft auf Zeilenhöhe 1,4 statt 1,2 — im Deutschen stoßen sonst die
 * Umlaute an.
 */

/*
 * **Senkrecht mittig, nicht oben bündig** — seit dem 14.10.2026, vom Kunden:
 * Bei Arbor beginnt der Text oben am Polster, bei uns stand die Aussage damit
 * direkt unter der Kopfzeilen-Pille, und unten blieb ein Drittel leer. Text
 * und Kachel sind zudem zueinander mittig ausgerichtet.
 */
.ld-uaussage {
	--ld-ua-e: var( --ld-pille-e );
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	padding-block: calc( 5 * var( --ld-ua-e ) );
	margin-block: 0;
}

.ld-uaussage__raster {
	display: flex;
	align-items: center;
	gap: calc( 6.25 * var( --ld-ua-e ) );
	width: min( 100% - 3rem, 109.5 * var( --ld-ua-e ) );
	margin-inline: auto;
}

/* blockGap: Alles hier sitzt auf Maß, kein Rand von WordPress. */
.ld-uaussage__raster > *,
.ld-uaussage__text > *,
.ld-uaussage__bilder > * {
	margin-block: 0;
}

.ld-uaussage__text {
	display: flex;
	flex-direction: column;
	gap: calc( 5 * var( --ld-ua-e ) );
	flex: none;
}

/*
 * Ihre Spalten sind 5/12 und 1/2 der Inhaltsbreite, der Abstand liegt
 * dazwischen und kommt obendrauf — deshalb rechnen beide Breiten hier gegen
 * die volle Breite, nicht gegen den Rest nach dem Abstand.
 */
.ld-uaussage__text {
	width: calc( 5 / 12 * 109.5 * var( --ld-ua-e ) );
	max-width: 41.667%;
}

.ld-uaussage__titel {
	font-size: calc( 3.5 * var( --ld-ua-e ) );
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: calc(0.02em + var(--ld-light-lauf));
	--ld-steig-weg: var( --ld-ua-e );
	--ld-steig-dauer: 0.5s;
	--ld-steig-takt: 0.05;
	--ld-steig-kurve: cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ld-uaussage__absatz {
	width: 60%;
	font-size: var( --ld-ua-e );
	line-height: 1.4;
	--ld-steig-weg: var( --ld-ua-e );
	--ld-steig-dauer: 0.5s;
	--ld-steig-takt: 0.05;
	--ld-steig-kurve: cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ld-uaussage__bilder {
	width: calc( 0.5 * 109.5 * var( --ld-ua-e ) );
	max-width: 50%;
}

/*
 * Zwei Klassen im Selektor: Am ersten Kind setzt WordPress den oberen Rand
 * mit `:root :where(.is-layout-flow) > :first-child` auf null, und das zählt
 * zwei Stufen. Die 5 Grundmaße sind Arbors Versatz der großen Form.
 */
.ld-uaussage__bilder > .ld-uaussage__bild {
	margin-block-start: 0;
}

/*
 * **Der Knopf wie im Auftakt** — gefüllt, mit Pfeil, rollend. Die Füllung
 * ist hier Card Room Green tief statt Terrakotta hell: Auf Kalkgrau stünde
 * Terrakotta hell als Fläche kaum ab (1,3 zu 1). Kalkweiß darauf 5,5 zu 1.
 * Abstand zum Absatz: derselbe wie zwischen Aussage und Absatz, 5
 * Grundmaße — der Kunde wollte ihn tiefer als die 2,5 des Auftakts.
 */
.ld-uaussage__text > .ld-uaussage__knopf {
	margin-block-start: 0;
	--ld-schalter-farbe: var( --wp--preset--color--base );
}

.ld-uaussage__knopf :is( a, button ) {
	border-color: var( --wp--preset--color--primary-deep );
	background-color: var( --wp--preset--color--primary-deep );
	color: var( --wp--preset--color--base );
}

.ld-uaussage__knopf :is( a, button ):hover,
.ld-uaussage__knopf :is( a, button ):focus-visible {
	background-color: var( --wp--preset--color--contrast );
}

/* Das Zeichen unmittelbar, nicht über `--ld-schalter-bild` — siehe Galerie-Auftakt. */
.ld-uaussage__knopf .ld-schalter__zeile::after {
	content: "";
	-webkit-mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
	mask: url( "../../images/symbole/pfeil.svg" ) center / contain no-repeat;
}

/* Er kommt nach dem letzten Wort; den Verzug setzt das Skript. */
.ld-js .ld-uaussage.is-bereit .ld-uaussage__knopf {
	opacity: 0;
	translate: 0 var( --ld-ua-e );
	transition:
		opacity 0.5s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) var( --ld-ua-knopf-v, 0s ),
		translate 0.5s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ) var( --ld-ua-knopf-v, 0s );
}

.ld-js .ld-uaussage.is-da .ld-uaussage__knopf {
	opacity: 1;
	translate: 0 0;
}

.ld-uaussage__bild {
	width: 100%;
	aspect-ratio: 1.6;
	overflow: hidden;
	-webkit-mask: url( "../../images/formen/ueber-team.svg" ) 0 0 / 100% 100% no-repeat;
	mask: url( "../../images/formen/ueber-team.svg" ) 0 0 / 100% 100% no-repeat;
}

/*
 * Das Bild ist 112 Prozent so hoch wie seine Kachel und wandert um diesen
 * Überstand (12 von 112, also 10,7 Prozent der eigenen Höhe). Arbor nimmt 120
 * Prozent; bei einem Gruppenbild kostete das zu viel von oben und unten. Der
 * Fortschritt `--ld-ua-p` kommt geglättet aus dem Skript.
 */
.ld-uaussage__bild img {
	display: block;
	width: 100%;
	height: 112%;
	max-width: none;
	object-fit: cover;
	object-position: 50% 50%;
	translate: 0 calc( -10.7% + 10.7% * var( --ld-ua-p, 0.75 ) );
}

/* Der Auftritt der Kachel — nur mit Skript, sonst steht sie einfach da. */
.ld-js .ld-uaussage.is-bereit .ld-uaussage__bild {
	opacity: 0;
	scale: 1.1;
	transition:
		opacity 1.2s cubic-bezier( 0.25, 0.46, 0.45, 0.94 ),
		scale 1.2s cubic-bezier( 0.25, 0.46, 0.45, 0.94 );
}

.ld-js .ld-uaussage.is-da .ld-uaussage__bild {
	opacity: 1;
	scale: 1;
}

@media ( prefers-reduced-motion: reduce ) {

	.ld-uaussage__bild img {
		translate: none;
	}

	.ld-js .ld-uaussage.is-bereit .ld-uaussage__bild {
		opacity: 1;
		scale: none;
		transition: none;
	}
}

/* ==========================================================================
   Schmale Geräte — dieser Block steht bewusst am Ende der Datei.

   Arbor hat hier zwei Stufen: unter 1024 stehen die Spalten untereinander,
   unter 768 werden die Maße auf rem umgestellt. Beide
   stehen in diesem einen Block, die zweite darin verschachtelt.
   ========================================================================== */

@media ( max-width: 1023px ) {

	.ld-uaussage__raster {
		flex-direction: column;
		gap: 0;
	}

	.ld-uaussage__text {
		width: 100%;
		max-width: none;
		gap: calc( 2.5 * var( --ld-ua-e ) );
	}

	.ld-uaussage__absatz {
		width: 66.667%;
	}

	.ld-uaussage__bilder {
		width: 100%;
		max-width: none;
	}

	.ld-uaussage__raster {
		align-items: stretch;
	}

	.ld-uaussage__bilder > .ld-uaussage__bild {
		margin-block-start: calc( 5 * var( --ld-ua-e ) );
	}

	@media ( max-width: 767px ) {

		/*
		 * Oben 7,5 rem statt Arbors 2,5 — wie im Auftakt darüber; sonst stünde
		 * die Aussage unter der Kopfzeilen-Pille (Kunde, 14.10.2026).
		 */
		.ld-uaussage {
			padding-block: 7.5rem 5rem;
		}

		.ld-uaussage__text {
			gap: 2.5rem;
		}

		.ld-uaussage__titel {
			font-size: 2.5rem;
			--ld-steig-weg: 1rem;
		}

		.ld-uaussage__absatz {
			width: 100%;
			font-size: 1rem;
			--ld-steig-weg: 1rem;
		}

		.ld-uaussage__text > .ld-uaussage__knopf {
			margin-block-start: 0;
		}

		.ld-uaussage__knopf,
		.ld-uaussage__knopf :is( a, button ) {
			width: 100%;
		}

		.ld-uaussage__raster > .ld-uaussage__bilder {
			margin-block-start: 7.5rem;
		}

		.ld-uaussage__bilder > .ld-uaussage__bild {
			margin-block-start: 0;
		}

		.ld-uaussage__bild img {
			translate: none;
		}
	}
}