/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* CSS Variables */
:root {
  /* Custom psychedelic colors */
  --purple-glow: hsl(267, 84%, 71%);
  --green-glow: hsl(160, 84%, 39%);
  --pink-glow: hsl(330, 81%, 60%);
  --gold-glow: hsl(281, 100%, 50%);
  
  /* Text colors - improved brightness for readability */
  --text-purple: hsl(267, 70%, 85%);
  --text-green: hsl(160, 70%, 65%);
  --text-pink: hsl(330, 70%, 80%);
  --text-blue: hsl(220, 70%, 80%);
  --text-yellow: hsl(51, 90%, 70%);
  --text-orange: hsl(25, 80%, 75%);
  --text-red: hsl(0, 70%, 75%);
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #000000;
}

/* Layout Classes */
.min-h-screen { min-height: 100vh; }
.text-white { color: white; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 10px rgba(255, 255, 255, 0.1); }
.overflow-x-hidden { overflow-x: hidden; }
.relative { position: relative; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-1 { flex: 1; }
.pt-16 { padding-top: 4rem; }
pb-8 { padding-bottom: 2rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 1rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.max-w-md { max-width: 28rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.opacity-20 { opacity: 0.2; }
.opacity-75 { opacity: 0.75; }
.opacity-90 { opacity: 0.9; }
.inline-block { display: inline-block; }

/* Text Color Classes */
.text-purple-400 { color: var(--text-purple); }
.text-green-400 { color: var(--text-green); }
.text-pink-400 { color: var(--text-pink); }
.text-pink-300 { color: hsl(330, 81%, 70%); }
.text-green-300 { color: hsl(160, 84%, 49%); }
.text-blue-400 { color: var(--text-blue); }
.text-yellow-400 { color: var(--text-yellow); }
.text-orange-400 { color: var(--text-orange); }
.text-red-400 { color: var(--text-red); }
.text-white { color: white; }

/* Animations */
@keyframes gradient-flow {
  0%, 100% { transform: translateX(-50%) translateY(-50%) rotate(0deg) scale(1); }
  33% { transform: translateX(-50%) translateY(-50%) rotate(120deg) scale(1.1); }
  66% { transform: translateX(-50%) translateY(-50%) rotate(240deg) scale(0.9); }
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(198, 12, 255, 0.3); }
  50% { box-shadow: 0 0 40px rgba(144, 24, 255, 0.6), 0 0 60px rgba(236, 72, 153, 0.3); }
}
@keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px);} to { opacity: 1; transform: translateY(0);} }
@keyframes pulse { 0%, 100% { opacity: 1;} 50% { opacity: 0.5;} }

/* Psychedelic Background */
.psychedelic-bg {
  background-color: #000000;
  background-image: 
    radial-gradient(circle at 25% 25%, rgba(139, 92, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 75% 75%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(236, 72, 153, 0.15) 0%, transparent 50%);
  background-size: 400% 400%, 300% 300%, 500% 500%;
  animation: gradient-flow 8s ease-in-out infinite;
}
.psychedelic-bg::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
  z-index: 1;
}
.bg-overlay {
  background-image: url('https://images.unsplash.com/photo-1419242902214-272b3f66ee7a?ixlib=rb-4.0.3&auto=format&fit=crop&w=1920&h=1080');
  background-size: cover;
  background-position: center;
  mix-blend-mode: soft-light;
  opacity: 0.3;
}

/* Glassmorphism Effects */
.glass-morphism {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  border-radius: 1rem;
  padding: 1.5rem;
}
.glass-button {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.glass-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2);
}

/* Profile Components */
.profile-container { position: relative; display: inline-block; animation: float 3s ease-in-out infinite; }
.profile-image { width: 6rem; height: 6rem; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--gold-glow), 0 0 30px rgba(255, 215, 0, 0.4); }
.profile-fallback { width: 6rem; height: 6rem; border-radius: 50%; background: linear-gradient(135deg, hsl(267, 84%, 71%), hsl(330, 81%, 60%)); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px var(--gold-glow), 0 0 30px rgba(255, 215, 0, 0.4); }
.profile-fallback i { font-size: 1.5rem; color: white; }
.profile-glow-overlay { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(45deg, rgba(183, 0, 255, 0.3), rgba(225, 0, 255, 0.1), rgba(132, 0, 255, 0.3)); opacity: 0.2; animation: pulse-glow 2s ease-in-out infinite; }

