/* =========================================================
   Fushi · Startseite, Abschnitt «Wer wir sind» mit Teamfoto (Auftrag O, 15.10.2026)
   Eigene Datei, weil /css/** mit «max-age=31536000, immutable» ausgeliefert wird (firebase.json): Änderungen an
   components.css/pages.css erreichen wiederkehrende Gäste bis zu einem Jahr nicht, eine neue Datei schon (wie aktion.css).
   Nur in index.html eingebunden, nur Tokens aus tokens.css. Wer diese Datei später ändert, legt eine neue an
   (oder ändert die URL im <link>), sonst sehen Stammgäste den alten Stand.
   Aufbau: unter 820 px eine Spalte (Überschrift, Foto, Text), ab 820 px zwei (Überschrift und Text links, Foto rechts).
   Eyebrow, Titel und Text behalten ihre Regeln aus pages.css (.start-about h2, .prose); hier kommen nur Raster und Foto dazu.
   ========================================================= */

.start-about__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }

/* Titel: in pages.css gilt .prose h2 (40 px Abstand nach oben) nach .start-about h2 und schlägt dessen Abstände.
   Die Überschrift steht hier nicht in .prose, also gelten die Abstände von .start-about h2 (8 px oben); unten gibt das Raster den Abstand. */
.start-about__kopf h2 { margin-bottom: 0; }

/* Foto: quadratisch (1200 × 1200 im Original, 600/900/1200 px als srcset), Radius und Rahmen wie das Bild im Hero.
   aspect-ratio und height: auto halten den Platz frei, bevor das Bild geladen ist (loading="lazy").
   Untereinander ist es höchstens 480 px breit (sonst wäre es auf einem Tablet das grösste Bild der Seite). */
.start-about__foto { margin: 0; max-width: 480px; }
.start-about__foto img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-xl); border: 1px solid var(--c-line); box-shadow: var(--shadow-lg);
  background: var(--c-surface);
}
.start-about__foto figcaption { margin-top: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--c-text-3); }

@media (min-width: 820px) {
  /* Text links, Foto rechts. Die beiden 1fr-Zeilen halten Überschrift und Text in der Mitte neben dem Foto.
     Die Fotospalte ist 44 % des Fensters breit, höchstens 480 px (ab 1100 px); den Rest nimmt der Text.
     44vw und 480px stehen auch im sizes-Attribut des Bildes in index.html: bei einer Änderung beide anpassen. */
  .start-about__grid {
    grid-template-columns: minmax(0, 1fr) min(480px, 44vw);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--space-10); row-gap: 0;
  }
  .start-about__kopf { grid-column: 1; grid-row: 2; }
  .start-about__text { grid-column: 1; grid-row: 3; }
  .start-about__foto { grid-column: 2; grid-row: 1 / span 4; max-width: none; }
  .start-about__kopf h2 { margin-bottom: var(--space-4); }
}