Nav umbenannt/umsortiert + Stimmen-Kachel und Zitat-Karten aufgewertet

Nutzer-Wuensche 20.08.2026 (2. Runde):
- Kategorie "DogFather" -> "Filipe", Kategorie "HasiDog" -> "Dogi&Hasi".
- Unterpunkt "Streamer" (streamer.html) aus "Filipe" heraus nach
  "Dogi&Hasi" verschoben, dort GANZ NACH OBEN (ueber "HasiDog") und in
  "DogFather" umbenannt.
- Unterpunkt "HasiDog-Welt" -> "HasiDog".
- Fusszeile zieht mit: Spaltenueberschrift nutzt jetzt dieselbe
  Kategorie-Bezeichnung wie die Nav ("Filipe" / "Dogi&Hasi & Manager"),
  streamer.html steht dort ebenfalls in der Dogi&Hasi-Spalte ganz oben.
  Die internen Schluesselnamen (nav_dogfather...) bleiben bewusst
  unveraendert -- reine Bezeichner, ein Umbenennen waere nur Fehlerquelle.

- "die kachel soll noch spezieller und geiler aussehen": Einreich-Kachel
  auf stimmen.html deutlich aufgewertet -- wandernder Farbverlauf-Rahmen
  (Zwei-Ebenen-/background-position-Technik, KEIN rotierender Ring: siehe
  dokumentierte Projekt-Lektion zu Verzerrungen auf eckigen Flaechen),
  schwebende Herz-Partikel, Medaillon statt nacktem Emoji,
  Farbverlauf-Ueberschrift, aufleuchtende Eingabefelder.
- "und auch die die danach kommen ... sollen viel geiler sein": freigegebene
  Stimmen sind jetzt echte Praesentationskarten -- farbige Akzentlinie oben,
  grosses Anfuehrungszeichen als Wasserzeichen, Avatar-Medaillon mit
  Anfangsbuchstabe, TikTok-Handle als eigener Chip, sanftes Anheben beim
  Ueberfahren.

Alles augenschonend gehalten (gedeckte Toene, langsame Bewegungen,
vollstaendiger Stillstand bei prefers-reduced-motion) und per Playwright
visuell geprueft, keine JS-Fehler.

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

assets/js/stimmen.js

@@ -51,6 +51,16 @@
     return String(text ?? "").replace(/[&<>"']/g, (z) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[z]));
   }
 
+  /* Erstes sichtbares Zeichen des Namens fürs Avatar-Medaillon. [...name]
+     statt name[0], damit auch Namen, die mit einem Emoji beginnen, nicht
+     mitten in einem Zeichen abgeschnitten werden (ein Emoji besteht in
+     JavaScript aus mehreren "Zeichen" — name[0] lieferte sonst nur ein
+     kaputtes Halb-Zeichen). */
+  function erstesZeichen(name) {
+    const zeichen = [...String(name || "").trim()];
+    return zeichen.length ? zeichen[0].toUpperCase() : "?";
+  }
+
   function ladeEchteStimmen() {
     fetch(`${API_BASE_URL}/testimonials`, { cache: "no-store" })
       .then((res) => res.json())
@@ -64,8 +74,11 @@
             (t) => `<div class="stimmen-karte">
               <p class="stimmen-karte-text">${escapeHtml(t.nachricht)}</p>
               <div class="stimmen-karte-fuss">
-                <span class="stimmen-karte-name">${escapeHtml(t.name)}</span>
-                ${t.tiktokUsername ? `<span class="stimmen-karte-tiktok">@${escapeHtml(t.tiktokUsername)}</span>` : ""}
+                <span class="stimmen-karte-avatar" aria-hidden="true">${escapeHtml(erstesZeichen(t.name))}</span>
+                <span class="stimmen-karte-namen">
+                  <span class="stimmen-karte-name">${escapeHtml(t.name)}</span>
+                  ${t.tiktokUsername ? `<span class="stimmen-karte-tiktok">@${escapeHtml(t.tiktokUsername)}</span>` : ""}
+                </span>
               </div>
             </div>`
           )