/* About Me Section (Card-Duo mit Kennzahlen) */
.about-me {
  padding: var(--space-20) 0;
  background: var(--paper-soft);
  width: 100%;
}

.about-me-inner {
  display: flex;
  align-items: center;
  gap: 56px;
}

.about-me-media {
  flex: 0 0 auto;
  width: 38%;
  max-width: 320px;
}

.about-me-photo-card {
  position: relative;
  background: var(--white);
  /* Mehrschichtiger Schatten für Tiefe: enger Kontaktschatten (Karte "sitzt"
     auf der Fläche), weicher Umgebungsschatten für Volumen und ein dezent
     Teal-getönter Glow, der die Markenfarbe aufgreift und das Foto vom
     ruhigen --paper-soft-Hintergrund abhebt. */
  box-shadow:
    0 2px 6px -2px rgba(30, 35, 33, 0.12),
    0 18px 40px -18px rgba(30, 35, 33, 0.28),
    0 34px 64px -30px rgba(31, 142, 133, 0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  /* Eckig statt rund (Nutzerentscheidung): Ein Kreis berührt ein 1:1-Quadrat
     nur an den vier Seitenmitten und wird oberhalb/unterhalb der Bildmitte
     schmaler – bei diesem Gruppenfoto schnitt das die äußeren, randnahen
     Köpfe seitlich an. Ein (abgerundetes) Rechteck verjüngt sich nicht und
     behält die volle Bildbreite, wodurch das Problem geometrisch entfällt –
     ganz ohne künstliche Rand-Streckung des Fotos (siehe Verlauf: erste
     Korrektur dieses Bugs führte zu sichtbaren Verzerrungen an den Bildrändern
     und wurde wieder zurückgenommen; assets/profile.jpeg ist wieder das
     unveränderte Originalfoto, 1010x1280). */
  border-radius: var(--radius-xl);
}

.about-me-photo-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 4px 10px -3px rgba(30, 35, 33, 0.14),
    0 24px 50px -18px rgba(30, 35, 33, 0.32),
    0 44px 80px -32px rgba(31, 142, 133, 0.32);
}

@media (prefers-reduced-motion: reduce) {
  .about-me-photo-card {
    transition: none;
  }
  .about-me-photo-card:hover {
    transform: none;
  }
}

.about-me-photo {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  /* Vertikaler Fokuspunkt an den oberen Bildrand gelegt (50% 0%): Cover-Fit
     auf ein 1:1-Ziel nutzt die volle Bildbreite (kein Seiten-Zuschnitt) und
     kürzt nur oben/unten. 0% schneidet oben gar nichts weg und nutzt damit
     den im Originalfoto bereits vorhandenen Freiraum über dem Kopf der
     linken Person als Luft nach oben, statt ihn wegzuschneiden – eine
     Bildbearbeitung war dafür nicht nötig. */
  object-position: 50% 0%;
  border-radius: var(--radius-xl);
}

.about-me-content {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.about-me .about-me-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 20px;
}

.about-me-text {
  max-width: 640px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.75;
}