/**
 * "Über mich" page styles (JBC-20, Christiane Mayer). Fork-local, not
 * framework core (site/assets/css/page-<name>.css convention). Also loaded by
 * the Team, Termine and Legacy-Trip pages.
 *
 * FWK-CH-01 B1: hero, eyebrow, section head, story, FAQ list and CTA band are
 * the shared framework components (mv-*, site/assets/css/components.css,
 * delivered by the updater and loaded through partials/brand-head.php). The
 * copy that used to sit here and in page-home.css is gone. What stays is
 * fork-specific: the intro paragraph, the values statement, and the fork
 * values below that keep the pre-migration look (hero crop 5 / 4, story
 * crop and the flat story offset). Asymmetric layout on purpose: the story
 * blocks alternate image left/right per entry (.mv-story--rev).
 *
 * Headings use var(--text), not var(--brand-ink): --brand-ink is
 * theme-fixed ON PURPOSE (tokens.css:76's comment has the reason, JBC-27:
 * admin-brand.css binds the admin chrome to it, a dark value breaks it),
 * so as plain --brand-ink it measures 1.19-1.34:1 against a dark surface,
 * the exact regression site.css's .site-nav-brand comment documents.
 * --text is theme-aware and correct here.
 */

/* --- fork values on top of components.css --------------------------------
 * The doubled selectors out-rank components.css, which loads after the page
 * stylesheets. Team, Termine and Legacy-Trip set their own crop afterwards. */
.mv-hero .mv-hero__media img { aspect-ratio: 5 / 4; object-position: center 15%; }
.mv-story .mv-story__media img { object-position: center 30%; }
/* components.css offsets the left-hand story image by 40px, this fork keeps it flush. */
.mv-story.mv-story--rev .mv-story__media { margin-top: 0; }

.ch-intro { max-width: var(--maxw); margin: 0 auto; padding: 0 24px 8px; display: flex; flex-direction: column; gap: 16px; }
.ch-intro p { max-width: 68ch; margin: 0; color: var(--text-2); font-size: 1.05rem; line-height: 1.7; }

/* --- values statement, quiet full-width band ----------------------------- */
.ch-values {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: left;
}
.ch-values p { margin: 0; color: var(--text-2); font-size: 1.05rem; line-height: 1.7; }
.ch-values-lead {
  font-family: var(--font-heading);
  color: var(--text);
  font-size: 1.25rem;
  line-height: 1.4;
}