Medien komplett neu strukturiert: 3 Welten (Dogfather/HasiDog/Casper) statt Galerie/Videos/Aktionen getrennt

Auf Wunsch von Dogi: Medien-Menü zeigt jetzt Dogfather / HasiDog / Casper statt Galerie / Videos / Aktionen. Jede der 3 neuen Seiten (medien-dogfather.html / medien-hasidog.html / medien-casper.html) zeigt alles zu ihrer Welt an einem Ort, sauber in 3 Bereiche kategorisiert: Fotos, Videos, Events. - Neu: assets/js/data-media.js (ersetzt gallery.js) - Fotos jetzt mit welt: dogfather|hasidog|casper statt dogfather/team/hasidog/manager. Team-Mitglieder-Fotos und Logo entfernt (Wunsch Dogi - passen in keine der 3 Welten, bleiben weiter auf ihren Profilseiten). Casper-Fotos aus der alten "hasidog"-Sammelkategorie sauber herausgelöst. Zusätzliche bisher ungenutzte Fotos ergänzt (dogfather-main, char-dogfather, manager-dogfather-portrait, char-hasidog, casper-main). - Neu: assets/js/data-videos.js - Struktur pro Welt vorbereitet (noch keine echten Videos vorhanden, Platzhalter "folgt in Kürze") - data-aktionen.js: alle 4 bestehenden Events als welt:"dogfather" getaggt (alles Team-Dogi-weite Community-Aktionen) - Neu: assets/js/medien-welt.js - eine gemeinsame Render-Logik für alle 3 Seiten (liest body[data-welt]), rendert Foto-Grid+Lightbox, Video-Grid, Events-Grid gefiltert nach Welt - aktion-detail.html: "Zurück"-Button zeigt jetzt dynamisch auf die Events-Sektion der richtigen Welt (aktion.welt) - main.js NAV: Medien-Untermenü aktualisiert - Alle Querverweise site-weit korrigiert (casper.html, community.html, hasidog.html, index.html, streamer.html) - Anker-Links (#fotos/#videos/ #events) für Deep-Links direkt in den passenden Bereich - Alte Dateien gelöscht: medien.html, videos.html, aktionen.html, gallery.js - sitemap.xml aktualisiert
2026-08-01 16:30:36 +02:00
parent 47350df0c7
commit e9d0c98aed
19 changed files with 393 additions and 294 deletions
@@ -43,7 +43,7 @@

  <section>
    <div class="container text-center">
-      <a class="btn btn-outline" href="aktionen.html">← Zurück zu allen Aktionen</a>
+      <a class="btn btn-outline" id="aktion-back" href="medien-dogfather.html#events">← Zurück zu allen Events</a>
    </div>
  </section>
 </main>
@@ -61,14 +61,20 @@ document.addEventListener("DOMContentLoaded", () => {
  const summaryEl = document.getElementById("aktion-summary");
  const bodyEl = document.getElementById("aktion-body");
  const photoEl = document.getElementById("aktion-photo");
+  const backEl = document.getElementById("aktion-back");

  if (!aktion) {
    titleEl.textContent = "Aktion nicht gefunden";
    summaryEl.textContent = "Diese Aktion existiert nicht (mehr) oder wurde noch nicht angelegt.";
-    bodyEl.innerHTML = `<p>Bitte über <a href="aktionen.html">alle Aktionen</a> zurückgehen.</p>`;
+    bodyEl.innerHTML = `<p>Bitte über <a href="medien-dogfather.html#events">alle Events</a> zurückgehen.</p>`;
    return;
  }

+  // Zurück-Button zeigt auf die Events-Sektion der passenden Welt
+  // (jede Aktion gehört zu Dogfather/HasiDog/Casper, siehe data-aktionen.js).
+  const welt = ["dogfather", "hasidog", "casper"].includes(aktion.welt) ? aktion.welt : "dogfather";
+  if (backEl) backEl.href = `medien-${welt}.html#events`;
+
  titleEl.textContent = aktion.title;
  summaryEl.textContent = aktion.summary;
  bodyEl.innerHTML = `
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="de" data-theme="dogfather">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Aktionen &amp; Projekte — DOGFATHER UNIVERSE</title>
-<meta name="description" content="Aktionen und Projekte von Team Dogi: Weihnachtsaktion, Community-Treffen, Kooperationen und mehr." />
-<link rel="icon" type="image/png" href="assets/img/favicon.png" />
-<meta property="og:type" content="website" />
-<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
-<meta property="og:title" content="Aktionen &amp; Projekte — DOGFATHER UNIVERSE" />
-<meta property="og:description" content="Aktionen und Projekte von Team Dogi: Weihnachtsaktion, Community-Treffen, Kooperationen und mehr." />
-<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
-<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/aktionen.html" />
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content="Aktionen &amp; Projekte — DOGFATHER UNIVERSE" />
-<meta name="twitter:description" content="Aktionen und Projekte von Team Dogi: Weihnachtsaktion, Community-Treffen, Kooperationen und mehr." />
-<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
-
-<link rel="stylesheet" href="assets/css/main.css" />
-<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
-<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
-<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
-</head>
-<body>
-<div id="site-header"></div>
-
-<main>
-  <section class="hero">
-    <div class="container">
-      <span class="eyebrow">Aktionen &amp; Projekte</span>
-      <h1>Was Team Dogi gerade bewegt</h1>
-      <p class="lead worlds">Von Tierwohl-Aktionen bis Merchandise-Kooperationen.</p>
-    </div>
-  </section>
-
-  <section class="section-tight">
-    <div class="container">
-      <div id="aktionen-grid" class="grid grid-2"></div>
-    </div>
-  </section>
-</main>
-
-<div id="site-footer"></div>
-<script src="assets/js/data-aktionen.js"></script>
-<script src="assets/js/main.js"></script>
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-  const grid = document.getElementById("aktionen-grid");
-  if (!grid || !window.AKTIONEN) return;
-  grid.innerHTML = window.AKTIONEN.map((a) => `
-    <a class="card" href="aktion-detail.html?id=${a.id}">
-      <span class="tag">${a.tag} · ${a.status}</span>
-      <h3>${a.title}</h3>
-      <p>${a.summary}</p>
-      <span class="small" style="color:var(--accent);">Details ansehen →</span>
-    </a>`).join("");
-});
-</script>
-</body>
-</html>
@@ -1,15 +1,18 @@
 /* =====================================================================
   data-aktionen.js — Aktionen & Projekte-Datenobjekt

-   aktionen.html rendert daraus die Übersichtskarten, aktion-detail.html
-   liest per URL-Parameter (?id=slug) den passenden Eintrag aus und
-   zeigt die Detailansicht — so gibt es EIN Template für alle Aktionen,
-   ohne für jede neue Aktion eine neue HTML-Datei zu brauchen.
+   Die 3 Welten-Medienseiten (medien-dogfather.html / medien-hasidog.html
+   / medien-casper.html) rendern daraus je Welt die passenden Events,
+   aktion-detail.html liest per URL-Parameter (?id=slug) den passenden
+   Eintrag aus und zeigt die Detailansicht — so gibt es EIN Template für
+   alle Aktionen, ohne für jede neue Aktion eine neue HTML-Datei zu
+   brauchen.

   Felder:
     id          – eindeutiger Slug (für aktion-detail.html?id=...)
     title, summary, description (Array von Absätzen)
     status      – "geplant" | "läuft" | "abgeschlossen"
+     welt        – "dogfather" | "hasidog" | "casper"
     tag         – kurzer Kategorie-Text fürs Badge
     photo       – Pfad zu assets/img/... oder "" für Platzhalter
   ===================================================================== */
@@ -20,6 +23,7 @@ const AKTIONEN = [
    title: "Weihnachtsaktion & Portugal-Trip",
    tag: "Tierwohl",
    status: "geplant",
+    welt: "dogfather",
    summary: "Weihnachtsaktion für Tierheime in Portugal — Team Dogi hilft Tieren in Not.",
    description: [
      "Jedes Jahr organisiert Team Dogi eine Weihnachtsaktion zugunsten von Tierheimen in Portugal.",
@@ -32,6 +36,7 @@ const AKTIONEN = [
    title: "Community-Treffen (Geburtstag)",
    tag: "Community",
    status: "geplant",
+    welt: "dogfather",
    summary: "Ein persönliches Treffen mit der Community rund um Dogfathers Geburtstag.",
    description: [
      "Team Dogi ist Familie — deshalb gibt es ein reales Treffen mit der Community.",
@@ -44,6 +49,7 @@ const AKTIONEN = [
    title: "Kooperation: VanVan Teddys",
    tag: "Merchandise",
    status: "läuft",
+    welt: "dogfather",
    summary: "Merchandise-Kooperation rund um VanVan — Teddys für die Community.",
    description: [
      "Gemeinsam mit VanVan entstehen limitierte Teddys als Teil des Merchandise-Angebots.",
@@ -56,6 +62,7 @@ const AKTIONEN = [
    title: "Online-Shop (in Planung)",
    tag: "Merchandise",
    status: "geplant",
+    welt: "dogfather",
    summary: "Der eigene Online-Shop für Tassen, Decken, Popsockets, Schlüsselanhänger, Sticker & mehr.",
    description: [
      "Aktuell läuft der Merchandise-Vertrieb nur über private Einzelbestellungen.",
@@ -0,0 +1,38 @@
+/* =====================================================================
+   data-media.js — Foto-Datenobjekt für die 3 Welten-Medienseiten
+   (medien-dogfather.html / medien-hasidog.html / medien-casper.html)
+
+   Ersetzt das frühere gallery.js (eine gemeinsame Galerie mit
+   "dogfather/team/hasidog/manager"-Filter) — auf Wunsch von Dogi gibt es
+   jetzt genau 3 Welten: dogfather, hasidog, casper. Team-Mitglieder-Fotos
+   und das Logo passen in keine der 3 Welten und wurden bewusst entfernt
+   (bleiben aber weiterhin auf ihren eigenen Profilseiten sichtbar).
+
+   Felder pro Foto: { id, welt: "dogfather"|"hasidog"|"casper", alt, src }
+   ===================================================================== */
+
+const MEDIA = [
+  // ---- Dogfather ----
+  { id: 1, welt: "dogfather", alt: "Dogfather Profilbild", src: "assets/img/dogfather-portrait.jpg" },
+  { id: 2, welt: "dogfather", alt: "Dogfather — Team Dogi Karte", src: "assets/img/card-dogfather.jpg" },
+  { id: 3, welt: "dogfather", alt: "Dogfather Hauptfoto", src: "assets/img/dogfather-main.jpg" },
+  { id: 4, welt: "dogfather", alt: "Dogfather Charakter-Artwork", src: "assets/img/char-dogfather.jpg" },
+  { id: 5, welt: "dogfather", alt: "Dogfather als Manager", src: "assets/img/manager-dogfather-portrait.jpg" },
+
+  // ---- HasiDog ----
+  { id: 6, welt: "hasidog", alt: "HasiDog — das Maskottchen", src: "assets/img/char-hasidog.jpg" },
+  { id: 7, welt: "hasidog", alt: "HasiDog &amp; Casper Sticker", src: "assets/img/sticker-hasidog-casper.png" },
+  { id: 8, welt: "hasidog", alt: "Schlaft schön — Buch-Illustration", src: "assets/img/hasidog-casper-book.jpg" },
+
+  // ---- Casper ----
+  { id: 9, welt: "casper", alt: "Casper Hauptfoto", src: "assets/img/casper-main.jpg" },
+  { id: 10, welt: "casper", alt: "Husky Casper", src: "assets/img/casper-1.jpg" },
+  { id: 11, welt: "casper", alt: "Casper unterwegs", src: "assets/img/casper-2.jpg" },
+  { id: 12, welt: "casper", alt: "Casper", src: "assets/img/casper-3.jpg" },
+  { id: 13, welt: "casper", alt: "Casper", src: "assets/img/casper-4.jpg" },
+  { id: 14, welt: "casper", alt: "Casper &amp; Dogfather", src: "assets/img/dogfather-casper-1.jpg" },
+  { id: 15, welt: "casper", alt: "Dogfather &amp; Casper Nase an Nase", src: "assets/img/dogfather-casper-2.jpg" },
+  // TODO: Aktionen-Fotos (Weihnachtsaktion, VanVan-Teddys) ergänzen, sobald vorhanden.
+];
+
+if (typeof window !== "undefined") window.MEDIA = MEDIA;
@@ -0,0 +1,21 @@
+/* =====================================================================
+   data-videos.js — Video-Datenobjekt für die 3 Welten-Medienseiten
+
+   Bisher gibt es noch keine echten TikTok-Video-Links/Embeds — die
+   Struktur steht aber pro Welt bereit, damit nur noch echte Videos
+   eingetragen werden müssen (src leer = Platzhalter "folgt in Kürze").
+
+   Felder pro Video: { id, welt: "dogfather"|"hasidog"|"casper", title, src }
+   ===================================================================== */
+
+const VIDEOS = [
+  { id: 1, welt: "dogfather", title: "Streamer-Highlight", src: "" },
+  { id: 2, welt: "dogfather", title: "Halligalli-Moment", src: "" },
+  { id: 3, welt: "hasidog", title: "HasiDog-Chaos", src: "" },
+  { id: 4, welt: "hasidog", title: "Musik-Clip", src: "" },
+  { id: 5, welt: "casper", title: "Casper-Moment", src: "" },
+  { id: 6, welt: "casper", title: "Husky-Chaos", src: "" },
+  // TODO: Echte TikTok-Video-Links/Embeds ergänzen, sobald verfügbar.
+];
+
+if (typeof window !== "undefined") window.VIDEOS = VIDEOS;
@@ -1,94 +0,0 @@
-/* =====================================================================
-   gallery.js — filterbare Mediengalerie + Lightbox (für medien.html)
-
-   MEDIA-Array unten mit echten Bildern befüllen sobald verfügbar
-   (assets/img/...). Bis dahin rendert jeder Eintrag ohne "src" einen
-   Platzhalter-Block mit passendem Alt-Text, damit die Struktur schon
-   steht und nur noch Bilder eingehängt werden müssen.
-   ===================================================================== */
-
-const MEDIA = [
-  { id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "assets/img/dogfather-portrait.jpg" },
-  { id: 2, category: "dogfather", alt: "Dogfather — Team Dogi Karte", src: "assets/img/card-dogfather.jpg" },
-  { id: 3, category: "team", alt: "VanVan — Team Dogi Karte", src: "assets/img/card-vanvan.jpg" },
-  { id: 4, category: "team", alt: "Diene — Team Dogi Karte", src: "assets/img/card-diene.jpg" },
-  { id: 5, category: "team", alt: "Miss — Team Dogi Karte", src: "assets/img/card-miss.jpg" },
-  { id: 6, category: "team", alt: "Marina alias FlauschiRex — Team Dogi Karte", src: "assets/img/card-marina.jpg" },
-  { id: 7, category: "hasidog", alt: "HasiDog &amp; Casper Sticker", src: "assets/img/sticker-hasidog-casper.png" },
-  { id: 8, category: "hasidog", alt: "Husky Casper", src: "assets/img/casper-1.jpg" },
-  { id: 9, category: "hasidog", alt: "Casper &amp; Dogfather", src: "assets/img/dogfather-casper-1.jpg" },
-  { id: 10, category: "hasidog", alt: "Casper", src: "assets/img/casper-3.jpg" },
-  { id: 11, category: "hasidog", alt: "Casper", src: "assets/img/casper-4.jpg" },
-  { id: 12, category: "hasidog", alt: "Dogfather &amp; Casper Nase an Nase", src: "assets/img/dogfather-casper-2.jpg" },
-  { id: 13, category: "hasidog", alt: "Schlaft schön — Buch-Illustration", src: "assets/img/hasidog-casper-book.jpg" },
-  { id: 14, category: "hasidog", alt: "Casper unterwegs", src: "assets/img/casper-2.jpg" },
-  { id: 15, category: "manager", alt: "Dogfather Logo", src: "assets/img/logo-dogfather.png" },
-  // TODO: Aktionen-Fotos (Weihnachtsaktion, VanVan-Teddys) ergänzen, sobald vorhanden.
-];
-
-function renderGalleryItem(item) {
-  const media = item.src
-    ? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
-    : `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
-  return `
-    <figure class="gallery-item card" data-category="${item.category}" data-index="${item.id}">
-      ${media}
-      <figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption>
-    </figure>`;
-}
-
-function initGallery() {
-  const grid = document.getElementById("gallery-grid");
-  const filterBar = document.getElementById("gallery-filters");
-  if (!grid || !filterBar) return;
-
-  const categories = ["alle", ...new Set(MEDIA.map((m) => m.category))];
-  filterBar.innerHTML = categories
-    .map(
-      (c, i) =>
-        `<button class="filter-btn${i === 0 ? " active" : ""}" data-filter="${c}">${c[0].toUpperCase() + c.slice(1)}</button>`
-    )
-    .join("");
-
-  function draw(filter) {
-    const items = filter === "alle" ? MEDIA : MEDIA.filter((m) => m.category === filter);
-    grid.innerHTML = items.map(renderGalleryItem).join("") || `<p class="muted">Keine Bilder in dieser Kategorie.</p>`;
-    bindLightbox();
-  }
-
-  filterBar.addEventListener("click", (e) => {
-    const btn = e.target.closest(".filter-btn");
-    if (!btn) return;
-    filterBar.querySelectorAll(".filter-btn").forEach((b) => b.classList.remove("active"));
-    btn.classList.add("active");
-    draw(btn.dataset.filter);
-  });
-
-  function bindLightbox() {
-    const lb = document.getElementById("lightbox");
-    const lbContent = document.getElementById("lightbox-content");
-    if (!lb || !lbContent) return;
-    grid.querySelectorAll(".gallery-item").forEach((el) => {
-      el.addEventListener("click", () => {
-        lbContent.innerHTML = el.innerHTML;
-        lb.classList.add("open");
-      });
-    });
-  }
-
-  draw("alle");
-
-  const lb = document.getElementById("lightbox");
-  if (lb) {
-    lb.addEventListener("click", (e) => {
-      if (e.target === lb || e.target.closest(".lightbox-close")) {
-        lb.classList.remove("open");
-      }
-    });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape") lb.classList.remove("open");
-    });
-  }
-}
-
-document.addEventListener("DOMContentLoaded", initGallery);
@@ -43,11 +43,15 @@
      ],
    },
    {
+      // Medien ist bewusst nach den 3 Welten aufgeteilt statt nach
+      // Foto/Video/Aktionen getrennt zu sein — Wunsch von Dogi: pro Welt
+      // (Dogfather/HasiDog/Casper) gibt es EINE Seite mit allem
+      // kategorisiert (Fotos, Videos, Events), siehe medien-*.html.
      label: "Medien",
      children: [
-        { label: "Galerie", href: "medien.html" },
-        { label: "Videos", href: "videos.html" },
-        { label: "Aktionen", href: "aktionen.html" },
+        { label: "Dogfather", href: "medien-dogfather.html" },
+        { label: "HasiDog", href: "medien-hasidog.html" },
+        { label: "Casper", href: "medien-casper.html" },
      ],
    },
    { label: "Links", href: "links.html" },
