/* ===================================================================
   CONTENT-WINDOW STORE - MOBILE-FIRST RESPONSIVE DESIGN SYSTEM v2.0
   Optimiert für Giant 3D Factory Store-Darstellung
   Basiert auf g3df-modern.css Design Token System
   =================================================================== */

/* ===================================================================
   DESIGN TOKENS - Integration mit g3df-modern.css
   =================================================================== */
:root {
  /* STORE-SPEZIFISCHE DESIGN TOKENS */
  --store-card-aspect-ratio: 3/4;
  --store-gap-mobile: clamp(0.75rem, 2vw, 1.5rem);
  --store-gap-tablet: clamp(1.25rem, 2.8vw, 1.75rem);
  --store-gap-desktop: clamp(1.25rem, 3vw, 2rem);
  
  /* GRID BREAKPOINTS */
  --store-mobile-min: 280px;
  --store-tablet-min: clamp(280px, 30vw, 350px);
  --store-desktop-min: clamp(300px, 22vw, 380px);
  
  /* ANIMATION TIMINGS */
  --store-transition-fast: 0.2s ease;
  --store-transition-medium: 0.3s ease;
  --store-transition-slow: 0.6s ease-out;
}

/* ===================================================================
   CONTENT-WINDOW FOUNDATION - Mobile-First
   =================================================================== */
.content-window {
  /* CONTAINER QUERIES SUPPORT */
  container-type: inline-size;
  
  /* RESPONSIVE LAYOUT */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  
  /* FLÜSSIGES PADDING */
  padding: clamp(1rem, 2.5vw, 2rem);
  
  /* DESIGN TOKEN INTEGRATION */
  background-color: var(--color-background, #fffefe);
  border-radius: 8px;
  
  /* MODERNE HÖHEN-BEHANDLUNG */
  min-height: clamp(80vh, 100vh - var(--header-height-fluid, 10vh), 95vh);
  height: auto;
  overflow-y: visible;
}

/* ===================================================================
   STORE LAYOUT STRUCTURE - Responsive Flexbox/Grid
   =================================================================== */
.listeContainer {
  display: flex;
  gap: var(--store-gap-mobile);
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ===================================================================
   NEUE MOBILE/DESKTOP SIDEBAR STRUKTUR
   =================================================================== */

/* MOBILE: Sidebar zwischen Slider und Cards */
@media (max-width: 799px) {
  /* Mobile Sidebar: Vollbreite zwischen Slider und Cards */
  .mobile-sidebar {
    display: block !important;
    width: 100%;
    margin: clamp(1.5rem, 4vw, 2rem) 0;
    padding: clamp(1rem, 3vw, 1.5rem);
    background: var(--color-background, #fffefe);
    border: 2px solid var(--color-primary, #000000);
    border-radius: 8px;
    position: relative;
    z-index: 5;
  }
  
  /* Desktop Sidebar: Versteckt auf Mobile */
  .desktop-sidebar {
    display: none !important;
  }
  
  /* listeContainer: Nur Products, keine Sidebar */
  .listeContainer {
    flex-direction: column;
    margin-top: 0; /* Kein zusätzlicher Abstand da Sidebar oben ist */
  }

  .product-cards-container {
    width: 100%;
    order: 1;
  }
}

/* DESKTOP: Verstecke Mobile Sidebar, zeige Desktop Sidebar */
@media (min-width: 800px) {
  /* Mobile Sidebar: Versteckt auf Desktop */
  .mobile-sidebar {
    display: none !important;
  }
  
  /* Desktop Sidebar: Normale Sidebar-Funktion */
  .desktop-sidebar {
    display: block !important;
  }
  
  .listeContainer {
    flex-direction: row;
    gap: var(--store-gap-tablet);
  }
}

/* TABLET & DESKTOP: SIDEBAR LINKS */
@media (min-width: 800px) {
  .listeContainer {
    /* flex-direction: row; */
    gap: var(--store-gap-tablet);
  }
  
  .category-sidebar {
    flex: 0 0 clamp(220px, 25vw, 280px);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);

    /* VERBESSERTES STICKY POSITIONING - Bleibt beim Scrollen sichtbar */
    position: sticky;
    top: clamp(0.5rem, 1vh, 1rem); /* Näher zur Oberseite */
    max-height: calc(100vh - 2rem); /* Mehr verfügbare Höhe */
    overflow-y: auto;
    z-index: 10; /* Verhindert Überlappung */

    /* STYLING */
    background: var(--color-background, #fffefe);
    border: 1px solid color-mix(in srgb, var(--color-primary, #000000) 15%, transparent);
    border-radius: clamp(8px, 1.2vw, 12px);
    
    /* SMOOTH SCROLLING für bessere UX */
    scroll-behavior: smooth;
  }
  
  .product-cards-container {
    flex: 1;
  }
}

@media (min-width: 1200px) {
  .listeContainer {
    gap: var(--store-gap-desktop);
  }
  
  .category-sidebar {
    flex: 0 0 280px;
    padding: 1.75rem;
  }
}

/* ===================================================================
   STORE GRID SYSTEM - Mobile-First mit Container Queries
   =================================================================== */

/* ===================================================================
   PRODUCT SLIDER CONTAINER - Layout & Spacing
   =================================================================== */
.product-slider-container {
  /* CONTAINER LAYOUT - VOLLE CONTENT-WINDOW-BREITE */
  width: 100%;
  max-width: 100%; /* ✅ ENTFERNT: Keine Breitenbeschränkung mehr */
  margin: 0 0 2rem 0; /* ✅ ÄSTHETISCHE ABSTÄNDE: Kein auto-centering mehr */
  
  /* RESPONSIVE PADDING - REDUZIERT für volle Breite */
  padding: 0;
  
  /* BOX MODEL */
  box-sizing: border-box;
  
  /* ÄSTHETISCHE ABSTÄNDE - VERBESSERT */
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(1rem, 3vw, 2rem);
  
  /* 🎨 MODERNE GLASMORPHISMUS-ÄSTHETIK */
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  
  /* 🌟 ELEGANTE SCHATTEN-EFFEKTE */
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.12),
    0 2px 12px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  
  /* ⚡ FLÜSSIGE ANIMATIONEN */
  transition: all var(--store-transition-medium);
  transform: translateZ(0); /* Hardware-Beschleunigung */
}

.product-slider-container:hover {
  transform: translateY(-3px) translateZ(0);
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.25);
}

/* TABLET & DESKTOP OPTIMIERUNG */
@media (min-width: 768px) {
  .product-slider-container {
    max-width: 1000px;
    margin-bottom: 2.5rem; /* ✅ GRÖSSERER ABSTAND auf größeren Bildschirmen */
  }
}

@media (min-width: 1200px) {
  .product-slider-container {
    max-width: 1200px;
    margin-bottom: 3rem; /* ✅ MAXIMALER ABSTAND auf Desktop */
  }
}

/* ===================================================================
   🛍️ PRODUKTDETAIL SLIDER - E-COMMERCE OPTIMIERT FÜR KAUFANREIZE
   =================================================================== */

/* 🏪 PRODUKTDETAIL CONTAINER - Premium E-Commerce Design */
.product-detail-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(1rem, 3vw, 2rem);
  background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  border-radius: clamp(12px, 2vw, 20px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04);
}

.product-detail-title {
  font-family: var(--font-family-heading, 'Orbitron', serif);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 700;
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  
  /* 🎨 PREMIUM GRADIENT TEXT */
  background: linear-gradient(135deg, #333333 0%, #000000 50%, #444444 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* ✨ ELEGANT SHADOWS */
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  letter-spacing: clamp(-1px, 0.1vw, 0px);
}

/* 🖼️ PRODUKTBILDER SLIDER CONTAINER - Kaufanregende Gestaltung */
#sliderCarousel.product-slider-container {
  /* 📐 ENHANCED LAYOUT */
  max-width: 100%;
  margin: 0 auto clamp(2rem, 5vw, 3rem) auto;
  
  /* 🎨 PREMIUM GLASMORPHISMUS */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(250, 250, 250, 0.8) 100%);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: clamp(20px, 3vw, 28px);
  
  /* 🌟 LUXURY SHADOWS */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  
  /* ⚡ SMOOTH ANIMATIONS */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

#sliderCarousel.product-slider-container:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.15),
    0 12px 40px rgba(0, 0, 0, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  
  border-color: rgba(255, 255, 255, 0.5);
}

/* 🎭 PRODUKTBILD SLIDES - Hochwertige Präsentation */
#sliderCarousel .slider-slide.modern-store-slide {
  background: transparent;
  border-radius: clamp(16px, 2.5vw, 24px);
  overflow: hidden;
  position: relative;
}

#sliderCarousel .slide-image-container {
  position: relative;
  overflow: hidden;
  border-radius: clamp(12px, 2vw, 18px);
  
  /* 🎯 PRODUKTBILD FOKUS */
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

#sliderCarousel .modern-store-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* 🔍 ZOOM-EFFEKT für bessere Produktdarstellung */
  cursor: zoom-in;
}

#sliderCarousel .slide-image-container:hover .modern-store-media {
  transform: scale(1.08);
}

/* 💎 PRODUKTINFO TEXT-BEREICH - Kaufanregend gestaltet */
#sliderCarousel .slide-text-container {
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  
  /* 🎨 GLASMORPHISMUS FÜR TEXT */
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: clamp(12px, 2vw, 16px);
  
  /* ✨ SUBTILE SCHATTEN */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

#sliderCarousel .slide-text-container h3 {
  font-family: var(--font-family-heading, 'Orbitron', serif);
  font-size: clamp(1.4rem, 3.5vw, 2rem);
  font-weight: 700;
  margin-bottom: clamp(0.75rem, 2vw, 1rem);
  
  /* 🏷️ PREMIUM PRODUKTNAME */
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  line-height: 1.2;
  letter-spacing: clamp(-0.5px, 0.05vw, 0px);
}

#sliderCarousel .slide-text-container p {
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  
  /* 📝 PRODUKTBESCHREIBUNG STYLING */
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 0.3px;
  max-width: 60ch;
}

