Eigene Hintergrundbilder je Seite, neue Hauptfotos, Funny & Ghost

Bilder:
- Neues Hintergrund-System (.page-bg): jede Seite setzt ihr Motiv ueber
  zwei CSS-Variablen, inkl. eigenem Hochformat-Zuschnitt fuers Handy und
  Abdunkelung fuer Textlesbarkeit
- Hintergruende: Casper, Dogfather, Modi-Team, Scouts, VanVan, Bewerben,
  Manager, Streamplan, Zeitreise, Stimmen, Community, Werte, Creator
- Bewerbungsseite wechselt den Hintergrund mit dem gewaehlten Reiter
- Neue Hauptfotos auf der Casper- und der Dogfather-Seite
- Stream-Highlight-Bild auf der Streamer-Seite
- Funny (Team-Tili-Dog-Abzeichen) und Ghost jetzt mit Bild

Inhalt:
- Scout-Beschreibung: "Sie finden und begleiten neue Talente fuer Dogi."
- Alle Angaben zu Beteiligungen/Verdiensten der Scouts von der Website
  entfernt — interne Vereinbarungen gehen die Oeffentlichkeit nichts an

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

assets/js/forms.js

@@ -108,6 +108,23 @@ function setupForm(formId, subjectLabel) {
   });
 }
 
+/* Der Kopfbereich wechselt sein Hintergrundbild mit dem gewählten Reiter:
+   Creator bekommt sein eigenes Motiv, Scout und Kooperation das
+   Spicy-Media-Motiv. So passt das Bild immer zur gewählten Bewerbung. */
+const TAB_HINTERGRUENDE = {
+  "tab-creator": "bg-bewerben-creator",
+  "tab-scout": "bg-bewerben",
+  "tab-kooperation": "bg-bewerben",
+};
+
+function setzeTabHintergrund(tabId) {
+  const hero = document.querySelector(".hero.page-bg");
+  const basis = TAB_HINTERGRUENDE[tabId];
+  if (!hero || !basis) return;
+  hero.style.setProperty("--page-bg", `url('assets/img/${basis}.jpg')`);
+  hero.style.setProperty("--page-bg-mobile", `url('assets/img/${basis}-mobile.jpg')`);
+}
+
 function setupTabs() {
   const tabs = document.querySelectorAll(".tab-btn");
   const panels = document.querySelectorAll(".tab-panel");
@@ -117,8 +134,13 @@ function setupTabs() {
       panels.forEach((p) => p.classList.remove("active"));
       tab.classList.add("active");
       document.getElementById(tab.dataset.tab).classList.add("active");
+      setzeTabHintergrund(tab.dataset.tab);
     });
   });
+
+  // Beim Laden passend zum bereits aktiven Reiter setzen
+  const aktiv = document.querySelector(".tab-btn.active");
+  if (aktiv) setzeTabHintergrund(aktiv.dataset.tab);
 }
 
 document.addEventListener("DOMContentLoaded", () => {