@@ -0,0 +1,78 @@
+/* =====================================================================
+   medien-welt.js — gemeinsame Render-Logik für die 3 Welten-Medienseiten
+   (medien-dogfather.html / medien-hasidog.html / medien-casper.html)
+
+   Jede der 3 Seiten setzt <body data-welt="dogfather|hasidog|casper"> und
+   lädt data-media.js, data-videos.js, data-aktionen.js VOR dieser Datei —
+   so gibt es EIN Template/Skript für alle 3 Welten, ohne Code-Verdopplung.
+   ===================================================================== */
+
+function renderFotoItem(item) {
+  const media = item.src
+    ? `<img src="${item.src}" alt="${item.alt}" loading="lazy" />`
+    : `<div class="img-placeholder">${item.alt}<br><span class="small">Foto folgt</span></div>`;
+  return `<figure class="gallery-item card">${media}<figcaption class="small muted" style="margin-top:.6rem;">${item.alt}</figcaption></figure>`;
+}
+
+function renderVideoItem(item) {
+  const media = item.src
+    ? `<video src="${item.src}" controls style="width:100%;aspect-ratio:9/16;object-fit:cover;border-radius:8px;"></video>`
+    : `<div class="img-placeholder" style="aspect-ratio:9/16;">${item.title}<br><span class="small">Video folgt</span></div>`;
+  return `<figure class="card">${media}<figcaption class="small muted" style="margin-top:.6rem;">${item.title}</figcaption></figure>`;
+}
+
+function renderAktionItem(a) {
+  return `
+    <a class="card" href="aktion-detail.html?id=${a.id}">
+      <span class="tag">${a.tag} · ${a.status}</span>
+      <h3>${a.title}</h3>
+      <p>${a.summary}</p>
+      <span class="small" style="color:var(--accent);">Details ansehen →</span>
+    </a>`;
+}
+
+function bindLightbox() {
+  const lb = document.getElementById("lightbox");
+  const lbContent = document.getElementById("lightbox-content");
+  if (!lb || !lbContent) return;
+  document.querySelectorAll("#foto-grid .gallery-item").forEach((el) => {
+    el.addEventListener("click", () => {
+      lbContent.innerHTML = el.innerHTML;
+      lb.classList.add("open");
+    });
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  const welt = document.body.dataset.welt;
+  if (!welt) return;
+
+  const fotoGrid = document.getElementById("foto-grid");
+  if (fotoGrid) {
+    const fotos = (window.MEDIA || []).filter((m) => m.welt === welt);
+    fotoGrid.innerHTML = fotos.map(renderFotoItem).join("") || `<p class="muted">Noch keine Fotos in dieser Welt.</p>`;
+    bindLightbox();
+  }
+
+  const videoGrid = document.getElementById("video-grid");
+  if (videoGrid) {
+    const videos = (window.VIDEOS || []).filter((v) => v.welt === welt);
+    videoGrid.innerHTML = videos.map(renderVideoItem).join("") || `<p class="muted">Noch keine Videos in dieser Welt.</p>`;
+  }
+
+  const aktionenGrid = document.getElementById("aktionen-grid");
+  if (aktionenGrid) {
+    const aktionen = (window.AKTIONEN || []).filter((a) => a.welt === welt);
+    aktionenGrid.innerHTML = aktionen.map(renderAktionItem).join("") || `<p class="muted">Aktuell keine Events in dieser Welt.</p>`;
+  }
+
+  const lb = document.getElementById("lightbox");
+  if (lb) {
+    lb.addEventListener("click", (e) => {
+      if (e.target === lb || e.target.closest(".lightbox-close")) lb.classList.remove("open");
+    });
+    document.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") lb.classList.remove("open");
+    });
+  }
+});
@@ -76,7 +76,7 @@
        <div class="collage-photo frame-tuerkis" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/hasidog-casper-book.jpg" alt="HasiDog &amp; Casper Buch-Illustration" style="width:100%;height:100%;object-fit:cover;" /></div>
      </div>
      <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>
