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]>

team-scouts.html

@@ -27,6 +27,7 @@
 
 <main>
   <section class="hero page-bg">
+    <div class="hero-banner"><img src="/assets/img/bg-scouts.jpg" alt="" loading="eager" /></div>
     <div class="container">
       <span class="eyebrow">Manager Dogfather — Spicy Media</span>
       <h1>Unser Scout-Team</h1>