/* 🛒 PRODUKTDETAIL CTA BUTTON - Kaufanregend */
#sliderCarousel .slide-text-container .slider-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.75rem, 3.5vw, 2.25rem);
  
  /* 🎨 SCHWARZ-WEISS KAUFEN-BUTTON */
  background: #000000;
  border: 2px solid #ffffff;
  color: #ffffff;
  
  /* 📐 DESIGN */
  border-radius: clamp(12px, 2vw, 16px);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  
  /* ⚡ CALL-TO-ACTION ANIMATIONS */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform: translateZ(0);
  
  /* 🌟 SCHWARZ-WEISS SHADOWS */
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.3),
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  /* 📱 TOUCH OPTIMIZATION */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  
  /* 💫 PULSING EFFECT */
  animation: cta-pulse 2.5s ease-in-out infinite;
}

#sliderCarousel .slide-text-container .slider-cta:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-2px) scale(1.03) translateZ(0);
  
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.4),
    0 4px 12px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#sliderCarousel .slide-text-container .slider-cta:active {
  transform: translateY(0) scale(0.98) translateZ(0);
}

@keyframes cta-pulse {
  0%, 100% {
    box-shadow:
      0 6px 20px rgba(231, 76, 60, 0.3),
      0 2px 8px rgba(0, 0, 0, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 8px 25px rgba(231, 76, 60, 0.4),
      0 3px 10px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

/* ===================================================================
   🎯 PRODUKTDETAIL NAVIGATION & RESPONSIVE - E-Commerce Optimiert
   =================================================================== */

/* 🎯 PRODUKTDETAIL NAVIGATION - Premium E-Commerce Buttons */
#sliderCarousel .slider-nav {
  /* 🎨 LUXURY NAVIGATION DESIGN */
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.8) 0%,
    rgba(50, 50, 50, 0.9) 100%);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  
  /* 📐 ENHANCED SIZE */
  width: clamp(50px, 8vw, 64px);
  height: clamp(50px, 8vw, 64px);
  border-radius: 50%;
  
  /* 🌟 PREMIUM SHADOWS */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 3px 12px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.2);
  
  /* ⚡ SMOOTH INTERACTIONS */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  z-index: 20;
}

#sliderCarousel .slider-nav:hover {
  background: linear-gradient(135deg,
    rgba(0, 0, 0, 0.9) 0%,
    rgba(80, 80, 80, 1) 100%);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
  
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.3);
}

#sliderCarousel .slider-nav i {
  font-size: clamp(18px, 3.5vw, 24px);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 💎 PRODUKTDETAIL DOTS - Elegant Indicators */
#sliderCarousel .slider-dots {
  position: absolute;
  bottom: clamp(1.5rem, 4vw, 2rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(10px, 2vw, 14px);
  padding: clamp(10px, 2.5vw, 14px);
  
  /* 🎨 GLASMORPHISMUS DOT CONTAINER */
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: clamp(20px, 3vw, 25px);
  z-index: 15;
}

#sliderCarousel .slider-dot {
  width: clamp(12px, 2.5vw, 16px);
  height: clamp(12px, 2.5vw, 16px);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* 📱 TOUCH GUIDELINES */
  min-width: 28px;
  min-height: 28px;
  touch-action: manipulation;
  
  /* ✨ DOT SHADOWS */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

#sliderCarousel .slider-dot.active,
#sliderCarousel .slider-dot:hover {
  background: #000000;
  border-color: rgba(255, 255, 255, 0.8);
  transform: scale(1.3);
  
  box-shadow:
    0 4px 12px rgba(231, 76, 60, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* 📱 RESPONSIVE BREAKPOINTS - Produktdetailansicht */
@media (max-width: 949px) {
  /* MOBILE: Vertikal gestapelt für beste Produktpräsentation */
  #sliderCarousel .slider-slide.modern-store-slide {
    flex-direction: column !important;
    min-height: clamp(600px, 80vh, 800px);
  }
  
  #sliderCarousel .slide-image-container {
    order: 1 !important;
    flex: 0 0 clamp(300px, 50vh, 400px);
    width: 100%;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }
  
  #sliderCarousel .slide-text-container {
    order: 2 !important;
    flex: 1;
    width: 100%;
  }
  
  /* MOBILE NAVIGATION - Größer für Touch */
  #sliderCarousel .slider-nav {
    width: 52px;
    height: 52px;
  }
  
  #sliderCarousel .slider-nav i {
    font-size: 22px;
  }
}

@media (min-width: 950px) {
  /* DESKTOP: Nebeneinander für Produktübersicht */
  #sliderCarousel .slider-slide.modern-store-slide {
    flex-direction: row !important;
    min-height: clamp(500px, 60vh, 700px);
    align-items: stretch;
  }
  
  #sliderCarousel .slide-text-container {
    order: 1 !important;
    flex: 0 0 40%; /* Text links: 40% */
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-right: clamp(1rem, 2vw, 1.5rem);
  }
  
  #sliderCarousel .slide-image-container {
    order: 2 !important;
    flex: 1; /* Bild rechts: 60% */
  }
  
  /* DESKTOP NAVIGATION - Positionierung */
  #sliderCarousel .slider-nav.prev {
    left: clamp(1.5rem, 3vw, 2rem);
  }
  
  #sliderCarousel .slider-nav.next {
    right: clamp(1.5rem, 3vw, 2rem);
  }
}

/* 🎭 PRODUKTDETAIL TOGGLE BUTTONS - Elegant Tab Switching */
.toggle-buttons {
  display: flex;
  justify-content: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0;
}

.toggle-btn {
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  
  /* 🎨 SCHWARZ-WEISS TAB DESIGN */
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
  
  /* 📐 EINHEITLICHE HÖHE */
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* 📐 DESIGN */
  border-radius: clamp(10px, 2vw, 14px);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  font-weight: 600;
  cursor: pointer;
  
  /* ⚡ SMOOTH TRANSITIONS */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* 🌟 SCHWARZ-WEISS SHADOWS */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.toggle-btn.active,
.toggle-btn:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.15);
}

/* ===================================================================
   📐 PRODUKTDETAIL SLIDER - SPEZIFISCHES 16:9 FORMAT
   NUR für #sliderCarousel in Produktdetailansicht - Hauptslider unberührt
   =================================================================== */

/* 🎯 SPEZIFISCHE 16:9 ASPECT RATIO - NUR PRODUKTDETAIL SLIDER */
#sliderCarousel.product-slider-container .slide-image-container {
  /* 📐 ERZWUNGENES 16:9 FORMAT */
  aspect-ratio: 16 / 9 !important;
  width: 100% !important;
  height: auto !important;
  
  /* 🔒 CONTAINER VERHALTEN */
  overflow: hidden !important;
  position: relative !important;
  
  /* 🎨 PERFEKTE BILD-ANPASSUNG */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* 🖼️ PRODUKTBILDER IN 16:9 - PERFEKTE ANPASSUNG */
#sliderCarousel.product-slider-container .slide-image-container .modern-store-media {
  /* 📐 VOLLSTÄNDIGE 16:9 AUSFÜLLUNG */
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  
  /* 🎭 KEINE VERZERRUNG */
  flex-shrink: 0 !important;
  
  /* ⚡ PERFORMANCE OPTIMIERUNG */
  transform: translateZ(0) !important;
  will-change: transform !important;
}

/* 📱 MOBILE 16:9 - Produktdetail spezifisch */
@media (max-width: 949px) {
  #sliderCarousel.product-slider-container .slider-slide.modern-store-slide {
    /* 🔄 MOBILE LAYOUT ANPASSUNG für 16:9 */
    flex-direction: column !important;
    min-height: auto !important; /* Automatische Höhe basierend auf 16:9 */
  }
  
  #sliderCarousel.product-slider-container .slide-image-container {
    /* 📐 MOBILE 16:9 - Vollbreite */
    order: 1 !important;
    flex: 0 0 auto !important; /* Nicht stretchbar - nur 16:9 */
    width: 100% !important;
    margin-bottom: clamp(1rem, 3vw, 1.5rem) !important;
    
    /* 📏 EXAKTE 16:9 BERECHNUNG für Mobile */
    height: calc(100vw * 9 / 16) !important; /* Viewport-basierte 16:9 */
    max-height: 400px !important; /* Maximale Höhe für sehr breite Screens */
  }
  
  #sliderCarousel.product-slider-container .slide-text-container {
    /* 📝 TEXT UNTER 16:9 BILD */
    order: 2 !important;
    flex: 1 !important;
    width: 100% !important;
  }
}

/* 🖥️ DESKTOP 16:9 - Produktdetail spezifisch */
@media (min-width: 950px) {
  #sliderCarousel.product-slider-container .slider-slide.modern-store-slide {
    /* 🔄 DESKTOP LAYOUT für 16:9 */
    flex-direction: row !important;
    min-height: auto !important; /* Höhe basierend auf 16:9 Container */
    align-items: stretch !important;
  }
  
  #sliderCarousel.product-slider-container .slide-text-container {
    /* 📝 TEXT LINKS von 16:9 BILD */
    order: 1 !important;
    flex: 0 0 40% !important; /* Feste 40% für Text */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    margin-right: clamp(1rem, 2vw, 1.5rem) !important;
  }
  
  #sliderCarousel.product-slider-container .slide-image-container {
    /* 📐 DESKTOP 16:9 - 60% der verfügbaren Breite */
    order: 2 !important;
    flex: 1 !important; /* Nimmt restliche Breite (60%) */
    
    /* 🎯 16:9 BERECHNUNG für Desktop */
    /* Bei 60% Container-Breite: Höhe = (Container-Breite * 0.6) * 9/16 */
    min-height: calc(60vw * 9 / 16) !important;
    max-height: calc(800px * 9 / 16) !important; /* Bei max Container-Breite */
  }
}

/* 🎭 16:9 FALLBACK für ältere Browser */
@supports not (aspect-ratio: 16 / 9) {
  #sliderCarousel.product-slider-container .slide-image-container {
    /* 📐 FALLBACK 16:9 mit Padding-Trick */
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 56.25% !important; /* 9/16 * 100% = 56.25% */
  }
  
  #sliderCarousel.product-slider-container .slide-image-container .modern-store-media {
    /* 📍 ABSOLUTE POSITIONING für Fallback */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* 🔍 ZOOM-EFFEKT NUR für 16:9 Produktdetail-Bilder */
#sliderCarousel.product-slider-container .slide-image-container:hover .modern-store-media {
  /* 🎯 SANFTER ZOOM in 16:9 Container */
  transform: scale(1.05) translateZ(0) !important; /* Weniger Zoom für 16:9 */
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ===================================================================
   🛍️ MODERNE PRODUKTSEITE - Chat & Informationsdarstellung
   =================================================================== */

/* 📱 MODERNE PURCHASE BOX - E-Commerce Optimiert */
.purchase-and-shortdesc {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 3vw, 2rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
}