+        <a class="btn btn-outline" href="medien-casper.html#fotos">Zur ganzen Galerie</a>
      </div>
    </div>
  </section>
@@ -74,7 +74,7 @@
        <div class="card text-center"><h3>💬 Offenes Ohr</h3><p>Immer erreichbar, immer präsent.</p></div>
      </div>
      <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="aktionen.html">Community-Aktionen ansehen</a>
+        <a class="btn btn-outline" href="medien-dogfather.html#events">Community-Aktionen ansehen</a>
        <a class="btn btn-outline" href="stimmen.html">Stimmen aus der Community</a>
      </div>
    </div>
@@ -175,8 +175,8 @@
      <div class="btn-row" style="justify-content:center;">
        <a class="btn btn-primary" href="https://open.spotify.com/intl-de/artist/2INiE1VVJGUQdEURsltuJU" target="_blank" rel="noopener">🎵 HasiDog-Musik entdecken</a>
        <a class="btn btn-secondary" href="casper.html">🐺 Casper kennenlernen</a>
-        <a class="btn btn-outline" href="videos.html">🎥 Videos ansehen</a>
-        <a class="btn btn-outline" href="medien.html">📸 Galerie öffnen</a>
+        <a class="btn btn-outline" href="medien-hasidog.html#videos">🎥 Videos ansehen</a>
+        <a class="btn btn-outline" href="medien-hasidog.html#fotos">📸 Galerie öffnen</a>
        <a class="btn btn-outline" href="community.html">👨‍👩‍👧‍👦 Die HasiDog-Familie entdecken</a>
      </div>
    </div>
