horizontal ruler is not displayed in "serenity" and "calibra"

Hello everyone,
I have a problem with the <hr> tag under Joomla 5.2.2, because it is not displayed, neither in an xampp-localhost development environment nor remotely on the server. This affects both the template “serenity” and “calibra” ( Version for Joomla 4/5).
Here in the forum I found a workaround that works for me after adding the following code in the template under Custom CSS:

hr {
height: 1px;
max-width: 300px;
margin: 15px auto 20px;
background-color: transparent;
border-top: 2px solid var(--primary);
}

This at least displays a “line”, a png file as defined in typo.css is still not displayed.

But in contrast to this the template “scarlett” displays <hr> correctly. So I wonder where the error lies with the other two templates.
Does anyone have a similar problem and a solution?

Thank you in advance
Gune

.content hr, .item-page hr, .article-content hr, body hr { border: none !important; height: 19px !important; /* Height of the PNG */ background-image: url('./images/custom/hr.png') !important; background-repeat: no-repeat !important; background-position: center center !important; background-size: contain !important; margin: 2rem 0 !important; opacity: 1 !important; background-color: transparent !important; filter: none !important; }