/* ## DATEI css/seite-ueber-mich.css | Zusatz fuer /ueber-mich/: die drei Foto-Flaechen nebeneinander.
   Wird NACH style.css geladen und nutzt nur dessen Tokens. Keine neuen Farben, keine neuen Schriften.
   ## KARTE FOTOS
   ## FINDEN grep -rn "## FOTOS" 05_website/site/vorschau  liefert HTML und CSS
   ## ZWILLING ueber-mich/index.html ## FOTOS
   ## ACHTUNG Die Marke der Anlauf-Flaeche (.anlauf__marke aus style.css) sitzt unten links.
   Deshalb bekommt der Satz darueber 52px Luft nach unten, sonst liegen beide uebereinander. */

/* ## FOTOS | Drei Anlauf-Flaechen (Werkstatt, Schreibtisch, Baustelle), je ein Satz unten links.
   Bis 900px eine Spalte und breiter als hoch. | HTML ueber-mich/index.html ## FOTOS */
.fotos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: clamp(40px, 6vw, 72px);
}
.fotos .anlauf { aspect-ratio: 4 / 5; min-height: 260px; }
.fotos .anlauf__inhalt {
  position: absolute; inset: 0;
  display: grid; place-items: end start;
  padding: clamp(20px, 3vw, 28px);
  padding-bottom: 52px;
}
.fotos .zitat {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--step-1); line-height: 1.2; letter-spacing: -0.012em;
  color: var(--auf-nacht); max-width: 18ch; margin: 0;
}
@media (max-width: 900px) {
  .fotos { grid-template-columns: 1fr; }
  .fotos .anlauf { aspect-ratio: 16 / 9; min-height: 200px; }
}