@@ -166,9 +166,9 @@
        <a class="card" href="community.html"><h3>🩵 Community</h3><p class="small">Team Dogi ist Familie.</p></a>
        <a class="card" href="casper.html"><h3>🐾 Casper</h3><p class="small">Der Husky an Dogfathers Seite.</p></a>
        <a class="card" href="team-modis.html"><h3>🧑‍🤝‍🧑 Modi-Team</h3><p class="small">VanVan, Diene &amp; Co.</p></a>
-        <a class="card" href="aktionen.html"><h3>🎁 Aktionen</h3><p class="small">Projekte, Kooperationen, Tierwohl.</p></a>
-        <a class="card" href="medien.html"><h3>🖼️ Galerie</h3><p class="small">Fotos aus allen drei Welten.</p></a>
-        <a class="card" href="videos.html"><h3>▶️ Videos</h3><p class="small">Die besten Highlights.</p></a>
+        <a class="card" href="medien-dogfather.html"><h3>🖼️ Medien: Dogfather</h3><p class="small">Fotos, Videos &amp; Events.</p></a>
+        <a class="card" href="medien-hasidog.html"><h3>🐰 Medien: HasiDog</h3><p class="small">Fotos, Videos &amp; Events.</p></a>
+        <a class="card" href="medien-casper.html"><h3>🐺 Medien: Casper</h3><p class="small">Fotos, Videos &amp; Events.</p></a>
      </div>
    </div>
  </section>
