/* =====================================================================
   HERO-FOTO-EBENE (Titelbild mit Zoom + Position)
   Geteilt zwischen Gast-Hero (index.html: <header>) und Admin-Titelbild-
   Vorschau (admin.html: .hero-edit-frame). Beide bauen die Ebene mit
   renderHeroPhoto() (src/shared/logoRender.js) -- dieselbe DOM-Struktur und
   dieselbe CSS, damit der gespeicherte Ausschnitt ueberall identisch wirkt.

   Aufbau:  .hero-photo (Rahmen, beschneidet)
              .hero-photo-img (das Foto: cover + Position + Zoom)
              ::after         (Verlaufs-Overlay, bewegt/zoomt NICHT mit)

   Position: background-position (wie bisher). Zoom: scale() um die Mitte plus
   eine Gegenverschiebung, die den Brennpunkt (--hero-pos-x/-y) im Bild haelt
   und dabei nie eine Luecke am Rand laesst -- dieselbe Formel wie beim
   Kategoriebild (menuCards.css: .cat-thumb img). Ohne gepflegten Ausschnitt
   (Zoom 1, Position 50/50) entspricht das exakt dem bisherigen Rendering.

   z-index:-1 + isolation:isolate (am Container): das Foto liegt ueber dem
   Container-Hintergrund, aber unter allen Inhalten (Logo, Titel, Buttons).
   ===================================================================== */
.has-hero-photo { isolation: isolate; }

.hero-photo {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.hero-photo-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--hero-pos-x, 50%) var(--hero-pos-y, 50%);
  transform:
    scale(var(--hero-scale, 1))
    translate(
      calc((50% - var(--hero-pos-x, 50%)) * (var(--hero-scale, 1) - 1) / var(--hero-scale, 1)),
      calc((50% - var(--hero-pos-y, 50%)) * (var(--hero-scale, 1) - 1) / var(--hero-scale, 1))
    );
  transform-origin: center;
}
.hero-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--hero-overlay, none);
}