/* ============================================================
   08-about-photo.css — Über-mich-Foto, analog zum Hero-Foto:
   warmer Verlauf nach unten RECHTS versetzt (damit oben links
   frei ist), oranger Punkt oben links deutlich sichtbar.
   ============================================================ */

.ao2-about .about-photo{
  position:relative;
  border-radius:22px;
  overflow:visible !important;
  box-shadow:none !important;
  margin:24px 24px 24px 0;
}

/* Sunset->Sunshine-Verlauf, nach unten RECHTS versetzt
   (wie beim Hero-Foto) -> obere linke Ecke bleibt frei */
.ao2-about .about-photo::before{
  content:"";
  position:absolute;
  top:22px; right:-22px; bottom:-22px; left:22px;
  background:linear-gradient(160deg,#f0c424 0%,#f29e38 100%) !important;
  border-radius:22px;
  z-index:0;
}

.ao2-about .about-photo img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  border-radius:22px;
  box-shadow:0 18px 44px rgba(242,158,56,.30);
}

/* Oranger Punkt oben links, klar über allem (wie beim Hero) */
.ao2-about .about-photo::after{
  content:"";
  position:absolute;
  top:-18px; left:-18px;
  width:64px; height:64px;
  border-radius:50%;
  background:#f29e38 !important;
  box-shadow:0 4px 14px rgba(242,158,56,.45);
  z-index:5;
}

@media (max-width:860px){
  .ao2-about .about-photo{max-width:380px;margin:18px auto 22px;}
  .ao2-about .about-photo::before{top:16px;right:-16px;bottom:-16px;left:16px}
  .ao2-about .about-photo::after{width:48px;height:48px;top:-14px;left:-14px}
}