@media (min-width: 768px) {
  .purchase-and-shortdesc {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.purchase-box {
  /* 🎨 PREMIUM PURCHASE CONTAINER */
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 0, 0, 0.08);
  border-radius: clamp(16px, 2.5vw, 20px);
  padding: clamp(1.5rem, 3vw, 2rem);
  
  /* 🌟 PREMIUM SHADOWS */
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.1),
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  
  /* ⚡ SMOOTH INTERACTIONS */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.purchase-box:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.12),
    0 6px 20px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* 💰 PRICE INFO BOX - Modern Design */
.price-info-box {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.25rem);
}

#selectedPrice {
  font-family: var(--font-family-heading, 'Orbitron', serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  
  /* 🎨 SCHWARZ-WEIß PREMIUM PRICE STYLING */
  color: #000000;
  text-align: center;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border: 3px solid #000000;
  border-radius: clamp(10px, 1.5vw, 12px);
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 248, 248, 0.9) 100%);
  
  /* ✨ MONOCHROME SHADOWS */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* 🔢 QUANTITY CONTROLS - Modern UI */
.quantity-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  padding: clamp(0.75rem, 1.5vw, 1rem);
  background: rgba(248, 249, 250, 0.8);
  border-radius: clamp(10px, 1.5vw, 12px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.quantity-controls button {
  width: clamp(36px, 6vw, 44px);
  height: clamp(36px, 6vw, 44px);
  border-radius: 50%;
  border: 2px solid #000000;
  background: #ffffff;
  color: #000000;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700;
  cursor: pointer;
  
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}

.quantity-controls button:hover {
  background: #000000;
  color: #ffffff;
  transform: scale(1.05);
}

.quantity-controls input {
  width: clamp(60px, 10vw, 80px);
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.2rem);
  font-weight: 600;
  padding: clamp(0.5rem, 1vw, 0.75rem);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: clamp(8px, 1vw, 10px);
  background: white;
}

/* 🛒 PURCHASE BUTTONS - Einheitlicher Schwarz-Weiß Stil */
.purchase-buttons {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.5vw, 1rem);
}

.purchase-buttons .btn {
  /* 📐 EINHEITLICHE GRÖßE für alle Buttons */
  padding: clamp(0.2rem, 0.2vw, 0.4rem) clamp(0rem, 1vw, 0.5rem);
  height: clamp(56px, 8vw, 64px); /* Feste einheitliche Höhe */
  
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-radius: clamp(12px, 2vw, 14px);
  cursor: pointer;
  width:200px !important;
  
  
  /* 🎨 SCHWARZ-WEIß BASIS-DESIGN */
  background: #ffffff;
  color: #000000;
  border: 3px solid #000000;
  
  /* ⚡ SMOOTH TRANSITIONS */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
  
  /* ✨ MONOCHROME SHADOWS */
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  
  /* 📱 TOUCH OPTIMIZATION */
  touch-action: manipulation;
  
  /* 🎯 FLEX ALIGNMENT für einheitliche Darstellung */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 🛒 ALLE BUTTONS - Einheitlicher Hover-Effekt */
.purchase-buttons .btn:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.15);
}

.purchase-buttons .btn:active {
  transform: translateY(0);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 🎭 BUTTON-SPEZIFISCHE ICONS (Optional für Unterscheidung) */
#addToCartBtn::before {
  content: "🛒 ";
  margin-right: 0.5rem;
}

#goToCheckoutBtn::before {
  content: "💳 ";
  margin-right: 0.5rem;
}

#downloadModelBtn::before {
  content: "📥 ";
  margin-right: 0.5rem;
}

/* 📦 DELIVERY INFO - Schwarz-Weiß Badge */
.delivery-info {
  background: #ffffff;
  color: #000000;
  border: 2px solid #000000;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border-radius: clamp(10px, 1.5vw, 12px);
  text-align: center;
  font-weight: 600;
  margin-bottom:1rem;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

div#deliveryInfoText {}

.delivery-info p {
  margin: 0;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
}

/* 📝 SHORT DESCRIPTION - Modern Info Card */
.short-desc {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(248, 249, 250, 0.8) 100%);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(16px, 2.5vw, 20px);
  padding: clamp(1.5rem, 3vw, 2rem);
  
  /* 🎨 ELEGANT STYLING */
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.8);
  
  /* ✨ SUBTLE SHADOWS */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.short-desc:hover {
  transform: translateY(-1px);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ===================================================================
   💬 MODERNE CHAT-INTEGRATION - Responsive Design
   =================================================================== */

/* 💬 CHAT WIDGET - Schwarz-Weiß Design */
.chat-widget {
  position: fixed;
  bottom: clamp(1rem, 3vw, 1.5rem);
  right: clamp(1rem, 3vw, 1.5rem);
  z-index: 1000;
  
  /* 🎨 MONOCHROME CHAT BUTTON */
  width: clamp(56px, 10vw, 64px);
  height: clamp(56px, 10vw, 64px);
  border-radius: 50%;
  
  /* 🖤 SCHWARZ-WEIß STYLING */
  background: #ffffff;
  border: 3px solid #000000;
  cursor: pointer;
  
  /* ⚡ SMOOTH ANIMATIONS */
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  /* 🌟 MONOCHROME SHADOWS */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.2),
    0 3px 12px rgba(0, 0, 0, 0.15),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
  
  /* 📱 TOUCH OPTIMIZATION */
  touch-action: manipulation;
  
  /* 🎭 SUBTLE PULSING */
  animation: chat-pulse-bw 3s ease-in-out infinite;
}

.chat-widget:hover {
  transform: scale(1.1);
  background: #000000;
  
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.2),
    inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.chat-widget i {
  color: #000000;
  font-size: clamp(24px, 4vw, 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  transition: color 0.3s ease;
}

.chat-widget:hover i {
  color: #ffffff;
}

@keyframes chat-pulse-bw {
  0%, 100% {
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.2),
      0 3px 12px rgba(0, 0, 0, 0.15),
      inset 0 2px 0 rgba(255, 255, 255, 0.9);
  }
  50% {
    box-shadow:
      0 12px 32px rgba(0, 0, 0, 0.3),
      0 6px 16px rgba(0, 0, 0, 0.2),
      inset 0 2px 0 rgba(255, 255, 255, 0.9);
  }
}

/* 💬 CHAT POPUP - Modern Design */
.chat-popup {
  position: fixed;
  bottom: clamp(5rem, 12vw, 6rem);
  right: clamp(1rem, 3vw, 1.5rem);
  width: clamp(300px, 40vw, 350px);
  height: clamp(400px, 50vh, 500px);
  z-index: 999;
  
  /* 🎨 MODERN GLASMORPHISMUS */
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: clamp(16px, 2vw, 20px);
  
  /* 🌟 PREMIUM SHADOWS */
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  
  /* ⚡ SMOOTH ANIMATIONS */
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  pointer-events: none;
  
  /* 📐 RESPONSIVE LAYOUT */
  display: flex;
  flex-direction: column;
}

.chat-popup.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* 💬 CHAT HEADER - Schwarz-Weiß */
.chat-header {
  background: #000000;
  color: white;
  padding: clamp(1rem, 2vw, 1.25rem);
  border-radius: clamp(14px, 1.8vw, 18px) clamp(14px, 1.8vw, 18px) 0 0;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-weight: 600;
  font-size: clamp(1rem, 1.8vw, 1.1rem);
}

.chat-close {
  background: none;
  border: none;
  color: white;
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: background 0.2s ease;
}

.chat-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* 💬 CHAT BODY */
.chat-body {
  flex: 1;
  padding: clamp(1rem, 2vw, 1.25rem);
  overflow-y: auto;
  
  /* 🎨 CUSTOM SCROLLBAR */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.chat-body::-webkit-scrollbar {
  width: 6px;
}

.chat-body::-webkit-scrollbar-track {
  background: transparent;
}

.chat-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* 💬 CHAT MESSAGES */
.chat-message {
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
  display: flex;
  flex-direction: column;
}

.chat-message.user {
  align-items: flex-end;
}

.chat-message.bot {
  align-items: flex-start;
}

.message-bubble {
  max-width: 80%;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border-radius: clamp(12px, 1.5vw, 16px);
  
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  line-height: 1.4;
}

.chat-message.user .message-bubble {
  background: #000000;
  color: white;
  border-bottom-right-radius: 4px;
}

.chat-message.bot .message-bubble {
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
  border-bottom-left-radius: 4px;
}

/* 💬 CHAT INPUT */
.chat-input {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: clamp(1rem, 2vw, 1.25rem);
  display: flex;
  gap: clamp(0.5rem, 1vw, 0.75rem);
}

.chat-input input {
  flex: 1;
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: clamp(10px, 1.5vw, 12px);
  font-size: clamp(0.9rem, 1.6vw, 1rem);
  
  background: white;
  transition: border-color 0.2s ease;
}

.chat-input input:focus {
  outline: none;
  border-color: #000000;
  border-width: 2px;
}

.chat-send {
  background: #ffffff;
  border: 2px solid #000000;
  color: #000000;
  width: clamp(40px, 7vw, 48px);
  height: clamp(40px, 7vw, 48px);
  border-radius: 50%;
  cursor: pointer;
  
  display: flex;
  align-items: center;
  justify-content: center;
  
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chat-send:hover {
  transform: scale(1.05);
  background: #000000;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 📱 MOBILE CHAT OPTIMIZATIONS */
@media (max-width: 768px) {
  .chat-popup {
    width: calc(100vw - 2rem);
    height: calc(100vh - 8rem);
    bottom: clamp(4rem, 8vw, 5rem);
    right: 1rem;
    left: 1rem;
  }
  
  .chat-widget {
    bottom: 1rem;
    right: 1rem;
  }
}

/* ===================================================================
   📋 MODERNE PRODUKTINFORMATIONEN - Responsive Design
   =================================================================== */

/* 📖 LONG DESCRIPTION - Modern Content Card */
.long-desc {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(248, 249, 250, 0.8) 100%);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(16px, 2.5vw, 20px);
  padding: clamp(2rem, 4vw, 3rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
  
  /* 📝 TYPOGRAPHY */
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.7;
  color: rgba(0, 0, 0, 0.8);
  
  /* ✨ PREMIUM SHADOWS */
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
  
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.long-desc:hover {
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.1),
    0 6px 20px rgba(0, 0, 0, 0.06),
    inset 0 2px 0 rgba(255, 255, 255, 0.9);
}

/* 📥 PDF DOWNLOADS - Modern Download Section */
#pdfDownloadsArea {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 0, 0, 0.05);
  border-radius: clamp(12px, 2vw, 16px);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  
  /* ✨ SUBTLE SHADOWS */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

#pdfDownloadsArea h4 {
  font-family: var(--font-family-heading, 'Orbitron', serif);
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  font-weight: 600;
  margin-bottom: clamp(1rem, 2vw, 1.25rem);
  color: #333;
}

.pdf-download-link {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.5vw, 1rem);
  padding: clamp(0.75rem, 1.5vw, 1rem);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: clamp(8px, 1.2vw, 10px);
  margin-bottom: clamp(0.5rem, 1vw, 0.75rem);
  background: rgba(255, 255, 255, 0.8);
  
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.pdf-download-link:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.2);
  transform: translateX(4px);
  
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.download-icon-img {
  width: clamp(20px, 3vw, 24px);
  height: clamp(20px, 3vw, 24px);
  opacity: 0.7;
}

.pdf-download-link a {
  color: #000000;
  text-decoration: none;
  font-weight: 500;
  font-size: clamp(0.9rem, 1.6vw, 1rem);
}

.pdf-download-link:hover a {
  color: #666666;
}

/* ⭐ REVIEWS SECTION - Modern Rating System */
.reviews {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(248, 249, 250, 0.9) 100%);
  backdrop-filter: blur(15px);
  border: 2px solid rgba(0, 0, 0, 0.06);
  border-radius: clamp(16px, 2.5vw, 20px);
  padding: clamp(2rem, 4vw, 3rem);
  margin: clamp(2rem, 4vw, 3rem) 0;
  
  /* ✨ PREMIUM SHADOWS */
  box-shadow:
    0 12px 32px rgba(0, 0, 0, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.04),
    inset 0 2px 0 rgba(255, 255, 255, 0.8);
}

