Echte genehmigte Fotos + Team-Dogi-Grafiken einbinden (Logo, Team-Karten, HasiDog-Sticker, Buch-Illustration), Dan aus Modi-Team entfernt, favicon durch echtes Logo ersetzt

2026-07-30 21:54:58 +02:00
parent 505a86263e
commit 7be7d3f46d
44 changed files with 77 additions and 77 deletions
@@ -3,7 +3,7 @@
 <head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Seite nicht gefunden — DOGFATHER UNIVERSE" />
@@ -16,7 +16,6 @@
 <meta name="twitter:image" content="https://REPLACE-WITH-YOUR-DOMAIN.tld/assets/img/og-cover.jpg" />
 <meta name="robots" content="noindex" />
 <title>Seite nicht gefunden — DOGFATHER UNIVERSE</title>
 <link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
 <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" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Aktion — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Detailansicht einer Aktion oder eines Projekts von Team Dogi." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Aktion — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <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/svg+xml" href="assets/img/favicon.svg" />
+<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" />
@@ -123,6 +123,13 @@ header.site-header {
  letter-spacing: .02em;
 }
 .brand .heart { color: var(--accent); }
 .brand-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
 }
 .brand small {
  display: block;
  font-size: .6rem;
@@ -1,4 +0,0 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
  <rect width="64" height="64" rx="16" fill="#0a0c10"/>
  <text x="32" y="42" font-size="34" text-anchor="middle">🩵</text>
 </svg>
@@ -22,7 +22,7 @@ const MODIS = [
    name: "VanVan",
    role: "Rechte Hand von Dogfather · Musik-Produzentin (Van-Van, Spotify)",
    rank: 1,
-    photo: "",
+    photo: "assets/img/card-vanvan.jpg",
    quote: "", // TODO: Zitat von VanVan einholen
    social: {},
    page: "vanvan.html",
@@ -32,7 +32,7 @@ const MODIS = [
    name: "Diene",
    role: "Organisiert & plant gemeinsam mit VanVan",
    rank: 2,
-    photo: "",
+    photo: "assets/img/card-diene.jpg",
    quote: "",
    social: {},
    page: "",
@@ -52,7 +52,7 @@ const MODIS = [
    name: "Miss",
    role: "Modi & Cutterin",
    rank: 4,
-    photo: "",
+    photo: "assets/img/card-miss.jpg",
    quote: "",
    social: {},
    page: "",
@@ -60,9 +60,9 @@ const MODIS = [
  },
  {
    name: "Marina",
-    role: "Kommentare auf den Clip-Accounts",
+    role: "Kommentare auf den Clip-Accounts · alias FlauschiRex",
    rank: 5,
-    photo: "",
+    photo: "assets/img/card-marina.jpg",
    quote: "",
    social: {},
    page: "",
@@ -78,16 +78,6 @@ const MODIS = [
    page: "",
    status: "aktiv",
  },
  {
    name: "Dan",
    role: "Team Dogi — Rolle noch zu klären", // TODO: genaue Rolle von Dan im Team klären
    rank: 6,
    photo: "",
    quote: "",
    social: {},
    page: "",
    status: "aktiv",
  },
  // TODO: weitere Modis/Team-Mitglieder hier nach gleichem Muster ergänzen.
 ];
@@ -8,21 +8,22 @@
   ===================================================================== */
 const MEDIA = [
-  { id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "" },
+  { id: 1, category: "dogfather", alt: "Dogfather Profilbild", src: "assets/img/dogfather-portrait.jpg" },
-  { id: 2, category: "dogfather", alt: "Dogfather beim Stream", src: "" },
+  { id: 2, category: "dogfather", alt: "Dogfather — Team Dogi Karte", src: "assets/img/card-dogfather.jpg" },
-  { id: 3, category: "team", alt: "Team Dogi Gruppenbild", src: "" },
+  { id: 3, category: "team", alt: "VanVan — Team Dogi Karte", src: "assets/img/card-vanvan.jpg" },
-  { id: 4, category: "team", alt: "Patrick (Scout)", src: "" },
+  { id: 4, category: "team", alt: "Diene — Team Dogi Karte", src: "assets/img/card-diene.jpg" },
-  { id: 5, category: "team", alt: "Bananenstift (Scout)", src: "" },
+  { id: 5, category: "team", alt: "Miss — Team Dogi Karte", src: "assets/img/card-miss.jpg" },
-  { id: 6, category: "team", alt: "VanVan", src: "" },
+  { id: 6, category: "team", alt: "Marina alias FlauschiRex — Team Dogi Karte", src: "assets/img/card-marina.jpg" },
-  { id: 7, category: "hasidog", alt: "HasiDog Logo/Maskottchen", src: "" },
+  { id: 7, category: "hasidog", alt: "HasiDog &amp; Casper Sticker", src: "assets/img/sticker-hasidog-casper.png" },
-  { id: 8, category: "hasidog", alt: "Husky Casper", src: "" },
+  { id: 8, category: "hasidog", alt: "Husky Casper", src: "assets/img/casper-1.jpg" },
-  { id: 9, category: "hasidog", alt: "Casper &amp; Kater Simba", src: "" },
+  { id: 9, category: "hasidog", alt: "Casper &amp; Dogfather", src: "assets/img/dogfather-casper-1.jpg" },
-  { id: 10, category: "manager", alt: "Spicy Media Logo", src: "" },
+  { id: 10, category: "hasidog", alt: "Casper", src: "assets/img/casper-3.jpg" },
-  { id: 11, category: "aktionen", alt: "Weihnachtsaktion Portugal", src: "" },
+  { id: 11, category: "hasidog", alt: "Casper", src: "assets/img/casper-4.jpg" },
-  { id: 12, category: "aktionen", alt: "VanVan Teddys Merch", src: "" },
+  { id: 12, category: "hasidog", alt: "Dogfather &amp; Casper Nase an Nase", src: "assets/img/dogfather-casper-2.jpg" },
-  // TODO: echte Bilder aus den vom User gelieferten Assets ergänzen
+  { id: 13, category: "hasidog", alt: "Schlaft schön — Buch-Illustration", src: "assets/img/hasidog-casper-book.jpg" },
-  // (assets/img/... Pfad eintragen, dann wird automatisch das Bild
+  { id: 14, category: "hasidog", alt: "Casper unterwegs", src: "assets/img/casper-2.jpg" },
-  // statt des Platzhalters angezeigt).
+  { 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) {
@@ -84,7 +84,7 @@
      <header class="site-header">
        <div class="nav-bar">
          <a class="brand" href="index.html">
-            <span class="heart">🩵</span>
+            <img class="brand-logo" src="assets/img/logo-dogfather.png" alt="Dogfather Logo" />
            <span>DOGFATHER UNIVERSE
              <small>Streamer · Community · HasiDog · Manager</small>
            </span>
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Bewerben — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Bewirb dich als Creator, Scout oder für eine Kooperation bei Spicy Media / Team Dogi." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Bewerben — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Casper — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Der Husky an Dogfathers Seite — das tierische Gesicht der HasiDog-Welt." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Casper — DOGFATHER UNIVERSE" />
@@ -36,8 +36,8 @@
  <section class="section-tight">
    <div class="container grid grid-2" style="align-items:center;">
-      <div class="img-placeholder" style="aspect-ratio:4/3;">
+      <div class="collage-photo" style="aspect-ratio:4/3;border-radius:var(--radius);">
-        Foto: Casper<br><span class="small">Foto folgt (assets/img/casper-1.jpg — ggf. aus HEIC konvertieren)</span>
+        <img src="assets/img/casper-1.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;" />
      </div>
      <div>
        <h2>Wer ist Casper?</h2>
@@ -51,13 +51,10 @@
    <div class="container">
      <h2 class="text-center">Casper-Galerie</h2>
      <div class="grid grid-4">
-        <div class="img-placeholder">Casper Foto 1</div>
+        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-3.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;" /></div>
-        <div class="img-placeholder">Casper Foto 2</div>
+        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/casper-4.jpg" alt="Casper" style="width:100%;height:100%;object-fit:cover;" /></div>
-        <div class="img-placeholder">Casper Foto 3</div>
+        <div class="collage-photo" style="aspect-ratio:1;border-radius:var(--radius);"><img src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper" style="width:100%;height:100%;object-fit:cover;" /></div>
-        <div class="img-placeholder">Casper &amp; Simba</div>
+        <div class="collage-photo" 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="todo-note">
        <strong>TODO:</strong> Echte Casper-Fotos einbinden (HEIC → JPG/WebP konvertieren, dann in <code>assets/img/</code> ablegen und hier bzw. in <code>gallery.js</code> verlinken).
      </div>
      <div class="btn-row" style="justify-content:center;">
        <a class="btn btn-outline" href="medien.html">Zur ganzen Galerie</a>
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Die Community — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Team Dogi ist Familie — die Community rund um Dogfather und HasiDog." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Die Community — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Creator im Team — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Content Creator, die Teil von Spicy Media / Team Dogi sind." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Creator im Team — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Die Person hinter Dogfather — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Wer ist Dogfather wirklich? Persönlichkeit, Werte und die Geschichte hinter dem Content." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Die Person hinter Dogfather — DOGFATHER UNIVERSE" />
@@ -36,8 +36,8 @@
  <section class="section-tight">
    <div class="container grid grid-2" style="align-items:center;">
-      <div class="img-placeholder" style="aspect-ratio:1/1;">
+      <div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
-        Profilbild Dogfather<br><span class="small">Foto folgt (assets/img/dogfather-portrait.jpg)</span>
+        <img src="assets/img/dogfather-portrait.jpg" alt="Dogfather" style="width:100%;height:100%;object-fit:cover;" />
      </div>
      <div>
        <h2>Wer ist Dogfather?</h2>
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>HasiDog-Welt — DOGFATHER UNIVERSE</title>
 <meta name="description" content="HasiDog: Maskottchen, Musikprojekt und die verspielte, familiäre Seite von Team Dogi." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="HasiDog-Welt — DOGFATHER UNIVERSE" />
@@ -36,8 +36,8 @@
  <section class="section-tight">
    <div class="container grid grid-2" style="align-items:center;">
-      <div class="img-placeholder" style="aspect-ratio:1/1;">
+      <div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);background:#fff;">
-        HasiDog Logo / Maskottchen<br><span class="small">Foto folgt (assets/img/hasidog-logo.jpg)</span>
+        <img src="assets/img/sticker-hasidog-casper.png" alt="HasiDog &amp; Casper Sticker" style="width:100%;height:100%;object-fit:contain;padding:1rem;" />
      </div>
      <div>
        <h2>Was ist HasiDog?</h2>
@@ -63,6 +63,16 @@
      </div>
    </div>
  </section>
  <section class="section-tight">
    <div class="container text-center">
      <h2>„Schlaft schön." 🩵</h2>
      <p class="lead" style="max-width:50ch;margin:0 auto 1.4rem;">Eine Szene aus der HasiDog-&amp;-Casper-Welt, wie sie im Buch lebendig wird.</p>
      <div class="collage-photo" style="max-width:640px;margin:0 auto;border-radius:var(--radius);aspect-ratio:1200/654;">
        <img src="assets/img/hasidog-casper-book.jpg" alt="Schlaft schön — Team Dogi Illustration" style="width:100%;height:100%;object-fit:cover;" />
      </div>
    </div>
  </section>
 </main>
 <div id="site-footer"></div>
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager.</title>
 <meta name="description" content="DOGFATHER UNIVERSE: die Heimat von Dogfather als Streamer, der HasiDog-Community und Manager Dogfather bei Spicy Media." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="DOGFATHER UNIVERSE — Streamer. Community. HasiDog. Manager." />
@@ -86,8 +86,8 @@
          <p class="collage-caption">Husky-Life</p>
        </div>
        <div class="collage-item">
-          <div class="collage-photo"><img class="collage-img" data-fallback="Dogfather" src="assets/img/dogfather-portrait-2.jpg" alt="Dogfather"></div>
+          <div class="collage-photo"><img class="collage-img" data-fallback="Dogfather &amp; Casper" src="assets/img/dogfather-casper-2.jpg" alt="Dogfather und Casper Nase an Nase"></div>
-          <p class="collage-caption">Behind the Cam</p>
+          <p class="collage-caption">Nase an Nase 🩵</p>
        </div>
      </div>
      <p class="small muted" style="max-width:50ch;margin:0 auto;">Echte Fotos folgen — sobald sie da sind, erscheinen sie hier automatisch in genau diesem Collagen-Look.</p>
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Kontakt &amp; Rechtliches — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Kontakt, Impressum und Datenschutz von DOGFATHER UNIVERSE." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Kontakt &amp; Rechtliches — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Alle Links — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Alle Social-Media- und Musik-Links von Dogfather an einem Ort — plus QR-Codes." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Alle Links — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Manager Dogfather — Spicy Media — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Dogfather als Manager bei der Spicy Media Agency: Scouts, Creator und faire Zusammenarbeit." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Manager Dogfather — Spicy Media — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <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/svg+xml" href="assets/img/favicon.svg" />
+<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" />
@@ -6,7 +6,7 @@
 <meta name="robots" content="noindex, nofollow" />
 <title>Postfach — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Internes Bewerbungs-Postfach — nur mit Code zugänglich." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<link rel="icon" type="image/png" href="assets/img/favicon.png" />
 <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" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Stimmen über Dogfather — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Was die Community und das Team über Dogfather sagen." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Stimmen über Dogfather — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Dogfather als Streamer — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Dogfathers Content: Halligalli, Eindeutig Zweideutig, Hasencontent — Formate, Themen und Persönlichkeit als Streamer." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Dogfather als Streamer — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Streamplan &amp; Livebereich — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Wann geht Dogfather live? Streamplan und Livebereich." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Streamplan &amp; Livebereich — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Modi-Team — DOGFATHER UNIVERSE</title>
 <meta name="description" content="VanVan, Diene, Funny, Miss, Marina und Michi — das Modi-/Core-Team von Team Dogi." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Modi-Team — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Scout-Team — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die Scouts von Team Dogi bei Spicy Media." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Scout-Team — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>VanVan — DOGFATHER UNIVERSE</title>
 <meta name="description" content="VanVan: rechte Hand von Dogfather und Musik-Produzentin." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="VanVan — DOGFATHER UNIVERSE" />
@@ -36,8 +36,8 @@
  <section class="section-tight">
    <div class="container grid grid-2" style="align-items:center;">
-      <div class="img-placeholder" style="aspect-ratio:1/1;">
+      <div class="collage-photo" style="aspect-ratio:1/1;border-radius:var(--radius);">
-        VanVan Profilbild<br><span class="small">Foto folgt (assets/img/vanvan-portrait.jpg)</span>
+        <img src="assets/img/card-vanvan.jpg" alt="VanVan" style="width:100%;height:100%;object-fit:cover;" />
      </div>
      <div>
        <h2>Wer ist VanVan?</h2>
@@ -5,7 +5,7 @@
 <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/svg+xml" href="assets/img/favicon.svg" />
+<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" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Werte als Manager — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die Werte, nach denen Dogfather als Manager bei Spicy Media arbeitet." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Werte als Manager — DOGFATHER UNIVERSE" />
@@ -5,7 +5,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Zeitreise — DOGFATHER UNIVERSE</title>
 <meta name="description" content="Die Geschichte von Dogfather in einer interaktiven Zeitleiste." />
-<link rel="icon" type="image/svg+xml" href="assets/img/favicon.svg" />
+<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="Zeitreise — DOGFATHER UNIVERSE" />