From a45f536fbb5fcc8851c350e2e047b63ad25d087b Mon Sep 17 00:00:00 2001
From: qcigano <qcigano@gmail.com>
Date: Sun, 2 Aug 2026 18:22:37 +0200
Subject: [PATCH] =?UTF-8?q?Produktdetailseite:=20gro=C3=9Fes=20Produktbild?=
 =?UTF-8?q?=20+=20Miniaturbilder=20bekommen=20jetzt=20den=20edlen=20Rahmen?=
 =?UTF-8?q?-Look=20(dunkler=20Ring=20+=20Akzent-Leuchtrand),=20den=20die?=
 =?UTF-8?q?=20Seite=20schon=20bei=20Portr=C3=A4tfotos=20nutzt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/global.css | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/styles/global.css b/src/styles/global.css
index 5c1fa30..68d31c9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -231,8 +231,7 @@ a.card:hover {
   border-radius: var(--radius-m);
 }
 .product-media .product-photo { aspect-ratio: 1 / 1; }
-.thumb.product-photo { cursor: pointer; transition: outline-color 0.2s var(--ease); outline: 2px solid transparent; outline-offset: 2px; }
-.thumb.product-photo:hover { outline-color: var(--c-accent); }
+.thumb.product-photo { cursor: pointer; transition: box-shadow 0.2s var(--ease); }
 
 /* Portrait-Frame — edler Bilderrahmen für Porträtfotos (Startseite, Über die Kreative, ...) */
 .portrait-frame {
@@ -739,11 +738,35 @@ a:focus-visible, button:focus-visible {
 .breadcrumb a { color: var(--c-accent); }
 @media (max-width: 800px) { .shop-layout { grid-template-columns: 1fr; } }
 
-/* Produktseite */
+/* Produktseite — großes Bild bekommt denselben edlen "Rahmen"-Look wie die Porträtfotos der
+   Seite (dunkler Ring + Akzent-Leuchtrand), statt einfach randlos zu schweben. */
 .product-detail { align-items: start; }
-.product-hero { aspect-ratio: 1/1; }
-.thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 0.7rem; }
-.thumb { aspect-ratio: 1/1; min-height: 0; }
+.product-hero {
+  aspect-ratio: 1/1;
+  border: 1px solid rgba(244, 241, 247, 0.08);
+  box-shadow:
+    var(--shadow-card),
+    0 0 0 6px rgba(10, 9, 16, 0.6),
+    0 0 0 7px color-mix(in srgb, var(--c-accent) 30%, transparent),
+    0 0 26px 2px color-mix(in srgb, var(--c-accent) 12%, transparent);
+  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
+}
+.product-hero:hover {
+  transform: translateY(-3px);
+  box-shadow:
+    var(--shadow-card-hover),
+    0 0 0 6px rgba(10, 9, 16, 0.6),
+    0 0 0 7px color-mix(in srgb, var(--c-accent) 45%, transparent),
+    0 0 32px 4px color-mix(in srgb, var(--c-accent) 20%, transparent);
+}
+.thumb-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-top: 0.9rem; }
+.thumb {
+  aspect-ratio: 1/1;
+  min-height: 0;
+  border: 1px solid rgba(244, 241, 247, 0.08);
+  box-shadow: 0 0 0 3px rgba(10, 9, 16, 0.6), 0 0 0 4px rgba(244, 241, 247, 0.08);
+}
+.thumb.product-photo:hover { box-shadow: 0 0 0 3px rgba(10, 9, 16, 0.6), 0 0 0 4px var(--c-accent); }
 .badge-row { display: flex; gap: 0.5rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
 .price-row-detail { display: flex; align-items: baseline; gap: 0.8rem; margin-bottom: 0.2rem; }
 .price-detail { font-size: 1.8rem; font-weight: 700; color: var(--c-accent); }