/* ⭐ REVIEW FORM - Modern Input Design */
.review-form {
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(248, 249, 250, 0.8) 100%);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(0, 0, 0, 0.05);
  border-radius: clamp(12px, 2vw, 16px);
  padding: clamp(1.5rem, 3vw, 2rem);
  margin: clamp(1.5rem, 3vw, 2rem) 0;
  
  /* ✨ SUBTLE SHADOWS */
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.review-form h3 {
  font-family: var(--font-family-heading, 'Orbitron', serif);
  font-size: clamp(1.3rem, 2.5vw, 1.5rem);
  font-weight: 600;
  margin-bottom: clamp(1.25rem, 2.5vw, 1.5rem);
  color: #333;
}

/* ⭐ STAR RATING - Interactive Design */
.star-rating {
  display: flex;
  gap: clamp(0.25rem, 0.5vw, 0.4rem);
  margin-bottom: clamp(1rem, 2vw, 1.25rem);
  justify-content: center;
}

.star-rating .star {
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: #cccccc;
  cursor: pointer;
  transition: all 0.2s ease;
  
  /* ✨ HOVER EFFECTS */
  user-select: none;
  -webkit-user-select: none;
}

.star-rating .star:hover,
.star-rating .star.active {
  color: #000000;
  transform: scale(1.1);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.star-rating .star:hover ~ .star {
  color: #cccccc;
  transform: scale(1);
}

/* 💬 REVIEW TEXTAREA - Modern Input */
#reviewComment {
  width: 100%;
  min-height: clamp(100px, 20vw, 120px);
  padding: clamp(1rem, 2vw, 1.25rem);
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-radius: clamp(10px, 1.5vw, 12px);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  line-height: 1.5;
  
  background: rgba(255, 255, 255, 0.9);
  resize: vertical;
  
  transition: border-color 0.2s ease;
}

#reviewComment:focus {
  outline: none;
  border-color: #000000;
  background: white;
}

/* 🎯 SUBMIT REVIEW BUTTON */
#submitReviewBtn {
  background: #ffffff;
  color: #000000;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(2rem, 4vw, 2.5rem);
  border: 2px solid #000000;
  border-radius: clamp(10px, 1.5vw, 12px);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-size: clamp(1rem, 1.8vw, 1.1rem);
  font-weight: 600;
  cursor: pointer;
  
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  box-shadow:
    0 6px 20px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1);
  
  /* 📱 TOUCH OPTIMIZATION */
  touch-action: manipulation;
  min-height: 60px;
  height: 60px;
}

#submitReviewBtn:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 📱 MOBILE RESPONSIVENESS für Produktinformationen */
@media (max-width: 768px) {
  .long-desc,
  .reviews,
  .review-form {
    margin: clamp(1.5rem, 4vw, 2rem) 0;
    padding: clamp(1.5rem, 4vw, 2rem);
  }
  
  .star-rating {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .star-rating .star {
    font-size: clamp(1.8rem, 4vw, 2.2rem);
  }
}

/* ===================================================================
   🎯 INTELLIGENTES FLEX-WRAP & SCALE SYSTEM
   Automatische Zeilenumbrüche + Card-Skalierung bei Platzmangel
   =================================================================== */

/* 🔧 PRODUCT CARDS CONTAINER - INTELLIGENTES FLEX-WRAP SYSTEM */
.product-cards-container {
  /* FLEX-WRAP BASIS - Automatische Zeilenumbrüche */
  display: flex !important;
  flex-wrap: wrap !important;
  
  /* ADAPTIVE AUSRICHTUNG */
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  
  /* RESPONSIVE GAPS - Skalieren mit Viewport */
  gap: clamp(1rem, 2.5vw, 2rem);
  
  /* CONTAINER-EIGENSCHAFTEN */
  width: 100%;
  padding: clamp(0.5rem, 1.5vw, 1rem);
  
  /* PERFORMANCE */
  contain: layout style;
}

/* 🔧 ADAPTIVE CARD SYSTEM - Intelligente Größenanpassung */
.product-cards-container .trendProductCard {
  /* INTELLIGENTE CARD-GRÖSSE - Wächst/schrumpft automatisch */
  flex: 1 1 auto;
  
  /* MIN/MAX CONSTRAINTS - Verhindert zu kleine/große Cards */
  min-width: 280px;
  max-width: 400px;
  
  /* ADAPTIVE GROWTH - Nutzt verfügbaren Platz optimal */
  flex-grow: 1;
  flex-shrink: 1;
  
  /* RESPONSIVE BREAKPOINTS */
  width: 100%;
}

/* 📱 MOBILE: 320px-767px - 1 Card pro Zeile */
@media (max-width: 767px) {
  .product-cards-container {
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
  }
  
  .product-cards-container .trendProductCard {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 280px;
    height:800px;
  }
}
@media (max-width: 500px) {
  .product-cards-container {
    justify-content: center;
    gap: 1.5rem;
    padding: 1rem;
  }
  
  .product-cards-container .trendProductCard {
    flex-basis: 100%;
    max-width: 100%;
    min-width: 280px;
    height:600px;
  }
}

/* 🖥️ TABLET: 768px-1023px - 2 Cards pro Zeile */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-cards-container {
    justify-content: space-evenly;
    gap: 2rem;
  }
  
  .product-cards-container .trendProductCard {
    flex-basis: calc(50% - 1rem);
    max-width: 350px;
    min-width: 300px;
    height:600px;
  }
}

