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

bewerben.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-bewerben.jpg');--page-bg-mobile:url('assets/img/bg-bewerben-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Manager Dogfather</span>
       <h1>Werde Teil vom Team</h1>
@@ -85,7 +85,7 @@
             <label for="s-verfuegbarkeit">Wie viel Zeit kannst du investieren? *</label>
             <input id="s-verfuegbarkeit" name="verfuegbarkeit" type="text" required />
           </div>
-          <p class="small muted">Scouts arbeiten im 50/50 Gewinn-Sharing-Modell mit Dogfather zusammen — dafür wird aktive Mitarbeit erwartet.</p>
+          <p class="small muted">Scouts finden und begleiten neue Talente für Dogi.</p>
           <button class="btn btn-primary" type="submit">Bewerbung als Scout senden</button>
           <div class="form-status"></div>
         </form>

casper.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-casper.jpg');--page-bg-mobile:url('assets/img/bg-casper-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 2 — HasiDog</span>
       <h1>Casper 🐾</h1>
@@ -37,7 +37,7 @@
   <section class="section-tight">
     <div class="container grid grid-2" style="align-items:center;">
       <div class="collage-photo" style="aspect-ratio:4/3;border-radius:var(--radius);">
-        <img src="assets/img/casper-1.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;object-position:center top;" />
+        <img src="assets/img/casper-main.jpg" alt="Casper — Husky im Sonnenuntergang" style="width:100%;height:100%;object-fit:cover;object-position:center 30%;" />
       </div>
       <div>
         <h2>Wer ist Casper?</h2>

community.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-community.jpg');--page-bg-mobile:url('assets/img/bg-community-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 2 — HasiDog</span>
       <h1>Die Community</h1>

creator.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-bewerben-creator.jpg');--page-bg-mobile:url('assets/img/bg-bewerben-creator-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Manager Dogfather — Team</span>
       <h1>Creator im Team</h1>

dogfather.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-dogfather.jpg');--page-bg-mobile:url('assets/img/bg-dogfather-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 1 — Dogfather</span>
       <h1>Die Person hinter Dogfather</h1>
@@ -37,7 +37,7 @@
   <section class="section-tight">
     <div class="container grid grid-2" style="align-items:center;">
       <div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
-        <img src="assets/img/dogfather-portrait.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;object-position:center top;" />
+        <img src="assets/img/dogfather-main.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;object-position:center 28%;" />
       </div>
       <div>
         <h2>Wer ist Dogfather?</h2>

manager.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-manager.jpg');--page-bg-mobile:url('assets/img/bg-manager-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 3 — Manager Dogfather</span>
       <h1>Manager Dogfather bei Spicy Media</h1>
@@ -43,8 +43,8 @@
       <div>
         <h2>Spicy Media Agency</h2>
         <p>Neben seiner Arbeit als Streamer ist Dogfather Manager bei der Spicy Media Agency. Er unterstützt Scouts und Creator dabei, gemeinsam zu wachsen — professionell, aber mit demselben Herz wie im restlichen DOGFATHER UNIVERSE.</p>
-        <p>Scouts arbeiten in einem 50/50 Gewinn-Sharing-Modell mit Dogfather zusammen.</p>
-      <!-- TODO: TODO / zu bestätigen: Genaue Kommissions-/Gewinnbeteiligungs-Details sollen so öffentlich stehen? Bitte mit Dogi final absegnen, bevor die Seite live geht. -->
+        <p>Scouts finden und begleiten neue Talente für Dogi.</p>
+      <!-- Bewusst NICHT öffentlich: interne Vereinbarungen, Beteiligungen oder Verdienste der Scouts. Das geht die Öffentlichkeit nichts an (Vorgabe Dogi, 31.07.2026). -->
       </div>
       <div class="collage-photo" style="aspect-ratio:4/3;border-radius:var(--radius);background:#000;">
         <img src="assets/img/spicy-media-logo.jpg" alt="Spicy Media Agency Logo"

stimmen.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-stimmen.jpg');--page-bg-mobile:url('assets/img/bg-stimmen-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 2 — HasiDog</span>
       <h1>Stimmen über Dogfather</h1>

streamer.html

@@ -68,8 +68,8 @@
         <p>Weil hier niemand nur zuschaut, sondern dazugehört. Dogfather ist loyal, witzig, konfliktscheu aber direkt wenn es drauf ankommt — und immer erreichbar für seine Community.</p>
       <!-- TODO: TODO (Masterplan Block D — Streamformate/Insider): Konkrete Streamformate, wiederkehrende Segmente, Running Gags und Insider-Begriffe werden hier ergänzt, sobald die entsprechenden Fragen aus dem 110-Fragen-Katalog mit Dogi geklärt sind. -->
       </div>
-      <div class="img-placeholder" style="aspect-ratio:16/10;">
-        Stream-Szene / Highlight-Bild<br><span class="small">folgt in Kürze</span>
+      <div class="collage-photo frame-lila" style="aspect-ratio:16/10;border-radius:var(--radius);">
+        <img src="assets/img/streamer-highlight.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;object-position:center 28%;" />
       </div>
     </div>
   </section>

streamplan.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-streamplan.jpg');--page-bg-mobile:url('assets/img/bg-streamplan-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 1 — Dogfather</span>
       <h1>Streamplan &amp; Livebereich</h1>

team-modis.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero team-bg">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-dogfather.jpg');--page-bg-mobile:url('assets/img/bg-dogfather-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">🩵 Team Dogi</span>
       <h1>Das Modi-Team</h1>

team-scouts.html

@@ -26,11 +26,11 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-scouts.jpg');--page-bg-mobile:url('assets/img/bg-scouts-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Manager Dogfather — Spicy Media</span>
       <h1>Unser Scout-Team</h1>
-      <p class="lead worlds">Sie finden und begleiten neue Talente für Team Dogi — mit 50/50 Gewinn-Sharing.</p>
+      <p class="lead worlds">Sie finden und begleiten neue Talente für Dogi.</p>
     </div>
   </section>
 

vanvan.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-vanvan.jpg');--page-bg-mobile:url('assets/img/bg-vanvan-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">🩵 Exklusive Seite</span>
       <h1>VanVan</h1>

werte.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-werte.jpg');--page-bg-mobile:url('assets/img/bg-werte-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 3 — Manager Dogfather</span>
       <h1>Werte als Manager</h1>
@@ -39,7 +39,7 @@
       <div class="grid grid-3">
         <div class="card">
           <h3>🤝 Fairness</h3>
-          <p>Zusammenarbeit auf Augenhöhe — z.B. das 50/50 Gewinn-Sharing-Modell mit Scouts.</p>
+          <p>Zusammenarbeit auf Augenhöhe — klare Absprachen, verlässlich und fair.</p>
         </div>
         <div class="card">
           <h3>📈 Wachstum ermöglichen</h3>

zeitreise.html

@@ -26,7 +26,7 @@
 <div id="site-header"></div>
 
 <main>
-  <section class="hero">
+  <section class="hero page-bg" style="--page-bg:url('assets/img/bg-zeitreise.jpg');--page-bg-mobile:url('assets/img/bg-zeitreise-mobile.jpg');">
     <div class="container">
       <span class="eyebrow">Welt 1 — Dogfather</span>
       <h1>Zeitreise</h1>