Hintergrundbilder: garantiert volle Breite UND komplett sichtbar

Nach mehreren Anlaeufen mit CSS background-size (cover schnitt Raender
ab, "100% auto" schnitt oben/unten ab sobald die Box nicht exakt im
Bildseitenverhaeltnis war) jetzt die einzige Loesung, die beides IMMER
garantiert: ein echtes <img width:100% height:auto> statt eines CSS-
Hintergrunds. Die Bildhoehe bestimmt sich selbst statt in eine
vorgegebene Box gepresst zu werden -- dadurch kann nichts mehr
beschnitten werden, unabhaengig vom Bildseitenverhaeltnis.

- 18 Seiten (alle bewerben-*, casper, community, creator, dogfather,
  hasidog, manager, stimmen, streamplan, team-modis, team-scouts,
  vanvan, werte, zeitreise) bekommen einen echten Bild-Banner oben im
  Kopfbereich statt eines CSS-Hintergrunds. Bild sitzt jetzt als
  eigener Banner OBERHALB der Ueberschrift, mit weichem Verlauf zur
  Seite hin.
- profil.html: gleiches Prinzip, Bild wird per JS passend zur Person
  (Modi/Scout/Creator-Welt) nachgeladen.
- index.html/hasidog.html (Kino-Hintergrund mit Text UEBER dem Bild +
  Polarlicht-Effekten): Redesign auf Banner-Layout haette das Design
  zerstoert. Stattdessen die scharfe Bildebene auf "contain" umgestellt
  (garantiert komplett sichtbar), die vorhandene weichgezeichnete
  Cover-Ebene darunter fuellt jeden Rand, den "contain" freilaesst --
  wirkt dadurch weiterhin randlos, obwohl die scharfen Pixel nie
  beschnitten werden.

Co-Authored-By: Claude Opus 5 <[email protected]>

profil.html

@@ -54,6 +54,7 @@
 
 <main>
   <section class="hero page-bg">
+    <div class="hero-banner" id="profil-banner" style="display:none;"><img id="profil-banner-img" src="" alt="" loading="eager" /></div>
     <div class="container">
       <span class="eyebrow" id="profil-eyebrow">🩵 Team Dogi</span>
       <h1 id="profil-hero-name">Profil</h1>
@@ -127,10 +128,15 @@ document.addEventListener("DOMContentLoaded", () => {
   const welt = istScout || istCreator ? "spicymedia" : "dogfather";
   document.documentElement.setAttribute("data-theme", welt);
 
-  // Passendes Weltmotiv im Hintergrund, wie auf den Team-Übersichtsseiten
+  // Passendes Weltmotiv im Hintergrund, wie auf den Team-Übersichtsseiten.
+  // Ambiente-Ebene (weichgezeichnet, body-weit) UND der scharfe Banner
+  // oben im Kopfbereich (echtes <img>, dadurch immer komplett sichtbar
+  // und randlos breit — siehe main.css .hero-banner).
   const bgBasis = istScout || istCreator ? "bg-scouts" : "bg-dogfather";
   document.body.style.setProperty("--page-bg", `url('/assets/img/${bgBasis}.jpg')`);
   document.body.style.setProperty("--page-bg-mobile", `url('/assets/img/${bgBasis}-mobile.jpg')`);
+  document.getElementById("profil-banner-img").src = `/assets/img/${bgBasis}.jpg`;
+  document.getElementById("profil-banner").style.display = "";
 
   document.title = `${person.name} — DOGFATHER UNIVERSE`;
   // Für die Meta-Beschreibung reicht immer ein kurzer Textauszug, auch