/* Typography */
.main-title { font-size: 3rem; font-weight: 700; letter-spacing: 0.15em; margin-bottom: 1.5rem; animation: pulse-glow 2s ease-in-out infinite; text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.95); }
.welcome-text { margin-bottom: 2rem; }
.welcome-text p { font-size: 0.875rem; line-height: 1.6; font-weight: 300; opacity: 0.95; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.9); }
.content-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.95); }
.content-title i { margin-right: 0.5rem; }
.content-text { font-size: 0.875rem; line-height: 1.6; opacity: 0.95; margin-bottom: 1rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.9); }
.footer-text { font-size: 0.75rem; font-weight: 300; letter-spacing: 0.1em; opacity: 0.9; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.85); }

/* Navigation */
.navigation-menu { display: flex; flex-direction: column; gap: 1rem; }
.nav-button { width: 100%; padding: 1rem 1.5rem; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.75rem; color: rgba(255, 255, 255, 0.95); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.875rem; letter-spacing: 0.05em; text-align: left; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; display: flex; align-items: center; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.nav-button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2); }
.nav-button.active { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
.nav-button i { margin-right: 0.75rem; }
.notification-badge { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); background: hsl(0, 84%, 60%); color: white; font-size: 0.75rem; padding: 0.25rem 0.5rem; border-radius: 9999px; animation: pulse 2s infinite; }

/* Content Sections */
.content-section { margin-top: 2rem; animation: fadeInUp 0.6s ease-out forwards; }
.content-box { border-radius: 1rem; padding: 1.5rem; }
.links-container { display: flex; flex-direction: column; gap: 0.75rem; }
.link-button { display: block; width: 100%; padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 0.5rem; color: rgba(255, 255, 255, 0.95); text-decoration: none; text-align: center; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.link-button:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2); }
.link-button i { margin-right: 0.5rem; }

/* Discount Components */
.discounts-container { display: flex; flex-direction: column; gap: 1rem; }
.discount-item { display: flex; justify-content: space-between; align-items: center; padding: 1rem; }
.discount-info { flex: 1; }
.discount-code { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); color: rgba(255, 255, 255, 0.95); }
.discount-description { font-size: 0.75rem; opacity: 0.9; margin: 0; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); color: rgba(255, 255, 255, 0.85); }
.copy-button { padding: 0.5rem 0.75rem; background: hsl(330, 81%, 60%); border: none; border-radius: 9999px; color: white; font-size: 0.75rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.copy-button:hover { background: hsl(330, 81%, 50%); transform: scale(1.05); }
.copy-button.copied { background: hsl(160, 84%, 39%); }
.copy-button.copied:hover { background: hsl(160, 84%, 29%); }

/* Footer */
.footer-content { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; border-radius: 0.75rem; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 8px 20px rgba(0,0,0,0.4); }

/* Upload (Einsendung) */
.upload-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.5rem; }
.upload-form label { font-size: 0.85rem; font-weight: 700; color: rgba(255,255,255,0.92); letter-spacing: 0.01em; }
.upload-form input[type="text"] {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: #fff;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.upload-form input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
.upload-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(255,255,255,0.35);
  box-shadow: 0 0 0 2px rgba(139,92,246,0.25);
}
.file-drop {
  display: block;
  text-align: center;
  padding: 1rem;
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 0.9rem;
  cursor: pointer;
  background: rgba(255,255,255,0.05);
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.file-drop:hover {
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: 0.6rem;
}
.preview-grid img,
.preview-grid video {
  width: 100%;
  height: 80px;
  object-fit: cover;
  border-radius: 0.75rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.03);
}
.checkbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.85);
}
.checkbox-row a { color: var(--text-purple); text-decoration: underline; }
.primary-btn {
  padding: 0.95rem 1.2rem;
  border-radius: 0.9rem;
  border: none;
  background: linear-gradient(135deg, var(--purple-glow), var(--pink-glow));
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(139,92,246,0.25);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.primary-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 34px rgba(139,92,246,0.35); }
.progress {
  position: relative;
  height: 32px;
  border-radius: 0.9rem;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.05);
  overflow: hidden;
}
.progress .bar {
  position: absolute; inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--purple-glow), var(--pink-glow), var(--green-glow));
  transition: width 0.25s ease;
}
.progress .percent {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800; font-size: 0.85rem; color: #fff;
}
#uploadedImages p {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 0.8rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

