/* ===== SERVICE BOX HOVER FIX ===== */
/* Diese Datei korrigiert den Hover-Effekt der Service-Boxen */

/* Entferne den Hover-Effekt von der gesamten Service-Box */
.service-box {
    transition: none !important;
}

.service-box:hover {
    transform: none !important;
    box-shadow: 0 15px 40px rgba(76, 29, 149, 0.4) !important;
    border-color: rgba(147, 51, 234, 0.3) !important;
}

.service-box::before {
    display: none !important;
}

.service-box:hover::before {
    display: none !important;
}

/* Füge Hover-Effekt für die Bilder in den Service-Boxen hinzu */
.service-box-image {
    overflow: hidden !important;
    border-radius: 12px !important;
}

.service-box-image img,
.service-box-image picture {
    transition: transform 0.3s ease !important;
}

.service-box-image:hover img,
.service-box-image:hover picture {
    transform: scale(1.1) !important;
}

/* Füge Hover-Effekt zu den einzelnen Kategorien hinzu */
.service-box-category,
.service-box-benefits,
.service-box-services {
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
}

.service-box-category::before,
.service-box-benefits::before,
.service-box-services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.service-box-category:hover,
.service-box-benefits:hover,
.service-box-services:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3) !important;
    border-left-width: 6px !important;
}

.service-box-category:hover::before,
.service-box-benefits:hover::before,
.service-box-services:hover::before {
    opacity: 1;
}

/* Stelle sicher, dass der Text über dem Hover-Effekt bleibt */
.service-box-category h4,
.service-box-category ul,
.service-box-category ul li,
.service-box-benefits h4,
.service-box-benefits ul,
.service-box-benefits ul li,
.service-box-services h4,
.service-box-services ul,
.service-box-services ul li {
    position: relative;
    z-index: 2;
}

/* Spezielle Hover-Effekte für verschiedene Kategorie-Typen */
.mobile-devices-category:hover {
    border-left-color: #60a5fa !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.computer-laptops-category:hover {
    border-left-color: #34d399 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.gaming-consoles-category:hover {
    border-left-color: #f59e0b !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.data-recovery-category:hover {
    border-left-color: #ef4444 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.ki-benefits-category:hover,
.ki-services-category:hover {
    border-left-color: #8b5cf6 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.it-operating-systems-category:hover {
    border-left-color: #3b82f6 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.it-smartphone-tablet-category:hover {
    border-left-color: #10b981 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.it-office-software-category:hover {
    border-left-color: #f59e0b !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.it-security-category:hover {
    border-left-color: #ef4444 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.webdesign-programming-category:hover {
    border-left-color: #8b5cf6 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.webdesign-design-category:hover {
    border-left-color: #ec4899 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.network-installation-category:hover {
    border-left-color: #06b6d4 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.network-support-category:hover {
    border-left-color: #84cc16 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Spezielle Hover-Effekte für KI-Integration Kategorien */
.service-box-benefits:hover,
.service-box-services:hover {
    border-left-color: #8b5cf6 !important;
    background: rgba(0, 0, 0, 0.8) !important;
}

.it-operating-systems-category:hover {
    border-left-color: #3b82f6 !important;
}

.it-smartphone-tablet-category:hover {
    border-left-color: #10b981 !important;
}

.it-office-software-category:hover {
    border-left-color: #f59e0b !important;
}

.it-security-category:hover {
    border-left-color: #ef4444 !important;
}

.webdesign-programming-category:hover {
    border-left-color: #8b5cf6 !important;
}

.webdesign-design-category:hover {
    border-left-color: #ec4899 !important;
}

.network-installation-category:hover {
    border-left-color: #06b6d4 !important;
}

.network-support-category:hover {
    border-left-color: #84cc16 !important;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .service-box-category:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    }
}

/* Spezielle Anpassungen für die Datenrettung Feature-Highlights */
#datenrettung-service .feature-highlight {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#datenrettung-service .feature-highlight:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.3), 0 0 20px rgba(139, 92, 246, 0.1) !important;
}

#datenrettung-service .feature-icon {
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

#datenrettung-service .feature-highlight:hover .feature-icon {
    transform: rotate(10deg) scale(1.1) !important;
}

/* Mobile optimierte Anpassungen für Datenrettung */
@media (max-width: 768px) {
    #datenrettung-service .feature-highlight:hover {
        transform: translateY(-2px) scale(1.01) !important;
    }

    #datenrettung-service .feature-highlight:hover .feature-icon {
        transform: rotate(5deg) scale(1.05) !important;
    }
}