From 9719d81dfbe82c981a4a20062ceed5d5a1b08bc3 Mon Sep 17 00:00:00 2001
From: Dogfather <dogfather1608@gmail.com>
Date: Sat, 1 Aug 2026 15:18:11 +0200
Subject: [PATCH] =?UTF-8?q?Gro=C3=9Fe=20Fotos=20(.collage-photo)=20bekomme?=
 =?UTF-8?q?n=20einen=20echten=20Polarlicht-Rahmen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Bisher war der Rahmen ein statischer, matter Ring + ein starrer Farb-
Überzug - jetzt "atmet" der Glanz (box-shadow pulsiert langsam zwischen
schmal/dezent und breit/hell, siehe @keyframes collage-aurora-glow) und
ein zusätzlicher, langsam wandernder Lichtschimmer läuft über jedes Foto
(reuse von @keyframes btn-shimmer). Läuft über die --frame-Variable, wirkt
also automatisch in jeder Rahmenfarbe (frame-silver/lila/gold/rot/
tuerkis), nicht nur silber. Pausiert bei Hover (dann übernimmt der
stärkere Hover-Glow) und wird bei prefers-reduced-motion abgeschaltet.
---
 assets/css/main.css | 51 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index 496075c..322ff9b 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -670,21 +670,50 @@ footer.site-footer {
   border-radius: 10px;
   overflow: hidden;
   background: repeating-linear-gradient(135deg, #e8ebee, #e8ebee 10px, #f6f7f9 10px, #f6f7f9 20px);
+  /* Statt eines starren, matten Rahmens: ein "atmender" Polarlicht-Glanz,
+     der langsam heller/dunkler und weiter/enger pulsiert (siehe
+     @keyframes collage-aurora-glow unten). Box-shadow wird von
+     overflow:hidden NICHT beschnitten, deshalb bleibt der Glanz auch am
+     Rand sichtbar, obwohl das Foto selbst innen sauber zugeschnitten ist. */
   box-shadow:
     0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
     0 0 0 4px rgba(0, 0, 0, .55),
     0 0 26px color-mix(in srgb, var(--frame) 22%, transparent),
     0 14px 34px rgba(0, 0, 0, .45);
-  transition: box-shadow .3s ease, transform .3s ease;
+  animation: collage-aurora-glow 5s ease-in-out infinite;
+  transition: transform .3s ease;
+}
+@keyframes collage-aurora-glow {
+  0%, 100% {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--frame) 62%, transparent),
+      0 0 0 4px rgba(0, 0, 0, .55),
+      0 0 26px color-mix(in srgb, var(--frame) 30%, transparent),
+      0 0 46px color-mix(in srgb, var(--frame) 12%, transparent),
+      0 14px 34px rgba(0, 0, 0, .45);
+  }
+  50% {
+    box-shadow:
+      0 0 0 2px color-mix(in srgb, var(--frame) 95%, transparent),
+      0 0 0 4px rgba(0, 0, 0, .55),
+      0 0 46px color-mix(in srgb, var(--frame) 62%, transparent),
+      0 0 80px color-mix(in srgb, var(--frame) 32%, transparent),
+      0 14px 34px rgba(0, 0, 0, .45);
+  }
 }
 .collage-photo:hover {
   transform: translateY(-3px);
+  animation-play-state: paused;
   box-shadow:
     0 0 0 2px var(--frame),
     0 0 0 4px rgba(0, 0, 0, .55),
-    0 0 38px color-mix(in srgb, var(--frame) 38%, transparent),
+    0 0 46px color-mix(in srgb, var(--frame) 55%, transparent),
+    0 0 80px color-mix(in srgb, var(--frame) 30%, transparent),
     0 18px 42px rgba(0, 0, 0, .5);
 }
+@media (prefers-reduced-motion: reduce) {
+  .collage-photo { animation: none; }
+}
 /* Farbvarianten für Abwechslung */
 .frame-silver { --frame: #c7ccd1; }
 .frame-lila   { --frame: var(--accent-2); }
@@ -706,6 +735,24 @@ footer.site-footer {
   mix-blend-mode: overlay;
   pointer-events: none;
 }
+/* Zusätzlicher, langsam wandernder Lichtschimmer in der Rahmenfarbe —
+   dieselbe Machart wie beim Bewerben-Knopf/den Buttons, nur sehr dezent,
+   damit das Foto selbst gut lesbar bleibt. */
+.collage-photo::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  background: linear-gradient(115deg, transparent 40%, color-mix(in srgb, var(--frame) 65%, white 35%) 50%, transparent 60%);
+  background-size: 240% 100%;
+  mix-blend-mode: overlay;
+  opacity: .55;
+  animation: btn-shimmer 7s linear infinite;
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .collage-photo::before { animation: none; }
+}
 .collage-photo .img-placeholder {
   position: absolute;
   inset: 0;