@@ -192,7 +192,7 @@
      <h2 class="text-center">Was gerade läuft</h2>
      <div id="aktionen-teaser" class="grid grid-3"></div>
      <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="aktionen.html">Alle Aktionen &amp; Projekte</a>
+        <a class="btn btn-outline" href="medien-dogfather.html#events">Alle Aktionen &amp; Projekte</a>
      </div>
    </div>
  </section>
@@ -208,7 +208,7 @@
        <div class="collage-photo frame-gold" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/card-dogfather.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;" /></div>
      </div>
      <div class="btn-row" style="justify-content:center;">
-        <a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>
+        <a class="btn btn-outline" href="medien-dogfather.html">Zur ganzen Galerie</a>
      </div>
    </div>
  </section>
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="hasidog">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Medien — Casper — DOGFATHER UNIVERSE</title>
+<meta name="description" content="Fotos, Videos und Events rund um Husky Casper an einem Ort." />
+<link rel="icon" type="image/png" href="assets/img/favicon.png" />
+<meta property="og:type" content="website" />
+<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
+<meta property="og:title" content="Medien — Casper — DOGFATHER UNIVERSE" />
+<meta property="og:description" content="Fotos, Videos und Events rund um Husky Casper an einem Ort." />
+<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/medien-casper.html" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="Medien — Casper — DOGFATHER UNIVERSE" />
+<meta name="twitter:description" content="Fotos, Videos und Events rund um Husky Casper an einem Ort." />
+<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+
+<link rel="stylesheet" href="assets/css/main.css" />
+<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
+<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
+<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
+</head>
+<body class="mit-hintergrund" data-welt="casper" style="--page-bg:url('/assets/img/bg-casper.jpg');--page-bg-mobile:url('/assets/img/bg-casper-mobile.jpg');">
+<div id="site-header"></div>
+
+<main>
+  <section class="hero page-bg">
+    <div class="hero-banner"><img src="/assets/img/bg-casper.jpg" alt="" loading="eager" /></div>
+    <div class="container">
+      <span class="eyebrow">Welt 2 — HasiDog</span>
+      <h1>Medien — Casper</h1>
+      <p class="lead worlds">Fotos, Videos und Events rund um Husky Casper — alles an einem Ort.</p>
+    </div>
+  </section>
+
+  <section class="section-tight" id="fotos">
+    <div class="container">
+      <h2 class="text-center">📸 Fotos</h2>
+      <div id="foto-grid" class="grid grid-4"></div>
+    </div>
+  </section>
+
+  <section class="section-tight" id="videos">
+    <div class="container">
+      <h2 class="text-center">🎥 Videos</h2>
+      <div id="video-grid" class="grid grid-3"></div>
+    </div>
+  </section>
+
+  <section class="section-tight" id="events">
+    <div class="container">
+      <h2 class="text-center">🎉 Events</h2>
+      <div id="aktionen-grid" class="grid grid-2"></div>
+    </div>
+  </section>
+</main>
+
+<div id="lightbox" class="lightbox">
+  <button class="lightbox-close" aria-label="Schließen">×</button>
+  <div id="lightbox-content"></div>
+</div>
+
+<div id="site-footer"></div>
+<script src="assets/js/data-media.js"></script>
+<script src="assets/js/data-videos.js"></script>
+<script src="assets/js/data-aktionen.js"></script>
+<script src="assets/js/medien-welt.js"></script>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="dogfather">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Medien — Dogfather — DOGFATHER UNIVERSE</title>
+<meta name="description" content="Fotos, Videos und Events aus Dogfathers Welt an einem Ort." />
+<link rel="icon" type="image/png" href="assets/img/favicon.png" />
+<meta property="og:type" content="website" />
+<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
+<meta property="og:title" content="Medien — Dogfather — DOGFATHER UNIVERSE" />
+<meta property="og:description" content="Fotos, Videos und Events aus Dogfathers Welt an einem Ort." />
+<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/medien-dogfather.html" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="Medien — Dogfather — DOGFATHER UNIVERSE" />
+<meta name="twitter:description" content="Fotos, Videos und Events aus Dogfathers Welt an einem Ort." />
+<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+
+<link rel="stylesheet" href="assets/css/main.css" />
+<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
+<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
+<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
+</head>
+<body class="mit-hintergrund" data-welt="dogfather" style="--page-bg:url('/assets/img/bg-dogfather.jpg');--page-bg-mobile:url('/assets/img/bg-dogfather-mobile.jpg');">
+<div id="site-header"></div>
+
+<main>
+  <section class="hero page-bg">
+    <div class="hero-banner"><img src="/assets/img/bg-dogfather.jpg" alt="" loading="eager" /></div>
+    <div class="container">
+      <span class="eyebrow">Welt 1 — Dogfather</span>
+      <h1>Medien — Dogfather</h1>
+      <p class="lead worlds">Fotos, Videos und Events aus Dogfathers Welt — alles an einem Ort.</p>
+    </div>
+  </section>
+
+  <section class="section-tight" id="fotos">
+    <div class="container">
+      <h2 class="text-center">📸 Fotos</h2>
+      <div id="foto-grid" class="grid grid-4"></div>
+    </div>
+  </section>
+
+  <section class="section-tight" id="videos">
+    <div class="container">
+      <h2 class="text-center">🎥 Videos</h2>
+      <div id="video-grid" class="grid grid-3"></div>
+    </div>
+  </section>
+
+  <section class="section-tight" id="events">
+    <div class="container">
+      <h2 class="text-center">🎉 Events</h2>
+      <div id="aktionen-grid" class="grid grid-2"></div>
+    </div>
+  </section>
+</main>
+
+<div id="lightbox" class="lightbox">
+  <button class="lightbox-close" aria-label="Schließen">×</button>
+  <div id="lightbox-content"></div>
+</div>
+
+<div id="site-footer"></div>
+<script src="assets/js/data-media.js"></script>
+<script src="assets/js/data-videos.js"></script>
+<script src="assets/js/data-aktionen.js"></script>
+<script src="assets/js/medien-welt.js"></script>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="de" data-theme="hasidog">
+<head>
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<title>Medien — HasiDog — DOGFATHER UNIVERSE</title>
+<meta name="description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
+<link rel="icon" type="image/png" href="assets/img/favicon.png" />
+<meta property="og:type" content="website" />
+<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
+<meta property="og:title" content="Medien — HasiDog — DOGFATHER UNIVERSE" />
+<meta property="og:description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
+<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/medien-hasidog.html" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:title" content="Medien — HasiDog — DOGFATHER UNIVERSE" />
+<meta name="twitter:description" content="Fotos, Videos und Events aus der HasiDog-Welt an einem Ort." />
+<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
+
+<link rel="stylesheet" href="assets/css/main.css" />
+<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
+<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
+<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
+</head>
+<body class="mit-hintergrund" data-welt="hasidog" style="--page-bg:url('/assets/img/bg-hasidog.jpg');--page-bg-mobile:url('/assets/img/bg-hasidog-mobile.jpg');">
+<div id="site-header"></div>
+
+<main>
+  <section class="hero page-bg">
+    <div class="hero-banner"><img src="/assets/img/bg-hasidog.jpg" alt="" loading="eager" /></div>
+    <div class="container">
+      <span class="eyebrow">Welt 2 — HasiDog</span>
+      <h1>Medien — HasiDog</h1>
+      <p class="lead worlds">Fotos, Videos und Events aus der HasiDog-Welt — alles an einem Ort.</p>
+    </div>
+  </section>
+
+  <section class="section-tight" id="fotos">
+    <div class="container">
+      <h2 class="text-center">📸 Fotos</h2>
+      <div id="foto-grid" class="grid grid-4"></div>
+    </div>
+  </section>
+
+  <section class="section-tight" id="videos">
+    <div class="container">
+      <h2 class="text-center">🎥 Videos</h2>
+      <div id="video-grid" class="grid grid-3"></div>
+    </div>
+  </section>
+
+  <section class="section-tight" id="events">
+    <div class="container">
+      <h2 class="text-center">🎉 Events</h2>
+      <div id="aktionen-grid" class="grid grid-2"></div>
+    </div>
+  </section>
+</main>
+
+<div id="lightbox" class="lightbox">
+  <button class="lightbox-close" aria-label="Schließen">×</button>
+  <div id="lightbox-content"></div>
+</div>
+
+<div id="site-footer"></div>
+<script src="assets/js/data-media.js"></script>
+<script src="assets/js/data-videos.js"></script>
+<script src="assets/js/data-aktionen.js"></script>
+<script src="assets/js/medien-welt.js"></script>
+<script src="assets/js/main.js"></script>
+</body>
+</html>
@@ -1,55 +0,0 @@
-<!DOCTYPE html>
-<html lang="de" data-theme="dogfather">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Medien-Galerie — DOGFATHER UNIVERSE</title>
-<meta name="description" content="Alle Bilder von Dogfather, Team, HasiDog/Casper und Manager Dogfather an einem Ort — filterbar." />
-<link rel="icon" type="image/png" href="assets/img/favicon.png" />
-<meta property="og:type" content="website" />
-<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
-<meta property="og:title" content="Medien-Galerie — DOGFATHER UNIVERSE" />
-<meta property="og:description" content="Alle Bilder von Dogfather, Team, HasiDog/Casper und Manager Dogfather an einem Ort — filterbar." />
-<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
-<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/medien.html" />
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content="Medien-Galerie — DOGFATHER UNIVERSE" />
-<meta name="twitter:description" content="Alle Bilder von Dogfather, Team, HasiDog/Casper und Manager Dogfather an einem Ort — filterbar." />
-<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
-
-<link rel="stylesheet" href="assets/css/main.css" />
-<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
-<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
-<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
-</head>
-<body>
-<div id="site-header"></div>
-
-<main>
-  <section class="hero">
-    <div class="container">
-      <span class="eyebrow">Medien</span>
-      <h1>Galerie</h1>
-      <p class="lead worlds">Bilder aus allen drei Welten — filterbar nach Kategorie.</p>
-    </div>
-  </section>
-
-  <section class="section-tight">
-    <div class="container">
-      <div class="filter-bar" id="gallery-filters"></div>
-      <div id="gallery-grid" class="grid grid-4"></div>
-      <!-- TODO: Echte Fotos aus den vom User gelieferten Assets in assets/img/ ablegen und Pfade in assets/js/gallery.js (MEDIA-Array) eintragen. HEIC-Dateien (z.B. Casper-Fotos) vorher nach JPG/WebP konvertieren. -->
-    </div>
-  </section>
-</main>
-
-<div id="lightbox" class="lightbox">
-  <button class="lightbox-close" aria-label="Schließen">×</button>
-  <div id="lightbox-content"></div>
-</div>
-
-<div id="site-footer"></div>
-<script src="assets/js/gallery.js"></script>
-<script src="assets/js/main.js"></script>
-</body>
-</html>
@@ -8,10 +8,10 @@
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/community.html</loc><lastmod>2026-07-30</lastmod></url>
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/hasidog.html</loc><lastmod>2026-07-30</lastmod></url>
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/casper.html</loc><lastmod>2026-07-30</lastmod></url>
-  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/aktionen.html</loc><lastmod>2026-07-30</lastmod></url>
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/zeitreise.html</loc><lastmod>2026-07-30</lastmod></url>
-  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/medien.html</loc><lastmod>2026-07-30</lastmod></url>
-  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/videos.html</loc><lastmod>2026-07-30</lastmod></url>
+  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/medien-dogfather.html</loc><lastmod>2026-08-01</lastmod></url>
+  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/medien-hasidog.html</loc><lastmod>2026-08-01</lastmod></url>
+  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/medien-casper.html</loc><lastmod>2026-08-01</lastmod></url>
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/links.html</loc><lastmod>2026-07-30</lastmod></url>
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/manager.html</loc><lastmod>2026-07-30</lastmod></url>
  <url><loc>https://REPLACE-WITH-YOUR-DOMAIN.tld/werte.html</loc><lastmod>2026-07-30</lastmod></url>
