/* hero-bg.css – Studiofoto im Hero (aus hero-bars.css übernommen) */
/* ---------- Hero-Hintergrund (alle Geräte): Studiofläche; bis das Foto da ist ein heller Verlauf ---------- */
.hero-bg {
  position: absolute; inset: -4% 0 0; z-index: 0; pointer-events: none; transform-origin: 50% 70%; will-change: transform;
  background:
    radial-gradient(110% 62% at 50% 16%, #FCFBF9 0%, rgba(250, 249, 246, .85) 38%, rgba(246, 245, 242, 0) 72%),
    linear-gradient(180deg, #F8F7F4 0%, #F3F1ED 52%, #ECE9E3 78%, #E6E2DB 100%);
}
.hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
.hero-bg.has-photo img { opacity: 1; }
.rm .hero-bg { transform: none !important; }

/* Foto: quer unten ausgerichtet (Tischkante), hoch etwas größer und oben angesetzt, damit die Steinplatte am unteren Rand liegt */
.hero-bg img { object-position: 50% 82%; }
.hero-bg--t img { height: 116%; object-position: 50% 0; }
/* Lesbarkeit: weiche Aufhellung hinter dem Schriftzug und oben links (Fenster hinter Logo/Navigation) */
.hero-bg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(58% 30% at 50% 47%, rgba(248, 247, 244, .5) 0%, rgba(248, 247, 244, 0) 72%),
    radial-gradient(46% 34% at 6% 0%, rgba(248, 247, 244, .78) 0%, rgba(248, 247, 244, 0) 70%),
    linear-gradient(180deg, rgba(248, 247, 244, .55) 0%, rgba(248, 247, 244, 0) 14%);
}
.hero-bg--t::after {
  background:
    radial-gradient(80% 22% at 50% 47%, rgba(248, 247, 244, .5) 0%, rgba(248, 247, 244, 0) 72%),
    radial-gradient(70% 26% at 12% 0%, rgba(248, 247, 244, .82) 0%, rgba(248, 247, 244, 0) 72%),
    linear-gradient(180deg, rgba(248, 247, 244, .6) 0%, rgba(248, 247, 244, 0) 16%);
}