/* Header Icons Fix - Überschreibt alle anderen Styles für konsistente Darstellung */
/* Diese Datei sollte als LETZTE CSS-Datei geladen werden */

/* Service Icons Container - Abstand zwischen Icons */
.service-icons {
    display: flex !important;
    gap: 3px !important; /* Sehr enger Abstand zwischen Icons - nur Desktop */
}

/* Service Icons in Header - FINALE Styles mit höchster Priorität */
.service-icons .service-icon {
    color: #6b705c !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #f5f3ee !important;
    border: 2px solid transparent !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.service-icons .service-icon i {
    font-size: 18px !important;
    color: #6b705c !important;
    transition: all 0.3s ease !important;
    font-weight: 400 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Hover States - Einheitliches helles Orange für alle Icons */
.service-icons .service-icon:hover {
    background: #FF8C42 !important; /* Helles freundliches Orange für alle Icons */
    border-color: #FF8C42 !important;
    transform: translateY(-2px) scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(255, 140, 66, 0.25) !important;
}

.service-icons .service-icon:hover i {
    color: white !important;
    transform: scale(1.1) !important;
}

/* Admin Icon - Spezielles Styling */
.service-icons .service-icon.admin-icon {
    background: linear-gradient(135deg, #6B705C, #8B9A8B) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 2px 8px rgba(107, 112, 92, 0.3) !important;
}

.service-icons .service-icon.admin-icon i {
    color: white !important;
}

.service-icons .service-icon.admin-icon:hover {
    background: linear-gradient(135deg, #8B9A8B, #6B705C) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(107, 112, 92, 0.4) !important;
    transform: translateY(-3px) scale(1.1) !important;
}

.service-icons .service-icon.admin-icon:hover i {
    color: white !important;
    transform: scale(1.15) !important;
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
    .service-icons .service-icon {
        width: 32px !important;
        height: 32px !important;
    }
    
    .service-icons .service-icon i {
        font-size: 14px !important;
    }
}