@@ -151,8 +151,8 @@
      <p><strong>– DogFather 🩵</strong></p>
      <div class="btn-row" style="justify-content:center;">
        <a class="btn btn-primary" href="streamplan.html">📅 Streamingplan öffnen</a>
-        <a class="btn btn-secondary" href="videos.html">🎞️ Video-Highlights entdecken</a>
-        <a class="btn btn-outline" href="medien.html">📸 Foto-Galerie ansehen</a>
+        <a class="btn btn-secondary" href="medien-dogfather.html#videos">🎞️ Video-Highlights entdecken</a>
+        <a class="btn btn-outline" href="medien-dogfather.html#fotos">📸 Foto-Galerie ansehen</a>
        <a class="btn btn-outline" href="community.html">🩵 Team Dogi kennenlernen</a>
        <a class="btn btn-outline" href="https://www.instagram.com/sf0118?igsh=MWo2eXFlcXFicXN5OQ==" target="_blank" rel="noopener">📱 DogFather auf Instagram</a>
        <a class="btn btn-outline" href="https://www.snapchat.com/add/dogfather0804?share_id=m8mR6ylEtLo&amp;locale=de-DE" target="_blank" rel="noopener">👻 DogFather auf Snapchat</a>
@@ -1,61 +0,0 @@
-<!DOCTYPE html>
-<html lang="de" data-theme="dogfather">
-<head>
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<title>Video-Highlights — DOGFATHER UNIVERSE</title>
-<meta name="description" content="Video-Highlights von Dogfather." />
-<link rel="icon" type="image/png" href="assets/img/favicon.png" />
-<meta property="og:type" content="website" />
-<meta property="og:site_name" content="DOGFATHER UNIVERSE" />
-<meta property="og:title" content="Video-Highlights — DOGFATHER UNIVERSE" />
-<meta property="og:description" content="Video-Highlights von Dogfather." />
-<meta property="og:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
-<meta property="og:url" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/videos.html" />
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:title" content="Video-Highlights — DOGFATHER UNIVERSE" />
-<meta name="twitter:description" content="Video-Highlights von Dogfather." />
-<meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
-
-<link rel="stylesheet" href="assets/css/main.css" />
-<link rel="stylesheet" href="assets/css/theme-dogfather.css" />
-<link rel="stylesheet" href="assets/css/theme-hasidog.css" />
-<link rel="stylesheet" href="assets/css/theme-spicymedia.css" />
-</head>
-<body>
-<div id="site-header"></div>
-
-<main>
-  <section class="hero">
-    <div class="container">
-      <span class="eyebrow">Medien</span>
-      <h1>Video-Highlights</h1>
-      <p class="lead worlds">Die besten Momente von TikTok &amp; Co.</p>
-    </div>
-  </section>
-
-  <section class="section-tight">
-    <div class="container">
-      <div class="grid grid-3">
-        <div class="card">
-          <div class="img-placeholder" style="aspect-ratio:9/16;">Video folgt<br><span class="small">Video folgt in Kürze</span></div>
-          <h3 style="margin-top:1rem;">Highlight #1</h3>
-        </div>
-        <div class="card">
-          <div class="img-placeholder" style="aspect-ratio:9/16;">Video folgt<br><span class="small">Video folgt in Kürze</span></div>
-          <h3 style="margin-top:1rem;">Highlight #2</h3>
-        </div>
-        <div class="card">
-          <div class="img-placeholder" style="aspect-ratio:9/16;">Video folgt<br><span class="small">Video folgt in Kürze</span></div>
-          <h3 style="margin-top:1rem;">Highlight #3</h3>
-        </div>
-      </div>
-      <!-- TODO: Echte TikTok-Video-Links/Embeds ergänzen, sobald ausgewählt. Struktur ist bereit für TikTok-Embed-Code oder direkte Video-Dateien. -->
-    </div>
-  </section>
-</main>
-
-<div id="site-footer"></div>
-<script src="assets/js/main.js"></script>
-</body>
-</html>