/* Copy Notification */
.copy-notification { position: fixed; top: 5rem; left: 50%; transform: translateX(-50%) translateY(10px); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); border-radius: 0.5rem; padding: 0.75rem 1rem; color: white; font-size: 0.875rem; font-weight: 500; z-index: 1000; opacity: 0; transition: all 0.3s ease; pointer-events: none; }
.copy-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.copy-notification i { margin-right: 0.5rem; }

/* Animated Geometric Shapes */
.geometric-shapes { pointer-events: none; overflow: hidden; }
.floating-shape { position: absolute; opacity: 0.3; filter: blur(1px); }
.shape-1 { width: 80px; height: 80px; background: linear-gradient(45deg, var(--purple-glow), transparent); border-radius: 20%; top: 10%; left: 15%; animation: float-rotate 15s ease-in-out infinite, drift-1 20s ease-in-out infinite; }
.shape-2 { width: 60px; height: 60px; background: linear-gradient(135deg, var(--green-glow), transparent); border-radius: 50%; top: 70%; right: 20%; animation: float-rotate 12s ease-in-out infinite reverse, drift-2 18s ease-in-out infinite; }
.shape-3 { width: 100px; height: 40px; background: linear-gradient(90deg, var(--pink-glow), transparent); border-radius: 50px; top: 40%; left: 5%; animation: float-rotate 18s ease-in-out infinite, drift-3 25s ease-in-out infinite; }
.shape-4 { width: 50px; height: 50px; background: linear-gradient(225deg, var(--gold-glow), transparent); transform: rotate(45deg); top: 20%; right: 10%; animation: float-rotate 10s ease-in-out infinite, drift-4 22s ease-in-out infinite; }
.shape-5 { width: 70px; height: 120px; background: linear-gradient(180deg, var(--purple-glow), transparent); border-radius: 35px; top: 60%; left: 70%; animation: float-rotate 14s ease-in-out infinite reverse, drift-5 16s ease-in-out infinite; }
.shape-6 { width: 90px; height: 90px; background: linear-gradient(315deg, var(--green-glow), var(--pink-glow), transparent); border-radius: 30%; top: 80%; left: 40%; animation: float-rotate 16s ease-in-out infinite, drift-6 24s ease-in-out infinite; }
@keyframes float-rotate { 0%, 100% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(90deg) scale(1.1); } 50% { transform: rotate(180deg) scale(0.9); } 75% { transform: rotate(270deg) scale(1.05); } }
@keyframes drift-1 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(30px, -20px) rotate(120deg); } 66% { transform: translate(-20px, 30px) rotate(240deg); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-40px, -30px) rotate(180deg); } }
@keyframes drift-3 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(20px, 40px) rotate(90deg); } 75% { transform: translate(-30px, -10px) rotate(270deg); } }
@keyframes drift-4 { 0%, 100% { transform: translate(0, 0) rotate(45deg); } 50% { transform: translate(25px, 35px) rotate(225deg); } }
@keyframes drift-5 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 40% { transform: translate(-25px, 20px) rotate(144deg); } 80% { transform: translate(35px, -25px) rotate(288deg); } }
@keyframes drift-6 { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(-15px, -35px) rotate(120deg); } 66% { transform: translate(40px, 15px) rotate(240deg); } }

