Add advanced e-commerce UI patterns (zoom, sticky buybox, search)

NOVAChild/themes/my-nova/sass/my-nova.scss

@@ -51,6 +51,14 @@ header {
   }
 }
 
+// Sticky Header Verfeinerung (falls im Backend aktiviert)
+#header-wrapper.is-sticky {
+  background-color: rgba(255, 255, 255, 0.95) !important;
+  backdrop-filter: blur(10px);
+  box-shadow: $box-shadow-sm;
+  transition: all 0.3s ease;
+}
+
 #header-top-bar {
   background-color: $footer-bg-color;
   color: $white;
@@ -116,6 +124,20 @@ header .nav-link {
   }
 }
 
+// Mega-Menu (Dropdowns) Animation & Styling
+.dropdown-menu {
+  border: none;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  padding: 20px;
+  animation: fade-in-up 0.3s ease;
+}
+
+@keyframes fade-in-up {
+  from { opacity: 0; transform: translateY(10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
 .secure-checkout-topbar {
   border-radius: $border-radius-lg;
   background-color: rgba(255, 255, 255, 0.9);
@@ -123,6 +145,33 @@ header .nav-link {
   box-shadow: $box-shadow-sm;
 }
 
+// --- Suchleiste (Prominent & Einladend) ---
+#search-form {
+  .form-control {
+    border-radius: 30px 0 0 30px;
+    border: 1px solid #e0e0e0;
+    padding: 10px 20px;
+    background-color: #f9f8f6;
+    transition: all 0.3s ease;
+    &:focus {
+      background-color: #ffffff;
+      border-color: $secondary;
+      box-shadow: 0 0 0 3px rgba($secondary, 0.2);
+    }
+  }
+  .btn-search {
+    border-radius: 0 30px 30px 0;
+    background: $primary;
+    color: $white;
+    border: 1px solid $primary;
+    transition: $transition-base;
+    &:hover {
+      background: darken($primary, 8%);
+      border-color: darken($primary, 8%);
+    }
+  }
+}
+
 // --- Buttons ---
 .btn {
   font-weight: 500;
@@ -147,7 +196,7 @@ header .nav-link {
   }
 }
 
-// --- Produktboxen (Modernes Card-Design) ---
+// --- Produktboxen (Modernes Card-Design mit Fokus auf Texturen) ---
 .productbox {
   border: none;
   border-radius: $border-radius-lg;
@@ -157,9 +206,22 @@ header .nav-link {
   overflow: hidden;
   margin-bottom: 30px;
   
+  // Image Zoom Effekt für Stoffe
+  .productbox-image {
+    overflow: hidden;
+    border-radius: $border-radius-lg $border-radius-lg 0 0;
+    img {
+      transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+  }
+  
   &:hover {
     transform: translateY(-5px);
     box-shadow: $box-shadow;
+    
+    .productbox-image img {
+      transform: scale(1.08); // Sanfter Zoom auf die Stoffstruktur
+    }
   }
   
   .productbox-title {
@@ -174,6 +236,53 @@ header .nav-link {
     color: $primary;
     font-size: 1.2rem;
   }
+
+  // Elegante Ribbons (Sale, Neu)
+  .ribbon {
+    border-radius: 20px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-size: 0.75rem;
+    padding: 4px 12px;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
+    &.ribbon-sale { background-color: #e74c3c; color: white; }
+    &.ribbon-new { background-color: $secondary; color: white; }
+  }
+}
+
+// --- Artikeldetailseite (PDP - Product Detail Page) ---
+.product-detail {
+  // Kaufbox (Sticky auf Desktop für bessere Conversion)
+  @media (min-width: 992px) {
+    #buy-form {
+      position: sticky;
+      top: 120px; // Abstand zum (sticky) Header
+      padding: 25px;
+      background: #ffffff;
+      border-radius: $border-radius-lg;
+      box-shadow: $box-shadow-sm;
+      border: 1px solid rgba(0,0,0,0.03);
+    }
+  }
+
+  // Großer, auffälliger Warenkorb-Button
+  #add-to-cart button {
+    width: 100%;
+    padding: 15px;
+    font-size: 1.1rem;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+  }
+  
+  // Preis-Darstellung
+  .price_wrapper {
+    .price {
+      font-size: 2.2rem;
+      font-weight: 700;
+      color: $primary;
+    }
+  }
 }
 
 // --- Footer ---