Präsentationsfotos site-weit aufgewertet: Rahmenfarbe jetzt auch als Rimlight-Bloom im Bild selbst, Vignette + Filmkorn + kräftigerer Look

Der animierte Polarlicht-Rahmen (.collage-photo) war schon "mega", aber der
Bildinhalt selbst wirkte bei einfachen Portraitfotos flach im Vergleich zu
aufwendig gestalteten Postern wie dem DogFather-Manager-Artwork. Jetzt
bekommt JEDES Foto in .collage-photo (betrifft automatisch alle Seiten:
DogFather, HasiDog, Casper, VanVan, Team-Profile via profil.html, Startseiten-
Collage, Streamer-Seite etc.) zusätzlich:
- zwei Farbschein-Blooms in der jeweiligen Rahmenfarbe (--frame), oben-links
  und unten-rechts, wie ein Studio-Rimlight
- eine sanfte Vignette unten für Tiefe/Fokus aufs Gesicht
- feines Filmkorn (SVG-Turbulence) für einen "produzierten" Look
- kräftigere Sättigung/Kontrast auf dem Foto selbst

assets/css/main.css

@@ -1242,14 +1242,29 @@ footer.site-footer {
   width: 100%;
   height: 100%;
   object-fit: cover;
-  /* dezenter Marken-Look: Sättigung/Kontrast leicht angehoben, Farbton via Overlay */
-  filter: saturate(1.15) contrast(1.08) brightness(1.02);
+  /* Kräftigerer "produced look": mehr Sättigung/Kontrast als vorher, damit
+     auch schlichte Portraitfotos neben aufwendig gestalteten Postern
+     (z.B. dem DogFather-Manager-Artwork) nicht flach wirken. */
+  filter: saturate(1.26) contrast(1.15) brightness(1.03);
 }
+/* Cineastischer "Poster-Grade" für JEDES Präsentationsfoto auf der Seite:
+   zwei Farbschein-Blooms in der jeweiligen Rahmenfarbe (oben-links /
+   unten-rechts, wie ein Studio-Rimlight — nutzt dieselbe --frame-Variable
+   wie der Rahmen, damit Bild und Rand optisch zusammengehören), eine
+   sanfte Vignette unten für Tiefe/Fokus aufs Gesicht, plus feines
+   Filmkorn (SVG-Turbulence). Macht auch ein simples Handy-Foto "produziert",
+   ohne den eigentlichen Bildinhalt zu verdecken. */
 .collage-photo::after {
   content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(155deg, rgba(143, 217, 234, .22), rgba(139, 92, 246, .14));
+  background-image:
+    radial-gradient(125% 140% at 8% -14%, color-mix(in srgb, var(--frame) 75%, transparent) 0%, transparent 46%),
+    radial-gradient(125% 140% at 112% 116%, color-mix(in srgb, var(--frame) 65%, transparent) 0%, transparent 48%),
+    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, .5) 100%),
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
+  background-size: cover, cover, cover, 170px 170px;
+  background-blend-mode: screen, screen, multiply, overlay;
   mix-blend-mode: overlay;
   pointer-events: none;
 }