/* Product Carousel */
.product-carousel { margin-top: 1.5rem; }
.product-display { position: relative; height: 350px; overflow: hidden; border-radius: 1rem; }
.product-item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transform: translateX(100%); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.product-item.active { opacity: 1; transform: translateX(0); }
.product-image-container { position: relative; width: 200px; height: 200px; margin-bottom: 1rem; border-radius: 1rem; overflow: hidden; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); }
.product-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.product-image-container:hover .product-image { transform: scale(1.05); }
.product-overlay { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); padding: 1rem; display: flex; flex-direction: column; align-items: center; }
.product-name { font-weight: 600; font-size: 0.875rem; color: white; margin-bottom: 0.25rem; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.product-price { font-weight: 700; font-size: 1rem; color: var(--gold-glow); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7); }
.product-link-button { background: linear-gradient(135deg, var(--purple-glow), var(--pink-glow)); border: none; border-radius: 2rem; padding: 0.75rem 1.5rem; color: white; text-decoration: none; font-weight: 600; font-size: 0.875rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: all 0.3s ease; box-shadow: 0 4px 16px rgba(236, 72, 153, 0.3); text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); }
.product-link-button:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 24px rgba(236, 72, 153, 0.4); background: linear-gradient(135deg, var(--pink-glow), var(--purple-glow)); }
.product-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1rem; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 0.3s ease; }
.dot.active { background: var(--gold-glow); transform: scale(1.3); box-shadow: 0 0 10px rgba(255, 154, 0, 0.5); }
.dot:hover { background: rgba(255, 255, 255, 0.6); transform: scale(1.1); }

/* Stats footer */
.stats-footer-wrapper { display: flex; justify-content: center; padding: 14px 0 4px; }
.stats-footer { display: inline-flex; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.07); box-shadow: 0 8px 20px rgba(0,0,0,0.35); }
.stat-pill { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.15); }
.stat-label { color: rgba(255,255,255,0.85); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.03em; }
.stat-value { color: #fff; font-size: 1rem; font-weight: 800; }

/* Captcha modal */
.captcha-modal { position: fixed; inset: 0; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,0.65); z-index: 3000; }
.captcha-modal.show { display: flex; }
.captcha-modal-content { background: rgba(20,20,24,0.95); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 18px; width: min(90%, 360px); box-shadow: 0 20px 50px rgba(0,0,0,0.55); text-align: center; }
.captcha-modal-content h3 { margin: 0 0 10px 0; letter-spacing: 0.05em; }
.captcha-modal-content p { margin: 0 0 14px 0; color: rgba(255,255,255,0.85); }
.captcha-modal-content input { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); color: #fff; margin-bottom: 12px; }
.captcha-modal-actions { display: flex; gap: 10px; justify-content: center; }
.secondary-btn { padding: 0.9rem 1.2rem; border-radius: 0.9rem; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08); color: #fff; font-weight: 700; cursor: pointer; }

/* Responsive Design */
@media (min-width: 768px) {
  .main-title { font-size: 4rem; }
  .welcome-text p { font-size: 1rem; }
  .floating-shape { opacity: 0.4; }
  .shape-1, .shape-2, .shape-3, .shape-4, .shape-5, .shape-6 { transform: scale(1.2); }
  .product-image-container { width: 250px; height: 250px; }
  .product-display { height: 400px; }
}

/* === CSS für Bilder im "Über mich"-Bereich === */
.about-me-image { border-radius: 0.75rem; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; background-color: rgba(255, 255, 255, 0.05); }
.about-me-image:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.2); }
.about-me-image-centered { display: block; max-width: 90%; height: auto; margin: 1.5rem auto; }
.about-me-image-left { float: left; width: 130px; height: 130px; object-fit: cover; margin-right: 1.5rem; margin-bottom: 0.5rem; }
.about-me-image-right { float: right; width: 130px; height: 130px; object-fit: cover; margin-left: 1.5rem; margin-bottom: 0.5rem; }
.about-me-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; }
.about-me-gallery .about-me-image { width: 100%; height: 150px; object-fit: cover; }