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/css/main.css

@@ -860,6 +860,59 @@ footer.site-footer {
   .char-card, .char-card img { animation: none; transition: none; }
 }
 
+/* ==========================================================================
+   SEITEN-HINTERGRÜNDE
+
+   Jede Seite kann ihr eigenes Artwork hinter den Kopfbereich legen. Das Bild
+   wird nicht fest im CSS hinterlegt, sondern pro Seite über zwei Variablen
+   gesetzt — so bleibt eine einzige Regel für alle Seiten:
+
+     <section class="hero page-bg"
+              style="--page-bg:url('assets/img/bg-x.jpg');
+                     --page-bg-mobile:url('assets/img/bg-x-mobile.jpg');">
+
+   Aufbau: Bild (::before) → Abdunkelung (::after) → Inhalt.
+   Die Abdunkelung sorgt dafür, dass Überschriften immer lesbar bleiben und
+   der Rand sauber in die Seitenfarbe ausläuft.
+   ========================================================================== */
+.page-bg {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+}
+.page-bg::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -2;
+  background-image: var(--page-bg);
+  background-size: cover;
+  background-position: var(--page-bg-pos, center);
+  background-repeat: no-repeat;
+}
+.page-bg::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background:
+    radial-gradient(ellipse 115% 85% at 50% 45%,
+      rgba(0, 0, 0, .30) 0%, rgba(0, 0, 0, .66) 66%, rgba(0, 0, 0, .88) 100%),
+    linear-gradient(to bottom,
+      rgba(0, 0, 0, .62) 0%,
+      rgba(0, 0, 0, .34) 30%,
+      rgba(0, 0, 0, .48) 72%,
+      var(--bg) 100%);
+}
+/* Text auf Bildhintergrund immer mit weicher Abschattung */
+.page-bg h1, .page-bg h2, .page-bg .lead, .page-bg .eyebrow {
+  text-shadow: 0 2px 18px rgba(0, 0, 0, .8), 0 1px 3px rgba(0, 0, 0, .9);
+}
+.page-bg.hero { padding: clamp(4.5rem, 11vw, 7.5rem) 0; }
+@media (max-width: 760px) {
+  .page-bg::before { background-image: var(--page-bg-mobile, var(--page-bg)); }
+}
+
 /* ==========================================================================
    TEAM-DOGI-HINTERGRUND — die große Team-Collage hinter dem Team-Abschnitt
    ========================================================================== */

assets/js/data-modis.js

@@ -44,7 +44,8 @@ const MODIS = [
     name: "Funny",
     role: "Modi",
     rank: 3,
-    photo: "",
+    photo: "assets/img/card-funny.jpg",
+    avatar: "assets/img/avatar-funny.jpg",
     quote: "",
     social: {},
     page: "",
@@ -85,9 +86,12 @@ const MODIS = [
   },
   {
     name: "Ghost",
-    role: "Privat für Dogi — nicht für Stream-Themen zuständig", // neu dazugekommen, kein Foto verfügbar (Discord-Link abgelaufen)
+    role: "Privat für Dogi — nicht für Stream-Themen zuständig",
+    // Auf dem Bild sind Ghost und seine Frau zu sehen (von Dogi ausdrücklich
+    // freigegeben). Gezählt und vorgestellt wird hier ausschließlich Ghost.
     rank: 6,
-    photo: "",
+    photo: "assets/img/card-ghost.jpg",
+    avatar: "assets/img/avatar-ghost.jpg",
     quote: "",
     social: {},
     page: "",

assets/js/data-scouts.js

@@ -1,7 +1,7 @@
 /* =====================================================================
    data-scouts.js — Scout-Datenobjekt
    Scouts arbeiten mit Dogfather als Manager zusammen (Spicy Media),
-   50/50 Gewinn-Sharing-Modell (Details siehe manager.html / TODO).
+   Interne Vereinbarungen stehen bewusst NICHT auf der Website.
 
    NEUEN SCOUT HINZUFÜGEN: einfach ein neues Objekt unten ins Array
    kopieren und Felder ausfüllen. Kein Code-Umbau nötig — team-scouts.html

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", () => {