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

body { font-family: 'Inter', sans-serif; background-color: #0b110f; color: #f8fafc; overflow-x: hidden; }

.blob-container { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -1; 
    overflow: hidden; filter: blur(60px); 
    transform: translateZ(0); /* Hardware-Beschleunigung */
    will-change: transform;
}
.blob { position: absolute; border-radius: 50%; animation: morph 15s infinite alternate ease-in-out; opacity: 0.4; }
.blob-1 { background: #025946; width: 600px; height: 600px; top: -100px; left: -100px; }
.blob-2 { background: #38b29c; width: 400px; height: 400px; bottom: 100px; right: -50px; animation-delay: -5s; }
.blob-3 { background: rgba(253, 224, 71, 0.2); width: 500px; height: 500px; top: 30%; left: 40%; animation-delay: -10s; }

@keyframes morph {
    0% { transform: translate(0, 0) scale(1) rotate(0deg); }
    50% { transform: translate(50px, 100px) scale(1.2) rotate(180deg); }
    100% { transform: translate(-50px, -50px) scale(0.9) rotate(360deg); }
}

.glass { background: rgba(15, 23, 20, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.05); }
.text-logo-yellow { color: #fde047; }
.bg-logo-yellow { background-color: #fde047; color: #025946; }

.ai-btn {
    background: linear-gradient(45deg, #025946, #38b29c, #fde047, #38b29c);
    background-size: 300% 300%; color: #fff; transition: all 0.3s ease; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ai-btn:hover { animation: gradientGlow 3s ease infinite; box-shadow: 0 0 25px rgba(56, 178, 156, 0.6); transform: scale(1.02); color: #000; }
.ai-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; animation: none; box-shadow: none; }
@keyframes gradientGlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background: #38b29c; border-radius: 4px; }

/* Color Swatches */
.color-swatch {
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer; border: 2px solid transparent;
    transition: all 0.2s ease; position: relative; box-shadow: 0 0 0 1px rgba(255,255,255,0.3), inset 0 0 0 2px rgba(0,0,0,0.2);
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active { border-color: #38b29c; box-shadow: 0 0 0 3px rgba(56,178,156,0.4), inset 0 0 0 2px rgba(0,0,0,0.2); }
.color-swatch.light-color { box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }

/* Product card color dots */
.color-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.2); transition: transform 0.15s; }
.color-dot:hover { transform: scale(1.3); }

/* Cart quantity input */
.cart-qty-input {
    width: 48px; text-align: center; background: transparent; border: none; color: #fff;
    font-weight: 700; font-size: 0.875rem; -moz-appearance: textfield;
}
.cart-qty-input::-webkit-outer-spin-button,
.cart-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Placeholder image fallback */
.product-img-fallback {
    background: linear-gradient(135deg, #025946 0%, #38b29c 100%);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.3); font-size: 3rem;
}

@media (hover: none) {
    /* Deaktiviert den Hover-Effekt bei Touchscreens, verhindert das Klebenbleiben auf iOS */
    .group:hover .group-hover\:opacity-100 {
        opacity: 0 !important;
    }
}