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

@@ -3748,66 +3748,197 @@ body.start-seite .music-toggle:focus-visible {
    am Rand (dieselbe Zwei-Ebenen-Technik wie schon an mehreren Stellen
    dieses Projekts, siehe .supp-card::before) — bewusst augenschonend
    (gedeckte Farben, sanfte Bewegung, respektiert reduzierte Bewegung). ================================================================= */
+/* Nutzer-Wunsch 20.08.2026 (2. Runde): "die kachel soll noch spezieller und
+   geiler aussehen". Deutlich aufgewertet gegenüber der ersten Fassung:
+   wandernder Farbverlauf-Rahmen rundherum (Zwei-Ebenen-Technik mit
+   background-position statt eines rotierenden Rings — siehe dokumentierte
+   Projekt-Lektion: rotierende Masken verzerren auf eckigen Flächen),
+   schwebende Herz-Partikel im Hintergrund, Medaillon statt nacktem Emoji,
+   Farbverlauf-Überschrift und Eingabefelder, die beim Tippen aufleuchten.
+   Bleibt trotzdem augenschonend: gedeckte Töne, langsame Bewegungen,
+   vollständiger Stillstand bei prefers-reduced-motion. */
 .stimmen-einreichen-kachel {
   position: relative;
+  isolation: isolate;
   overflow: hidden;
-  max-width: 560px;
+  max-width: 580px;
   margin: 0 auto;
-  padding: 2rem 2.2rem 2.4rem;
-  border-radius: var(--radius);
-  border: 1.5px solid rgba(143, 217, 234, .35);
+  padding: 2.4rem 2.4rem 2.6rem;
+  border-radius: calc(var(--radius) + 4px);
   background:
-    radial-gradient(circle at 15% 0%, rgba(255, 154, 208, .1), transparent 55%),
-    radial-gradient(circle at 85% 100%, rgba(143, 217, 234, .1), transparent 55%),
-    var(--card-bg);
-  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
+    radial-gradient(ellipse at 12% 0%, rgba(255, 154, 208, .13), transparent 58%),
+    radial-gradient(ellipse at 88% 100%, rgba(143, 217, 234, .13), transparent 58%),
+    linear-gradient(180deg, rgba(24, 34, 51, .96), rgba(14, 20, 32, .98));
+  box-shadow: 0 30px 70px rgba(0, 0, 0, .45), 0 0 50px rgba(143, 217, 234, .06);
 }
-.stimmen-einreichen-glanz {
+/* Farbverlauf-Rahmen: zwei Ebenen, nur die Hintergrundposition wandert. */
+.stimmen-einreichen-kachel::before {
   content: "";
   position: absolute;
-  top: 0; left: 8%; right: 8%;
-  height: 1.5px;
-  background: linear-gradient(90deg, transparent, rgba(255, 154, 208, .9), rgba(143, 217, 234, .9), transparent);
-  animation: stimmen-glanz-wandert 5s ease-in-out infinite;
+  inset: 0;
+  z-index: -1;
+  border-radius: inherit;
+  padding: 1.5px;
+  background: linear-gradient(115deg, rgba(255,154,208,.75), rgba(143,217,234,.75), rgba(199,204,209,.5), rgba(255,154,208,.75));
+  background-size: 300% 100%;
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  animation: stimmen-rahmen-wandert 9s linear infinite;
 }
-@keyframes stimmen-glanz-wandert { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
-@media (prefers-reduced-motion: reduce) { .stimmen-einreichen-glanz { animation: none; opacity: .7; } }
-.stimmen-einreichen-kopf { text-align: center; margin-bottom: 1.6rem; }
+@keyframes stimmen-rahmen-wandert { to { background-position: 300% 0; } }
+/* Schwebende Herz-Partikel — reines CSS, keine zusätzlichen Elemente nötig. */
+.stimmen-einreichen-glanz {
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background-image:
+    radial-gradient(circle, rgba(255,154,208,.5) 2px, transparent 3px),
+    radial-gradient(circle, rgba(143,217,234,.45) 2px, transparent 3px),
+    radial-gradient(circle, rgba(255,154,208,.35) 1.5px, transparent 3px);
+  background-size: 190px 190px, 260px 260px, 140px 140px;
+  background-position: 12% 18%, 78% 62%, 44% 88%;
+  animation: stimmen-partikel-treiben 16s ease-in-out infinite alternate;
+}
+@keyframes stimmen-partikel-treiben {
+  from { background-position: 12% 18%, 78% 62%, 44% 88%; opacity: .55; }
+  to   { background-position: 18% 26%, 71% 54%, 50% 79%; opacity: .95; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .stimmen-einreichen-kachel::before, .stimmen-einreichen-glanz { animation: none; }
+}
+.stimmen-einreichen-kopf { text-align: center; margin-bottom: 1.8rem; }
+/* Medaillon statt nacktem Emoji: Kreis mit Farbschein und sanftem Puls. */
 .stimmen-einreichen-herz {
-  display: inline-block;
-  font-size: 2.4rem;
-  filter: drop-shadow(0 0 16px rgba(255, 154, 208, .6));
-  animation: stimmen-herz-puls 3s ease-in-out infinite;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 74px; height: 74px;
+  border-radius: 50%;
+  font-size: 2.1rem;
+  background: radial-gradient(circle at 35% 30%, rgba(255,154,208,.28), rgba(143,217,234,.12) 70%);
+  border: 1.5px solid rgba(255, 154, 208, .45);
+  box-shadow: 0 0 26px rgba(255, 154, 208, .3), inset 0 0 22px rgba(255, 154, 208, .12);
+  animation: stimmen-herz-puls 3.4s ease-in-out infinite;
+}
+@keyframes stimmen-herz-puls {
+  0%, 100% { transform: scale(1); box-shadow: 0 0 22px rgba(255,154,208,.22), inset 0 0 20px rgba(255,154,208,.1); }
+  50% { transform: scale(1.06); box-shadow: 0 0 40px rgba(255,154,208,.45), inset 0 0 26px rgba(255,154,208,.18); }
 }
-@keyframes stimmen-herz-puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
 @media (prefers-reduced-motion: reduce) { .stimmen-einreichen-herz { animation: none; } }
-.stimmen-einreichen-kopf h2 { margin: .5rem 0 .6rem; }
+.stimmen-einreichen-kopf h2 {
+  margin: .9rem 0 .6rem;
+  background: linear-gradient(100deg, #ffd0e8, #ffffff 40%, #a8e4f2);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
 .stimmen-einreichen-kopf p { color: var(--text-muted); }
-#stimmen-formular .field { margin-bottom: 1rem; }
+#stimmen-formular .field { margin-bottom: 1.1rem; }
+/* Eingabefelder leuchten beim Tippen in der Kachel-Farbwelt auf. */
+#stimmen-formular .field input,
+#stimmen-formular .field textarea {
+  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
+}
+#stimmen-formular .field input:focus,
+#stimmen-formular .field textarea:focus {
+  outline: none;
+  border-color: rgba(255, 154, 208, .75);
+  box-shadow: 0 0 0 3px rgba(255, 154, 208, .14), 0 0 22px rgba(255, 154, 208, .18);
+  background: rgba(255, 255, 255, .06);
+}
 .stimmen-erfolg { color: #baf7d6; font-size: .9rem; margin-top: 1rem; display: none; text-align: center; }
 .stimmen-erfolg.zeige { display: block; }
 .stimmen-fehler { color: #ff9a9a; font-size: .88rem; margin-top: 1rem; display: none; text-align: center; }
 .stimmen-fehler.zeige { display: block; }
 
-/* Freigegebene Stimmen — gehobenere Zitat-Karte statt der schlichten
-   .card, mit farbigem Anführungszeichen + TikTok-Chip. */
+/* Freigegebene Stimmen (20.08.2026, 2. Runde: "und auch die die danach
+   kommen wenn ich sie eingebe die sollen viel geiler sein"): echte
+   Präsentationskarten statt schlichter Kästen — Farbschein-Bloom in der
+   Ecke, großes Anführungszeichen als Wasserzeichen, farbige Akzentlinie
+   oben, Avatar-Medaillon mit dem Anfangsbuchstaben, TikTok-Handle als
+   eigener Chip. Beim Überfahren hebt sich die Karte leicht an. */
 .stimmen-karte {
   position: relative;
-  padding: 1.8rem 1.8rem 1.5rem;
-  border-radius: calc(var(--radius) - 4px);
-  border: 1px solid var(--border);
-  background: var(--card-bg);
+  isolation: isolate;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  padding: 2rem 1.8rem 1.6rem;
+  border-radius: calc(var(--radius) - 2px);
+  border: 1px solid rgba(143, 217, 234, .22);
+  background:
+    radial-gradient(ellipse at 100% 0%, rgba(255, 154, 208, .1), transparent 55%),
+    linear-gradient(180deg, rgba(24, 34, 51, .9), rgba(15, 21, 33, .95));
+  box-shadow: 0 16px 40px rgba(0, 0, 0, .32);
+  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
 }
+.stimmen-karte:hover {
+  transform: translateY(-4px);
+  border-color: rgba(255, 154, 208, .5);
+  box-shadow: 0 22px 52px rgba(0, 0, 0, .42), 0 0 30px rgba(255, 154, 208, .14);
+}
+/* Farbige Akzentlinie oben — greift die Farbwelt der Einreich-Kachel auf. */
+.stimmen-karte::after {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 2.5px;
+  background: linear-gradient(90deg, rgba(255,154,208,.9), rgba(143,217,234,.9));
+}
+/* Großes Anführungszeichen als dezentes Wasserzeichen im Hintergrund. */
 .stimmen-karte::before {
   content: "„";
   position: absolute;
-  top: .2rem; left: 1.1rem;
-  font-size: 3.5rem;
+  top: -.9rem; right: .6rem;
+  z-index: -1;
+  font-size: 8rem;
   font-family: Georgia, serif;
-  color: rgba(143, 217, 234, .35);
+  color: rgba(143, 217, 234, .09);
   line-height: 1;
+  pointer-events: none;
+}
+.stimmen-karte-text {
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  margin: 0 0 1.3rem;
+  line-height: 1.75;
+  font-size: 1.02rem;
+  color: var(--text);
+}
+.stimmen-karte-fuss {
+  display: flex;
+  align-items: center;
+  gap: .7rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(255, 255, 255, .07);
+}
+/* Avatar-Medaillon mit dem Anfangsbuchstaben (wird in stimmen.js gefüllt). */
+.stimmen-karte-avatar {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px; height: 40px;
+  flex-shrink: 0;
+  border-radius: 50%;
+  font-weight: 800;
+  font-size: 1rem;
+  color: #0d1420;
+  background: linear-gradient(135deg, #ffd0e8, #a8e4f2);
+  box-shadow: 0 0 16px rgba(255, 154, 208, .3);
+}
+.stimmen-karte-namen { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
+.stimmen-karte-name { font-weight: 700; color: var(--text); font-size: .95rem; }
+.stimmen-karte-tiktok {
+  align-self: flex-start;
+  font-size: .76rem;
+  font-weight: 600;
+  color: #a8e4f2;
+  padding: .1rem .5rem;
+  border-radius: 999px;
+  background: rgba(143, 217, 234, .12);
+  border: 1px solid rgba(143, 217, 234, .28);
 }
-.stimmen-karte-text { position: relative; z-index: 1; margin: 1.2rem 0 1rem; line-height: 1.7; }
-.stimmen-karte-fuss { display: flex; align-items: center; gap: .5rem; font-size: .88rem; }
-.stimmen-karte-name { font-weight: 700; color: var(--text); }
-.stimmen-karte-tiktok { color: var(--accent); font-size: .82rem; }