/* ============================================================
   06-hero-photo.css — Foto-Inszenierung wie im Mockup:
   Ocean/Wave-Verlauf als versetzte Fläche hinter dem Foto,
   Sunset-Kreis oben links in der Ecke.
   ============================================================ */

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

/* Blauer Verlauf, leicht nach unten rechts versetzt */
.ao2-hero .hero-img-wrap::before{
  content:"";
  position:absolute;
  top:22px; right:-22px; bottom:-22px; left:22px;
  background:linear-gradient(160deg,#05adbf 0%,#03668c 100%) !important;
  border-radius:22px;
  z-index:0;
}

/* Sunset-Kreis oben links */
.ao2-hero .hero-img-wrap::after{
  content:"";
  position:absolute;
  top:-18px; left:-18px;
  width:64px; height:64px;
  border-radius:50%;
  background:#f29e38 !important;
  z-index:2;
}

.ao2-hero .hero-img-wrap img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  border-radius:22px;
  box-shadow:0 18px 44px rgba(3,102,140,.28);
}

@media (max-width:860px){
  .ao2-hero .hero-img-wrap{margin:18px 22px 22px 0}
  .ao2-hero .hero-img-wrap::before{top:16px;right:-16px;bottom:-16px;left:16px}
  .ao2-hero .hero-img-wrap::after{width:48px;height:48px;top:-14px;left:-14px}
}