/* Startseite · ueber-bernd (Owner: wdf-section-builder, Auftrag P7-home-80) — 1:1 aus wdf/directions/B/hero.html (Stand P4-B15), nur Tokens.
   Mobil zuerst, Erweiterungen mit min-width. Statische Fassung; Bewegung (Fotos, Licht durch die Agenten, Wolke warm) baut P8 darauf.
   Aus base.css kommen: .modul (Abschnittsabstand), .kapitel-kopf, .eyebrow, .lead, .modul-karte, .app-kopf, .pfeil-link(--mono)
   und die Team-Karte (.ueber-team, .ueber-paar, .ueber-person, .up-bild, .ueber-kette, .uk-*). Hier nur das Raster des Abschnitts. */

/* ---------- Raster: mobil Kopf → Karte → Text ---------- */
.ueber-raster { display: grid; gap: var(--space-32); }
.ueber-text { display: grid; gap: var(--space-16); align-content: start; }
.ueber-text > p:not(.lead), .ueber-mehr p { color: var(--color-text-secondary); max-width: 56ch; text-wrap: pretty; }
/* P9 (K-PRJ-05): Hintergrund-Absatz im Aufklapper, sichtbar bleiben Lead + Ausfall-Kasten */
.ueber-mehr { margin-top: calc(-1 * var(--space-8)); }
.ueber-mehr p { max-height: none; font-size: var(--font-size-body); }
.ueber-links { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-24); margin-top: var(--space-8); }

/* Bildausschnitt Bernd (Hochformat im 1 : 1-Rahmen): Gesicht oben halten; Prototyp: style="object-position:50% 16%" */
.up-bild img.up-bild--bernd { object-position: 50% 16%; }

/* ---------- ab 1024 px: links Kopf + Text (5), rechts Team-Karte (6), rechtsbündig ---------- */
@media (min-width: 1024px) {
  .ueber-raster {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "kopf team" "text team";
    column-gap: var(--gap-story2);
    row-gap: var(--space-16);
    align-items: start;
  }
  .ueber-kopf { grid-area: kopf; }
  .ueber-text { grid-area: text; }
  .ueber-team { grid-area: team; justify-self: end; }
}

/* P9 (K-PRJ-04): Bernd in der Agenten-Kette wie alle Porträts in Graustufe; der CI-Ring (.uk-chef i, --ring-lead) bleibt */
.ueber-kette .uk-chef img { filter: grayscale(1) contrast(1.06) brightness(.97); }

/* Lauf 5 (K-VIS-05): Firmenname ab 380 px als Einheit (Umbruch dann nur nach „Inhaber ·“); darunter darf er zwischen den Wörtern umbrechen */
@media (min-width: 380px) { .ueber-person .nw-ab380 { white-space: nowrap; } }