/* 🖥️ DESKTOP: 1024px-1439px - 3 Cards pro Zeile */
@media (min-width: 1024px) and (max-width: 1439px) {
  .product-cards-container {
    justify-content: space-evenly;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .product-cards-container .trendProductCard {
    flex-basis: calc(33.333% - 1.5rem);
    max-width: 360px;
    min-width: 320px;
    height:600px;
  }
}

/* 🖥️ LARGE DESKTOP: 1440px+ - 4 Cards pro Zeile */
@media (min-width: 1440px) {
  .product-cards-container {
    justify-content: space-evenly;
    gap: 2.5rem;
    max-width: 1600px;
    margin: 0 auto;
  }
  
  .product-cards-container .trendProductCard {
    flex-basis: calc(25% - 2rem);
    max-width: 380px;
    min-width: 340px;
    min-height: 600px;
  }
}

/* 🛡️ JAVASCRIPT OVERRIDE PROTECTION - Ultra-spezifisch */
.product-cards-container[style*="display"] {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* ===================================================================
   PRODUCT CARD SYSTEM - Responsive & Flüssig
   =================================================================== */
.trendProductCard {
  /* 🎯 FLEX-KOMPATIBLE CARD STRUCTURE */
  display: flex;
  flex-direction: column;
  
  /* ✅ ENTFERNT: width: 100% - Wird vom Flex-Container gesteuert */
  /* Flex-Basis wird von .product-cards-container .trendProductCard übernommen */
  
  /* 📐 ERWEITERTE CARD SIZING - Mehr Platz für mehrzeilige Titel */
  aspect-ratio: var(--store-card-aspect-ratio);
  min-height: clamp(480px, 45vh, 680px); /* ✅ ERHÖHT: +80px für Titel ohne Bild-Overlap */
  height: auto;

  /* 📏 RESPONSIVE PADDING - Skaliert mit Viewport */
  padding: clamp(1rem, 3vw, 2rem);

  /* 🎨 DESIGN TOKEN INTEGRATION */
  background: var(--color-background, #fffefe);
  border: 2px solid var(--color-primary, #000000);
  border-radius: clamp(6px, 1vw, 10px);

  /* 🔧 LAYOUT OPTIMIZATION */
  align-items: center;
  text-align: center;
  justify-content: space-between;
  
  /* 🛡️ OVERLAP PREVENTION - Ohne width restriction */
  position: relative;
  z-index: 1;
  margin: 0;
  box-sizing: border-box;

  /* ✨ SMOOTH TRANSITIONS */
  transition: all var(--store-transition-medium);

  /* ⚡ PERFORMANCE OPTIMIZATION */
  contain: layout style paint;
  content-visibility: auto;
  contain-intrinsic-size: auto 550px;
}

.trendProductCard:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* PRODUCT CARD IMAGES */
.trendProductCard img {
  width: 100%;
  height: clamp(180px, 40%, 280px);
  object-fit: cover;
  border-radius: clamp(4px, 0.8vw, 6px);
  flex-shrink: 0;
  transition: transform var(--store-transition-medium);
}

.trendProductCard:hover img {
  transform: scale(1.02);
}

/* PRODUCT CARD TITLES */
.trendProductCard h4 {
  /* FLÜSSIGE TYPOGRAFIE */
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  line-height: 1.4; /* ✅ VERBESSERT: Bessere Zeilenhöhe für mehrzeilige Titel */
  margin: clamp(0.75rem, 2vw, 1rem) 0; /* ✅ ERHÖHT: Mehr Margin für besseren Abstand */
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  
  /* ERWEITERTE TITEL-BEREICH */
  min-height: clamp(2.5rem, 6vh, 4rem); /* ✅ HINZUGEFÜGT: Mindesthöhe für mehrzeilige Titel */
  flex-grow: 1;
  
  /* TEXT-OVERFLOW HANDLING - Erweitert für längere Titel */
  display: -webkit-box;
  -webkit-line-clamp: 4; /* ✅ ERHÖHT: Von 3 auf 4 Zeilen */
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--color-text-primary, #000000);
}

/* PRODUCT CARD BUTTONS - Komplett überarbeitetes Layout mit perfekter Zentrierung */
.trendProductButtons {
  /* BUTTON-CONTAINER LAYOUT */
  margin-top: auto; /* Drückt Buttons nach unten */
  display: flex;
  flex-direction: column;
  align-items: center; /* Horizontal zentriert */
  justify-content: center; /* Vertikal zentriert */
  gap: clamp(1rem, 2vw, 1.5rem); /* Größerer Gap zwischen Buttons */
  width: 100%;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); /* Top + Side Padding */
  
  /* BUTTON-BEREICH STYLING */
  background: linear-gradient(to top,
    rgba(248, 249, 250, 0.8) 0%,
    rgba(248, 249, 250, 0.4) 50%,
    transparent 100%
  ); /* Subtiler Hintergrund-Gradient */
  border-radius: 0 0 clamp(6px, 1vw, 8px) clamp(6px, 1vw, 8px); /* Runde untere Ecken */
  margin: 0 -clamp(1.5rem, 3vw, 2rem); /* Kompensiert Card-Padding */
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

.trendProductButtons button {
  /* KRITISCH: SCHWARZ-WEISS DESIGN - Site Standard Style */
  background-color: var(--color-primary, #000000) !important;
  color: var(--color-background, #ffffff) !important;
  border: 2px solid var(--color-primary, #000000) !important;

  /* PERFEKTE BUTTON-ZENTRIERUNG */
  width: 85%; /* Leicht größere Breite für Touch */
  max-width: 220px; /* Größere maximale Breite */
  min-width: 140px; /* Größere minimale Breite */
  
  /* OPTIMIERTE BUTTON-GRÖSSE */
  padding: clamp(1rem, 2.5vw, 1.25rem) clamp(1.5rem, 3vw, 2rem) !important; /* Mehr Padding */
  font-size: clamp(0.95rem, 2.4vw, 1.15rem) !important; /* Größere Schrift */
  font-family: var(--font-family-base, 'Montserrat', sans-serif) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important; /* Bessere Zeilenhöhe */

  /* MODERNE BUTTON-STYLING - STARK ABGERUNDETE ECKEN */
  border-radius: clamp(12px, 2vw, 16px) !important; /* ✅ STARK ABGERUNDET: Deutlich rundere Ecken */
  
  /* BUTTON-INTERAKTION */
  cursor: pointer;
  transition: all var(--store-transition-fast) !important;
  position: relative;
  overflow: hidden;
  text-align: center !important;
  display: flex !important; /* Flexbox für perfekte Zentrierung */
  align-items: center !important;
  justify-content: center !important;
  
  /* TOUCH-OPTIMIERUNG */
  min-height: 48px !important; /* Touch-Guidelines */
}

.trendProductButtons button:hover {
  background-color: var(--color-background, #ffffff) !important;
  color: var(--color-primary, #000000) !important;
  border-color: var(--color-primary, #000000) !important;
  transform: translateY(-3px) !important; /* Stärkerer Hover-Effekt */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important; /* Größerer Schatten */
}

.trendProductButtons button:active {
  transform: translateY(-1px) !important; /* Active-State */
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) !important;
}

/* KRITISCH: Überschreibt alle anderen Button-Styles */
.trendProductButtons button,
.product-cards-container .trendProductCard .trendProductButtons button,
.trendProductCard .trendProductButtons button {
  background-color: var(--color-primary, #000000) !important;
  color: var(--color-background, #ffffff) !important;
  border: 2px solid var(--color-primary, #000000) !important;
}

.trendProductButtons button:hover,
.product-cards-container .trendProductCard .trendProductButtons button:hover,
.trendProductCard .trendProductButtons button:hover {
  background-color: var(--color-background, #ffffff) !important;
  color: var(--color-primary, #000000) !important;
  border-color: var(--color-primary, #000000) !important;
}

/* ===================================================================
   TABLET OPTIMIERUNGEN (800px-1199px)
   =================================================================== */
@media (min-width: 800px) and (max-width: 1199px) {
  /* TOUCH-OPTIMIERTE CARD-GRÖSSEN */
  .trendProductCard {
    min-height: clamp(380px, 30vh, 450px);
  }
  
  .trendProductCard:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
  
  /* TOUCH-OPTIMIERTE BUTTONS */
  .trendProductButtons button {
    min-height: 48px; /* Touch Guidelines */
    padding: clamp(0.75rem, 2vw, 1rem) clamp(1.25rem, 3vw, 1.75rem);
    font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  }
  
  /* BUTTON RIPPLE EFFECT */
  .trendProductButtons button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
  }
  
  .trendProductButtons button:hover::before {
    width: 300px;
    height: 300px;
  }
  
  /* STAGGERED ANIMATIONS */
  .trendProductCard {
    animation: slideInUp var(--store-transition-slow) forwards;
    opacity: 0;
    transform: translateY(20px);
  }
  
  .trendProductCard:nth-child(1) { animation-delay: 0.1s; }
  .trendProductCard:nth-child(2) { animation-delay: 0.2s; }
  .trendProductCard:nth-child(3) { animation-delay: 0.3s; }
  .trendProductCard:nth-child(4) { animation-delay: 0.4s; }
  .trendProductCard:nth-child(5) { animation-delay: 0.5s; }
  .trendProductCard:nth-child(6) { animation-delay: 0.6s; }
  
  @keyframes slideInUp {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* ===================================================================
   DESKTOP OPTIMIERUNGEN (1200px+)
   =================================================================== */
@media (min-width: 1200px) {
  /* ENHANCED HOVER STATES */
  .trendProductCard {
    transition: transform var(--store-transition-fast), 
                box-shadow var(--store-transition-fast),
                border-color var(--store-transition-fast);
  }
  
  .trendProductCard:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: var(--color-surface-hover, #9b9999);
  }
  
  /* OPTIMIERTE TYPOGRAPHY */
  .trendProductCard h4 {
    font-size: clamp(1rem, 1.2vw, 1.2rem);
  }
  
  /* BUTTON HOVER OPTIMIERUNGEN */
  .trendProductButtons button {
    font-weight: 600;
    letter-spacing: 0.025em;
  }
  
  .trendProductButtons button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* FEATURED PRODUCTS - Doppelte Breite */
  .trendProductCard.featured {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    max-width: none;
    aspect-ratio: 2/1;
  }
  
  .trendProductCard.featured img {
    grid-column: 1;
    height: 100%;
  }
  
  .trendProductCard.featured .card-content {
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
  }
}

/* ===================================================================
   SIDEBAR SYSTEM
   =================================================================== */
.category-sidebar h3 {
  font-size: clamp(1.1rem, 2.8vw, 1.3rem);
  font-family: var(--font-family-heading, 'Orbitron', serif);
  margin-bottom: clamp(0.75rem, 1.8vw, 1rem);
  /* color: var(--color-text-primary, #000000); */
  border-bottom: 2px solid var(--color-primary, #000000);
  padding-bottom: 0.5rem;
}

/* MOBILE: Kollabierbare Kategorie-Toggle */
.category-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
  color:white;
}

.category-toggle:hover {
  color: var(--color-primary, #000000);
}

.toggle-icon {
  transition: transform 0.3s ease;
  font-size: 0.9em;
}

/* Mobile: Zeige Toggle-Funktionalität nur bei <800px */
@media (max-width: 799px) {
  .category-toggle {
    padding: 0.75rem;
    border-radius: 6px;
    background: var(--color-primary, #000000); /* Schwarzer Hintergrund */
    color: var(--color-background, #ffffff); /* Weißer Text */
    margin-bottom: 0.5rem;
    font-weight: 600;
    border: 2px solid var(--color-primary, #000000);
  }
  
  .category-toggle:hover {
    background: color-mix(in srgb, var(--color-primary, #000000) 90%, #333333);
    color: var(--color-background, #ffffff);
  }
  
  .category-list.collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
  }
  
  .category-list {
    /* DYNAMISCHE MAX-HÖHE basierend auf Einträgen */
    max-height: calc(var(--category-count, 10) * 3.5rem + 2rem); /* ~3.5rem pro Eintrag + Padding */
    min-height: 3.5rem; /* Mindestens 1 Eintrag */
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    overflow-y: auto; /* Scrollbar falls nötig */
    overflow-x: hidden;
    
    /* SCROLLBAR STYLING für bessere UX */
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary, #000000) transparent;
  }
  
  .category-list::-webkit-scrollbar {
    width: 4px;
  }
  
  .category-list::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .category-list::-webkit-scrollbar-thumb {
    background: var(--color-primary, #000000);
    border-radius: 2px;
  }
}

/* Desktop: Verstecke Toggle, zeige immer Kategorien */
@media (min-width: 800px) {
  .toggle-icon {
    display: none;
  }
  
  .category-toggle {
    cursor: default;
    color:white;
  }
  
  .category-list {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
  }
}

.category-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-sidebar ul li {
  padding: clamp(0.6rem, 1.5vw, 0.8rem) clamp(0.75rem, 1.8vw, 1rem);
  margin: clamp(0.25rem, 0.6vw, 0.4rem) 0;
  border-radius: clamp(4px, 0.8vw, 6px);
  cursor: pointer;
  transition: background-color var(--store-transition-fast);
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: var(--color-text-primary, #000000);
}

.category-sidebar ul li:hover {
  background-color: color-mix(in srgb, var(--color-primary, #000000) 8%, transparent);
}

.category-sidebar ul li.active {
  background-color: var(--color-primary, #000000);
  color: var(--color-text-secondary, #ffffff);
}
/* ===================================================================
   FILTER CONTROLS - Über Kategorien positioniert
   =================================================================== */
.filter-controls {
  display: flex;
  flex-direction: column;
  gap: var(--store-gap-mobile);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
  border-bottom: 2px solid var(--color-primary, #000000);
}

.btn-filter {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  padding: clamp(0.75rem, 1.8vw, 1rem) clamp(1rem, 2.5vw, 1.25rem);
  
  /* MODERNE BUTTON STYLES mit g3df-modern.css Integration */
  background: linear-gradient(135deg, var(--color-background, #fffefe) 0%, #f8f8f8 100%);
  border: 2px solid var(--color-primary, #000000);
  border-radius: 12px;
  
  /* DESIGN TOKENS */
  color: var(--color-text, #333333);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  
  /* ANIMATIONS */
  transition: all var(--store-transition-medium);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  
  /* TOUCH OPTIMIZATION */
  min-height: 48px;
}

.btn-filter i {
  font-size: clamp(1rem, 2vw, 1.2rem);
  transition: transform var(--store-transition-fast);
}

.btn-filter span {
  font-weight: 600;
  letter-spacing: 0.025em;
}

/* HOVER STATES */
.btn-filter:hover {
  background: linear-gradient(135deg, var(--color-primary, #000000) 0%, #333333 100%);
  color: var(--color-background, #fffefe);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-filter:hover i {
  transform: scale(1.1);
}

/* ACTIVE STATE */
.btn-filter.active {
  background: linear-gradient(135deg, var(--color-primary, #000000) 0%, #333333 100%);
  color: var(--color-background, #fffefe);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.btn-filter.active i {
  transform: scale(1.05);
}

/* RIPPLE EFFECT */
.btn-filter::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: width 0.4s, height 0.4s;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.btn-filter:hover::before {
  width: 300px;
  height: 300px;
}

.btn-filter > * {
  position: relative;
  z-index: 1;
}


/* SORT CONTROLS */
.sort-controls {
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.2vw, 0.75rem);
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding-top: clamp(1rem, 2.5vw, 1.5rem);
  border-top: 1px solid color-mix(in srgb, var(--color-primary, #000000) 20%, transparent);
}

.btn-sort {
  padding: clamp(0.6rem, 1.5vw, 0.8rem) clamp(1rem, 2.5vw, 1.25rem);
  background: transparent;
  border: 2px solid var(--color-primary, #000000);
  color: var(--color-primary, #000000);
  border-radius: clamp(6px, 1vw, 8px);
  font-size: clamp(0.85rem, 2vw, 1rem);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  cursor: pointer;
  transition: all var(--store-transition-fast);
  font-weight: 600;
  
  /* 📐 EINHEITLICHE HÖHE */
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-sort:hover {
  background: var(--color-primary, #000000);
  color: var(--color-text-secondary, #ffffff);
  transform: translateY(-1px);
}

.btn-sort.active {
  background: var(--color-primary, #000000);
  color: var(--color-text-secondary, #ffffff);
}

/* ===================================================================
   LAZY LOADING & PERFORMANCE
   =================================================================== */
#lazyLoadSentinel {
  grid-column: 1 / -1;
  height: 40px;
  background: transparent;
  contain: layout;
  margin-top: clamp(1rem, 2vw, 2rem);
}

/* SKELETON LOADING */
.product-card-skeleton {
  background: linear-gradient(90deg, 
    var(--color-background, #fffefe) 25%, 
    color-mix(in srgb, var(--color-background, #fffefe) 90%, var(--color-secondary, #9b9999)) 50%, 
    var(--color-background, #fffefe) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  aspect-ratio: var(--store-card-aspect-ratio);
  border-radius: clamp(6px, 1vw, 8px);
  border: 2px solid color-mix(in srgb, var(--color-primary, #000000) 20%, transparent);
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===================================================================
   SUBGRID SUPPORT (Modern Browsers)
   =================================================================== */
@supports (grid-template-rows: subgrid) {
  .product-cards-container {
    grid-template-rows: subgrid;
  }
  
  .trendProductCard {
    display: grid;
  }
}

/* ===================================================================
   RESPONSIVE - FILTER CONTROLS OPTIMIERUNG
   =================================================================== */

/* TABLET: Horizontale Anordnung */
@media (min-width: 800px) and (max-width: 1199px) {
  .filter-controls {
    /* flex-direction: row; */
    gap: var(--store-gap-tablet);
    margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
  }
  
  .btn-filter {
    flex: 1;
    justify-content: center;
    min-height: 52px;
    font-size: clamp(0.8rem, 1.6vw, 0.9rem);
  }
  
  .btn-filter i {
    font-size: clamp(0.9rem, 1.8vw, 1.1rem);
  }
}

/* DESKTOP: Optimierte Darstellung */
@media (min-width: 1200px) {
  .filter-controls {
    /* flex-direction: row; */
    gap: var(--store-gap-desktop);
    margin-bottom: 2rem;
  }
  
  .btn-filter {
    flex: 1;
    justify-content: center;
    min-height: 56px;
    font-size: 0.9rem;
    padding: 1rem 1.5rem;
  }
  
  .btn-filter i {
    font-size: 1.1rem;
  }
  
  /* DESKTOP HOVER ENHANCEMENT */
  .btn-filter:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
  }
}

/* ===================================================================
   ENHANCED SLIDER SYSTEM - Integration mit bestehendem Carousel
   =================================================================== */
#sliderCarousel {
  position: relative;
  margin-bottom: clamp(4rem, 8vw, 6rem) !important; /* ✅ MASSIV ERHÖHT: Mehr Platz für nachfolgenden Content */
  border-radius: clamp(8px, 1.5vw, 12px);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  
  /* ✅ ZUSÄTZLICHER CLEARANCE-SPACE */
  clear: both;
  display: block;
}

.slider-container {
  position: relative;
  width: 100%;
  height: clamp(200px, 35vh, 500px);
  overflow: hidden;
  
  /* ✅ ZUSÄTZLICHER BOTTOM SPACE für Mobile */
  margin-bottom: clamp(2rem, 5vw, 4rem) !important;
}

/* ===================================================================
   🚀 RESPONSIVE SLIDER HÖHEN - VIEWPORT-BASIERT & MOBILE-OPTIMIERT
   =================================================================== */

/* ===================================================================
   📱 CONTENT-ORIENTIERTE SLIDER HÖHEN - BASIERT AUF TATSÄCHLICHEM INHALT
   =================================================================== */

/* 📱 MOBILE: Höhe basierend auf Image(350px) + Content(400px+) */
@media (max-width: 599px) {
  .slider-container {
    /* ✅ CONTENT-BASIERTE HÖHE - Image 350px + Content 400px + Padding */
    height: auto !important; /* ✅ ÄNDERUNG: Auto statt feste Werte */
    min-height: 800px !important; /* ✅ SICHER: Genug für Image + voller Text */
    max-height: none !important; /* ✅ KEIN LIMIT: Content bestimmt Höhe */
    
    /* CONTENT OVERFLOW - Sichtbarkeit garantiert */
    overflow: visible !important; /* ✅ KRITISCH: Alles muss sichtbar sein */
    
    /* 📱 MOBILE TOUCH OPTIMIERUNG */
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom !important; /* ✅ Erlaubt vertikales Scrollen, verhindert horizontale Konflikte */
    -webkit-touch-callout: none; /* ✅ Verhindert Callouts beim Touch */
    -webkit-user-select: none; /* ✅ Verhindert Text-Selection beim Swipe */
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* ✅ Entfernt Tap-Highlight */
    
    /* 📱 PERFORMANCE OPTIMIERUNG */
    will-change: transform; /* ✅ GPU-Acceleration für Transforms */
    transform: translateZ(0); /* ✅ Hardware-Acceleration */
  }

  /* 📱 MOBILE SLIDER TRACK - PREMIUM TOUCH EXPERIENCE */
  .slider-track {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    will-change: transform;
    touch-action: pan-y;
    
    /* 🎨 MODERNE GPU-BESCHLEUNIGUNG */
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
  }

  /* 📱 MOBILE SLIDER SLIDES - ENHANCED SWIPE EXPERIENCE */
  .slider-slide {
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    
    /* 🎯 PREMIUM TOUCH FEEDBACK */
    transition:
      filter 0.2s ease,
      transform 0.2s ease,
      opacity 0.2s ease;
  }

  /* 🌟 TOUCHING STATE - PREMIUM VISUAL FEEDBACK */
  .slider-container.touching {
    cursor: grabbing;
    -webkit-cursor: grabbing;
    
    /* 🎨 GLASMORPHISMUS-EFFEKT beim Touch */
    filter: none;
    backdrop-filter: blur(2px);
  }
  
  .slider-container.touching .slider-track {
    transition: none !important;
    
    /* ✨ SUBTLE GLOW-EFFEKT */
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
  }
  
  .slider-container.touching .slider-slide.active {
    transform: scale(0.98);
    filter: none;
  }
  
  /* 🎭 SWIPE TRANSITION ENHANCEMENT */
  .slider-slide:not(.active) {
    opacity: 0.7;
    filter: none;
  }
  
  .slider-slide.active {
    opacity: 1;
    filter: none;
    transform: translateZ(0) scale(1);
  }
}

/* 🖥️ TABLET: Höhe für Side-by-Side Layout */
@media (min-width: 600px) and (max-width: 949px) {
  .slider-container {
    /* ✅ STACK LAYOUT: Image oben + Content unten */
    height: auto !important; /* ✅ ÄNDERUNG: Auto-Höhe für Content */
    min-height: 600px !important; /* ✅ MINIMUM für Tablet-Layout */
    max-height: none !important; /* ✅ KEIN LIMIT */
    
    /* CONTENT LAYOUT */
    overflow: visible !important; /* ✅ SICHTBARKEIT garantiert */
  }
}

/* 🖥️ DESKTOP: Side-by-Side Layout - Auto-Höhe */
@media (min-width: 950px) {
  .slider-container {
    /* ✅ DESKTOP SIDE-BY-SIDE: Natürliche Höhe */
    height: auto !important; /* Auto-Höhe für 33/67 Layout */
    min-height: 450px !important; /* Minimum für Design */
    max-height: none !important; /* Unbegrenzt */
    
    /* CONTENT FLOW */
    overflow: visible !important; /* Alles sichtbar */
  }
}

.slider-track {
  display: flex;
  transition: transform var(--store-transition-slow);
  height: 100%;
}

.slider-slide {
  flex: 0 0 100%;
  position: relative;
  background: linear-gradient(135deg, 
    var(--color-primary, #000000) 0%, 
    color-mix(in srgb, var(--color-primary, #000000) 80%, var(--color-secondary, #9b9999)) 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-background, #fffefe);
}

/* ===================================================================
   SLIDER LAYOUT - 2/3 FOTO + 1/3 TEXT DESIGN SYSTEM
   =================================================================== */

/* STANDARD SLIDER CONTENT (falls noch verwendet) */
.slider-content {
  text-align: center;
  padding: clamp(1rem, 3vw, 2rem);
}

/* ===================================================================
   SLIDER CONTENT TYPOGRAPHY - PREMIUM GESTALTUNG
   =================================================================== */
.slider-content h2 {
  font-family: var(--font-family-heading, 'Orbitron', serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
  
  /* 🎨 MODERNE TEXT-EFFEKTE */
  background: linear-gradient(135deg, #333333 0%, #000000 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* 📏 OPTIMIERTE LETTER-SPACING */
  letter-spacing: clamp(-0.5px, 0.1vw, 0px);
}

.slider-content p {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-family: var(--font-family-base, 'Montserrat', sans-serif);
  font-weight: 400;
  line-height: 1.6;
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
  
  /* 🎭 VERBESSERTE LESBARKEIT */
  color: rgba(0, 0, 0, 0.8);
  letter-spacing: 0.2px;
  max-width: 65ch; /* Optimale Zeilenlänge */
}

/* ⚡ SLIDE-IN ANIMATION für aktive Slides */
.slider-slide.active .slider-content h2 {
  animation: slide-in-text 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.slider-slide.active .slider-content p {
  animation: slide-in-text 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s both;
}

@keyframes slide-in-text {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================================
   MODERNE SLIDER PHOTO-TEXT LAYOUT - 2/3 + 1/3 VERHÄLTNIS
   =================================================================== */

/* SLIDE CONTAINER mit Foto + Text Layout */
.slider-slide {
  display: flex !important;
  align-items: stretch;
  background: var(--color-background, #fffefe);
  overflow: hidden;
}

/* KORRIGIERT: DESKTOP/TABLET Layout bei ≥950px */
@media (min-width: 950px) {
  .slider-slide {
    display: flex !important;
    flex-direction: row !important;
    min-height: clamp(400px, 50vh, 600px);
  }
  
  /* TEXT-BEREICH: Links - 1/3 der Breite (33.33%) */
  .slider-slide .slider-content {
    flex: 1 !important; /* 33.33% */
    order: 1 !important; /* Links positioniert */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(1.5rem, 4vw, 3rem);
    background: linear-gradient(135deg,
      var(--color-background, #fffefe) 0%,
      color-mix(in srgb, var(--color-background, #fffefe) 95%, var(--color-primary, #000000)) 100%
    );
    border-right: 3px solid var(--color-primary, #000000); /* Rechte Umrandung */
  }
  
  /* BILD-BEREICH: Rechts - 2/3 der Breite (66.67%) */
  .slider-slide .slider-media {
    flex: 2 !important; /* 66.67% */
    order: 2 !important; /* Rechts positioniert */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    
    /* 16:9 ASPECT RATIO ERZWUNGEN */
    aspect-ratio: 16/9;
    background: var(--color-surface, #f8f9fa);
  }
  
  .slider-slide .slider-media img {
    width: 100%;
    height: 100%;
    /* 16:9 ASPECT RATIO KONSISTENT */
    aspect-ratio: 16/9;
    object-fit: cover; /* Füllt Container, behält Proportionen */
    object-position: center;
    position: static !important;
    opacity: 1 !important;
    transition: transform 0.3s ease;
  }
  
  .slider-slide .slider-media img:hover {
    transform: scale(1.02);
  }
}

/* ===================================================================
   TABLET LAYOUT: NEUE BREAKPOINT-STRUKTUR FÜR 600px-949px
   Jetzt auch mit Mobile-Layout (vertikal gestapelt)
   =================================================================== */
@media (min-width: 600px) and (max-width: 949px) {
  /* TABLET SLIDER CONTAINER: MASSIV erhöhte Höhe für Top-Down Layout */
  .slider-carousel {
    min-height: clamp(650px, 80vh, 800px) !important; /* ✅ DEUTLICH HÖHER für Top-Down Layout */
  }

  .slider-slide {
    display: flex !important;
    flex-direction: column !important; /* ✅ TOP-DOWN: Bild oben, Text unten */
    height: 100%;
    min-height: clamp(650px, 80vh, 800px) !important; /* ✅ MASSIV ERHÖHT für lesbare Texte */
  }

  /* BILD-BEREICH: Oben - ca. 50% der Gesamthöhe */
  .slider-slide .slider-media {
    order: 1 !important; /* BILD OBEN */
    width: 100%;
    height: clamp(300px, 40vh, 400px) !important; /* ✅ GROSSER Bildbereich für Tablet */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex: none;
  }
  
  .slider-slide .slider-media img {
    width: 100%;
    height: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    position: static !important;
    opacity: 1 !important;
    border-radius: clamp(6px, 1vw, 8px);
  }

  /* TEXT-BEREICH: Unten - ca. 50% der Gesamthöhe */
  .slider-slide .slider-content {
    order: 2 !important; /* TEXT UNTEN */
    width: 100%;
    height: clamp(350px, 40vh, 400px) !important; /* ✅ GROSSER Text-Bereich für Lesbarkeit */
    padding: clamp(2.5rem, 5vw, 3.5rem) !important; /* ✅ MEHR Padding für Komfort */
    background: var(--color-background, #fffefe);
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center; /* ✅ Zentriert für Tablet */
    flex: none;
    border: none;
  }

  /* TABLET TEXT STYLING - Optimiert für Top-Down mit großem Textbereich */
  .slider-slide .slider-content h2,
  .slider-slide .slider-content h3 {
    font-family: var(--font-family-heading, 'Orbitron', serif);
    font-size: clamp(2rem, 4.5vw, 2.5rem) !important; /* ✅ NOCH GRÖßER für Tablet Top-Down */
    font-weight: 700;
    margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
    color: var(--color-text-primary, #000000);
    line-height: 1.3 !important;
  }
  
  .slider-slide .slider-content p {
    font-size: clamp(1.2rem, 2.8vw, 1.4rem) !important; /* ✅ DEUTLICH GRÖßER für Lesbarkeit */
    line-height: 1.7 !important;
    color: #000000;
    margin-bottom: clamp(1.5rem, 3vw, 2rem) !important;
  }
  
  .slider-slide .slider-content .slide-cta {
    margin-top: auto;
    padding-top: clamp(1.5rem, 3vw, 2rem);
  }
  
  .slider-slide .slider-content .btn {
    display: inline-block;
    padding: clamp(1.2rem, 2.5vw, 1.5rem) clamp(2.5rem, 5vw, 3rem) !important; /* ✅ NOCH GRÖßERE Buttons */
    background: var(--color-primary, #000000);
    color: var(--color-background, #fffefe);
    text-decoration: none;
    border-radius: 8px !important;
    font-weight: 600;
    font-size: clamp(1.1rem, 2.5vw, 1.3rem) !important; /* ✅ GRÖßERE Button-Schrift */
    transition: all 0.3s ease;
    border: 2px solid var(--color-primary, #000000);
  }
  
  .slider-slide .slider-content .btn:hover {
    background: transparent;
    color: var(--color-primary, #000000);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
}

/* ===================================================================
   MOBILE LAYOUT: CONTENT UNTER MEDIA BEI <600PX
   Überschreibt sowohl Tablet- als auch Desktop-Layout
   =================================================================== */
@media (max-width: 599px) {
  .slider-slide {
    flex-direction: column !important;
    min-height: clamp(700px, 100vh, 1200px) !important; /* DYNAMISCH: Wächst mit Content */
    height: auto !important; /* AUTO: Passt sich Content an */
    max-height: none !important; /* KEIN Limit: Content bestimmt Höhe */
    overflow: visible !important; /* CRITICAL: Verhindert Content-Abschneidung */
    position: relative;
  }
  
  /* BILD-BEREICH: Oben, volle Breite - MEDIA FIRST */
  .slider-slide .slider-media {
    order: 1 !important; /* BILD OBEN */
    width: 100%;
    height: clamp(300px, 35vh, 380px) !important; /* ✅ RESPONSIVE: Angepasst an Viewport */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    flex: none;
  }
  
  .slider-slide .slider-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: static !important;
    opacity: 1 !important;
    aspect-ratio: 16/9;
  }
  
  /* TEXT-BEREICH: Unten, volle Breite - CONTENT SECOND */
  .slider-slide .slider-content {
    order: 2 !important; /* TEXT UNTEN */
    width: 100%;
    height: auto !important; /* AUTO: Dynamisch basierend auf Content */
    min-height: clamp(400px, 50vh, 600px) !important; /* ✅ ERHÖHT: Mehr Platz für Text */
    max-height: none !important; /* KEIN Maximum: Content wächst frei */
    padding: clamp(2.5rem, 7vw, 5rem) !important; /* ✅ MEHR Padding für bessere Lesbarkeit */
    background: var(--color-background, #fffefe);
    text-align: center;
    flex: none; /* FESTE HÖHE statt flexible */
    border: none;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* OBEN statt center für p-Text */
    overflow-y: visible !important; /* KEINE Scrollbar: Content zeigt sich vollständig */
    overflow-x: hidden;
  }
  
  .slider-slide .slider-content h3 {
    font-family: var(--font-family-heading, 'Orbitron', serif);
    font-size: clamp(1.1rem, 4vw, 1.4rem);
    font-weight: 700;
    margin-bottom: clamp(0.75rem, 2vw, 1rem);
    color: var(--color-text-primary, #000000);
    line-height: 1.3;
  }
  
  .slider-slide .slider-content p {
    font-size: clamp(0.85rem, 3vw, 1rem);
    line-height: 1.5;
    color: #000000;
    margin-bottom: clamp(1rem, 3vw, 1.25rem);
  }
  
  .slider-slide .slider-content .btn {
    display: inline-block;
    padding: clamp(0.6rem, 2vw, 0.8rem) clamp(1.25rem, 4vw, 1.5rem);
    background: var(--color-primary, #000000);
    color: var(--color-background, #fffefe);
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    font-size: clamp(0.8rem, 2.5vw, 0.9rem);
    transition: all 0.3s ease;
    border: 2px solid var(--color-primary, #000000);
  }
  
  .slider-slide .slider-content .btn:hover {
    background: transparent;
    color: var(--color-primary, #000000);
  }
}

/* ZOOM TRIGGER ANPASSUNG für neues Layout */
.slider-slide .slider-media .zoom-trigger {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
}

/* ===================================================================
   SLIDER CTA BUTTONS - MODERNE GLASMORPHISMUS-BUTTONS
   =================================================================== */
.slider-cta {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem);
  
  /* 🎨 MODERNE GLASMORPHISMUS-ÄSTHETIK */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-background, #fffefe);
  
  /* 📐 DESIGN */
  border-radius: clamp(12px, 1.5vw, 16px);
  font-weight: 600;
  font-size: clamp(0.9rem, 1.8vw, 1rem);
  text-decoration: none;
  
  /* ⚡ ANIMATIONEN */
  transition: all var(--store-transition-medium);
  transform: translateZ(0);
  
  /* 🌟 ELEGANTE SCHATTEN */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  /* 📱 TOUCH-OPTIMIERUNG */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px; /* Touch Guidelines */
}

.slider-cta:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--color-background, #fffefe);
  
  transform: translateY(-3px) translateZ(0) scale(1.02);
  
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.25),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.slider-cta:active {
  transform: translateY(-1px) translateZ(0) scale(0.98);
  background: rgba(255, 255, 255, 0.3);
}

.slider-cta i {
  font-size: clamp(14px, 2vw, 18px);
  transition: transform var(--store-transition-fast);
}

.slider-cta:hover i {
  transform: translateX(2px);
}

/* 🎭 PULSING EFFECT für wichtige CTAs */
.slider-cta.primary {
  animation: subtle-pulse 3s ease-in-out infinite;
}

@keyframes subtle-pulse {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(0, 0, 0, 0.15),
      0 2px 8px rgba(0, 0, 0, 0.1),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow:
      0 6px 20px rgba(0, 0, 0, 0.2),
      0 3px 10px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.25);
  }
}

/* ===================================================================
   SLIDER NAVIGATION - MODERNE GLASMORPHISMUS-BUTTONS
   =================================================================== */
.slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  
  /* 🎨 MODERNE GLASMORPHISMUS-ÄSTHETIK */
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  
  /* 📐 RESPONSIVE GRÖSSE */
  width: clamp(44px, 7vw, 56px);
  height: clamp(44px, 7vw, 56px);
  border-radius: 50%;
  
  /* 🎯 INTERAKTION */
  cursor: pointer;
  
  /* ⚡ FLÜSSIGE ANIMATIONEN */
  transition: all var(--store-transition-medium);
  transform-origin: center;
  
  /* 🌟 ELEGANTE SCHATTEN */
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  
  /* 📱 TOUCH-OPTIMIERUNG */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  
  /* 🎭 Z-INDEX für Overlay */
  z-index: 15;
}

.slider-nav:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-50%) scale(1.05);
  
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.slider-nav:active {
  transform: translateY(-50%) scale(0.95);
  background: rgba(0, 0, 0, 0.6);
}

.slider-nav i {
  font-size: clamp(16px, 3vw, 22px);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* ===================================================================
   MOBILE OPTIMIERUNGEN - Erweiterte Touch-Unterstützung
   =================================================================== */
@media (max-width: 799px) {
  /* FILTER CONTROLS: Stack Layout für Mobile */
  .filter-controls {
    gap: clamp(0.75rem, 2vw, 1rem);
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
  }
  
  .btn-filter {
    min-height: 52px; /* Touch Guidelines */
    font-size: clamp(0.9rem, 2.2vw, 1rem);
    padding: clamp(0.8rem, 2vw, 1rem) clamp(1.25rem, 3vw, 1.5rem);
  }
  
  .btn-filter i {
    font-size: clamp(1.1rem, 2.5vw, 1.3rem);
  }
  
  /* SLIDER: Mobile Touch Optimierung */
  .slider-nav {
    width: clamp(44px, 8vw, 52px);
    height: clamp(44px, 8vw, 52px);
  }
  
  .slider-nav.prev {
    left: clamp(0.75rem, 2vw, 1rem);
  }
  
  .slider-nav.next {
    right: clamp(0.75rem, 2vw, 1rem);
  }
  
  .slider-dots {
    bottom: clamp(0.75rem, 2vw, 1rem);
    gap: clamp(0.75rem, 1.5vw, 1rem);
  }
  
  .slider-dot {
    width: clamp(10px, 2vw, 14px);
    height: clamp(10px, 2vw, 14px);
  }
  
  /* CATEGORY SIDEBAR: Mobile Stack */
  .category-sidebar {
    order: 2;
    margin-top: clamp(1rem, 2.5vw, 1.5rem);
  }
  
  .category-sidebar h3 {
    font-size: clamp(1.2rem, 3vw, 1.4rem);
    color:white;
  }
}

/* ===================================================================
   SEHR KLEINE BILDSCHIRME - iPhone SE, etc.
   =================================================================== */
@media (max-width: 374px) {
  .btn-filter {
    min-height: 48px;
    font-size: 0.85rem;
    padding: 0.75rem 1rem;
  }
  
  .btn-filter span {
    font-size: 0.8rem;
  }
  
  .btn-filter i {
    font-size: 1rem;
  }
  
  .slider-nav {
    width: 40px;
    height: 40px;
  }
  
  .slider-content h2 {
    font-size: 1.25rem;
  }
  
  .slider-content p {
    font-size: 0.85rem;
  }
}

/* ===================================================================
   ACCESSIBILITY & HIGH CONTRAST
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  .btn-filter,
  .slider-nav,
  .slider-dot,
  .slider-track {
    transition: none;
  }
  
  .btn-filter::before {
    display: none;
  }
}

@media (prefers-contrast: high) {
  .btn-filter {
    border-width: 3px;
    font-weight: 700;
  }
  
  .btn-filter:hover,
  .btn-filter.active {
    border-color: var(--color-background, #fffefe);
  }
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
  #sliderCarousel,
  .filter-controls,
  .slider-nav,
  .slider-dots {
    display: none;
  }
  
  .category-sidebar {
    position: static;
    width: 100%;
    border: 1px solid #000;
    page-break-inside: avoid;
  }
}

/* ===================================================================
   SLIDER DOTS - MODERNE NAVIGATION DOTS
   =================================================================== */
.slider-dots {
  position: absolute;
  bottom: clamp(1rem, 3vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(8px, 1.5vw, 12px);
  z-index: 10;
  
  /* 📱 TOUCH-OPTIMIERUNG */
  padding: clamp(8px, 2vw, 12px);
}

.slider-dot {
  width: clamp(10px, 2vw, 14px);
  height: clamp(10px, 2vw, 14px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all var(--store-transition-fast);
  
  /* 📱 TOUCH-GUIDELINES */
  min-width: 24px;
  min-height: 24px;
  touch-action: manipulation;
}

.slider-dot.active,
.slider-dot:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

#sliderCarousel .slider-nav:hover {
  background: rgba(0, 0, 0, 0.8) !important;
  transform: translateY(-50%) scale(1.1) !important;
}

#sliderCarousel .slider-nav.prev {
  left: clamp(1rem, 2vw, 2rem) !important;
}

#sliderCarousel .slider-nav.next {
  right: clamp(1rem, 2vw, 2rem) !important;
}

/* BEI DESKTOP TEXT-BILD LAYOUT: Navigation nur im Bildbereich */
@media (min-width: 950px) {
  #sliderCarousel .slider-nav.prev {
    left: calc(33.33% + 1rem) !important; /* Links vom Bildbereich + Padding */
  }
  
  #sliderCarousel .slider-nav.next {
    right: 1rem !important; /* Rechts vom Bildbereich + Padding */
  }
}

#sliderCarousel .slider-dots {
  position: absolute !important;
  bottom: clamp(1rem, 2vw, 1.5rem) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: clamp(0.5rem, 1vw, 0.75rem);
  z-index: 10 !important;
  pointer-events: auto !important;
}

#sliderCarousel .slider-dot {
  width: clamp(8px, 1.2vw, 12px) !important;
  height: clamp(8px, 1.2vw, 12px) !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  cursor: pointer !important;
  transition: all var(--store-transition-fast) !important;
  border: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
}

#sliderCarousel .slider-dot.active,
#sliderCarousel .slider-dot:hover {
  background: var(--color-background, #fffefe) !important;
  transform: scale(1.2) !important;
}

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
  .category-sidebar {
    display: none;
  }
  
  .product-cards-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
  
  .trendProductCard {
    break-inside: avoid;
    border: 1px solid #000 !important;
    background: white !important;
  }
  
  .trendProductButtons {
    display: none;
  }
}

/* ===================================================================
   ACCESSIBILITY & REDUCED MOTION
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .trendProductCard:hover {
    transform: none;
  }
}

/* HIGH CONTRAST MODE */
@media (prefers-contrast: high) {
  .trendProductCard {
    border-width: 3px;
  }
  
  .btn-sort {
    border-width: 3px;
  }
}

/* ===================================================================
   LEGACY BROWSER FALLBACKS
   =================================================================== */
@supports not (aspect-ratio: 3/4) {
  .trendProductCard {
    height: 400px;
  }
}

@supports not (container-type: inline-size) {
  /* Media Queries Fallback für Container Queries */
  @media (min-width: 600px) {
    .product-cards-container {
      gap: var(--store-gap-tablet);
    }
  }
  
  @media (min-width: 900px) {
    .product-cards-container {
      grid-template-columns: repeat(auto-fit, minmax(var(--store-tablet-min), 1fr));
    }
  }
  
  @media (min-width: 1200px) {
    .product-cards-container {
      grid-template-columns: repeat(auto-fit, minmax(var(--store-desktop-min), 1fr));
    }
  }
}
.btn {
  background-color:white;
  border: 4px solid black;     /* schwarze Kanten */
  border-radius: 15px;          /* runde Ecken */
  padding: 10px 10px; 
  
  width:200px;
  
  background-colsliderCarouselor: white;     /* Hintergrundfarbe */
  color: black;                /* Textfarbe */
  text-align: center;          /* zentrierte Schrift */
  font-size: 20px;             /* Schriftgröße */
  cursor: pointer;             /* Mauszeiger als Hand */
  display: inline-block;  
  margin:auto;
  margin-bottom:2px;
  
  font-weight:700;
}
.trendProductCard
  .box {
  
  align-items: center;  
}
.slider-content p{
  color:black;
}