/* Über uns — page layout only (tokens from theme.css; no colours, no new sizes). */

/* Hero: a slimmer portrait door beside the text; a calmer landscape crop on phones. */
.uu-hero__figure { width: 100%; max-width: 420px; justify-self: center; }
@media (max-width: 56.24em) {
	.uu-hero__figure { max-width: 520px; }
	.uu-hero__figure .media { --ratio: 4 / 3; }
}

/* Editorial intro: a three-card profile — "Wer dahintersteht" full width, the other two side by side. */
.uu-facts .fact h3 { font-size: var(--fs-md); }
.uu-facts { grid-template-columns: 1fr; }
@media (min-width: 37.5em) {
	.uu-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.uu-facts > :first-child { grid-column: 1 / -1; }
	.uu-facts > :last-child:nth-child(odd) { grid-column: auto; }
}
@media (max-width: 37.49em) {
	.uu-facts .fact:last-child:nth-child(odd) { grid-column: auto; }
}

/* Grundsätze: timeline left, the example photo sticks beside it on desktop. */
@media (min-width: 56.25em) {
	.uu-grundsaetze__split { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: start; }
	.uu-grundsaetze__media { position: sticky; top: calc(var(--admin-bar) + var(--header-h-s) + var(--sp-6)); }
}
@media (max-width: 56.24em) {
	.uu-grundsaetze__media .media { --ratio: 4 / 3; }
}
.uu-steps { margin-top: var(--sp-2); }

/* Triptych on tablets (single column): landscape panels instead of three 4:5 posters (≈ 2 700 px of dark scroll at 768);
   the house photo shows its facade + door low in the frame, so it is anchored lower in the landscape crop. */
@media (min-width: 37.5em) and (max-width: 56.24em) {
	.uu-tuerwelten .triptych__panel { aspect-ratio: 1 / 1; }
	.uu-tuerwelten .triptych__panel:nth-child(3) .triptych__media > img { object-position: 50% 78%; }
}
@media (min-width: 48em) and (max-width: 56.24em) {
	.uu-tuerwelten .triptych__panel { aspect-ratio: 4 / 3; }
}

/* Prüfen statt glauben: the typographic panel holds the three checks under the statement. */
.uu-pruefen__checks { margin-top: var(--sp-4); }
/* Timeline coins keep their circle when a step text runs long (vertical steps are a flex row). */
.uu-steps .step__n { flex: none; }